@tulip-systems/core 0.8.2 → 0.9.0

package/dist/src/modules/commands/components/primitives/dropdown-command.client.mjs

@@ -0,0 +1,131 @@
+"use client";
+
+import { cn } from "../../../../lib/utils/cn.mjs";
+import { buttonVariants } from "../../../../components/ui/button.mjs";
+import { ContextMenuItem, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger } from "../../../../components/ui/context-menu.client.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "../../../../components/ui/dropdown-menu.client.mjs";
+import { useCommand } from "../../hooks/use-command.client.mjs";
+import { useCommandMutation } from "../../hooks/use-command-mutation.client.mjs";
+import { CommandTrigger } from "./command-trigger.client.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/modules/commands/components/primitives/dropdown-command.client.tsx
+const CommandDropdownContext = React.createContext({});
+function CommandDropdown({ children, ...props }) {
+	const { ui } = useCommand();
+	const [open, setOpen] = React.useState(false);
+	if (ui === "inline" || ui === "table") return /* @__PURE__ */ jsx(DropdownMenu, {
+		...props,
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(CommandDropdownContext.Provider, {
+			value: {
+				open,
+				setOpen
+			},
+			children
+		})
+	});
+	if (ui === "dropdown") return /* @__PURE__ */ jsx(DropdownMenuSub, {
+		...props,
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(CommandDropdownContext.Provider, {
+			value: {
+				open,
+				setOpen
+			},
+			children
+		})
+	});
+	if (ui === "context") return /* @__PURE__ */ jsx(ContextMenuSub, {
+		...props,
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(CommandDropdownContext.Provider, {
+			value: {
+				open,
+				setOpen
+			},
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function CommandDropdownContent({ children, ...props }) {
+	const { ui } = useCommand();
+	if (ui === "inline" || ui === "table") return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		...props,
+		children
+	});
+	if (ui === "dropdown") return /* @__PURE__ */ jsx(DropdownMenuSubContent, {
+		...props,
+		children
+	});
+	if (ui === "context") return /* @__PURE__ */ jsx(ContextMenuSubContent, {
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function CommandDropdownTrigger({ label, disabled, children, ...props }) {
+	const { status, ui, disabled: commandDisabled } = useCommand();
+	const isDisabled = disabled || commandDisabled || status === "pending";
+	if (ui === "inline" || ui === "table") return /* @__PURE__ */ jsx(CommandTrigger, {
+		label,
+		children: /* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			...props,
+			disabled: isDisabled,
+			className: cn(buttonVariants({
+				variant: "outline",
+				size: "sm"
+			}), props.className),
+			children
+		})
+	});
+	if (ui === "dropdown") return /* @__PURE__ */ jsx(CommandTrigger, {
+		label,
+		children: /* @__PURE__ */ jsx(DropdownMenuSubTrigger, {
+			...props,
+			disabled: isDisabled,
+			children
+		})
+	});
+	if (ui === "context") return /* @__PURE__ */ jsx(CommandTrigger, {
+		label,
+		children: /* @__PURE__ */ jsx(ContextMenuSubTrigger, {
+			...props,
+			disabled: isDisabled,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function CommandDropdownItem({ variables, mutation, children, ...props }) {
+	const { setOpen } = React.useContext(CommandDropdownContext);
+	const { status, ui, disabled: commandDisabled } = useCommand();
+	const { mutateAsync } = useCommandMutation({
+		...mutation,
+		onSuccess: async (...params) => {
+			setOpen(false);
+			return await mutation?.onSuccess?.(...params);
+		}
+	});
+	if (ui === "inline" || ui === "table" || ui === "dropdown") return /* @__PURE__ */ jsx(DropdownMenuItem, {
+		...props,
+		disabled: commandDisabled || status === "pending",
+		onClick: () => mutateAsync(variables),
+		children
+	});
+	if (ui === "context") return /* @__PURE__ */ jsx(ContextMenuItem, {
+		...props,
+		disabled: commandDisabled || status === "pending",
+		onClick: () => mutateAsync(variables),
+		children
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+//#endregion
+export { CommandDropdown, CommandDropdownContent, CommandDropdownItem, CommandDropdownTrigger };

package/dist/src/modules/commands/components/primitives/empty-command.client.d.mts

@@ -0,0 +1,20 @@
+import { CommandUI } from "../../lib/builder.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/modules/commands/components/primitives/empty-command.client.d.ts
+type CommandEmptyProps = {
+  ui?: CommandUI;
+  children: React.ReactNode;
+  className?: string;
+  disabled?: boolean;
+  label?: string;
+};
+declare function CommandEmpty({
+  label,
+  children,
+  disabled,
+  ...props
+}: CommandEmptyProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CommandEmpty, CommandEmptyProps };

package/dist/src/modules/commands/components/primitives/empty-command.client.mjs

@@ -0,0 +1,44 @@
+"use client";
+
+import { Button } from "../../../../components/ui/button.mjs";
+import { ContextMenuItem } from "../../../../components/ui/context-menu.client.mjs";
+import { DropdownMenuItem } from "../../../../components/ui/dropdown-menu.client.mjs";
+import { useCommand } from "../../hooks/use-command.client.mjs";
+import { CommandTrigger } from "./command-trigger.client.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/modules/commands/components/primitives/empty-command.client.tsx
+function CommandEmpty({ label, children, disabled, ...props }) {
+	const { status, ui, disabled: commandDisabled } = useCommand();
+	const isDisabled = disabled ?? (commandDisabled || status === "pending");
+	if (ui === "inline" || ui === "table") return /* @__PURE__ */ jsx(CommandTrigger, {
+		label,
+		children: /* @__PURE__ */ jsx(Button, {
+			...props,
+			variant: "outline",
+			size: "sm",
+			disabled: isDisabled,
+			children
+		})
+	});
+	if (ui === "dropdown") return /* @__PURE__ */ jsx(CommandTrigger, {
+		label,
+		children: /* @__PURE__ */ jsx(DropdownMenuItem, {
+			...props,
+			disabled: isDisabled,
+			children
+		})
+	});
+	if (ui === "context") return /* @__PURE__ */ jsx(CommandTrigger, {
+		label,
+		children: /* @__PURE__ */ jsx(ContextMenuItem, {
+			...props,
+			disabled: isDisabled,
+			children
+		})
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+//#endregion
+export { CommandEmpty };

package/dist/src/modules/commands/components/primitives/form-dialog-command.client.d.mts

@@ -0,0 +1,71 @@
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../../../../components/ui/dialog.client.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React, { ComponentProps } from "react";
+import { DefaultError, MutationOptions } from "@tanstack/react-query";
+import { FieldValues, Form } from "react-hook-form";
+import { Keys } from "react-hotkeys-hook";
+
+//#region src/modules/commands/components/primitives/form-dialog-command.client.d.ts
+declare function CommandFormDialog({
+  children,
+  ...props
+}: ComponentProps<typeof Dialog>): react_jsx_runtime0.JSX.Element;
+type CommandFormDialogTriggerProps = {
+  children: React.ReactNode;
+  className?: string;
+  label?: string;
+  disabled?: boolean;
+  hotkey?: Keys;
+};
+declare function CommandFormDialogTrigger({
+  label,
+  hotkey,
+  children,
+  disabled,
+  ...props
+}: CommandFormDialogTriggerProps): react_jsx_runtime0.JSX.Element;
+declare function CommandFormDialogHeader({
+  children,
+  ...props
+}: ComponentProps<typeof DialogHeader>): react_jsx_runtime0.JSX.Element;
+declare function CommandFormDialogTitle({
+  children,
+  ...props
+}: ComponentProps<typeof DialogTitle>): react_jsx_runtime0.JSX.Element;
+declare function CommandFormDialogDescription({
+  children,
+  ...props
+}: ComponentProps<typeof DialogDescription>): react_jsx_runtime0.JSX.Element;
+declare const CommandFormDialogContentProvider: typeof Form;
+type CommandFormDialogContentProps<TValues extends FieldValues, TData = unknown, TError = DefaultError, TVariables = undefined, TOnMutateResult = unknown> = ComponentProps<typeof DialogContent> & {
+  variables: (values: TValues) => TVariables;
+  mutation?: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  children: React.ReactNode;
+};
+declare function CommandFormDialogContent<TValues extends FieldValues, TData = unknown, TError = DefaultError, TVariables = undefined, TOnMutateResult = unknown>({
+  variables,
+  mutation,
+  children,
+  ...props
+}: CommandFormDialogContentProps<TValues, TData, TError, TVariables, TOnMutateResult>): react_jsx_runtime0.JSX.Element;
+declare function CommandFormDialogFields({
+  children,
+  className,
+  ...props
+}: ComponentProps<"div">): react_jsx_runtime0.JSX.Element;
+declare function CommandFormDialogFooter({
+  children,
+  ...props
+}: ComponentProps<typeof DialogFooter>): react_jsx_runtime0.JSX.Element;
+declare function CommandFormDialogCancel({
+  children,
+  onClick,
+  ...props
+}: Omit<ComponentProps<"button">, "type">): react_jsx_runtime0.JSX.Element;
+declare function CommandFormDialogSubmit({
+  children,
+  disabled,
+  ...props
+}: Omit<ComponentProps<"button">, "type">): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CommandFormDialog, CommandFormDialogCancel, CommandFormDialogContent, CommandFormDialogContentProps, CommandFormDialogContentProvider, CommandFormDialogDescription, CommandFormDialogFields, CommandFormDialogFooter, CommandFormDialogHeader, CommandFormDialogSubmit, CommandFormDialogTitle, CommandFormDialogTrigger };

package/dist/src/modules/commands/components/primitives/form-dialog-command.client.mjs

@@ -0,0 +1,163 @@
+"use client";
+
+import { Icons } from "../../../../components/common/icons.mjs";
+import { cn } from "../../../../lib/utils/cn.mjs";
+import { Button, buttonVariants } from "../../../../components/ui/button.mjs";
+import { ContextMenuItem } from "../../../../components/ui/context-menu.client.mjs";
+import { DropdownMenuItem } from "../../../../components/ui/dropdown-menu.client.mjs";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "../../../../components/ui/dialog.client.mjs";
+import { useCommand } from "../../hooks/use-command.client.mjs";
+import { useCommandMutation } from "../../hooks/use-command-mutation.client.mjs";
+import { CommandTrigger } from "./command-trigger.client.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Form, useFormContext } from "react-hook-form";
+import { useHotkeys } from "react-hotkeys-hook";
+
+//#region src/modules/commands/components/primitives/form-dialog-command.client.tsx
+const CommandFormDialogContext = React.createContext({});
+function CommandFormDialog({ children, ...props }) {
+	const [open, setOpen] = React.useState(false);
+	return /* @__PURE__ */ jsx(Dialog, {
+		...props,
+		open,
+		onOpenChange: setOpen,
+		children: /* @__PURE__ */ jsx(CommandFormDialogContext.Provider, {
+			value: {
+				open,
+				setOpen
+			},
+			children
+		})
+	});
+}
+function CommandFormDialogTrigger({ label, hotkey, children, disabled, ...props }) {
+	const { status, ui, disabled: commandDisabled } = useCommand();
+	const { setOpen } = React.useContext(CommandFormDialogContext);
+	const isDisabled = disabled || commandDisabled || status === "pending";
+	useHotkeys(hotkey ?? "", () => setOpen(true), { enabled: !isDisabled && hotkey !== void 0 });
+	if (ui === "inline" || ui === "table") return /* @__PURE__ */ jsx(CommandTrigger, {
+		label,
+		children: /* @__PURE__ */ jsx(DialogTrigger, {
+			...props,
+			disabled: isDisabled,
+			className: cn(buttonVariants({
+				variant: "outline",
+				size: "sm"
+			}), props.className),
+			children
+		})
+	});
+	if (ui === "dropdown") return /* @__PURE__ */ jsx(CommandTrigger, {
+		label,
+		children: /* @__PURE__ */ jsx(DialogTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(DropdownMenuItem, {
+				...props,
+				disabled: isDisabled,
+				onClick: (e) => {
+					e.preventDefault();
+					setOpen(true);
+				},
+				children
+			})
+		})
+	});
+	if (ui === "context") return /* @__PURE__ */ jsx(CommandTrigger, {
+		label,
+		children: /* @__PURE__ */ jsx(DialogTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ContextMenuItem, {
+				...props,
+				disabled: isDisabled,
+				onClick: (e) => {
+					e.preventDefault();
+					setOpen(true);
+				},
+				children
+			})
+		})
+	});
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function CommandFormDialogHeader({ children, ...props }) {
+	return /* @__PURE__ */ jsx(DialogHeader, {
+		...props,
+		children
+	});
+}
+function CommandFormDialogTitle({ children, ...props }) {
+	return /* @__PURE__ */ jsx(DialogTitle, {
+		...props,
+		children
+	});
+}
+function CommandFormDialogDescription({ children, ...props }) {
+	return /* @__PURE__ */ jsx(DialogDescription, {
+		...props,
+		children
+	});
+}
+const CommandFormDialogContentProvider = Form;
+function CommandFormDialogContent({ variables, mutation, children, ...props }) {
+	const { setOpen } = React.useContext(CommandFormDialogContext);
+	const form = useFormContext();
+	const { mutateAsync } = useCommandMutation({
+		...mutation,
+		onSuccess: async (...params) => {
+			form.reset();
+			setOpen(false);
+			return await mutation?.onSuccess?.(...params);
+		}
+	});
+	return /* @__PURE__ */ jsx(DialogContent, {
+		...props,
+		children: /* @__PURE__ */ jsx("form", {
+			onSubmit: form.handleSubmit((data) => {
+				mutateAsync(variables(data));
+			}),
+			children
+		})
+	});
+}
+function CommandFormDialogFields({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cn("space-y-5 py-10", className),
+		children
+	});
+}
+function CommandFormDialogFooter({ children, ...props }) {
+	return /* @__PURE__ */ jsx(DialogFooter, {
+		...props,
+		children
+	});
+}
+function CommandFormDialogCancel({ children, onClick, ...props }) {
+	const { setOpen } = React.useContext(CommandFormDialogContext);
+	const form = useFormContext();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		variant: "ghost",
+		type: "button",
+		onClick: (e) => {
+			form.reset();
+			setOpen(false);
+			onClick?.(e);
+		},
+		children
+	});
+}
+function CommandFormDialogSubmit({ children, disabled, ...props }) {
+	const { status, disabled: commandDisabled } = useCommand();
+	const isDisabled = disabled || commandDisabled || status === "pending";
+	return /* @__PURE__ */ jsxs(Button, {
+		...props,
+		type: "submit",
+		disabled: isDisabled,
+		children: [status === "pending" && /* @__PURE__ */ jsx(Icons.spinner, { className: "mr-2 h-4 w-4 animate-spin" }), children]
+	});
+}
+
+//#endregion
+export { CommandFormDialog, CommandFormDialogCancel, CommandFormDialogContent, CommandFormDialogContentProvider, CommandFormDialogDescription, CommandFormDialogFields, CommandFormDialogFooter, CommandFormDialogHeader, CommandFormDialogSubmit, CommandFormDialogTitle, CommandFormDialogTrigger };

package/dist/src/modules/commands/components/render-command.mjs

@@ -0,0 +1,50 @@
+"use client";
+
+import { Allowed } from "../../auth/components/allowed.client.mjs";
+import { CommandContextProvider } from "../hooks/use-command.client.mjs";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/modules/commands/components/render-command.tsx
+/**
+* Command renderer.
+*
+* It validates input data through the command schema, applies optional visibility/disabled rules,
+* exposes command status via context, and then renders the command content.
+*/
+function RenderCommand(props) {
+	const parsedData = props.command.schema.safeParse(props.data);
+	if (!parsedData.success) return /* @__PURE__ */ jsx(Fragment, { children: props.fallback });
+	const data = parsedData.data;
+	const meta = props.meta ?? {};
+	const visibleResult = props.command.visibleWhen?.({
+		data,
+		meta
+	});
+	const disabledResult = props.command.disabledWhen?.({
+		data,
+		meta
+	});
+	if (!(Array.isArray(visibleResult) ? visibleResult.every(Boolean) : visibleResult ?? true)) return /* @__PURE__ */ jsx(Fragment, { children: props.fallback });
+	const isDisabled = Array.isArray(disabledResult) ? disabledResult.every(Boolean) : disabledResult ?? false;
+	const children = /* @__PURE__ */ jsx(CommandContextProvider, {
+		ui: props.ui,
+		disabled: isDisabled,
+		onSuccess: props.onSuccess,
+		onError: props.onError,
+		onSettled: props.onSettled,
+		children: props.command.render({
+			data,
+			meta,
+			ui: props.ui
+		})
+	});
+	if (!props.command.permission) return children;
+	return /* @__PURE__ */ jsx(Allowed, {
+		permission: props.command.permission,
+		fallback: props.fallback,
+		children
+	});
+}
+
+//#endregion
+export { RenderCommand };

package/dist/src/modules/commands/components/utils/archive-command.client.d.mts

@@ -0,0 +1,24 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DefaultError, MutationOptions } from "@tanstack/react-query";
+
+//#region src/modules/commands/components/utils/archive-command.client.d.ts
+type ArchiveCommandProps<TData = unknown, TError = DefaultError, TVariables = {
+  ids: string[];
+}, TOnMutateResult = unknown> = {
+  variables: TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+};
+declare function ArchiveCommand<TData = unknown, TError = DefaultError, TVariables = {
+  ids: string[];
+}, TOnMutateResult = unknown>({
+  variables,
+  mutation
+}: ArchiveCommandProps<TData, TError, TVariables, TOnMutateResult>): react_jsx_runtime0.JSX.Element;
+declare function RestoreCommand<TData = unknown, TError = DefaultError, TVariables = {
+  ids: string[];
+}, TOnMutateResult = unknown>({
+  variables,
+  mutation
+}: ArchiveCommandProps<TData, TError, TVariables, TOnMutateResult>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ArchiveCommand, ArchiveCommandProps, RestoreCommand };

package/dist/src/modules/commands/components/utils/archive-command.client.mjs

@@ -0,0 +1,29 @@
+"use client";
+
+import { Icons } from "../../../../components/common/icons.mjs";
+import { CommandLabel } from "../primitives/command-trigger.client.mjs";
+import { CommandClick } from "../primitives/click-command.client.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/modules/commands/components/utils/archive-command.client.tsx
+function ArchiveCommand({ variables, mutation }) {
+	return /* @__PURE__ */ jsxs(CommandClick, {
+		variables,
+		mutation,
+		className: "text-destructive",
+		label: "Archiveren",
+		children: [/* @__PURE__ */ jsx(Icons.archive, { className: "w-4 text-destructive" }), /* @__PURE__ */ jsx(CommandLabel, {})]
+	});
+}
+function RestoreCommand({ variables, mutation }) {
+	return /* @__PURE__ */ jsxs(CommandClick, {
+		className: "flex gap-2",
+		variables,
+		mutation,
+		label: "Terugzetten",
+		children: [/* @__PURE__ */ jsx(Icons.restore, { className: "w-4" }), /* @__PURE__ */ jsx(CommandLabel, {})]
+	});
+}
+
+//#endregion
+export { ArchiveCommand, RestoreCommand };

package/dist/src/modules/commands/components/utils/delete-command.client.d.mts

@@ -0,0 +1,20 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { DefaultError, MutationOptions } from "@tanstack/react-query";
+
+//#region src/modules/commands/components/utils/delete-command.client.d.ts
+type DeleteCommandProps<TData = unknown, TError = DefaultError, TVariables = unknown, TOnMutateResult = unknown> = {
+  variables: TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+};
+declare function DeleteCommand<TData = unknown, TError = DefaultError, TVariables = unknown, TOnMutateResult = unknown>({
+  variables,
+  mutation
+}: DeleteCommandProps<TData, TError, TVariables, TOnMutateResult>): react_jsx_runtime0.JSX.Element;
+declare function SingleDeleteCommand<TData = unknown, TError = DefaultError, TVariables = {
+  id: string;
+}, TOnMutateResult = unknown>({
+  variables,
+  mutation
+}: DeleteCommandProps<TData, TError, TVariables, TOnMutateResult>): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { DeleteCommand, DeleteCommandProps, SingleDeleteCommand };

package/dist/src/modules/commands/components/utils/delete-command.client.mjs

@@ -0,0 +1,28 @@
+"use client";
+
+import { Icons } from "../../../../components/common/icons.mjs";
+import { CommandLabel } from "../primitives/command-trigger.client.mjs";
+import { CommandAlertDialog, CommandAlertDialogAction, CommandAlertDialogCancel, CommandAlertDialogContent, CommandAlertDialogDescription, CommandAlertDialogFooter, CommandAlertDialogHeader, CommandAlertDialogTitle, CommandAlertDialogTrigger } from "../primitives/alert-dialog-command.client.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/modules/commands/components/utils/delete-command.client.tsx
+function DeleteCommand({ variables, mutation }) {
+	return /* @__PURE__ */ jsxs(CommandAlertDialog, { children: [/* @__PURE__ */ jsxs(CommandAlertDialogTrigger, {
+		className: "text-destructive",
+		label: "Verwijderen",
+		children: [/* @__PURE__ */ jsx(Icons.trash, { className: "w-4 text-destructive" }), /* @__PURE__ */ jsx(CommandLabel, {})]
+	}), /* @__PURE__ */ jsxs(CommandAlertDialogContent, { children: [/* @__PURE__ */ jsxs(CommandAlertDialogHeader, { children: [/* @__PURE__ */ jsx(CommandAlertDialogTitle, { children: "Weet je zeker dat je dit wilt verwijderen?" }), /* @__PURE__ */ jsx(CommandAlertDialogDescription, { children: "Dit kan niet ongedaan gemaakt worden en alle gegevens zullen verloren gaan." })] }), /* @__PURE__ */ jsxs(CommandAlertDialogFooter, { children: [/* @__PURE__ */ jsx(CommandAlertDialogCancel, { children: "Annuleren" }), /* @__PURE__ */ jsx(CommandAlertDialogAction, {
+		mutation,
+		variables,
+		children: "Verwijderen"
+	})] })] })] });
+}
+function SingleDeleteCommand({ variables, mutation }) {
+	return /* @__PURE__ */ jsx(DeleteCommand, {
+		variables,
+		mutation
+	});
+}
+
+//#endregion
+export { DeleteCommand, SingleDeleteCommand };

package/dist/src/modules/commands/hooks/use-command-mutation.client.d.mts

@@ -0,0 +1,11 @@
+import { useRouter } from "next/navigation";
+import * as _tanstack_react_query0 from "@tanstack/react-query";
+import { DefaultError, MutationOptions } from "@tanstack/react-query";
+
+//#region src/modules/commands/hooks/use-command-mutation.client.d.ts
+type CommandMutationMeta = {
+  router: ReturnType<typeof useRouter>;
+};
+declare function useCommandMutation<TData = unknown, TError = DefaultError, TVariables = void, TOnMutateResult = unknown>(options?: MutationOptions<TData, TError, TVariables, TOnMutateResult>): _tanstack_react_query0.UseMutationResult<TData, TError, TVariables, TOnMutateResult>;
+//#endregion
+export { CommandMutationMeta, useCommandMutation };

package/dist/src/modules/commands/hooks/use-command-mutation.client.mjs

@@ -0,0 +1,39 @@
+"use client";
+
+import { useAction } from "../../../lib/hooks/use-action.mjs";
+import { useCommand } from "./use-command.client.mjs";
+import { useRouter } from "next/navigation";
+
+//#region src/modules/commands/hooks/use-command-mutation.client.ts
+function useCommandMutation(options) {
+	const router = useRouter();
+	const commandContext = useCommand();
+	return useAction({
+		...options,
+		mutationFn: options?.mutationFn,
+		onMutate: async (...params) => {
+			const result = options?.onMutate?.(...params);
+			commandContext.setStatus("pending");
+			return await result;
+		},
+		onSuccess: async (...params) => {
+			const result = options?.onSuccess?.(...params);
+			commandContext.setStatus("success");
+			return await result;
+		},
+		onError: async (...params) => {
+			const result = options?.onError?.(...params);
+			commandContext.setStatus("error");
+			return await result;
+		},
+		onSettled: async (...params) => {
+			const result = options?.onSettled?.(...params);
+			commandContext.setStatus("idle");
+			return await result;
+		},
+		meta: { router }
+	});
+}
+
+//#endregion
+export { useCommandMutation };

package/dist/src/modules/commands/hooks/use-command.client.d.mts

@@ -0,0 +1,31 @@
+import { CommandStatus, CommandUI } from "../lib/builder.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { Dispatch, PropsWithChildren, SetStateAction } from "react";
+
+//#region src/modules/commands/hooks/use-command.client.d.ts
+type CommandContextValue = {
+  ui: CommandUI;
+  status: CommandStatus;
+  disabled: boolean;
+  setStatus: Dispatch<SetStateAction<CommandStatus>>;
+};
+declare function useCommand(): CommandContextValue;
+type CommandContextLifecycle = {
+  onSuccess?: () => Promise<void> | void;
+  onError?: () => Promise<void> | void;
+  onSettled?: () => Promise<void> | void;
+};
+type CommandContextProviderProps = PropsWithChildren<CommandContextLifecycle & {
+  ui: CommandUI;
+  disabled?: boolean;
+}>;
+declare function CommandContextProvider({
+  children,
+  ui,
+  disabled,
+  onSuccess,
+  onError,
+  onSettled
+}: CommandContextProviderProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CommandContextLifecycle, CommandContextProvider, useCommand };