@tulip-systems/core 0.4.1 → 0.5.0

package/src/components/ui/calendar.tsx

@@ -1,72 +1,180 @@
 "use client";
 
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import * as React from "react";
-import { DayPicker } from "react-day-picker";
+import { DayPicker, getDefaultClassNames, type DayButton } from "react-day-picker";
 
-import { buttonVariants } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils/cn";
 
 function Calendar({
   className,
   classNames,
   showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
   ...props
-}: React.ComponentProps<typeof DayPicker>) {
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
   return (
     <DayPicker
       showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
+      className={cn(
+        "bg-background group/calendar in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent p-3 [--cell-size:--spacing(8)]",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
       classNames={{
-        months: "flex flex-col sm:flex-row gap-2",
-        month: "flex flex-col gap-4",
-        caption: "flex justify-center pt-1 relative items-center w-full",
-        caption_label: "text-sm font-medium",
-        nav: "flex items-center gap-1",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        nav: cn(
+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          defaultClassNames.dropdown_root,
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-x-1",
-        head_row: "flex",
-        head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md",
+        dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+          defaultClassNames.caption_label,
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          defaultClassNames.weekday,
+        ),
+        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
+        week_number: cn(
+          "text-[0.8rem] select-none text-muted-foreground",
+          defaultClassNames.week_number,
         ),
         day: cn(
-          buttonVariants({ variant: "ghost" }),
-          "size-8 p-0 font-normal aria-selected:opacity-100",
+          "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          props.showWeekNumber
+            ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md"
+            : "[&:first-child[data-selected=true]_button]:rounded-l-md",
+          defaultClassNames.day,
+        ),
+        range_start: cn("rounded-l-md bg-accent", defaultClassNames.range_start),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today,
         ),
-        day_range_start:
-          "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_range_end:
-          "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside: "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside,
+        ),
+        disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+        hidden: cn("invisible", defaultClassNames.hidden),
         ...classNames,
       }}
       components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn("size-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("size-4", className)} {...props} />
-        ),
+        Root: ({ className, rootRef, ...props }) => {
+          return <div data-slot="calendar" ref={rootRef} className={cn(className)} {...props} />;
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return <ChevronLeftIcon className={cn("size-4", className)} {...props} />;
+          }
+
+          if (orientation === "right") {
+            return <ChevronRightIcon className={cn("size-4", className)} {...props} />;
+          }
+
+          return <ChevronDownIcon className={cn("size-4", className)} {...props} />;
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="size-(--cell-size) flex items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
       }}
       {...props}
     />
   );
 }
 
-export { Calendar };
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground min-w-(--cell-size) flex aspect-square size-auto w-full flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-start=true]:rounded-l-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

package/src/components/ui/input-recipient.tsx

@@ -20,6 +20,7 @@ interface RecipientInputProps {
   onChange: (value: string[]) => void;
   placeholder?: string;
   disabled?: boolean;
+  className?: string;
 }
 
 // Simpele email validatie
