@tulip-systems/core 0.5.16 → 0.6.1

package/src/modules/data-tables/strategies/infinite/strategy.ts

@@ -1,9 +1,9 @@
 "use client";
 
-import { PaginationState, Updater } from "@tanstack/react-table";
+import type { PaginationState, Updater } from "@tanstack/react-table";
 import { useQueryStates } from "nuqs";
 import { tableSearchParams } from "../../entry";
-import { TableStrategy } from "../../lib/types";
+import type { TableStrategy } from "../../lib/types";
 import { handleSortingChange } from "../helpers/sorting";
 
 export interface UseInfiniteStrategyInput {

package/src/modules/data-tables/strategies/pagination/components.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import type { Table } from "@tanstack/react-table";
+import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, XIcon } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -8,8 +10,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select.client";
-import { Table } from "@tanstack/react-table";
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, XIcon } from "lucide-react";
 
 export function PaginationTableFooter<TData extends { id: string }>({
   table,

package/src/modules/data-tables/strategies/pagination/strategy.ts

@@ -1,9 +1,9 @@
 "use client";
 
-import { PaginationState, Updater } from "@tanstack/react-table";
+import type { PaginationState, Updater } from "@tanstack/react-table";
 import { useQueryStates } from "nuqs";
 import { tableSearchParams } from "../../entry";
-import { TableStrategy } from "../../lib/types";
+import type { TableStrategy } from "../../lib/types";
 import { handleSortingChange } from "../helpers/sorting";
 
 export type UsePaginationStrategyInput = {

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

@@ -1,10 +1,10 @@
 "use client";
 
+import { flexRender, type Table } from "@tanstack/react-table";
+import { Fragment } from "react/jsx-runtime";
 import { Allowed } from "@/modules/auth/components/allowed.client";
 import { TableBody, TableCell, TableRow } from "@/modules/data-tables/components/table";
-import { flexRender, Table } from "@tanstack/react-table";
-import { Fragment } from "react/jsx-runtime";
-import { TableColumnDef } from "../../../lib/types";
+import type { TableColumnDef } from "../../../lib/types";
 import { DataTableRow } from "./row";
 
 type DataTableBodyProps<TData extends { id: string }> = {

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { Table } from "@tanstack/react-table";
+import type { Table } from "@tanstack/react-table";
 import { TableHeader, TableHeaderCell, TableHeaderRow } from "../../../components/header";
 
 export function DataTableHeader<TData extends { id: string }>({ table }: { table: Table<TData> }) {

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

@@ -1,12 +1,12 @@
+import type { Row, Table } from "@tanstack/react-table";
+import type * as React from "react";
 import {
   ContextCommandMenu,
   ContextCommandMenuContent,
   ContextCommandMenuTrigger,
 } from "@/modules/commands/menus/context-menu.client";
 import { TableRow } from "@/modules/data-tables/components/table";
-import { Row, Table } from "@tanstack/react-table";
-import * as React from "react";
-import { TableMeta } from "../../../lib/types";
+import type { TableMeta } from "../../../lib/types";
 
 export type DataTableRowProps<TData extends { id: string }> = React.ComponentProps<
   typeof TableRow

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

@@ -1,11 +1,11 @@
 "use client";
 
-import { TableCommandMenu } from "@/modules/commands/menus/data-table-menu.client";
+import type { ComponentProps } from "react";
+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 { TableMeta } from "@/modules/data-tables/entry";
+import type { TableMeta } from "@/modules/data-tables/entry";
 import { useTable } from "@/modules/data-tables/hooks/use-table.client";
-import { ComponentProps } from "react";
 import { DataTableBody } from "./body";
 import { DataTableHeader } from "./header";
 
@@ -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/body.tsx

@@ -1,11 +1,9 @@
 "use client";
 
-import { Allowed } from "@/modules/auth/components/allowed.client";
-import { TableBody, TableCell, TableRow } from "@/modules/data-tables/components/table";
 import {
   closestCenter,
   DndContext,
-  DragEndEvent,
+  type DragEndEvent,
   KeyboardSensor,
   PointerSensor,
   useDroppable,
@@ -18,9 +16,11 @@ import {
   SortableContext,
   sortableKeyboardCoordinates,
 } from "@dnd-kit/sortable";
-import { flexRender, Table } from "@tanstack/react-table";
+import { flexRender, type Table } from "@tanstack/react-table";
 import { Fragment } from "react/jsx-runtime";
-import { TableColumnDef } from "../../../lib/types";
+import { Allowed } from "@/modules/auth/components/allowed.client";
+import { TableBody, TableCell, TableRow } from "@/modules/data-tables/components/table";
+import type { TableColumnDef } from "../../../lib/types";
 import { useInlineTableContext } from "../hooks/context.client";
 import { useInlineDataTableHotkeys } from "../hooks/use-hotkeys.client";
 import { InlineTableRow } from "./row.client";

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

@@ -1,5 +1,5 @@
+import type * as React from "react";
 import { cn } from "@/lib/utils/cn";
-import * as React from "react";
 import { TableCell } from "../../../../components/table";
 
 export function TableInlineCell({ className, ...props }: React.ComponentProps<typeof TableCell>) {

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

@@ -1,10 +1,10 @@
-import { Button } from "@/components/ui/button";
 import { useSortable } from "@dnd-kit/sortable";
-import { CellContext } from "@tanstack/react-table";
+import type { CellContext } from "@tanstack/react-table";
 import { GripIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/entry";
 import { createTableCell } from "../../../../lib/helpers/create-column";
 import { TableInlineCell } from "./common";
-import { cn } from "@/lib/entry";
 
 /**
  * Create a new column with the drag handle
@@ -12,9 +12,13 @@ import { cn } from "@/lib/entry";
 export type TableDragHandleProps<TData, TValue> = Pick<CellContext<TData, TValue>, "row"> & {
   className?: string;
   disabled?: boolean;
-}
+};
 
-export function TableDragHandle<TData, TValue>({ row, className, disabled }:  TableDragHandleProps<TData, TValue>) {
+export function TableDragHandle<TData, TValue>({
+  row,
+  className,
+  disabled,
+}: TableDragHandleProps<TData, TValue>) {
   const rowId = (row.original as { id: string }).id;
 
   const { attributes, listeners } = useSortable({ id: rowId });

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

@@ -1,5 +1,5 @@
+import type React from "react";
 import { cn } from "@/lib/utils/cn";
-import React from "react";
 
 export function InlineDataTableReadOnly({
   className,

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

@@ -1,4 +1,4 @@
-import { Table } from "@tanstack/react-table";
+import type { Table } from "@tanstack/react-table";
 import { TableHeader, TableHeaderCell, TableHeaderRow } from "../../../components/header";
 
 export function InlineTableHeader<TData extends { id: string }>({

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

@@ -1,5 +1,9 @@
 "use client";
 
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import type { Row, Table } from "@tanstack/react-table";
+import type * as React from "react";
 import {
   ContextCommandMenu,
   ContextCommandMenuContent,
@@ -7,11 +11,7 @@ import {
 } from "@/modules/commands/entry.client";
 import { TableRow } from "@/modules/data-tables/components/table";
 import { InlineEditProvider } from "@/modules/inline-edit/entry.client";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
-import { type Row, type Table } from "@tanstack/react-table";
-import * as React from "react";
-import { TableMeta } from "../../../lib/types";
+import type { TableMeta } from "../../../lib/types";
 
 export type InlineTableRowProps<TData extends { id: string }> =
   React.HTMLAttributes<HTMLTableRowElement> & {

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

@@ -1,12 +1,12 @@
 "use client";
 
-import { TableCommandMenu } from "@/modules/commands/menus/data-table-menu.client";
+import type { ComponentProps } from "react";
+import { HotkeysProvider } from "react-hotkeys-hook";
+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 { TableMeta } from "@/modules/data-tables/entry";
+import type { TableMeta } from "@/modules/data-tables/entry";
 import { useTable } from "@/modules/data-tables/hooks/use-table.client";
-import { ComponentProps } from "react";
-import { HotkeysProvider } from "react-hotkeys-hook";
 import { InlineTableProvider } from "../hooks/context.client";
 import { InlineTableBody } from "./body";
 import { InlineTableHeader } from "./header";
@@ -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/data-tables/tables/inline-table/hooks/context.client.tsx

@@ -1,10 +1,10 @@
 "use client";
 
+import type { VisibilityState } from "@tanstack/react-table";
+import React, { type PropsWithChildren } from "react";
 import { arrayMove } from "@/lib/entry";
 import { useAction } from "@/lib/hooks/use-action";
 import { useTableConfigContext } from "@/modules/data-tables/entry.client";
-import { VisibilityState } from "@tanstack/react-table";
-import React, { PropsWithChildren } from "react";
 
 /**
  * Move row method as meta

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

@@ -2,12 +2,12 @@
 
 import {
   ComboboxDropdown,
-  ComboboxDropdownItem,
+  type ComboboxDropdownItem,
   type ComboboxDropdownProps,
 } from "@/components/ui/combobox-dropdown.client";
 import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
 
 export type InlineEditComboboxDropdownProps<
   TValue extends ComboboxDropdownItem,
@@ -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

@@ -1,7 +1,7 @@
 "use client";
 
-import { Combobox, ComboboxProps } from "@/components/ui/combobox.client";
-import { useInlineEdit, useInlineEditOptions } from "../hooks/use-inline.client";
+import { Combobox, type ComboboxProps } from "@/components/ui/combobox.client";
+import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 
 export type InlineComboboxProps<TValue, Required extends boolean = false> = useInlineEditOptions<
   string,
@@ -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

@@ -1,15 +1,15 @@
 "use client";
 
+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 { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { cn } from "@/lib/utils/cn";
-import { format } from "date-fns";
-import { CalendarIcon } from "lucide-react";
-import React, { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
 
 const formatDate = (value: Date) => format(value, "dd/MM/yyyy");
 const parseDate = (value: string) => new Date(value.split("/").reverse().join("-"));
@@ -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>(

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

@@ -1,14 +1,14 @@
 "use client";
 
+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 { cn } from "@/lib/utils/cn";
 import { formatDate } from "@/lib/utils/format";
-import { CalendarIcon } from "lucide-react";
-import React, { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
 
 type InlineEditDatePickerProps<Required extends boolean> = ComponentProps<typeof Button> &
   useInlineEditOptions<Date, Required> &
@@ -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,10 +1,11 @@
 "use client";
 
+import { format } from "date-fns";
+import type { ComponentProps } from "react";
 import { DateTimeInput } from "@/components/ui/input-date-time";
 import { cn } from "@/lib/utils/cn";
-import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
 
 export function InlineDateTimeInput<Required extends boolean = false>({
   initialValue,
@@ -16,13 +17,28 @@ export function InlineDateTimeInput<Required extends boolean = false>({
   isRequired,
   disabled,
   ...props
-}: ComponentProps<typeof DateTimeInput> & useInlineEditOptions<Date, Required> & InlineEditVariantsProps) {
-  const { value, handleChange, handleBlur, status, isAllowed } = useInlineEdit({
+}: ComponentProps<typeof DateTimeInput> &
+  useInlineEditOptions<Date, Required> &
+  InlineEditVariantsProps) {
+  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

@@ -1,10 +1,10 @@
 "use client";
 
-import { Editor, EditorProps } from "@/components/editor/components/editor.client";
-import { EditorJSONContent } from "@/components/editor/lib/types";
+import { Editor, type EditorProps } from "@/components/editor/components/editor.client";
+import type { EditorJSONContent } from "@/components/editor/lib/types";
 import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
 
 export type InlineEditorProps<Required extends boolean = false> = useInlineEditOptions<
   EditorJSONContent,
@@ -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

@@ -1,10 +1,10 @@
 "use client";
 
-import { Contact, RecipientInput } from "@/components/ui/input-recipient";
+import type { ComponentProps } from "react";
+import { type Contact, RecipientInput } from "@/components/ui/input-recipient";
 import { cn } from "@/lib/utils/cn";
-import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
 
 type InlineRecipientInputProps<Required extends boolean = false> = Omit<
   ComponentProps<typeof RecipientInput>,
@@ -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

@@ -1,11 +1,11 @@
 "use client";
 
+import { CheckIcon, XIcon } from "lucide-react";
+import { type ComponentProps, useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/entry";
-import { CheckIcon, XIcon } from "lucide-react";
-import { ComponentProps, useState } from "react";
-import { useInlineEdit, useInlineEditOptions } from "../hooks/use-inline.client";
+import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 
 type InlineStringInputToggleProps<Required extends boolean = false> = Omit<
   ComponentProps<typeof Input>,
@@ -31,6 +31,10 @@ export function InlineStringInputToggle<Required extends boolean>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   function handleToggle() {

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

@@ -1,10 +1,10 @@
 "use client";
 
+import type { ComponentProps } from "react";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils/cn";
-import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
 
 type InlineEditInputProps<TValue, Required extends boolean = false> = Omit<
   ComponentProps<typeof Input>,
@@ -33,6 +33,10 @@ export function InlineStringInput<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (
@@ -56,7 +60,7 @@ export function InlineStringInput<Required extends boolean = false>({
  * The inline edit number input component.
  */
 const parseValueAsNumber = (valueAsNumber: number): number | null =>
-  !isNaN(Number(valueAsNumber)) ? valueAsNumber : null;
+  !Number.isNaN(Number(valueAsNumber)) ? valueAsNumber : null;
 
 export function InlineNumberInput<Required extends boolean = false>({
   initialValue,
@@ -75,6 +79,10 @@ export function InlineNumberInput<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (
@@ -114,6 +122,10 @@ export function InlineDecimalInput({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

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

@@ -1,5 +1,12 @@
 "use client";
 
+import type {
+  SelectContentProps,
+  SelectItemProps,
+  SelectProps,
+  SelectTriggerProps,
+  SelectValueProps,
+} from "@radix-ui/react-select";
 import {
   Select,
   SelectContent,
@@ -9,15 +16,8 @@ import {
 } from "@/components/ui/select.client";
 import { useIndicator } from "@/lib/entry.client";
 import { cn } from "@/lib/utils/cn";
-import type {
-  SelectContentProps,
-  SelectItemProps,
-  SelectProps,
-  SelectTriggerProps,
-  SelectValueProps,
-} from "@radix-ui/react-select";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
-import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
+import { type InlineEditVariantsProps, inlineEditVariants } from "../lib/variants";
 
 export function InlineSelect<Required extends boolean = false>({
   initialValue,
@@ -34,6 +34,10 @@ export function InlineSelect<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

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

@@ -1,7 +1,7 @@
 "use client";
 
+import type { SwitchProps } from "@radix-ui/react-switch";
 import { Switch } from "@/components/ui/switch";
-import { type SwitchProps } from "@radix-ui/react-switch";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 
 export function InlineSwitch<Required extends boolean = false>({
@@ -19,6 +19,10 @@ export function InlineSwitch<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (

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

@@ -1,8 +1,8 @@
 "use client";
 
+import type React from "react";
 import { Toggle } from "@/components/ui/toggle";
 import { cn } from "@/lib/utils/cn";
-import type React from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 
 export type InlineEditToggleProps<Required extends boolean = false> =
@@ -24,6 +24,10 @@ export function InlineToggle<Required extends boolean = false>({
     permission,
     updateStrategy,
     isRequired,
+    parser: {
+      decode: (value) => value,
+      encode: (value) => value,
+    },
   });
 
   return (