@tulip-systems/core 0.8.3 → 0.10.0

package/dist/src/components/ui/hover-card.client.mjs

@@ -0,0 +1,34 @@
+"use client";
+
+import { cn } from "../../lib/utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+import { HoverCard } from "radix-ui";
+
+//#region src/components/ui/hover-card.client.tsx
+function HoverCard$1({ ...props }) {
+	return /* @__PURE__ */ jsx(HoverCard.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+}
+function HoverCardTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(HoverCard.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(HoverCard.Portal, {
+		"data-slot": "hover-card-portal",
+		children: /* @__PURE__ */ jsx(HoverCard.Content, {
+			"data-slot": "hover-card-content",
+			align,
+			sideOffset,
+			className: cn("data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-lg bg-popover p-2.5 text-popover-foreground text-sm shadow-md outline-hidden ring-1 ring-foreground/10 duration-100 data-[state=closed]:animate-out data-[state=open]:animate-in", className),
+			...props
+		})
+	});
+}
+
+//#endregion
+export { HoverCard$1 as HoverCard, HoverCardContent, HoverCardTrigger };

package/dist/src/components/ui/input-date-time.client.d.mts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ui/input-date-time.client.d.ts
+/**
+ * DateTimeInput
+ */
+type DateTimeInputProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue"> & {
+  defaultValue?: Date | string;
+  value?: Date | string;
+  onValueChange?: (date: string | undefined) => void;
+  onValueBlur?: (date: string | undefined) => void;
+};
+declare function DateTimeInput({
+  className,
+  onValueChange,
+  onChange,
+  onValueBlur,
+  onBlur,
+  ...props
+}: DateTimeInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DateTimeInput, DateTimeInputProps };

package/dist/src/components/ui/input-date-time.client.mjs

@@ -0,0 +1,33 @@
+"use client";
+
+import { cn } from "../../lib/utils/cn.mjs";
+import { Input } from "./input.mjs";
+import { jsx } from "react/jsx-runtime";
+import { format } from "date-fns";
+
+//#region src/components/ui/input-date-time.client.tsx
+function DateTimeInput({ className, onValueChange, onChange, onValueBlur, onBlur, ...props }) {
+	/**
+	* Transform Date to string in the format "yyyy-MM-ddTHH:mm" for the input value. If the value is not a Date, use undefined.
+	*/
+	const defaultValue = props.defaultValue instanceof Date ? format(props.defaultValue, "yyyy-MM-dd'T'HH:mm") : typeof props.defaultValue === "string" ? props.defaultValue : void 0;
+	const value = props.value && props.value instanceof Date ? format(props.value, "yyyy-MM-dd'T'HH:mm") : typeof props.value === "string" ? props.value : void 0;
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		type: "datetime-local",
+		defaultValue,
+		value,
+		onChange: (e) => {
+			onValueChange?.(e.target.value ?? void 0);
+			onChange?.(e);
+		},
+		onBlur: (e) => {
+			onValueBlur?.(e.target.value ?? void 0);
+			onBlur?.(e);
+		},
+		className: cn("appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none", className)
+	});
+}
+
+//#endregion
+export { DateTimeInput };

package/dist/src/components/ui/input-date.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ui/input-date.d.ts
+/**
+ * DateInput
+ */
+type DateInputProps = Omit<React.ComponentProps<"input">, "type">;
+declare function DateInput({
+  className,
+  ...props
+}: DateInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DateInput, DateInputProps };

package/dist/src/components/ui/input-date.mjs

@@ -0,0 +1,15 @@
+import { cn } from "../../lib/utils/cn.mjs";
+import { Input } from "./input.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ui/input-date.tsx
+function DateInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		type: "date",
+		className: cn("appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none", className)
+	});
+}
+
+//#endregion
+export { DateInput };

package/dist/src/components/ui/input-group.client.d.mts

