@tulip-systems/core 0.6.1 → 0.8.0

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/menus/context-menu.client.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import type { ContextMenuContentProps } from "@radix-ui/react-context-menu";
-import { useState } from "react";
+import { type ComponentProps, useState } from "react";
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+} from "@/components/ui/context-menu.client";
 import { cn } from "@/lib/entry";
 import { RenderCommand } from "../components/render-command";
 import { CommandContextProvider } from "../hooks/context.client";
@@ -35,7 +34,7 @@ export function ContextCommandMenuContent<TData, TMeta>({
   meta,
   className,
   ...props
-}: SingleCommandMenuProps<TData, TMeta> & ContextMenuContentProps) {
+}: SingleCommandMenuProps<TData, TMeta> & ComponentProps<typeof ContextMenuContent>) {
   const [hasCommands, setHasCommands] = useState(true);
 
   const [validCommands, renderCommand] = useSingleCommandMenu({ data, commands, meta });

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

@@ -8,7 +8,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu.client";
 import { cn } from "@/lib/utils/cn";
 import { RenderCommand } from "../components/render-command";
 import { CommandContextProvider } from "../hooks/context.client";
@@ -35,7 +35,7 @@ export function DropdownCommandMenu<TData, TMeta>({
         <Button
           {...props}
           variant="ghost"
-          className={cn("data-[state=open]:bg-secondary size-8 p-0", className)}
+          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>

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

@@ -29,7 +29,7 @@ export function FloatingCommandMenu<TData, TMeta>({
       {...props}
       data-state={state}
       className={cn(
-        "bg-muted/80 fixed bottom-12 left-0 right-0 z-50 mx-auto flex w-fit items-center rounded-xl border px-3 py-2 shadow-xl backdrop-blur-2xl data-[state=open]:flex data-[state=closed]:hidden",
+        "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,
       )}
     >
@@ -46,7 +46,7 @@ export function FloatingCommandMenu<TData, TMeta>({
         </div>
 
         {!hasCommands.current && (
-          <span className="text-sm font-medium">Geen acties beschikbaar</span>
+          <span className="font-medium text-sm">Geen acties beschikbaar</span>
         )}
       </CommandContextProvider>
     </div>

package/src/modules/commands/utils/archive-command.client.tsx

@@ -32,7 +32,7 @@ export function ArchiveCommand<
       className="text-destructive"
       label="Archiveren"
     >
-      <Icons.archive className="text-destructive w-4" />
+      <Icons.archive className="w-4 text-destructive" />
       <CommandLabel />
     </CommandClick>
   );

package/src/modules/commands/utils/delete-command.client.tsx

@@ -37,7 +37,7 @@ export function DeleteCommand<
   return (
     <CommandAlertDialog>
       <CommandAlertDialogTrigger className="text-destructive" label="Verwijderen">
-        <Icons.trash className="text-destructive w-4" />
+        <Icons.trash className="w-4 text-destructive" />
         <CommandLabel />
       </CommandAlertDialogTrigger>
 

package/src/modules/config/entry.server.ts

@@ -1,9 +0,0 @@
-/**
- * Database
- */
-export * from "./db/init";
-
-/**
- * Providers
- */
-export * from "./providers/email";

package/src/modules/config/entry.ts

@@ -1,5 +1,5 @@
-export * from "./db/helpers";
-export * from "./db/types";
+export * from "../database/lib/helpers";
+export * from "../database/lib/types";
 
 export * from "./lib/config";
 export * from "./lib/context";

package/src/modules/config/lib/context.ts

@@ -1,15 +1,15 @@
-import type { StorageClient } from "@/modules/storage/lib/create-client.server";
-import type { AuthClient } from "../../auth/handler/init";
-import type { DatabaseClient } from "../db/init";
-import type { TDatabaseSchema } from "../entry";
-import type { EmailClient } from "../providers/email";
+import type { Auth } from "@/modules/auth/handler/service.server";
+import type { Database } from "@/modules/database/lib/service.server";
+import type { TDatabaseSchema } from "@/modules/database/lib/types";
+import type { Email } from "@/modules/emails/lib/service.server";
+import type { Storage } from "@/modules/storage/lib/service.server";
 
 export type TulipContext<TSchema extends TDatabaseSchema> = {
-  db: DatabaseClient<TSchema>;
+  db: Database<TSchema>;
   schema: TSchema;
-  auth: AuthClient;
-  email: EmailClient;
-  storage: StorageClient<TSchema>;
+  auth: Auth;
+  email: Email;
+  storage: Storage<TSchema>;
 };
 
 export function createContext<TSchema extends TDatabaseSchema>(props: TulipContext<TSchema>) {

package/src/modules/data-tables/components/cell/select.client.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from "@/components/ui/checkbox";
+import { Checkbox } from "@/components/ui/checkbox.client";
 import { TableCell } from "@/modules/data-tables/components/table";
 import { createTableCell } from "../../lib/helpers/create-column";
 

package/src/modules/data-tables/components/column-header.tsx

@@ -7,7 +7,7 @@ import {
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@/components/ui/dropdown-menu.client";
 import { cn } from "@/lib/utils/cn";
 
 interface TableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
@@ -32,7 +32,7 @@ export function TableColumnHeader<TData, TValue>({
             size="sm"
             type="button"
             variant="ghost"
-            className="data-[state=open]:bg-accent -ml-3 h-8"
+            className="-ml-3 h-8 data-[state=open]:bg-accent"
           >
             <span>{title}</span>
             {column.getIsSorted() === "desc" ? (
@@ -46,16 +46,16 @@ export function TableColumnHeader<TData, TValue>({
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start">
           <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-            <SortAsc className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <SortAsc className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             Asc
           </DropdownMenuItem>
           <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-            <SortDesc className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <SortDesc className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             Desc
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => column.clearSorting()}>
-            <RotateCcwIcon className="text-muted-foreground/70 mr-2 h-3.5 w-3.5" />
+            <RotateCcwIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
             Clear
           </DropdownMenuItem>
         </DropdownMenuContent>

package/src/modules/data-tables/components/filters/combobox.client.tsx

@@ -13,8 +13,8 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from "@/components/ui/command";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+} from "@/components/ui/command.client";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover.client";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils/cn";
 
@@ -47,7 +47,7 @@ export function TableFilterCombobox<TValue extends string>({
     <Popover>
       <PopoverTrigger asChild>
         <Button type="button" variant="outline" size="sm" className="h-8 border-dashed">
-          <PlusCircle className="mr-2 h-4 w-4" />
+          <PlusCircle className="h-4 w-4" />
           {title}
           {selectedValues?.size > 0 && (
             <>
@@ -108,10 +108,10 @@ export function TableFilterCombobox<TValue extends string>({
                     <div
                       data-active={selectedValues.has(option.value)}
                       className={cn(
-                        "border-primary data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:[&>svg]:text-primary-foreground mr-2 flex h-4 w-4 items-center justify-center rounded-sm border opacity-50 data-[active=true]:opacity-100 [&>svg]:invisible data-[active=true]:[&>svg]:visible",
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary opacity-50 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:opacity-100 [&>svg]:invisible data-[active=true]:[&>svg]:visible data-[active=true]:[&>svg]:text-primary-foreground",
                       )}
                     >
-                      <Check className="text-foreground h-4 w-4" />
+                      <Check className="h-4 w-4 text-foreground" />
                     </div>
 
                     <div className="flex flex-1 items-center gap-2">
@@ -120,7 +120,7 @@ export function TableFilterCombobox<TValue extends string>({
                     </div>
 
                     {option.total !== undefined && (
-                      <span className="text-muted-foreground/50 size-4 justify-self-end font-mono text-xs">
+                      <span className="size-4 justify-self-end font-mono text-muted-foreground/50 text-xs">
                         {option.total}
                       </span>
                     )}

package/src/modules/data-tables/components/filters/slider.client.tsx

@@ -7,7 +7,7 @@ import { useDebouncedCallback } from "use-debounce";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover.client";
 import { Separator } from "@/components/ui/separator";
 import { Slider } from "@/components/ui/slider";
 
@@ -106,7 +106,7 @@ export function TableFilterSlider({
               max={max}
             />
 
-            <div className="text-muted-foreground flex justify-between text-xs">
+            <div className="flex justify-between text-muted-foreground text-xs">
               <span>{min}</span>
               <span>{max}</span>
             </div>

package/src/modules/data-tables/components/header.tsx

@@ -31,7 +31,7 @@ export function TableHead({ className, ...props }: React.ComponentProps<"th">) {
     <th
       data-slot="table-head"
       className={cn(
-        "text-muted-foreground bg-muted/70 h-10 whitespace-nowrap px-2 text-left align-middle font-medium", //[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]
+        "h-10 whitespace-nowrap bg-muted/70 px-2 text-left align-middle font-medium text-muted-foreground", //[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]
         className,
       )}
       {...props}

package/src/modules/data-tables/components/skeleton.tsx

@@ -7,10 +7,10 @@ export function TableSkeleton() {
     <div className="rounded-md border">
       <Table>
         <TableHeader>
-          <TableRow className="bg-muted relative">
+          <TableRow className="relative bg-muted">
             {Array.from({ length: 15 }).map((_, index) => (
               <TableHead key={index}>
-                <Skeleton className="bg-background my-2 h-2 w-full rounded-full" />
+                <Skeleton className="my-2 h-2 w-full rounded-full bg-background" />
               </TableHead>
             ))}
           </TableRow>

package/src/modules/data-tables/components/table.tsx

@@ -30,7 +30,7 @@ function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
   return (
     <tfoot
       data-slot="table-footer"
-      className={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+      className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
       {...props}
     />
   );
@@ -41,7 +41,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
     <tr
       data-slot="table-row"
       className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
         className,
       )}
       {...props}
@@ -71,7 +71,7 @@ function TableCaption({ className, ...props }: React.ComponentProps<"caption">)
   return (
     <caption
       data-slot="table-caption"
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      className={cn("mt-4 text-muted-foreground text-sm", className)}
       {...props}
     />
   );

package/src/modules/data-tables/components/toolbar.tsx

@@ -9,7 +9,7 @@ export function TableToolbar({ children, className, ...props }: TableToolbarProp
   return (
     <div
       {...props}
-      className={cn("flex max-w-full justify-between gap-5 overflow-x-auto p-1", className)}
+      className={cn("flex max-w-full justify-between gap-5 overflow-x-auto py-1", className)}
     >
       {children}
     </div>

package/src/modules/data-tables/entry.client.ts

@@ -29,3 +29,4 @@ export * from "./tables/inline-table/components/cells/drag-handle.client";
 export * from "./tables/inline-table/components/cells/read-only";
 export * from "./tables/inline-table/components/table";
 export * from "./tables/inline-table/hooks/context.client";
+export * from "./tables/inline-table/hooks/use-hotkeys.client";

package/src/modules/data-tables/server/get-data.server.ts

@@ -1,4 +1,4 @@
-import "server-only";
+import "server-cli-only";
 
 import { and, type DBQueryConfig, getTableName, isTable, type SQL } from "drizzle-orm";
 import type { PgTable } from "drizzle-orm/pg-core";