@@ -34,6 +35,7 @@ export function RecipientInput({
   onChange,
   placeholder = "Kies een ontvanger...",
   disabled = false,
+  className,
 }: RecipientInputProps) {
   const [open, setOpen] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
@@ -171,6 +173,7 @@ export function RecipientInput({
             "border-input bg-background ring-offset-background flex min-h-0 w-full flex-wrap items-center gap-2 rounded-lg border px-3 py-2 text-base transition-colors md:text-sm",
             "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
             disabled && "cursor-not-allowed opacity-50",
+            className,
           )}
           onClick={() => {
             if (!disabled) {

package/src/entry.ts

@@ -51,11 +51,11 @@ export const entry = {
   "router/client": "./src/modules/router/entry.client.ts",
   "router/server": "./src/modules/router/entry.server.ts",
   /**
-   * Uploads Module
+   * Storage Module
    */
-  uploads: "./src/modules/uploads/entry.ts",
-  "uploads/client": "./src/modules/uploads/entry.client.ts",
-  "uploads/server": "./src/modules/uploads/entry.server.ts",
+  storage: "./src/modules/storage/entry.ts",
+  "storage/client": "./src/modules/storage/entry.client.ts",
+  "storage/server": "./src/modules/storage/entry.server.ts",
 };
 
 // export const entry = [

package/src/modules/auth/db/schema.ts

@@ -1,3 +1,4 @@
+import { baseColumns } from "@/modules/config/entry";
 import { relations, sql, SQL } from "drizzle-orm";
 import { pgTable } from "drizzle-orm/pg-core";
 
@@ -5,7 +6,7 @@ import { pgTable } from "drizzle-orm/pg-core";
  * Users
  */
 export const users = pgTable("users", (t) => ({
-  id: t.text().primaryKey(),
+  ...baseColumns,
   name: t
     .varchar()
     .notNull()
@@ -15,8 +16,6 @@ export const users = pgTable("users", (t) => ({
   email: t.text().notNull().unique(),
   emailVerified: t.boolean().notNull(),
   image: t.text(),
-  createdAt: t.timestamp().notNull(),
-  updatedAt: t.timestamp().notNull(),
   role: t.text(),
   banned: t.boolean(),
   banReason: t.text(),
@@ -34,18 +33,16 @@ export const usersRelations = relations(users, ({ many }) => ({
  * Sessions
  */
 export const sessions = pgTable("sessions", (t) => ({
-  id: t.text().primaryKey(),
+  ...baseColumns,
   expiresAt: t.timestamp().notNull(),
   token: t.text().notNull().unique(),
-  createdAt: t.timestamp().notNull(),
-  updatedAt: t.timestamp().notNull(),
   ipAddress: t.text(),
   userAgent: t.text(),
+  impersonatedBy: t.text(),
   userId: t
-    .text()
+    .uuid()
     .notNull()
     .references(() => users.id, { onDelete: "cascade" }),
-  impersonatedBy: t.text(),
 }));
 
 export const sessionsRelations = relations(sessions, ({ one }) => ({
@@ -59,13 +56,9 @@ export const sessionsRelations = relations(sessions, ({ one }) => ({
  * Accounts
  */
 export const accounts = pgTable("accounts", (t) => ({
-  id: t.text().primaryKey(),
+  ...baseColumns,
   accountId: t.text().notNull(),
   providerId: t.text().notNull(),
-  userId: t
-    .text()
-    .notNull()
-    .references(() => users.id, { onDelete: "cascade" }),
   accessToken: t.text(),
   refreshToken: t.text(),
   idToken: t.text(),
@@ -73,8 +66,10 @@ export const accounts = pgTable("accounts", (t) => ({
   refreshTokenExpiresAt: t.timestamp(),
   scope: t.text(),
   password: t.text(),
-  createdAt: t.timestamp().notNull(),
-  updatedAt: t.timestamp().notNull(),
+  userId: t
+    .uuid()
+    .notNull()
+    .references(() => users.id, { onDelete: "cascade" }),
 }));
 
 export const accountsRelations = relations(accounts, ({ one }) => ({
@@ -88,12 +83,10 @@ export const accountsRelations = relations(accounts, ({ one }) => ({
  * Verifications
  */
 export const verifications = pgTable("verifications", (t) => ({
-  id: t.text().primaryKey(),
+  ...baseColumns,
   identifier: t.text().notNull(),
   value: t.text().notNull(),
   expiresAt: t.timestamp().notNull(),
-  createdAt: t.timestamp(),
-  updatedAt: t.timestamp(),
 }));
 
 export const verificationsRelations = relations(verifications, ({ one }) => ({
@@ -107,7 +100,7 @@ export const verificationsRelations = relations(verifications, ({ one }) => ({
  * Passkeys
  */
 export const passkeys = pgTable("passkeys", (t) => ({
-  id: t.text().primaryKey(),
+  ...baseColumns,
   name: t.text(),
   publicKey: t.text().notNull(),
   credentialID: t.text().notNull(),
@@ -115,10 +108,9 @@ export const passkeys = pgTable("passkeys", (t) => ({
   deviceType: t.text().notNull(),
   backedUp: t.boolean().notNull(),
   transports: t.text(),
-  createdAt: t.timestamp("created_at"),
   aaguid: t.text(),
   userId: t
-    .text()
+    .uuid()
     .notNull()
     .references(() => users.id, { onDelete: "cascade" }),
 }));

package/src/modules/auth/handler/client.client.ts

@@ -4,8 +4,10 @@ import { passkeyClient } from "@better-auth/passkey/client";
 import { adminClient, emailOTPClient, inferAdditionalFields } from "better-auth/client/plugins";
 import { createAuthClient } from "better-auth/react";
 import { AuthClient } from "./init";
+import { url } from "@/lib/utils/url";
 
 export const authClient = createAuthClient({
+  baseURL: url(),
   plugins: [emailOTPClient(), passkeyClient(), adminClient(), inferAdditionalFields<AuthClient>()],
 });
 

package/src/modules/auth/handler/init.ts

@@ -28,11 +28,14 @@ export function initAuth<TSchema extends TDatabaseSchema>(props: InitAuthProps<T
   return betterAuth({
     advanced: {
       cookiePrefix: authCookiePrefix,
+      database: {
+        generateId: () => false,
+      },
     },
     database: drizzleAdapter(props.db, {
       provider: "pg",
-        // schema: props.schema,
       usePlural: true,
+      // schema: props.schema,
     }),
     emailAndPassword: {
       enabled: true,

package/src/modules/auth/hooks/use-permission.ts

@@ -1,7 +1,6 @@
 "use client";
 
 import { useSuspenseQueries } from "@tanstack/react-query";
-import { LiteralString } from "better-auth";
 import { authClient } from "../handler/client.client";
 import { type Permission } from "../lib/permissions";
 import { useSession } from "./use-session";
@@ -21,6 +20,7 @@ export function usePermission(permission?: Permission) {
       queryKey: ["permission", permission],
       queryFn: async () => {
         const userId = sessionQuery.data?.user.id;
+        if (!userId) return { permission, success: false };
 
         const { data, error } = await authClient.admin.hasPermission({ permission, userId });
         if (error) {
@@ -33,13 +33,14 @@ export function usePermission(permission?: Permission) {
           success: data.success,
         };
       },
+      staleTime: 5 * 60 * 1000, // 5 minutes
     })),
     combine: (results) => {
       const errors = results.filter(({ error }) => error);
       if (errors.length) return { data: null, errors };
 
       const values = results.map(({ data }) => data);
-      const success = results.every(({ data }) => data.success);
+      const success = results.every(({ data }) => data?.success);
 
       return { data: { success, values }, errors: null };
     },

package/src/modules/auth/hooks/use-session.ts

@@ -1,18 +1,24 @@
 "use client";
 
-import { useSuspenseQuery } from "@tanstack/react-query";
+import { queryOptions, useSuspenseQuery } from "@tanstack/react-query";
 import { authClient } from "../entry.client";
 
-export function useSession() {
-  const session = useSuspenseQuery({
-    queryKey: ["session"],
-    queryFn: async () => {
-      const session = await authClient.getSession();
-      if (session.error) throw session.error;
+export const sessionQueryOptions = queryOptions({
+  queryKey: ["session"],
+  queryFn: async () => {
+    const session = await authClient.getSession();
+
+    if (session.error) {
+      console.error(session.error);
+      return null;
+    }
 
-      return session.data;
-    },
-  });
+    return session.data;
+  },
+  staleTime: 1000 * 60 * 60,
+});
 
+export function useSession() {
+  const session = useSuspenseQuery(sessionQueryOptions);
   return session;
 }

package/src/modules/auth/lib/validators.ts

@@ -64,7 +64,7 @@ export const createUserSchema = userSchema.pick({ email: true, image: true }).ex
     .min(2, { message: "Achternaam moet langer zijn dan 2 karakters" })
     .max(50, { message: "Achternaam mag niet langer zijn dan 50 karakters" }),
   password: z.string().min(6, { message: "Wachtwoord moet minimaal 6 karakters hebben" }),
-  role: z.string().default("user"),
+  role: z.string(),
 });
 
 export type CreateUserSchema = z.infer<typeof createUserSchema>;

package/src/modules/commands/components/alert-dialog-command.client.tsx

@@ -25,7 +25,7 @@ import { DefaultError, MutationOptions } from "@tanstack/react-query";
 import React from "react";
 import { Keys, useHotkeys } from "react-hotkeys-hook";
 import { useCommand } from "../hooks/context.client";
-import { useCommandAction2 } from "../hooks/use-command-action.client";
+import { useCommandMutation } from "../hooks/use-command-mutation.client";
 import { CommandTrigger } from "./command-trigger.client";
 
 /**
@@ -213,7 +213,7 @@ export function CommandAlertDialogAction<
   const { setOpen } = React.useContext(CommandAlertDialogContext);
   const { status } = useCommand();
 
-  const { mutateAsync } = useCommandAction2({
+  const { mutateAsync } = useCommandMutation({
     ...mutation,
     onSuccess: async (...params) => {
       setOpen(false);

package/src/modules/commands/components/click-command.client.tsx

@@ -7,7 +7,7 @@ import { DefaultError, MutationOptions } from "@tanstack/react-query";
 import React from "react";
 import { Keys, useHotkeys } from "react-hotkeys-hook";
 import { useCommand } from "../hooks/context.client";
-import { useCommandAction2 } from "../hooks/use-command-action.client";
+import { useCommandMutation } from "../hooks/use-command-mutation.client";
 import { CommandTrigger } from "./command-trigger.client";
 
 export type CommandClickProps<
@@ -40,7 +40,7 @@ export function CommandClick<
   ...props
 }: CommandClickProps<TData, TError, TVariables, TOnMutateResult>) {
   const { menu, status } = useCommand();
-  const { mutate } = useCommandAction2(mutation);
+  const { mutate } = useCommandMutation(mutation);
 
   const isDisabled = disabled || status === "pending";
 

package/src/modules/commands/components/dialog-command.client.tsx

@@ -22,22 +22,32 @@ import { CommandTrigger } from "./command-trigger.client";
 /**
  * CommandDialogContext
  */
-type CommandDialogContextValue = {
+type CommandDialogOpenState = {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
+type CommandDialogContextValue = {
+  openState: CommandDialogOpenState;
+};
+
 const CommandDialogContext = React.createContext({} as CommandDialogContextValue);
 
 /**
  * CommandDialog
  */
-export function CommandDialog({ children, ...props }: DialogProps) {
-  const [open, setOpen] = React.useState(false);
+export function CommandDialog({
+  children,
+  openState,
+  ...props
+}: Omit<DialogProps, "open" | "onOpenChange"> & { openState?: CommandDialogOpenState }) {
+  const state = React.useState(false);
+
+  const { open, setOpen } = openState ?? { open: state[0], setOpen: state[1] };
 
   return (
     <Dialog {...props} open={open} onOpenChange={setOpen}>
-      <CommandDialogContext.Provider value={{ open, setOpen }}>
+      <CommandDialogContext.Provider value={{ openState: { open, setOpen } }}>
         {children}
       </CommandDialogContext.Provider>
     </Dialog>
@@ -63,11 +73,13 @@ export function CommandDialogTrigger({
   ...props
 }: CommandDialogTriggerProps) {
   const { menu, status } = useCommand();
-  const { setOpen } = React.useContext(CommandDialogContext);
+  const { openState } = React.useContext(CommandDialogContext);
 
   const isDisabled = disabled || status === "pending";
 
-  useHotkeys(hotkey ?? "", () => setOpen(true), { enabled: !isDisabled && hotkey !== undefined });
+  useHotkeys(hotkey ?? "", () => openState.setOpen(true), {
+    enabled: !isDisabled && hotkey !== undefined,
+  });
 
   if (menu === "inline" || menu === "table") {
     return (
@@ -92,7 +104,7 @@ export function CommandDialogTrigger({
             disabled={isDisabled}
             onClick={(e) => {
               e.preventDefault();
-              setOpen(true);
+              openState.setOpen(true);
             }}
           >
             {children}
@@ -111,7 +123,7 @@ export function CommandDialogTrigger({
             disabled={isDisabled}
             onClick={(e) => {
               e.preventDefault();
-              setOpen(true);
+              openState.setOpen(true);
             }}
           >
             {children}

package/src/modules/commands/components/dropdown-command.client.tsx

@@ -20,7 +20,7 @@ import { cn } from "@/lib/utils/cn";
 import { DefaultError, MutationOptions } from "@tanstack/react-query";
 import React from "react";
 import { useCommand } from "../hooks/context.client";
-import { useCommandAction2 } from "../hooks/use-command-action.client";
+import { useCommandMutation } from "../hooks/use-command-mutation.client";
 import { CommandTrigger } from "./command-trigger.client";
 
 /**
@@ -190,7 +190,7 @@ export function CommandDropdownItem<
   const { setOpen } = React.useContext(CommandDropdownContext);
   const { menu, status } = useCommand();
 
-  const { mutateAsync } = useCommandAction2({
+  const { mutateAsync } = useCommandMutation({
     ...mutation,
     onSuccess: async (...params) => {
       setOpen(false);

package/src/modules/commands/components/form-dialog-command.client.tsx

@@ -19,7 +19,7 @@ import { type DefaultError, type MutationOptions } from "@tanstack/react-query";
 import React, { type ComponentProps } from "react";
 import { type FieldValues, Form, useFormContext } from "react-hook-form";
 import { type Keys, useHotkeys } from "react-hotkeys-hook";
-import { useCommandAction2 } from "../entry.client";
+import { useCommandMutation } from "../entry.client";
 import { useCommand } from "../hooks/context.client";
 import { CommandTrigger } from "./command-trigger.client";
 
@@ -188,7 +188,7 @@ export function CommandFormDialogContent<
   const { setOpen } = React.useContext(CommandFormDialogContext);
   const form = useFormContext<TValues>();
 
-  const { mutateAsync } = useCommandAction2({
+  const { mutateAsync } = useCommandMutation({
     ...mutation,
     onSuccess: async (...params) => {
       form.reset();

package/src/modules/commands/entry.client.ts

@@ -5,7 +5,7 @@ export * from "./components/dialog-command.client";
 export * from "./components/dropdown-command.client";
 export * from "./components/empty-command.client";
 export * from "./components/form-dialog-command.client";
-export * from "./hooks/use-command-action.client";
+export * from "./hooks/use-command-mutation.client";
 export * from "./menus/context-menu.client";
 export * from "./menus/dropdown-menu.client";
 export * from "./menus/inline-menu.client";