@@ -0,0 +1,58 @@
+import { Button } from "./button.mjs";
+import { DateTimeInputProps } from "./input-date-time.client.mjs";
+import { DateInputProps } from "./input-date.mjs";
+import { TimeInputProps } from "./input-time.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/ui/input-group.client.d.ts
+declare function InputGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare const inputGroupAddonVariants: (props?: ({
+  align?: "inline-start" | "inline-end" | "block-start" | "block-end" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function InputGroupAddon({
+  className,
+  align,
+  ...props
+}: React$1.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): react_jsx_runtime0.JSX.Element;
+declare const inputGroupButtonVariants: (props?: ({
+  size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function InputGroupButton({
+  className,
+  type,
+  variant,
+  size,
+  ...props
+}: Omit<React$1.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): react_jsx_runtime0.JSX.Element;
+declare function InputGroupText({
+  className,
+  ...props
+}: React$1.ComponentProps<"span">): react_jsx_runtime0.JSX.Element;
+declare function InputGroupInput({
+  className,
+  ...props
+}: React$1.ComponentProps<"input">): react_jsx_runtime0.JSX.Element;
+declare function InputGroupTextarea({
+  className,
+  ...props
+}: React$1.ComponentProps<"textarea">): react_jsx_runtime0.JSX.Element;
+declare function InputGroupTimeInput({
+  className,
+  ...props
+}: TimeInputProps): react_jsx_runtime0.JSX.Element;
+declare function InputGroupDateInput({
+  className,
+  ...props
+}: DateInputProps): react_jsx_runtime0.JSX.Element;
+declare function InputGroupDateTimeInput({
+  className,
+  ...props
+}: DateTimeInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupDateInput, InputGroupDateTimeInput, InputGroupInput, InputGroupText, InputGroupTextarea, InputGroupTimeInput };

package/dist/src/components/ui/input-group.client.mjs

@@ -0,0 +1,105 @@
+"use client";
+
+import { cn } from "../../lib/utils/cn.mjs";
+import { Button } from "./button.mjs";
+import { Input } from "./input.mjs";
+import { Textarea } from "./textarea.mjs";
+import { DateInput } from "./input-date.mjs";
+import { DateTimeInput } from "./input-date-time.client.mjs";
+import { TimeInput } from "./input-time.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/components/ui/input-group.client.tsx
+function InputGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "input-group",
+		role: "group",
+		className: cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input outline-none transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-start]]:h-auto has-[>textarea]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:flex-col has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot][aria-invalid=true]]:border-destructive has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		...props
+	});
+}
+const inputGroupAddonVariants = cva("text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+	variants: { align: {
+		"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
+		"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
+		"block-start": "px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start",
+		"block-end": "px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start"
+	} },
+	defaultVariants: { align: "inline-start" }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "input-group-addon",
+		"data-align": align,
+		className: cn(inputGroupAddonVariants({ align }), className),
+		onClick: (e) => {
+			if (e.target.closest("button")) return;
+			e.currentTarget.parentElement?.querySelector("input")?.focus();
+		},
+		...props
+	});
+}
+const inputGroupButtonVariants = cva("gap-2 text-sm flex items-center shadow-none", {
+	variants: { size: {
+		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		sm: "",
+		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+		"icon-sm": "size-8 p-0 has-[>svg]:p-0"
+	} },
+	defaultVariants: { size: "xs" }
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type,
+		"data-size": size,
+		variant,
+		className: cn(inputGroupButtonVariants({ size }), className),
+		...props
+	});
+}
+function InputGroupText({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("flex items-center gap-2 text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className),
+		...props
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+function InputGroupTextarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Textarea, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+function InputGroupTimeInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TimeInput, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+function InputGroupDateInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DateInput, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+function InputGroupDateTimeInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DateTimeInput, {
+		"data-slot": "input-group-control",
+		className: cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className),
+		...props
+	});
+}
+
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupDateInput, InputGroupDateTimeInput, InputGroupInput, InputGroupText, InputGroupTextarea, InputGroupTimeInput };

