@tulip-systems/core 0.6.0 → 0.7.0

package/src/modules/commands/hooks/use-command-menu.client.tsx

@@ -13,12 +13,14 @@ export type SingleCommandMenuProps<TData, TMeta> = {
   data: TData;
   commands: CommandDef<TData, TMeta>[];
   meta?: TMeta;
+  onSuccess?: () => void;
 };
 
 export type BulkCommandMenuProps<TData, TMeta> = {
   data: TData[];
   commands: CommandDef<TData, TMeta>[];
   meta?: TMeta;
+  onSuccess?: () => void;
 };
 
 /**

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

@@ -0,0 +1,54 @@
+"use client";
+
+import { useRef } from "react";
+import { cn } from "@/lib/utils/cn";
+import { RenderCommand } from "../components/render-command";
+import { CommandContextProvider } from "../hooks/context.client";
+import { type BulkCommandMenuProps, useBulkCommandMenu } from "../hooks/use-command-menu.client";
+
+type FloatingCommandMenuProps<TData, TMeta> = BulkCommandMenuProps<TData, TMeta> &
+  React.HTMLAttributes<HTMLElement> & {
+    state: "open" | "closed";
+  };
+
+export function FloatingCommandMenu<TData, TMeta>({
+  data,
+  commands,
+  meta,
+  state,
+  onSuccess,
+  className,
+  ...props
+}: FloatingCommandMenuProps<TData, TMeta>) {
+  const hasCommands = useRef(true);
+
+  const [validCommands, renderCommand] = useBulkCommandMenu({ data, commands, meta });
+
+  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,
+      )}
+    >
+      <CommandContextProvider value={{ menu: "table", onSuccess }}>
+        <div
+          className="flex gap-2"
+          ref={(ref) => {
+            if (ref?.childNodes.length === 0) hasCommands.current = false;
+          }}
+        >
+          {validCommands.map((command) => (
+            <RenderCommand key={command.name} command={command} render={renderCommand} />
+          ))}
+        </div>
+
+        {!hasCommands.current && (
+          <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/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/strategies/pagination/components.tsx

@@ -34,7 +34,7 @@ export function PaginationTableFooter<TData extends { id: string }>({
           </Button>
         )}
 
-        <div className="text-muted-foreground flex-1 text-sm">
+        <div className="flex-1 text-muted-foreground text-sm">
           {selected ?? table.getFilteredSelectedRowModel().rows.length} of{" "}
           {total ?? table.getFilteredRowModel().rows.length} row(s) selected.
         </div>
@@ -42,7 +42,7 @@ export function PaginationTableFooter<TData extends { id: string }>({
 
       <div className="flex items-center justify-between gap-x-6 md:justify-start lg:space-x-8">
         <div className="hidden items-center space-x-2 md:flex">
-          <p className="text-sm font-medium">Rows per page</p>
+          <p className="font-medium text-sm">Rows per page</p>
           <Select
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value) => {
@@ -62,7 +62,7 @@ export function PaginationTableFooter<TData extends { id: string }>({
           </Select>
         </div>
 
-        <div className="flex items-center justify-center text-sm font-medium">
+        <div className="flex items-center justify-center font-medium text-sm">
           Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
         </div>
 

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

@@ -1,7 +1,7 @@
 "use client";
 
 import type { ComponentProps } from "react";
-import { TableCommandMenu } from "@/modules/commands/menus/data-table-menu.client";
+import { FloatingCommandMenu } from "@/modules/commands/menus/floating-menu.client";
 import { TableBottombar, TableFooter } from "@/modules/data-tables/components/footer";
 import { Table } from "@/modules/data-tables/components/table";
 import type { TableMeta } from "@/modules/data-tables/entry";
@@ -24,7 +24,16 @@ export function DataTable<TData extends { id: string }>(props: ComponentProps<ty
       </div>
 
       <TableBottombar table={table} />
-      {meta.commands && <TableCommandMenu table={table} />}
+
+      {meta.commands && (
+        <FloatingCommandMenu
+          data={meta.selectedData}
+          commands={meta.commands}
+          meta={meta}
+          state={meta.selectedData?.length ? "open" : "closed"}
+          onSuccess={() => table.resetRowSelection()}
+        />
+      )}
     </div>
   );
 }

package/src/modules/data-tables/tables/inline-table/components/cells/common.tsx

@@ -6,7 +6,7 @@ export function TableInlineCell({ className, ...props }: React.ComponentProps<ty
   return (
     <TableCell
       className={cn(
-        "focus-within:bg-accent focus-within:text-accent-foreground h-9 border-l p-0 align-middle first:border-0 [&:has([role=checkbox])]:pr-0",
+        "h-8 border-l p-0 align-middle first:border-0 focus-within:bg-accent focus-within:text-accent-foreground [&:has([role=checkbox])]:pr-0",
         className,
       )}
       {...props}

package/src/modules/data-tables/tables/inline-table/components/cells/drag-handle.client.tsx

@@ -34,7 +34,7 @@ export function TableDragHandle<TData, TValue>({
         className={cn("h-full w-8 rounded-none border-none", className)}
         disabled={disabled}
       >
-        <GripIcon className="fill-muted size-4" />
+        <GripIcon className="size-4 fill-muted" />
       </Button>
     </TableInlineCell>
   );

package/src/modules/data-tables/tables/inline-table/components/cells/read-only.tsx

@@ -9,7 +9,7 @@ export function InlineDataTableReadOnly({
   return (
     <span
       {...props}
-      className={cn("bg-muted/50 flex h-full w-full items-center truncate px-3", className)}
+      className={cn("flex h-full w-full items-center truncate bg-muted/50 px-3", className)}
     >
       {children}
     </span>

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

@@ -2,7 +2,7 @@
 
 import type { ComponentProps } from "react";
 import { HotkeysProvider } from "react-hotkeys-hook";
-import { TableCommandMenu } from "@/modules/commands/menus/data-table-menu.client";
+import { FloatingCommandMenu } from "@/modules/commands/menus/floating-menu.client";
 import { TableBottombar, TableFooter } from "@/modules/data-tables/components/footer";
 import { Table } from "@/modules/data-tables/components/table";
 import type { TableMeta } from "@/modules/data-tables/entry";
@@ -35,7 +35,16 @@ export function InlineTable<TData extends { id: string }>({
         </div>
 
         <TableBottombar table={table} />
-        {meta.commands && <TableCommandMenu table={table} />}
+
+        {meta.commands && (
+          <FloatingCommandMenu
+            data={meta.selectedData}
+            commands={meta.commands}
+            meta={meta}
+            state={meta.selectedData?.length ? "open" : "closed"}
+            onSuccess={() => table.resetRowSelection()}
+          />
+        )}
       </div>
     </InlineTableProvider>
   );

package/src/modules/inline-edit/components/combobox-dropdown.client.tsx

@@ -40,6 +40,10 @@ export function InlineComboboxDropdown<
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   const initialSelectedItem = props.items.find((item) => item.id === initialValue);

package/src/modules/inline-edit/components/combobox.client.tsx

@@ -26,6 +26,10 @@ export function InlineCombobox<TValue, Required extends boolean>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

package/src/modules/inline-edit/components/date-input.client.tsx

@@ -4,9 +4,9 @@ import { format } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import React, { type ComponentProps } from "react";
 import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
+import { Calendar } from "@/components/ui/calendar.client";
 import { Input } from "@/components/ui/input";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover.client";
 import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
@@ -33,6 +33,10 @@ export function InlineDateInput<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   const [stringDate, setStringDate] = React.useState<string>(
@@ -79,7 +83,7 @@ export function InlineDateInput<Required extends boolean = false>({
             tabIndex={-1}
             disabled={!isAllowed}
             className={cn(
-              "absolute bottom-0 right-0 top-0 opacity-50",
+              "absolute top-0 right-0 bottom-0 opacity-50",
               !value && "text-muted-foreground",
             )}
           >

package/src/modules/inline-edit/components/date-picker.client.tsx

@@ -3,8 +3,8 @@
 import { CalendarIcon } from "lucide-react";
 import React, { type ComponentProps } from "react";
 import { Button } from "@/components/ui/button";
-import { Calendar } from "@/components/ui/calendar";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Calendar } from "@/components/ui/calendar.client";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover.client";
 import { cn } from "@/lib/utils/cn";
 import { formatDate } from "@/lib/utils/format";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
@@ -33,6 +33,10 @@ export function InlineDatePicker<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

package/src/modules/inline-edit/components/date-time.client.tsx

@@ -1,7 +1,8 @@
 "use client";
 
+import { format } from "date-fns";
 import type { ComponentProps } from "react";
-import { DateTimeInput } from "@/components/ui/input-date-time";
+import { DateTimeInput } from "@/components/ui/input-date-time.client";
 import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
@@ -19,12 +20,25 @@ export function InlineDateTimeInput<Required extends boolean = false>({
 }: ComponentProps<typeof DateTimeInput> &
   useInlineEditOptions<Date, Required> &
   InlineEditVariantsProps) {
-  const { value, handleChange, handleBlur, status, isAllowed } = useInlineEdit({
+  const { value, handleChange, handleBlur, status, isAllowed } = useInlineEdit<
+    string,
+    Date,
+    Required
+  >({
     initialValue,
     action,
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) =>
+        (value instanceof Date
+          ? format(value, "yyyy-MM-dd'T'HH:mm")
+          : typeof value === "string"
+            ? value
+            : undefined) as string,
+      encode: (value) => (value ? new Date(value) : null) as Date,
+    },
   });
 
   return (

package/src/modules/inline-edit/components/editor.client.tsx

@@ -31,6 +31,10 @@ export function InlineEditor<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

package/src/modules/inline-edit/components/input-recipient.client.tsx

@@ -36,6 +36,10 @@ export function InlineRecipientInput<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

package/src/modules/inline-edit/components/input-toggle.client.tsx

@@ -31,6 +31,10 @@ export function InlineStringInputToggle<Required extends boolean>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   function handleToggle() {
@@ -51,7 +55,7 @@ export function InlineStringInputToggle<Required extends boolean>({
         disabled={isDisabled}
         onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
         onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
-        className={cn("border-border/70 hover:border-border w-full", className)}
+        className={cn("w-full border-border/70 hover:border-border", className)}
       />
 
       <Button
@@ -59,7 +63,7 @@ export function InlineStringInputToggle<Required extends boolean>({
         onClick={handleToggle}
         tabIndex={-1}
         className={cn(
-          "absolute bottom-0 right-0 top-0 opacity-50",
+          "absolute top-0 right-0 bottom-0 opacity-50",
           !value && "text-muted-foreground",
         )}
       >

package/src/modules/inline-edit/components/input.client.tsx

@@ -33,6 +33,10 @@ export function InlineStringInput<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (
@@ -44,7 +48,7 @@ export function InlineStringInput<Required extends boolean = false>({
       onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
       onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
       className={cn(
-        "border-border/70 hover:border-border w-full",
+        "w-full border-border/70 hover:border-border",
         inlineEditVariants({ variant, status }),
         className,
       )}
@@ -75,6 +79,10 @@ export function InlineNumberInput<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (
@@ -86,7 +94,7 @@ export function InlineNumberInput<Required extends boolean = false>({
       onChange={(e) => handleChange(parseValueAsNumber(e.target.valueAsNumber))}
       onBlur={(e) => handleBlur(parseValueAsNumber(e.target.valueAsNumber))}
       className={cn(
-        "border-border/70 hover:border-border w-full",
+        "w-full border-border/70 hover:border-border",
         inlineEditVariants({ variant, status }),
         className,
       )}
@@ -114,6 +122,10 @@ export function InlineDecimalInput({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (
@@ -125,7 +137,7 @@ export function InlineDecimalInput({
       onChange={(e) => handleChange(e.target.value ? e.target.value : null)}
       onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}
       className={cn(
-        "border-border/70 hover:border-border w-full",
+        "w-full border-border/70 hover:border-border",
         inlineEditVariants({ variant, status }),
         className,
       )}