@tulip-systems/core 0.6.0 → 0.7.0

package/src/components/ui/toggle.client.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { Toggle as TogglePrimitive } from "radix-ui";
+import type * as React from "react";
+import { cn } from "@/lib/utils/cn";
+
+const toggleVariants = cva(
+  "hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[state=on]:bg-muted gap-1 rounded-lg text-sm font-medium transition-all [&_svg:not([class*='size-'])]:size-4 group/toggle inline-flex items-center justify-center whitespace-nowrap outline-none hover:bg-muted focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-input hover:bg-muted border bg-transparent",
+      },
+      size: {
+        default: "h-8 min-w-8 px-2",
+        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-1.5 text-[0.8rem]",
+        lg: "h-9 min-w-9 px-2.5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Toggle({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/components/ui/tooltip.client.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
 import type * as React from "react";
-
 import { cn } from "@/lib/utils/cn";
 
 function TooltipProvider({
@@ -19,11 +18,7 @@ function TooltipProvider({
 }
 
 function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  );
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
 }
 
 function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
@@ -42,13 +37,13 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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-fit text-balance rounded-md px-3 py-1.5 text-xs",
+          "data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-background text-xs has-data-[slot=kbd]:pr-1.5 data-[state=closed]:animate-out data-[state=delayed-open]:animate-in data-[state=open]:animate-in **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
           className,
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   );

package/src/lib/hooks/use-indicator.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type React from "react";
-import { createContext, useContext, useEffect, useState, useTransition } from "react";
+import { createContext, useCallback, useContext, useEffect, useState, useTransition } from "react";
 
 /**
  * Indicator status
@@ -15,7 +15,7 @@ export function useLocalIndicator() {
   /**
    * Start transition
    */
-  const [isPending, startTransition] = useTransition();
+  const [, startTransitionBase] = useTransition();
 
   /**
    * Status of the inline edit indicator
@@ -25,19 +25,25 @@ export function useLocalIndicator() {
   /**
    * Set status to pending when isPending is true
    */
-  useEffect(() => {
-    if (isPending) setStatus("pending");
-  }, [isPending]);
+  const startTransition = useCallback<React.TransitionStartFunction>((callback) => {
+    setStatus("pending");
+    startTransitionBase(callback);
+  }, []);
 
   /**
    * Set status back to idle after 1.5 seconds when status is succes
    * Set status back to idle after 3 seconds when status is error
    */
-  useEffect(() => {
-    if (status === "success") setTimeout(() => setStatus("idle"), 1000);
-    if (status === "error") setTimeout(() => setStatus("idle"), 2000);
+  const resetAfterDelay = useCallback(() => {
+    if (status !== "success" && status !== "error") return undefined;
+
+    const timeout = setTimeout(() => setStatus("idle"), status === "success" ? 1000 : 2000);
+
+    return () => clearTimeout(timeout);
   }, [status]);
 
+  useEffect(() => resetAfterDelay(), [resetAfterDelay]);
+
   return { status, setStatus, startTransition };
 }
 

package/src/modules/auth/components/auth-layout.server.tsx

@@ -4,11 +4,11 @@ import type { PropsWithChildren } from "react";
 
 export async function AuthLayout(props: PropsWithChildren<{ name: string }>) {
   return (
-    <div className="container relative mx-auto grid h-[100dvh] flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
-      <div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
+    <div className="container relative mx-auto grid h-dvh flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
+      <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
         <Image src="/images/auth-background.jpeg" alt="Background" className="object-cover" fill />
 
-        <Link href="/" className="relative z-20 flex items-center text-lg font-bold">
+        <Link href="/" className="relative z-20 flex items-center font-bold text-lg">
           {props.name}
         </Link>
 

package/src/modules/auth/components/create-first-user-page.client.tsx

@@ -69,7 +69,7 @@ export function CreateFirstUserPage() {
   return (
     <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
       <div className="flex flex-col space-y-2 text-center">
-        <h1 className="text-3xl font-semibold tracking-tight">Welkom eerste gebruiker</h1>
+        <h1 className="font-semibold text-3xl tracking-tight">Welkom eerste gebruiker</h1>
         <p className="text-muted-foreground text-sm">Maak eerst een account aan om in te loggen</p>
       </div>
 
@@ -138,14 +138,14 @@ export function CreateFirstUserPage() {
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                         onClick={() => setShowPassword(!showPassword)}
                         disabled={disabled}
                       >
                         {showPassword ? (
-                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                         ) : (
-                          <Eye className="text-muted-foreground h-4 w-4" />
+                          <Eye className="h-4 w-4 text-muted-foreground" />
                         )}
                       </Button>
                     </div>

package/src/modules/auth/components/forget-password-page.client.tsx

@@ -25,7 +25,7 @@ export function ForgetPasswordPage() {
   return (
     <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
       <div className="flex flex-col space-y-2 text-center">
-        <h1 className="text-3xl font-semibold tracking-tight">Wachtwoord vergeten</h1>
+        <h1 className="font-semibold text-3xl tracking-tight">Wachtwoord vergeten</h1>
         <p className="text-muted-foreground text-sm">
           Schrijf je email zodat we je een mail kunnen verzenden om je wachtwoord te herstellen.
         </p>

package/src/modules/auth/components/login-page.client.tsx

@@ -91,7 +91,7 @@ export function LoginPage(props: LoginPageProps) {
   return (
     <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
       <div className="flex flex-col space-y-2 text-center">
-        <h1 className="text-3xl font-semibold tracking-tight">Login</h1>
+        <h1 className="font-semibold text-3xl tracking-tight">Login</h1>
         <p className="text-muted-foreground text-sm">
           Schrijf je email en wachtwoord in om in te loggen.
         </p>
@@ -132,14 +132,14 @@ export function LoginPage(props: LoginPageProps) {
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                         onClick={() => setShowPassword(!showPassword)}
                         disabled={disabled}
                       >
                         {showPassword ? (
-                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                         ) : (
-                          <Eye className="text-muted-foreground h-4 w-4" />
+                          <Eye className="h-4 w-4 text-muted-foreground" />
                         )}
                       </Button>
                     </div>
@@ -178,10 +178,10 @@ export function LoginPage(props: LoginPageProps) {
         </form>
       </Form>
 
-      <p className="text-muted-foreground px-8 text-center text-sm">
+      <p className="px-8 text-center text-muted-foreground text-sm">
         <Link
           href="/auth/forget-password"
-          className="hover:text-primary underline underline-offset-4"
+          className="underline underline-offset-4 hover:text-primary"
         >
           Wachtwoord vergeten
         </Link>

package/src/modules/auth/components/reset-password-page.client.tsx

@@ -42,7 +42,7 @@ export function ResetPasswordPage(params: {
   return (
     <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
       <div className="flex flex-col space-y-2 text-center">
-        <h1 className="text-3xl font-semibold tracking-tight">Wachtwoord herstellen</h1>
+        <h1 className="font-semibold text-3xl tracking-tight">Wachtwoord herstellen</h1>
         <p className="text-muted-foreground text-sm">Vul je nieuwe wachtwoord in</p>
       </div>
 
@@ -89,14 +89,14 @@ export function ResetPasswordPage(params: {
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                         onClick={() => setShowPassword(!showPassword)}
                         disabled={form.formState.disabled}
                       >
                         {showPassword ? (
-                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                         ) : (
-                          <Eye className="text-muted-foreground h-4 w-4" />
+                          <Eye className="h-4 w-4 text-muted-foreground" />
                         )}
                       </Button>
                     </div>
@@ -123,14 +123,14 @@ export function ResetPasswordPage(params: {
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                        className="absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent"
                         onClick={() => setShowPasswordConfirm(!showPasswordConfirm)}
                         disabled={form.formState.disabled}
                       >
                         {showPasswordConfirm ? (
-                          <EyeOff className="text-muted-foreground h-4 w-4" />
+                          <EyeOff className="h-4 w-4 text-muted-foreground" />
                         ) : (
-                          <Eye className="text-muted-foreground h-4 w-4" />
+                          <Eye className="h-4 w-4 text-muted-foreground" />
                         )}
                       </Button>
                     </div>

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

@@ -1,12 +1,7 @@
 "use client";
 
-import type {
-  AlertDialogCancelProps,
-  AlertDialogContentProps,
-  AlertDialogProps,
-} from "@radix-ui/react-alert-dialog";
 import type { DefaultError, MutationOptions } from "@tanstack/react-query";
-import React from "react";
+import React, { type ComponentProps } from "react";
 import { type Keys, useHotkeys } from "react-hotkeys-hook";
 import { Icons } from "@/components/common/icons";
 import {
@@ -19,10 +14,10 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@/components/ui/alert-dialog";
+} from "@/components/ui/alert-dialog.client";
 import { buttonVariants } from "@/components/ui/button";
-import { ContextMenuItem } from "@/components/ui/context-menu";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { ContextMenuItem } from "@/components/ui/context-menu.client";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu.client";
 import { cn } from "@/lib/utils/cn";
 import { useCommand } from "../hooks/context.client";
 import { useCommandMutation } from "../hooks/use-command-mutation.client";
@@ -41,7 +36,7 @@ const CommandAlertDialogContext = React.createContext({} as CommandAlertDialogCo
 /**
  * CommandAlertDialog
  */
-export function CommandAlertDialog({ children, ...props }: AlertDialogProps) {
+export function CommandAlertDialog({ children, ...props }: ComponentProps<typeof AlertDialog>) {
   const [open, setOpen] = React.useState(false);
 
   return (
@@ -134,7 +129,10 @@ export function CommandAlertDialogTrigger({
 /**
  * CommandAlertDialogContent
  */
-export function CommandAlertDialogContent({ children, ...props }: AlertDialogContentProps) {
+export function CommandAlertDialogContent({
+  children,
+  ...props
+}: ComponentProps<typeof AlertDialogContent>) {
   return <AlertDialogContent {...props}>{children}</AlertDialogContent>;
 }
 
@@ -144,14 +142,17 @@ export function CommandAlertDialogContent({ children, ...props }: AlertDialogCon
 export function CommandAlertDialogHeader({
   children,
   ...props
-}: React.HTMLAttributes<HTMLElement>) {
+}: ComponentProps<typeof AlertDialogHeader>) {
   return <AlertDialogHeader {...props}>{children}</AlertDialogHeader>;
 }
 
 /**
  * CommandAlertDialogTitle
  */
-export function CommandAlertDialogTitle({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+export function CommandAlertDialogTitle({
+  children,
+  ...props
+}: ComponentProps<typeof AlertDialogTitle>) {
   return <AlertDialogTitle {...props}>{children}</AlertDialogTitle>;
 }
 
@@ -161,7 +162,7 @@ export function CommandAlertDialogTitle({ children, ...props }: React.HTMLAttrib
 export function CommandAlertDialogDescription({
   children,
   ...props
-}: React.HTMLAttributes<HTMLElement>) {
+}: ComponentProps<typeof AlertDialogDescription>) {
   return <AlertDialogDescription {...props}>{children}</AlertDialogDescription>;
 }
 
@@ -171,14 +172,17 @@ export function CommandAlertDialogDescription({
 export function CommandAlertDialogFooter({
   children,
   ...props
-}: React.HTMLAttributes<HTMLElement>) {
+}: ComponentProps<typeof AlertDialogFooter>) {
   return <AlertDialogFooter {...props}>{children}</AlertDialogFooter>;
 }
 
 /**
  * CommandAlertDialogCancel
  */
-export function CommandAlertDialogCancel({ children, ...props }: AlertDialogCancelProps) {
+export function CommandAlertDialogCancel({
+  children,
+  ...props
+}: ComponentProps<typeof AlertDialogCancel>) {
   return <AlertDialogCancel {...props}>{children}</AlertDialogCancel>;
 }
 

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

@@ -4,8 +4,8 @@ import type { DefaultError, MutationOptions } from "@tanstack/react-query";
 import type React from "react";
 import { type Keys, useHotkeys } from "react-hotkeys-hook";
 import { Button } from "@/components/ui/button";
-import { ContextMenuItem } from "@/components/ui/context-menu";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { ContextMenuItem } from "@/components/ui/context-menu.client";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu.client";
 import { useCommand } from "../hooks/context.client";
 import { useCommandMutation } from "../hooks/use-command-mutation.client";
 import { CommandTrigger } from "./command-trigger.client";

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

@@ -1,10 +1,9 @@
 "use client";
 
-import type { DialogContentProps, DialogProps } from "@radix-ui/react-dialog";
-import React from "react";
+import React, { type ComponentProps } from "react";
 import { type Keys, useHotkeys } from "react-hotkeys-hook";
 import { buttonVariants } from "@/components/ui/button";
-import { ContextMenuItem } from "@/components/ui/context-menu";
+import { ContextMenuItem } from "@/components/ui/context-menu.client";
 import {
   Dialog,
   DialogContent,
@@ -14,7 +13,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog.client";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu.client";
 import { cn } from "@/lib/utils/cn";
 import { useCommand } from "../hooks/context.client";
 import { CommandTrigger } from "./command-trigger.client";
@@ -40,7 +39,9 @@ export function CommandDialog({
   children,
   openState,
   ...props
-}: Omit<DialogProps, "open" | "onOpenChange"> & { openState?: CommandDialogOpenState }) {
+}: Omit<ComponentProps<typeof Dialog>, "open" | "onOpenChange"> & {
+  openState?: CommandDialogOpenState;
+}) {
   const state = React.useState(false);
 
   const { open, setOpen } = openState ?? { open: state[0], setOpen: state[1] };
@@ -137,21 +138,21 @@ export function CommandDialogTrigger({
 /**
  * CommandDialogContent
  */
-export function CommandDialogContent({ children, ...props }: DialogContentProps) {
+export function CommandDialogContent({ children, ...props }: ComponentProps<typeof DialogContent>) {
   return <DialogContent {...props}>{children}</DialogContent>;
 }
 
 /**
  * CommandDialogHeader
  */
-export function CommandDialogHeader({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+export function CommandDialogHeader({ children, ...props }: ComponentProps<typeof DialogHeader>) {
   return <DialogHeader {...props}>{children}</DialogHeader>;
 }
 
 /**
  * CommandDialogTitle
  */
-export function CommandDialogTitle({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+export function CommandDialogTitle({ children, ...props }: ComponentProps<typeof DialogTitle>) {
   return <DialogTitle {...props}>{children}</DialogTitle>;
 }
 
@@ -161,13 +162,13 @@ export function CommandDialogTitle({ children, ...props }: React.HTMLAttributes<
 export function CommandDialogDescription({
   children,
   ...props
-}: React.HTMLAttributes<HTMLElement>) {
+}: ComponentProps<typeof DialogDescription>) {
   return <DialogDescription {...props}>{children}</DialogDescription>;
 }
 
 /**
  * CommandDialogFooter
  */
-export function CommandDialogFooter({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+export function CommandDialogFooter({ children, ...props }: ComponentProps<typeof DialogFooter>) {
   return <DialogFooter {...props}>{children}</DialogFooter>;
 }

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

@@ -8,7 +8,7 @@ import {
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
-} from "@/components/ui/context-menu";
+} from "@/components/ui/context-menu.client";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -17,7 +17,7 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu.client";
 import { cn } from "@/lib/utils/cn";
 import { useCommand } from "../hooks/context.client";
 import { useCommandMutation } from "../hooks/use-command-mutation.client";

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

@@ -2,8 +2,8 @@
 
 import type React from "react";
 import { Button } from "@/components/ui/button";
-import { ContextMenuItem } from "@/components/ui/context-menu";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { ContextMenuItem } from "@/components/ui/context-menu.client";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu.client";
 import { useCommand } from "../hooks/context.client";
 import { CommandTrigger } from "./command-trigger.client";
 

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

@@ -1,13 +1,12 @@
 "use client";
 
-import type { DialogContentProps, DialogProps } from "@radix-ui/react-dialog";
 import type { DefaultError, 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 { Icons } from "@/components/common/icons";
 import { Button, buttonVariants } from "@/components/ui/button";
-import { ContextMenuItem } from "@/components/ui/context-menu";
+import { ContextMenuItem } from "@/components/ui/context-menu.client";
 import {
   Dialog,
   DialogContent,
@@ -17,7 +16,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog.client";
-import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu.client";
 import { cn } from "@/lib/utils/cn";
 import { useCommandMutation } from "../entry.client";
 import { useCommand } from "../hooks/context.client";
@@ -36,7 +35,7 @@ const CommandFormDialogContext = React.createContext({} as CommandFormDialogCont
 /**
  * CommandFormDialog
  */
-export function CommandFormDialog({ children, ...props }: DialogProps) {
+export function CommandFormDialog({ children, ...props }: ComponentProps<typeof Dialog>) {
   const [open, setOpen] = React.useState(false);
 
   return (
@@ -129,14 +128,17 @@ export function CommandFormDialogTrigger({
 /**
  * CommandFormDialogHeader
  */
-export function CommandFormDialogHeader({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+export function CommandFormDialogHeader({
+  children,
+  ...props
+}: ComponentProps<typeof DialogHeader>) {
   return <DialogHeader {...props}>{children}</DialogHeader>;
 }
 
 /**
  * CommandFormDialogTitle
  */
-export function CommandFormDialogTitle({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+export function CommandFormDialogTitle({ children, ...props }: ComponentProps<typeof DialogTitle>) {
   return <DialogTitle {...props}>{children}</DialogTitle>;
 }
 
@@ -146,7 +148,7 @@ export function CommandFormDialogTitle({ children, ...props }: React.HTMLAttribu
 export function CommandFormDialogDescription({
   children,
   ...props
-}: React.HTMLAttributes<HTMLElement>) {
+}: ComponentProps<typeof DialogDescription>) {
   return <DialogDescription {...props}>{children}</DialogDescription>;
 }
 
@@ -161,7 +163,7 @@ export type CommandFormDialogContentProps<
   TError = DefaultError,
   TVariables = undefined,
   TOnMutateResult = unknown,
-> = DialogContentProps & {
+> = ComponentProps<typeof DialogContent> & {
   variables: (values: TValues) => TVariables;
   mutation?: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
   children: React.ReactNode;
@@ -230,14 +232,21 @@ export function CommandFormDialogFields({ children, className, ...props }: Compo
 /**
  * CommandFormDialogFooter
  */
-export function CommandFormDialogFooter({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+export function CommandFormDialogFooter({
+  children,
+  ...props
+}: ComponentProps<typeof DialogFooter>) {
   return <DialogFooter {...props}>{children}</DialogFooter>;
 }
 
 /**
  * CommandFormDialogCancel
  */
-export function CommandFormDialogCancel({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+export function CommandFormDialogCancel({
+  children,
+  onClick,
+  ...props
+}: Omit<ComponentProps<"button">, "type">) {
   const { setOpen } = React.useContext(CommandFormDialogContext);
   const form = useFormContext();
 
@@ -246,9 +255,10 @@ export function CommandFormDialogCancel({ children, ...props }: React.HTMLAttrib
       {...props}
       variant="ghost"
       type="button"
-      onClick={() => {
+      onClick={(e) => {
         form.reset();
         setOpen(false);
+        onClick?.(e);
       }}
     >
       {children}
@@ -259,11 +269,17 @@ export function CommandFormDialogCancel({ children, ...props }: React.HTMLAttrib
 /**
  * CommandFormDialogSubmit
  */
-export function CommandFormDialogSubmit({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
+export function CommandFormDialogSubmit({
+  children,
+  disabled,
+  ...props
+}: Omit<ComponentProps<"button">, "type">) {
   const { status } = useCommand();
 
+  const isDisabled = disabled || status === "pending";
+
   return (
-    <Button {...props} disabled={status === "pending"} type="submit">
+    <Button {...props} type="submit" disabled={isDisabled}>
       {status === "pending" && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
       {children}
     </Button>

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

@@ -1,3 +1,6 @@
+/**
+ * Components
+ */
 export * from "./components/alert-dialog-command.client";
 export * from "./components/click-command.client";
 export * from "./components/command-trigger.client";
@@ -5,11 +8,24 @@ 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";
+
+/**
+ * Hooks
+ */
 export * from "./hooks/use-command-mutation.client";
+
+/**
+ * Menus
+ */
 export * from "./menus/context-menu.client";
 export * from "./menus/dropdown-menu.client";
+export * from "./menus/floating-menu.client";
 export * from "./menus/inline-menu.client";
 export * from "./menus/responsive-menu.client";
+
+/**
+ * Utils
+ */
 export * from "./utils/archive-command.client";
 export * from "./utils/delete-command.client";
 export * from "./utils/send-mail-command.client";