package/dist/src/components/ui/input-recipient.d.mts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ui/input-recipient.d.ts
+type Contact = {
+  id: string;
+  email: string;
+  name: string;
+};
+interface RecipientInputProps {
+  contacts: Contact[];
+  value: string[];
+  onChange: (value: string[]) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+declare function RecipientInput({
+  contacts,
+  value,
+  onChange,
+  placeholder,
+  disabled,
+  className
+}: RecipientInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Contact, RecipientInput };

package/dist/src/components/ui/input-recipient.mjs

@@ -0,0 +1,218 @@
+"use client";
+
+import { cn } from "../../lib/utils/cn.mjs";
+import { Button } from "./button.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.client.mjs";
+import { X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { toast } from "sonner";
+
+//#region src/components/ui/input-recipient.tsx
+const isValidEmail = (email) => {
+	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+};
+function RecipientInput({ contacts, value, onChange, placeholder = "Kies een ontvanger...", disabled = false, className }) {
+	const [open, setOpen] = React$1.useState(false);
+	const [inputValue, setInputValue] = React$1.useState("");
+	const [highlightedIndex, setHighlightedIndex] = React$1.useState(0);
+	const inputRef = React$1.useRef(null);
+	const containerRef = React$1.useRef(null);
+	const itemRefs = React$1.useRef([]);
+	const selectedContacts = React$1.useMemo(() => {
+		return value.map((email) => {
+			return contacts.find((c) => c.email === email) || {
+				id: email,
+				email,
+				name: email
+			};
+		}).filter(Boolean);
+	}, [value, contacts]);
+	const availableContacts = React$1.useMemo(() => {
+		return contacts.filter((contact) => !value.includes(contact.email));
+	}, [contacts, value]);
+	const filteredContacts = React$1.useMemo(() => {
+		if (!inputValue?.trim()) return availableContacts;
+		const search = inputValue.toLowerCase().trim();
+		return availableContacts.filter((contact) => contact.email.toLowerCase().includes(search) || contact.name.toLowerCase().includes(search));
+	}, [availableContacts, inputValue]);
+	React$1.useEffect(() => {
+		setHighlightedIndex(0);
+	}, [filteredContacts]);
+	React$1.useEffect(() => {
+		if (open && highlightedIndex >= 0 && itemRefs.current[highlightedIndex]) itemRefs.current[highlightedIndex]?.scrollIntoView({
+			block: "nearest",
+			behavior: "smooth"
+		});
+	}, [highlightedIndex, open]);
+	React$1.useEffect(() => {
+		const handleClickOutside = (event) => {
+			if (containerRef.current && !containerRef.current.contains(event.target)) setOpen(false);
+		};
+		if (open) {
+			document.addEventListener("mousedown", handleClickOutside);
+			return () => {
+				document.removeEventListener("mousedown", handleClickOutside);
+			};
+		}
+	}, [open]);
+	const handleSelect = (contact) => {
+		onChange([...value, contact.email]);
+		setInputValue("");
+		setOpen(false);
+		setHighlightedIndex(0);
+		inputRef.current?.focus();
+	};
+	const handleAddManualEmail = () => {
+		const trimmedEmail = inputValue.trim();
+		if (!trimmedEmail) return;
+		if (!isValidEmail(trimmedEmail)) {
+			toast.error("Ongeldig email adres");
+			return;
+		}
+		if (value.includes(trimmedEmail)) {
+			toast.error("Email is al toegevoegd");
+			setInputValue("");
+			return;
+		}
+		onChange([...value, trimmedEmail]);
+		setInputValue("");
+		setOpen(false);
+		setHighlightedIndex(0);
+		inputRef.current?.focus();
+	};
+	const handleRemove = (email) => {
+		onChange(value.filter((v) => v !== email));
+		inputRef.current?.focus();
+	};
+	const handleKeyDown = (e) => {
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			if (!open) setOpen(true);
+			else setHighlightedIndex((prev) => prev < filteredContacts.length - 1 ? prev + 1 : prev);
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			if (open) setHighlightedIndex((prev) => prev > 0 ? prev - 1 : prev);
+		} else if (e.key === "Enter") {
+			e.preventDefault();
+			if (open && filteredContacts[highlightedIndex]) handleSelect(filteredContacts[highlightedIndex]);
+			else if (inputValue.trim()) handleAddManualEmail();
+		} else if (e.key === "Escape") {
+			e.preventDefault();
+			setOpen(false);
+		} else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+			e.preventDefault();
+			const lastEmail = value[value.length - 1];
+			if (lastEmail) handleRemove(lastEmail);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs("div", {
+				ref: containerRef,
+				className: cn("flex min-h-0 w-full flex-wrap items-center gap-2 rounded-lg border border-input bg-background px-3 py-2 text-base ring-offset-background transition-colors md:text-sm", "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50", disabled && "cursor-not-allowed opacity-50", className),
+				onClick: () => {
+					if (!disabled) inputRef.current?.focus();
+				},
+				children: [selectedContacts.map((contact) => /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 rounded-full border border-border bg-accent/50 px-2 py-0.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "text-xs",
+						children: contact.email
+					}), /* @__PURE__ */ jsxs(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						className: "h-4 w-4 rounded-full p-0 hover:bg-destructive/20",
+						onClick: (e) => {
+							e.stopPropagation();
+							handleRemove(contact.email);
+						},
+						disabled,
+						children: [/* @__PURE__ */ jsx(X, { className: "h-3 w-3" }), /* @__PURE__ */ jsxs("span", {
+							className: "sr-only",
+							children: ["Verwijder ", contact.email]
+						})]
+					})]
+				}, contact.id)), /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					type: "text",
+					value: inputValue,
+					onChange: (e) => {
+						setInputValue(e.target.value);
+						if (e.target.value) setOpen(true);
+					},
+					onKeyDown: handleKeyDown,
+					placeholder: value.length === 0 ? placeholder : "",
+					disabled,
+					className: "min-w-30 flex-1 bg-transparent outline-none placeholder:text-muted-foreground placeholder:text-sm disabled:cursor-not-allowed"
+				})]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-full p-0",
+			align: "start",
+			onOpenAutoFocus: (e) => e.preventDefault(),
+			style: { width: containerRef.current?.offsetWidth || "auto" },
+			children: /* @__PURE__ */ jsx("div", {
+				className: "max-h-75 overflow-y-auto p-1",
+				children: filteredContacts.length === 0 && inputValue ? /* @__PURE__ */ jsxs("div", {
+					className: "px-2 py-2 text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "mb-2 text-xs",
+						children: "Geen contacten gevonden."
+					}), isValidEmail(inputValue.trim()) && /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: handleAddManualEmail,
+						className: "w-full rounded-sm px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: "Voeg toe: "
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: inputValue.trim()
+						})]
+					})]
+				}) : filteredContacts.length === 0 ? /* @__PURE__ */ jsx("div", {
+					className: "py-6 text-center text-muted-foreground text-xs",
+					children: "Geen contacten gevonden."
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [filteredContacts.map((contact, index) => /* @__PURE__ */ jsx("button", {
+					ref: (el) => {
+						itemRefs.current[index] = el;
+					},
+					type: "button",
+					onClick: () => handleSelect(contact),
+					className: cn("flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-xs outline-hidden transition-colors hover:bg-accent", highlightedIndex === index && "bg-accent"),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-start",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium text-xs",
+							children: contact.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-xs",
+							children: contact.email
+						})]
+					})
+				}, contact.id)), inputValue && isValidEmail(inputValue.trim()) && /* @__PURE__ */ jsx("div", {
+					className: "mt-1 border-t pt-1",
+					children: /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						onClick: handleAddManualEmail,
+						className: "w-full rounded-sm px-2 py-1.5 text-left text-xs transition-colors hover:bg-accent",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: "Voeg toe: "
+						}), /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground",
+							children: inputValue.trim()
+						})]
+					})
+				})] })
+			})
+		})]
+	});
+}
+
+//#endregion
+export { RecipientInput };

