@tulip-systems/core 0.8.3 → 0.9.0

package/src/components/ui/breadcrumb.tsx

@@ -94,10 +94,10 @@ function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span"
 
 export {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
 };

package/src/components/ui/card.tsx

@@ -88,4 +88,4 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

@@ -222,11 +222,11 @@ function CarouselNext({
 }
 
 export {
-  type CarouselApi,
   Carousel,
+  type CarouselApi,
   CarouselContent,
   CarouselItem,
-  CarouselPrevious,
   CarouselNext,
+  CarouselPrevious,
   useCarousel,
 };

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

@@ -318,9 +318,9 @@ function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key:
 
 export {
   ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
 };

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

@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxP
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input outline-none transition-colors after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 group-has-disabled/field:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:bg-input/30 dark:data-checked:bg-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input outline-none transition-colors after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 group-has-disabled/field:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}

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

@@ -18,4 +18,4 @@ function CollapsibleContent({
   return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };

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

@@ -148,11 +148,25 @@ function CommandItem({
       {...props}
     >
       {children}
-      <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+      {/* <CheckIcon className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" /> */}
     </CommandPrimitive.Item>
   );
 }
 
+function CommandItemCheck({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      {...props}
+      className={cn(
+        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary opacity-50 group-data-[checked=true]/command-item:bg-primary group-data-[checked=true]/command-item:text-primary-foreground group-data-[checked=true]/command-item:opacity-100 [&>svg]:invisible group-data-[checked=true]/command-item:[&>svg]:visible group-data-[checked=true]/command-item:[&>svg]:text-primary-foreground",
+        className,
+      )}
+    >
+      <CheckIcon className="size-3 text-foreground" />
+    </div>
+  );
+}
+
 function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
@@ -169,11 +183,12 @@ function CommandShortcut({ className, ...props }: React.ComponentProps<"span">)
 export {
   Command,
   CommandDialog,
-  CommandInput,
-  CommandList,
   CommandEmpty,
   CommandGroup,
+  CommandInput,
   CommandItem,
-  CommandShortcut,
+  CommandItemCheck,
+  CommandList,
   CommandSeparator,
+  CommandShortcut,
 };

package/src/components/ui/context-menu.client.tsx

@@ -229,18 +229,18 @@ function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span
 
 export {
   ContextMenu,
-  ContextMenuTrigger,
+  ContextMenuCheckboxItem,
   ContextMenuContent,
+  ContextMenuGroup,
   ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
   ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
   ContextMenuSeparator,
   ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
+  ContextMenuTrigger,
 };

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

@@ -107,13 +107,13 @@ function DrawerDescription({
 
 export {
   Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
   DrawerClose,
   DrawerContent,
-  DrawerHeader,
+  DrawerDescription,
   DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
   DrawerTitle,
-  DrawerDescription,
+  DrawerTrigger,
 };

package/src/components/ui/dropdown-menu.client.tsx

@@ -232,18 +232,18 @@ function DropdownMenuSubContent({
 
 export {
   DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuLabel,
   DropdownMenuItem,
-  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
-  DropdownMenuSubTrigger,
   DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
 };

package/src/components/ui/empty.tsx

@@ -90,4 +90,4 @@ function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

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

@@ -97,7 +97,7 @@ function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>)
     <Label
       data-slot="field-label"
       className={cn(
-        "group/field-label peer/field-label flex w-fit gap-2 leading-snug has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-data-checked:border-primary/30 has-data-checked:bg-primary/5 *:data-[slot=field]:p-2.5 group-data-[disabled=true]/field:opacity-50 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field][data-state=checked]]:border-primary/30 has-[>[data-slot=field][data-state=checked]]:bg-primary/5 *:data-[slot=field]:p-2.5 group-data-[disabled=true]/field:opacity-50 dark:has-[>[data-slot=field][data-state=checked]]:border-primary/20 dark:has-[>[data-slot=field][data-state=checked]]:bg-primary/10",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className,
       )}
@@ -212,13 +212,13 @@ function FieldError({
 
 export {
   Field,
-  FieldLabel,
+  FieldContent,
   FieldDescription,
   FieldError,
   FieldGroup,
+  FieldLabel,
   FieldLegend,
   FieldSeparator,
   FieldSet,
-  FieldContent,
   FieldTitle,
 };

package/src/components/ui/hover-card.client.tsx

@@ -34,4 +34,4 @@ function HoverCardContent({
   );
 }
 
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/src/components/ui/input-group.client.tsx

@@ -182,10 +182,10 @@ export {
   InputGroup,
   InputGroupAddon,
   InputGroupButton,
-  InputGroupText,
+  InputGroupDateInput,
+  InputGroupDateTimeInput,
   InputGroupInput,
+  InputGroupText,
   InputGroupTextarea,
   InputGroupTimeInput,
-  InputGroupDateInput,
-  InputGroupDateTimeInput,
 };

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

@@ -58,7 +58,7 @@ export function RecipientInput({
   }, [contacts, value]);
 
   const filteredContacts = React.useMemo(() => {
-    if (!inputValue || !inputValue.trim()) return availableContacts;
+    if (!inputValue?.trim()) return availableContacts;
     const search = inputValue.toLowerCase().trim();
     return availableContacts.filter(
       (contact) =>

package/src/components/ui/item.tsx

@@ -170,13 +170,13 @@ function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
 
 export {
   Item,
-  ItemMedia,
-  ItemContent,
   ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
   ItemGroup,
+  ItemHeader,
+  ItemMedia,
   ItemSeparator,
   ItemTitle,
-  ItemDescription,
-  ItemHeader,
-  ItemFooter,
 };

package/src/components/ui/navigation-menu.tsx

@@ -149,12 +149,12 @@ function NavigationMenuIndicator({
 
 export {
   NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
   NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
   NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
   NavigationMenuViewport,
   navigationMenuTriggerStyle,
 };

package/src/components/ui/pagination.tsx

@@ -5,7 +5,6 @@ import { cn } from "@/lib/utils/cn";
 
 function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
   return (
-    // biome-ignore lint/a11y/useSemanticElements: The "nav" element is necessary for accessibility and semantics
     <nav
       // biome-ignore lint/a11y/noRedundantRoles: The "navigation" role is necessary
       role="navigation"

package/src/components/ui/radio-group.tsx

@@ -25,7 +25,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:bg-input/30 dark:data-checked:bg-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:data-[state=checked]:bg-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className,
       )}
       {...props}

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

@@ -119,11 +119,11 @@ function SheetDescription({
 
 export {
   Sheet,
-  SheetTrigger,
   SheetClose,
   SheetContent,
-  SheetHeader,
+  SheetDescription,
   SheetFooter,
+  SheetHeader,
   SheetTitle,
-  SheetDescription,
+  SheetTrigger,
 };

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

@@ -57,8 +57,8 @@ function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPr
       className={cn(
         "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-1.5 py-0.5 font-medium text-foreground/60 text-sm transition-all hover:text-foreground focus-visible:border-ring focus-visible:outline-1 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
-        "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground",
-        "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        "data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:data-[state=active]:border-primary dark:data-[state=active]:bg-primary dark:data-[state=active]:text-primary-foreground",
+        "after:absolute after:bg-primary after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
         className,
       )}
       {...props}
@@ -76,4 +76,4 @@ function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPr
   );
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
+export { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants };

package/src/entry.ts

@@ -53,9 +53,9 @@ export const entry = {
   /**
    * Inline Edit Module
    */
-  "inline-edit": "./src/modules/inline-edit/entry.ts",
-  "inline-edit/client": "./src/modules/inline-edit/entry.client.ts",
-  "inline-edit/server": "./src/modules/inline-edit/entry.server.ts",
+  inline: "./src/modules/inline/entry.ts",
+  "inline/client": "./src/modules/inline/entry.client.ts",
+  "inline/server": "./src/modules/inline/entry.server.ts",
   /**
    * Router Module
    */

package/src/modules/auth/components/allowed.client.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import type { JSX } from "react";
 import { type UsePermissionProps, usePermission } from "../hooks/use-permission";
 
 /**
@@ -30,7 +29,7 @@ export type AllowedProps = UsePermissionProps & {
    * Fallback component to render if the user doesn't have the permission
    * @default null
    */
-  fallback?: JSX.Element | string;
+  fallback?: React.ReactNode;
 
   /**
    * Children to render if the user has the permission

package/src/modules/auth/components/update-password-command.tsx

@@ -22,7 +22,7 @@ import {
   CommandFormDialogSubmit,
   CommandFormDialogTitle,
   CommandFormDialogTrigger,
-} from "@/modules/commands/components/form-dialog-command.client";
+} from "@/modules/commands/components/primitives/form-dialog-command.client";
 import { type UpdatePasswordSchema, updatePasswordSchema } from "../lib/validators";
 
 export type UpdatePasswordCommandProps<

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

@@ -8,6 +8,13 @@ import { users } from "../db/schema";
  */
 export type User = typeof users.$inferSelect;
 
+/**
+ * Select user schema
+ */
+export const selectUserSchema = createInsertSchema(users);
+
+export type SelectUserSchema = z.infer<typeof selectUserSchema>;
+
 /**
  * Login schema
  */

package/src/modules/commands/components/menus/context-menu.client.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import type { ComponentProps, ReactNode } from "react";
+import type z from "zod";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu.client";
+import { cn } from "@/lib/entry";
+import type { CommandContextLifecycle } from "../../hooks/use-command.client";
+import type { CommandDef } from "../../lib/builder";
+import { RenderCommand } from "../render-command";
+
+export type ContextCommandMenuContentProps<TSchema extends z.ZodTypeAny, TMeta> = ComponentProps<
+  typeof ContextMenuContent
+> &
+  CommandContextLifecycle & {
+    data: unknown;
+    commands: Array<CommandDef<z.ZodTypeAny, TMeta>>;
+    meta?: TMeta;
+    fallback?: ReactNode;
+    emptyLabel?: string;
+  };
+
+/**
+ * ContextCommandMenu
+ */
+export const ContextCommandMenu = ContextMenu;
+
+/**
+ * ContextCommandMenuTrigger
+ */
+export const ContextCommandMenuTrigger = ContextMenuTrigger;
+
+/**
+ * ContextCommandMenuContent
+ */
+export function ContextCommandMenuContent<TSchema extends z.ZodTypeAny, TMeta>({
+  data,
+  commands,
+  meta,
+  fallback,
+  onSuccess,
+  onError,
+  onSettled,
+  className,
+  emptyLabel = "Geen acties beschikbaar",
+  ...props
+}: ContextCommandMenuContentProps<TSchema, TMeta>) {
+  if (!commands.length) {
+    return (
+      <ContextMenuContent {...props} className={cn("min-w-40", className)}>
+        <ContextMenuItem className="font-medium" disabled>
+          {emptyLabel}
+        </ContextMenuItem>
+      </ContextMenuContent>
+    );
+  }
+
+  return (
+    <ContextMenuContent {...props} className={cn("min-w-40", className)}>
+      {commands.map((command, index) => (
+        <RenderCommand
+          key={index}
+          command={command}
+          data={data}
+          meta={meta}
+          fallback={fallback}
+          ui="context"
+          onSuccess={onSuccess}
+          onError={onError}
+          onSettled={onSettled}
+        />
+      ))}
+    </ContextMenuContent>
+  );
+}

package/src/modules/commands/components/menus/dropdown-menu.client.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { MoreHorizontal } from "lucide-react";
+import React, { type ComponentProps, type HTMLAttributes, type ReactNode } from "react";
+import type z from "zod";
+import { Skeleton } from "@/components/entry";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.client";
+import { cn } from "@/lib/utils/cn";
+import type { CommandContextLifecycle } from "../../hooks/use-command.client";
+import type { CommandDef } from "../../lib/builder";
+import { RenderCommand } from "../render-command";
+
+export type DropdownCommandMenuProps<
+  TSchema extends z.ZodTypeAny,
+  TMeta,
+> = HTMLAttributes<HTMLElement> &
+  CommandContextLifecycle & {
+    data: unknown;
+    commands: Array<CommandDef<z.ZodTypeAny, TMeta>>;
+    meta?: TMeta;
+    fallback?: ReactNode;
+  };
+
+export function DropdownCommandMenu<TSchema extends z.ZodTypeAny, TMeta>({
+  data,
+  commands,
+  meta,
+  fallback,
+  onSuccess,
+  onError,
+  onSettled,
+  className,
+  ...props
+}: DropdownCommandMenuProps<TSchema, TMeta>) {
+  const [open, setOpen] = React.useState(false);
+
+  if (!commands.length) return null;
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          {...props}
+          variant="ghost"
+          className={cn("size-8 p-0 data-[state=open]:bg-secondary", className)}
+        >
+          <MoreHorizontal className="h-4 w-4" />
+          <span className="sr-only">Open menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" className="min-w-[10rem]">
+        {commands.map((command, index) => (
+          <RenderCommand
+            key={index}
+            command={command}
+            data={data}
+            meta={meta}
+            fallback={fallback}
+            ui="dropdown"
+            onSuccess={async () => {
+              setOpen(false);
+              await onSuccess?.();
+            }}
+            onError={onError}
+            onSettled={onSettled}
+          />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export function DropdownCommandMenuLoading({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div {...props} className={cn("flex w-fit items-center", className)}>
+      <Skeleton className="h-8 w-8" />
+    </div>
+  );
+}

package/src/modules/commands/components/menus/floating-menu.client.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import type { HTMLAttributes, ReactNode } from "react";
+import type z from "zod";
+import { cn } from "@/lib/utils/cn";
+import type { CommandContextLifecycle } from "../../hooks/use-command.client";
+import type { CommandDef } from "../../lib/builder";
+import { RenderCommand } from "../render-command";
+
+export type FloatingCommandMenuProps<
+  TSchema extends z.ZodTypeAny,
+  TMeta,
+> = HTMLAttributes<HTMLElement> &
+  CommandContextLifecycle & {
+    data: unknown;
+    commands: Array<CommandDef<z.ZodTypeAny, TMeta>>;
+    meta?: TMeta;
+    fallback?: ReactNode;
+    state: "open" | "closed";
+    emptyLabel?: string;
+  };
+
+export function FloatingCommandMenu<TSchema extends z.ZodTypeAny, TMeta>({
+  data,
+  commands,
+  meta,
+  fallback,
+  onSuccess,
+  onError,
+  onSettled,
+  state,
+  className,
+  emptyLabel = "Geen acties beschikbaar",
+  ...props
+}: FloatingCommandMenuProps<TSchema, TMeta>) {
+  return (
+    <div
+      {...props}
+      data-state={state}
+      className={cn(
+        "fixed right-0 bottom-12 left-0 z-50 mx-auto flex w-fit items-center rounded-xl border bg-muted/80 px-3 py-2 shadow-xl backdrop-blur-2xl data-[state=open]:flex data-[state=closed]:hidden",
+        className,
+      )}
+    >
+      <div className="flex gap-2">
+        {commands.map((command, index) => (
+          <RenderCommand
+            key={index}
+            command={command}
+            data={data}
+            meta={meta}
+            fallback={fallback}
+            ui="table"
+            onSuccess={onSuccess}
+            onError={onError}
+            onSettled={onSettled}
+          />
+        ))}
+
+        {!commands.length && <span className="font-medium text-sm">{emptyLabel}</span>}
+      </div>
+    </div>
+  );
+}