package/dist/src/components/ui/input-time.d.mts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/ui/input-time.d.ts
+/**
+ * TimeInput
+ */
+type TimeInputProps = Omit<React.ComponentProps<"input">, "type">;
+declare function TimeInput({
+  className,
+  ...props
+}: TimeInputProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { TimeInput, TimeInputProps };

package/dist/src/components/ui/input-time.mjs

@@ -0,0 +1,15 @@
+import { cn } from "../../lib/utils/cn.mjs";
+import { Input } from "./input.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ui/input-time.tsx
+function TimeInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		...props,
+		type: "time",
+		className: cn("appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none", className)
+	});
+}
+
+//#endregion
+export { TimeInput };

package/dist/src/components/ui/input.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as React$1 from "react";
+
+//#region src/components/ui/input.d.ts
+declare function Input({
+  className,
+  type,
+  ...props
+}: React$1.ComponentProps<"input">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Input };

package/dist/src/components/ui/input.mjs

@@ -0,0 +1,15 @@
+import { cn } from "../../lib/utils/cn.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ui/input.tsx
+function Input({ className, type, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		"data-slot": "input",
+		className: cn("h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base outline-none transition-colors file:inline-flex file:h-6 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:disabled:bg-input/80", "[&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none", className),
+		...props
+	});
+}
+
+//#endregion
+export { Input };

package/dist/src/components/ui/item.d.mts

@@ -0,0 +1,62 @@
+import { Separator } from "./separator.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import * as class_variance_authority_types0 from "class-variance-authority/types";
+
+//#region src/components/ui/item.d.ts
+declare function ItemGroup({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function ItemSeparator({
+  className,
+  ...props
+}: React$1.ComponentProps<typeof Separator>): react_jsx_runtime0.JSX.Element;
+declare const itemVariants: (props?: ({
+  variant?: "default" | "outline" | "muted" | null | undefined;
+  size?: "default" | "xs" | "sm" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function Item({
+  className,
+  variant,
+  size,
+  asChild,
+  ...props
+}: React$1.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+  asChild?: boolean;
+}): react_jsx_runtime0.JSX.Element;
+declare const itemMediaVariants: (props?: ({
+  variant?: "default" | "image" | "icon" | null | undefined;
+} & class_variance_authority_types0.ClassProp) | undefined) => string;
+declare function ItemMedia({
+  className,
+  variant,
+  ...props
+}: React$1.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): react_jsx_runtime0.JSX.Element;
+declare function ItemContent({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function ItemTitle({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function ItemDescription({
+  className,
+  ...props
+}: React$1.ComponentProps<"p">): react_jsx_runtime0.JSX.Element;
+declare function ItemActions({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function ItemHeader({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function ItemFooter({
+  className,
+  ...props
+}: React$1.ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };