@tulip-systems/core 0.3.0 → 0.4.1

package/dist/modules/data-tables/tables/inline-table/hooks/context.client.mjs

@@ -0,0 +1,58 @@
+"use client";
+
+import { useAction } from "../../../../../lib/hooks/use-action.mjs";
+import { arrayMove } from "../../../../../lib/utils/array-move.mjs";
+import { useTableConfigContext } from "../../../hooks/use-context.client.mjs";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/modules/data-tables/tables/inline-table/hooks/context.client.tsx
+/**
+* Inline form table context
+*/
+const InlineTableContext = React.createContext({});
+/**
+* Inline form table context hook
+*/
+function useInlineTableContext() {
+	const context = React.useContext(InlineTableContext);
+	if (!context) throw new Error("InlineTableContext not found!");
+	return context;
+}
+/**
+* Inline form table context provider
+*/
+function InlineTableProvider({ children, disabledColumns, moveRowAction }) {
+	const { queryData, setData } = useTableConfigContext();
+	const moveRowMutation = useAction({
+		mutationFn: async (params) => {
+			if (!moveRowAction) return;
+			await moveRowAction(params);
+		},
+		onMutate: (params) => {
+			if (!moveRowAction) return;
+			setData((prev) => arrayMove(prev, params));
+		},
+		onError: () => {
+			if (!moveRowAction) return;
+			setData(queryData);
+		}
+	});
+	return /* @__PURE__ */ jsx(InlineTableContext.Provider, {
+		value: {
+			disabledColumns,
+			...moveRowAction ? {
+				isDraggable: true,
+				moveRow: moveRowMutation.mutate
+			} : {
+				isDraggable: false,
+				moveRow: void 0
+			}
+		},
+		children
+	});
+}
+
+//#endregion
+export { InlineTableProvider, useInlineTableContext };
+//# sourceMappingURL=context.client.mjs.map

package/dist/modules/data-tables/tables/inline-table/hooks/context.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.client.mjs","names":[],"sources":["../../../../../../src/modules/data-tables/tables/inline-table/hooks/context.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { arrayMove } from \"@/lib/entry\";\nimport { useAction } from \"@/lib/hooks/use-action\";\nimport { useTableConfigContext } from \"@/modules/data-tables/entry.client\";\nimport { VisibilityState } from \"@tanstack/react-table\";\nimport React, { PropsWithChildren } from \"react\";\n\n/**\n * Move row method as meta\n */\ntype MoveRowMethod =\n  | {\n      isDraggable: false;\n      moveRow: undefined;\n    }\n  | {\n      isDraggable: true;\n      moveRow: (params: { fromIndex: number; toIndex: number }) => void;\n    };\n\n/**\n * Inline form table context value\n */\nexport type InlineTableContextValue = MoveRowMethod & {\n  disabledColumns?: VisibilityState;\n  // setData: React.Dispatch<React.SetStateAction<TData[]>>;\n};\n\n/**\n * Inline form table context\n */\nconst InlineTableContext = React.createContext({} as InlineTableContextValue);\n\n/**\n * Inline form table context hook\n */\nexport function useInlineTableContext() {\n  const context = React.useContext(InlineTableContext) as InlineTableContextValue;\n  if (!context) throw new Error(\"InlineTableContext not found!\");\n  return context;\n}\n\n/**\n * Inline form table context provider\n */\n\nexport function InlineTableProvider<TData extends { id: string }>({\n  children,\n  disabledColumns,\n  moveRowAction,\n}: PropsWithChildren<{\n  disabledColumns?: VisibilityState;\n  moveRowAction?: (input: { fromIndex: number; toIndex: number }) => Promise<unknown>;\n}>) {\n  const { queryData, setData } = useTableConfigContext<TData>();\n\n  const moveRowMutation = useAction({\n    mutationFn: async (params: { fromIndex: number; toIndex: number }) => {\n      if (!moveRowAction) return;\n      await moveRowAction(params);\n    },\n    onMutate: (params: { fromIndex: number; toIndex: number }) => {\n      if (!moveRowAction) return;\n      setData((prev) => arrayMove(prev, params));\n    },\n    onError: () => {\n      if (!moveRowAction) return;\n      setData(queryData);\n    },\n  });\n\n  return (\n    <InlineTableContext.Provider\n      value={{\n        disabledColumns,\n        ...(moveRowAction\n          ? { isDraggable: true, moveRow: moveRowMutation.mutate }\n          : { isDraggable: false, moveRow: undefined }),\n      }}\n    >\n      {children}\n    </InlineTableContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAgCA,MAAM,qBAAqB,MAAM,cAAc,EAAE,CAA4B;;;;AAK7E,SAAgB,wBAAwB;CACtC,MAAM,UAAU,MAAM,WAAW,mBAAmB;AACpD,KAAI,CAAC,QAAS,OAAM,IAAI,MAAM,gCAAgC;AAC9D,QAAO;;;;;AAOT,SAAgB,oBAAkD,EAChE,UACA,iBACA,iBAIE;CACF,MAAM,EAAE,WAAW,YAAY,uBAA8B;CAE7D,MAAM,kBAAkB,UAAU;EAChC,YAAY,OAAO,WAAmD;AACpE,OAAI,CAAC,cAAe;AACpB,SAAM,cAAc,OAAO;;EAE7B,WAAW,WAAmD;AAC5D,OAAI,CAAC,cAAe;AACpB,YAAS,SAAS,UAAU,MAAM,OAAO,CAAC;;EAE5C,eAAe;AACb,OAAI,CAAC,cAAe;AACpB,WAAQ,UAAU;;EAErB,CAAC;AAEF,QACE,oBAAC,mBAAmB;EAClB,OAAO;GACL;GACA,GAAI,gBACA;IAAE,aAAa;IAAM,SAAS,gBAAgB;IAAQ,GACtD;IAAE,aAAa;IAAO,SAAS;IAAW;GAC/C;EAEA;GAC2B"}

package/dist/modules/data-tables/tables/inline-table/hooks/use-hotkeys.client.mjs

@@ -0,0 +1,27 @@
+import { useHotkeys } from "react-hotkeys-hook";
+
+//#region src/modules/data-tables/tables/inline-table/hooks/use-hotkeys.client.ts
+function useInlineDataTableHotkeys() {
+	useHotkeys(["mod+arrowleft", "mod+arrowright"], (e, handler) => {
+		const currentCell = e.target?.closest("td");
+		((handler.keys?.includes("left") ? currentCell?.previousElementSibling : currentCell?.nextElementSibling)?.querySelector("[data-input]"))?.focus();
+	}, {
+		scopes: "inline-data-table",
+		enableOnFormTags: true,
+		preventDefault: true
+	});
+	useHotkeys(["mod+arrowup", "mod+arrowdown"], (e, handler) => {
+		const currentInput = e.target;
+		const columnId = currentInput?.closest("td")?.getAttribute("data-column-id");
+		const currentRow = currentInput?.closest("tr");
+		((handler.keys?.includes("up") ? currentRow?.previousElementSibling : currentRow?.nextElementSibling)?.querySelector(`td[data-column-id="${columnId}"]`)?.querySelector("[data-input]"))?.focus();
+	}, {
+		scopes: "inline-data-table",
+		enableOnFormTags: true,
+		preventDefault: true
+	});
+}
+
+//#endregion
+export { useInlineDataTableHotkeys };
+//# sourceMappingURL=use-hotkeys.client.mjs.map

package/dist/modules/data-tables/tables/inline-table/hooks/use-hotkeys.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hotkeys.client.mjs","names":[],"sources":["../../../../../../src/modules/data-tables/tables/inline-table/hooks/use-hotkeys.client.ts"],"sourcesContent":["import { useHotkeys } from \"react-hotkeys-hook\";\n\nexport function useInlineDataTableHotkeys() {\n  useHotkeys(\n    [\"mod+arrowleft\", \"mod+arrowright\"],\n    (e, handler) => {\n      const currentInput = e.target as HTMLInputElement | null;\n      const currentCell = currentInput?.closest(\"td\");\n\n      const cellToFocus = handler.keys?.includes(\"left\")\n        ? currentCell?.previousElementSibling\n        : currentCell?.nextElementSibling;\n\n      const nextCell = cellToFocus?.querySelector(\"[data-input]\") as HTMLInputElement | null;\n\n      nextCell?.focus();\n    },\n    {\n      scopes: \"inline-data-table\",\n      enableOnFormTags: true,\n      preventDefault: true,\n    },\n  );\n\n  useHotkeys(\n    [\"mod+arrowup\", \"mod+arrowdown\"],\n    (e, handler) => {\n      const currentInput = e.target as HTMLInputElement | null;\n      const columnId = currentInput?.closest(\"td\")?.getAttribute(\"data-column-id\");\n      const currentRow = currentInput?.closest(\"tr\");\n\n      const nextRow = handler.keys?.includes(\"up\")\n        ? currentRow?.previousElementSibling\n        : currentRow?.nextElementSibling;\n\n      const nextCell = nextRow\n        ?.querySelector(`td[data-column-id=\"${columnId}\"]`)\n        ?.querySelector(\"[data-input]\") as HTMLInputElement | null;\n\n      nextCell?.focus();\n    },\n    {\n      scopes: \"inline-data-table\",\n      enableOnFormTags: true,\n      preventDefault: true,\n    },\n  );\n\n  // useHotkeys(\n  //   [\"mod+shift+arrowdown\", \"mod+shift+arrowup\"],\n  //   (e, handler) => {\n  //     if (!meta.isDraggable) return;\n\n  //     const currentInput = e.target as HTMLInputElement | null;\n  //     const rowIndex = currentInput?.closest(\"td\")?.getAttribute(\"data-row-index\");\n\n  //     const fromIndex = Number(rowIndex);\n  //     const toIndex = Number(rowIndex) + (handler.keys?.includes(\"down\") ? 1 : -1);\n\n  //     meta.moveRow({ fromIndex, toIndex });\n  //   },\n  //   {\n  //     scopes: \"inline-data-table\",\n  //     enableOnFormTags: true,\n  //     preventDefault: true,\n  //     enabled: meta.isDraggable,\n  //   },\n  // );\n\n  // useHotkeys(\n  //   \"mod+d\",\n  //   (e) => {\n  //     if (!meta.isDeletable) return;\n\n  //     const currentInput = e.target as HTMLInputElement | null;\n  //     const currentCell = currentInput?.closest(\"td\");\n  //     const currentRow = currentInput?.closest(\"tr\");\n\n  //     const columnId = currentCell?.getAttribute(\"data-column-id\");\n  //     const rowId = currentRow?.getAttribute(\"data-row-id\");\n\n  //     if (rowId) meta.deleteRow({ id: rowId });\n\n  //     // Focus on the next cell\n  //     const nextRow = currentRow?.nextElementSibling;\n  //     const nextCell = nextRow\n  //       ?.querySelector(`td[data-column-id=\"${columnId}\"]`)\n  //       ?.querySelector(\"[data-input]\") as HTMLInputElement | null;\n\n  //     nextCell?.focus();\n  //   },\n  //   {\n  //     scopes: \"inline-data-table\",\n  //     enableOnFormTags: true,\n  //     preventDefault: true,\n  //     enabled: meta.isDeletable,\n  //   },\n  // );\n\n  // useHotkeys(\n  //   [\"mod+i\", \"mod+u\"],\n  //   (e, handler) => {\n  //     if (!meta.isCreatable) return;\n\n  //     const currentInput = e.target as HTMLInputElement | null;\n  //     const rowIndex = currentInput?.closest(\"td\")?.getAttribute(\"data-row-index\");\n  //     const index = Number(rowIndex) + (handler.keys?.includes(\"i\") ? 1 : 0);\n  //     rowIndex && meta.addRow({ index });\n  //   },\n  //   {\n  //     scopes: \"inline-data-table\",\n  //     enableOnFormTags: true,\n  //     preventDefault: true,\n  //     enabled: meta.isCreatable,\n  //   },\n  // );\n}\n"],"mappings":";;;AAEA,SAAgB,4BAA4B;AAC1C,YACE,CAAC,iBAAiB,iBAAiB,GAClC,GAAG,YAAY;EAEd,MAAM,cADe,EAAE,QACW,QAAQ,KAAK;AAQ/C,IANoB,QAAQ,MAAM,SAAS,OAAO,GAC9C,aAAa,yBACb,aAAa,qBAEa,cAAc,eAAe,GAEjD,OAAO;IAEnB;EACE,QAAQ;EACR,kBAAkB;EAClB,gBAAgB;EACjB,CACF;AAED,YACE,CAAC,eAAe,gBAAgB,GAC/B,GAAG,YAAY;EACd,MAAM,eAAe,EAAE;EACvB,MAAM,WAAW,cAAc,QAAQ,KAAK,EAAE,aAAa,iBAAiB;EAC5E,MAAM,aAAa,cAAc,QAAQ,KAAK;AAU9C,IARgB,QAAQ,MAAM,SAAS,KAAK,GACxC,YAAY,yBACZ,YAAY,qBAGZ,cAAc,sBAAsB,SAAS,IAAI,EACjD,cAAc,eAAe,GAEvB,OAAO;IAEnB;EACE,QAAQ;EACR,kBAAkB;EAClB,gBAAgB;EACjB,CACF"}

package/dist/modules/data-tables/tables/inline-table/hooks/use-input.client.d.mts

@@ -0,0 +1,17 @@
+import { Permission } from "../../../../auth/lib/permissions.mjs";
+import "../../../../../auth.mjs";
+import { InlineEditSchema } from "../../../../inline-edit/lib/validators.mjs";
+import "../../../../../inline-edit.mjs";
+import "react";
+import "client-only";
+import { CellContext } from "@tanstack/react-table";
+
+//#region src/modules/data-tables/tables/inline-table/hooks/use-input.client.d.ts
+type UseInlineDataTableInputParams<TData, TValue> = {
+  context: CellContext<TData, TValue>;
+  action: (params: InlineEditSchema<TValue>) => Promise<void> | void;
+  permission?: Permission;
+};
+//#endregion
+export { UseInlineDataTableInputParams };
+//# sourceMappingURL=use-input.client.d.mts.map

package/dist/modules/data-tables/tables/inline-table/hooks/use-input.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input.client.d.mts","names":[],"sources":["../../../../../../src/modules/data-tables/tables/inline-table/hooks/use-input.client.ts"],"sourcesContent":[],"mappings":";;;;;;;;;KAUY;WACD,YAAY,OAAO;mBACX,iBAAiB,YAAY;eACjC"}

package/dist/modules/data-tables/tables/inline-table/hooks/use-input.client.mjs

@@ -0,0 +1,53 @@
+import { useAction } from "../../../../../lib/hooks/use-action.mjs";
+import { usePermission } from "../../../../auth/hooks/use-permission.mjs";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import "client-only";
+
+//#region src/modules/data-tables/tables/inline-table/hooks/use-input.client.ts
+/**
+* Inline form table input
+*/
+function useInlineDataTableInput({ context, action, permission }) {
+	const initialValue = context.getValue();
+	const [value, setValue] = useState(initialValue);
+	useEffect(() => setValue(initialValue), [initialValue]);
+	const isAllowed = usePermission(permission).data?.success;
+	/**
+	* Update value mutation
+	*/
+	const { mutate } = useAction({
+		mutationFn: async (value$1) => {
+			if (initialValue === value$1) return;
+			const { id } = context.row.original;
+			await action({
+				id,
+				value: value$1
+			});
+		},
+		onError: () => {
+			setValue(initialValue);
+		}
+	});
+	/**
+	* Handle the update of the value.
+	*/
+	const handleUpdate = (value$1) => {
+		if (!isAllowed) {
+			toast.error("Je hebt geen toestemming om dit te bewerken");
+			return;
+		}
+		if (value$1 === initialValue) return;
+		return mutate(value$1);
+	};
+	return {
+		value,
+		setValue,
+		mutate: handleUpdate,
+		isAllowed
+	};
+}
+
+//#endregion
+export { useInlineDataTableInput };
+//# sourceMappingURL=use-input.client.mjs.map

package/dist/modules/data-tables/tables/inline-table/hooks/use-input.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input.client.mjs","names":["value"],"sources":["../../../../../../src/modules/data-tables/tables/inline-table/hooks/use-input.client.ts"],"sourcesContent":["import \"client-only\";\n\nimport { useAction } from \"@/lib/hooks/use-action\";\nimport { Permission } from \"@/modules/auth/entry\";\nimport { usePermission } from \"@/modules/auth/hooks/use-permission\";\nimport { InlineEditSchema } from \"@/modules/inline-edit/entry\";\nimport { type CellContext } from \"@tanstack/react-table\";\nimport { useEffect, useState } from \"react\";\nimport { toast } from \"sonner\";\n\nexport type UseInlineDataTableInputParams<TData, TValue> = {\n  context: CellContext<TData, TValue>;\n  action: (params: InlineEditSchema<TValue>) => Promise<void> | void;\n  permission?: Permission;\n};\n\n/**\n * Inline form table input\n */\nexport function useInlineDataTableInput<TData extends { id: string }, TValue>({\n  context,\n  action,\n  permission,\n}: UseInlineDataTableInputParams<TData, TValue>) {\n  const initialValue = context.getValue();\n\n  const [value, setValue] = useState(initialValue);\n\n  useEffect(() => setValue(initialValue), [initialValue]);\n\n  const permissionData = usePermission(permission);\n  const isAllowed = permissionData.data?.success;\n\n  /**\n   * Update value mutation\n   */\n  const { mutate } = useAction({\n    mutationFn: async (value: TValue) => {\n      if (initialValue === value) return;\n\n      const { id } = context.row.original as TData;\n      await action({ id, value });\n    },\n    onError: () => {\n      setValue(initialValue);\n    },\n  });\n\n  /**\n   * Handle the update of the value.\n   */\n  const handleUpdate = (value: TValue) => {\n    if (!isAllowed) {\n      toast.error(\"Je hebt geen toestemming om dit te bewerken\");\n      return;\n    }\n\n    // If the value is the same as the initial value, do nothing\n    if (value === initialValue) return;\n\n    return mutate(value);\n  };\n\n  return { value, setValue, mutate: handleUpdate, isAllowed };\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,wBAA8D,EAC5E,SACA,QACA,cAC+C;CAC/C,MAAM,eAAe,QAAQ,UAAU;CAEvC,MAAM,CAAC,OAAO,YAAY,SAAS,aAAa;AAEhD,iBAAgB,SAAS,aAAa,EAAE,CAAC,aAAa,CAAC;CAGvD,MAAM,YADiB,cAAc,WAAW,CACf,MAAM;;;;CAKvC,MAAM,EAAE,WAAW,UAAU;EAC3B,YAAY,OAAO,YAAkB;AACnC,OAAI,iBAAiBA,QAAO;GAE5B,MAAM,EAAE,OAAO,QAAQ,IAAI;AAC3B,SAAM,OAAO;IAAE;IAAI;IAAO,CAAC;;EAE7B,eAAe;AACb,YAAS,aAAa;;EAEzB,CAAC;;;;CAKF,MAAM,gBAAgB,YAAkB;AACtC,MAAI,CAAC,WAAW;AACd,SAAM,MAAM,8CAA8C;AAC1D;;AAIF,MAAIA,YAAU,aAAc;AAE5B,SAAO,OAAOA,QAAM;;AAGtB,QAAO;EAAE;EAAO;EAAU,QAAQ;EAAc;EAAW"}

package/dist/modules/inline-edit/components/combobox-dropdown.client.d.mts

@@ -0,0 +1,20 @@
+import { ComboboxDropdownItem, ComboboxDropdownProps } from "../../../components/ui/combobox-dropdown.client.mjs";
+import { useInlineEditOptions } from "../hooks/use-inline.client.mjs";
+import { InlineEditVariantsProps } from "../lib/variants.mjs";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
+
+//#region src/modules/inline-edit/components/combobox-dropdown.client.d.ts
+type InlineEditComboboxDropdownProps<TValue extends ComboboxDropdownItem> = useInlineEditOptions<string> & InlineEditVariantsProps & Omit<ComboboxDropdownProps<TValue>, "onSelect"> & {
+  onSelect?: ComboboxDropdownProps<TValue>["onSelect"];
+};
+declare function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
+  selectedItem,
+  variant,
+  className,
+  onSelect,
+  disabled,
+  ...props
+}: InlineEditComboboxDropdownProps<TValue>): react_jsx_runtime12.JSX.Element;
+//#endregion
+export { InlineComboboxDropdown, InlineEditComboboxDropdownProps };
+//# sourceMappingURL=combobox-dropdown.client.d.mts.map

package/dist/modules/inline-edit/components/combobox-dropdown.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-dropdown.client.d.mts","names":[],"sources":["../../../../src/modules/inline-edit/components/combobox-dropdown.client.tsx"],"sourcesContent":[],"mappings":";;;;;;KAWY,+CAA+C,wBACzD,+BACE,0BACA,KAAK,sBAAsB;aACd,sBAAsB;;AAJ3B,iBAOI,sBAP2B,CAAA,eAOW,oBAPX,CAAA,CAAA;EAAA,YAAA;EAAA,OAAA;EAAA,SAAA;EAAA,QAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAcxC,+BAdwC,CAcR,MAdQ,CAAA,CAAA,EAcD,mBAAA,CAAA,GAAA,CAAA,OAdC"}

package/dist/modules/inline-edit/components/combobox-dropdown.client.mjs

@@ -0,0 +1,28 @@
+"use client";
+
+import { cn } from "../../../lib/utils/cn.mjs";
+import { ComboboxDropdown } from "../../../components/ui/combobox-dropdown.client.mjs";
+import { useInlineEdit } from "../hooks/use-inline.client.mjs";
+import { inlineEditVariants } from "../lib/variants.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/inline-edit/components/combobox-dropdown.client.tsx
+function InlineComboboxDropdown({ selectedItem, variant, className, onSelect, disabled, ...props }) {
+	const { setValue, handleUpdate, isAllowed } = useInlineEdit(props);
+	const initialSelectedItem = props.items.find((item) => item.id === props.initialValue);
+	return /* @__PURE__ */ jsx(ComboboxDropdown, {
+		...props,
+		className: cn(inlineEditVariants({ variant }), className),
+		disabled: disabled || !isAllowed,
+		selectedItem: selectedItem ?? initialSelectedItem,
+		onSelect: (event) => {
+			setValue(event.id);
+			handleUpdate(event.id);
+			onSelect?.(event);
+		}
+	});
+}
+
+//#endregion
+export { InlineComboboxDropdown };
+//# sourceMappingURL=combobox-dropdown.client.mjs.map

package/dist/modules/inline-edit/components/combobox-dropdown.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-dropdown.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/combobox-dropdown.client.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ComboboxDropdown,\n  ComboboxDropdownItem,\n  type ComboboxDropdownProps,\n} from \"@/components/ui/combobox-dropdown.client\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { inlineEditVariants, InlineEditVariantsProps } from \"../lib/variants\";\n\nexport type InlineEditComboboxDropdownProps<TValue extends ComboboxDropdownItem> =\n  useInlineEditOptions<string> &\n    InlineEditVariantsProps &\n    Omit<ComboboxDropdownProps<TValue>, \"onSelect\"> & {\n      onSelect?: ComboboxDropdownProps<TValue>[\"onSelect\"];\n    };\n\nexport function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({\n  selectedItem,\n  variant,\n  className,\n  onSelect,\n  disabled,\n  ...props\n}: InlineEditComboboxDropdownProps<TValue>) {\n  const { setValue, handleUpdate, isAllowed } = useInlineEdit(props);\n\n  const initialSelectedItem = props.items.find((item) => item.id === props.initialValue);\n\n  return (\n    <ComboboxDropdown\n      {...props}\n      className={cn(inlineEditVariants({ variant }), className)}\n      disabled={disabled || !isAllowed}\n      selectedItem={selectedItem ?? initialSelectedItem}\n      onSelect={(event) => {\n        setValue(event.id);\n        handleUpdate(event.id);\n        onSelect?.(event);\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;AAkBA,SAAgB,uBAA4D,EAC1E,cACA,SACA,WACA,UACA,UACA,GAAG,SACuC;CAC1C,MAAM,EAAE,UAAU,cAAc,cAAc,cAAc,MAAM;CAElE,MAAM,sBAAsB,MAAM,MAAM,MAAM,SAAS,KAAK,OAAO,MAAM,aAAa;AAEtF,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GAAG,mBAAmB,EAAE,SAAS,CAAC,EAAE,UAAU;EACzD,UAAU,YAAY,CAAC;EACvB,cAAc,gBAAgB;EAC9B,WAAW,UAAU;AACnB,YAAS,MAAM,GAAG;AAClB,gBAAa,MAAM,GAAG;AACtB,cAAW,MAAM;;GAEnB"}

package/dist/modules/inline-edit/components/combobox.client.d.mts

@@ -0,0 +1,15 @@
+import { ComboboxProps } from "../../../components/ui/combobox.client.mjs";
+import { useInlineEditOptions } from "../hooks/use-inline.client.mjs";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
+
+//#region src/modules/inline-edit/components/combobox.client.d.ts
+type InlineComboboxProps<TValue> = useInlineEditOptions<string> & Omit<ComboboxProps<TValue>, "value">;
+declare function InlineCombobox<TValue>({
+  onSelect,
+  onBlur,
+  disabled,
+  ...props
+}: InlineComboboxProps<TValue>): react_jsx_runtime11.JSX.Element;
+//#endregion
+export { InlineCombobox, InlineComboboxProps };
+//# sourceMappingURL=combobox.client.d.mts.map

package/dist/modules/inline-edit/components/combobox.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.client.d.mts","names":[],"sources":["../../../../src/modules/inline-edit/components/combobox.client.tsx"],"sourcesContent":[],"mappings":";;;;;KAKY,8BAA8B,+BACxC,KAAK,cAAc;iBAEL;;;;;GAKb,oBAAoB,UAAO,mBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/inline-edit/components/combobox.client.mjs

@@ -0,0 +1,27 @@
+"use client";
+
+import { Combobox } from "../../../components/ui/combobox.client.mjs";
+import { useInlineEdit } from "../hooks/use-inline.client.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/inline-edit/components/combobox.client.tsx
+function InlineCombobox({ onSelect, onBlur, disabled, ...props }) {
+	const { value, setValue, handleUpdate, isAllowed } = useInlineEdit(props);
+	return /* @__PURE__ */ jsx(Combobox, {
+		...props,
+		value,
+		disabled: disabled || !isAllowed,
+		onSelect: (value$1) => {
+			setValue(value$1);
+			onSelect?.(value$1);
+		},
+		onBlur: (e) => {
+			handleUpdate(e.target.value);
+			onBlur?.(e);
+		}
+	});
+}
+
+//#endregion
+export { InlineCombobox };
+//# sourceMappingURL=combobox.client.mjs.map

package/dist/modules/inline-edit/components/combobox.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.client.mjs","names":["value"],"sources":["../../../../src/modules/inline-edit/components/combobox.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox, ComboboxProps } from \"@/components/ui/combobox.client\";\nimport { useInlineEdit, useInlineEditOptions } from \"../hooks/use-inline.client\";\n\nexport type InlineComboboxProps<TValue> = useInlineEditOptions<string> &\n  Omit<ComboboxProps<TValue>, \"value\">;\n\nexport function InlineCombobox<TValue>({\n  onSelect,\n  onBlur,\n  disabled,\n  ...props\n}: InlineComboboxProps<TValue>) {\n  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit(props);\n\n  return (\n    <Combobox\n      {...props}\n      value={value}\n      disabled={disabled || !isAllowed}\n      onSelect={(value) => {\n        setValue(value);\n        onSelect?.(value as TValue);\n      }}\n      onBlur={(e) => {\n        handleUpdate(e.target.value);\n        onBlur?.(e);\n      }}\n    />\n  );\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,eAAuB,EACrC,UACA,QACA,UACA,GAAG,SAC2B;CAC9B,MAAM,EAAE,OAAO,UAAU,cAAc,cAAc,cAAc,MAAM;AAEzE,QACE,oBAAC;EACC,GAAI;EACG;EACP,UAAU,YAAY,CAAC;EACvB,WAAW,YAAU;AACnB,YAASA,QAAM;AACf,cAAWA,QAAgB;;EAE7B,SAAS,MAAM;AACb,gBAAa,EAAE,OAAO,MAAM;AAC5B,YAAS,EAAE;;GAEb"}

package/dist/modules/inline-edit/components/date-input.client.d.mts

@@ -0,0 +1,14 @@
+import { useInlineEditOptions } from "../hooks/use-inline.client.mjs";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/modules/inline-edit/components/date-input.client.d.ts
+declare function InlineDateInput({
+  initialValue,
+  className,
+  action,
+  ...props
+}: ComponentProps<"div"> & useInlineEditOptions<Date>): react_jsx_runtime14.JSX.Element;
+//#endregion
+export { InlineDateInput };
+//# sourceMappingURL=date-input.client.d.mts.map

package/dist/modules/inline-edit/components/date-input.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.client.d.mts","names":[],"sources":["../../../../src/modules/inline-edit/components/date-input.client.tsx"],"sourcesContent":[],"mappings":";;;;;iBAegB,eAAA;;;;;GAKb,wBAAwB,qBAAqB,QAAK,mBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/inline-edit/components/date-input.client.mjs

@@ -0,0 +1,78 @@
+"use client";
+
+import { cn } from "../../../lib/utils/cn.mjs";
+import { Button } from "../../../components/ui/button.mjs";
+import { Input } from "../../../components/ui/input.mjs";
+import { Calendar as Calendar$1 } from "../../../components/ui/calendar.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.mjs";
+import { useInlineEdit } from "../hooks/use-inline.client.mjs";
+import { CalendarIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { format } from "date-fns";
+
+//#region src/modules/inline-edit/components/date-input.client.tsx
+const formatDate = (value) => format(value, "dd/MM/yyyy");
+const parseDate = (value) => new Date(value.split("/").reverse().join("-"));
+function InlineDateInput({ initialValue, className, action, ...props }) {
+	const [inValid, setInValid] = React.useState(false);
+	const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+		initialValue,
+		action
+	});
+	const [stringDate, setStringDate] = React.useState(initialValue ? formatDate(initialValue) : "");
+	return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("relative h-full", className),
+		children: [/* @__PURE__ */ jsx(Input, {
+			"data-input": true,
+			type: "string",
+			value: stringDate,
+			className: cn(inValid && "text-destructive"),
+			disabled: !isAllowed,
+			onChange: (e) => {
+				setStringDate(e.target.value);
+				const parsedDate = parseDate(e.target.value);
+				if (parsedDate.toString() === "Invalid Date") {
+					setInValid(true);
+					setValue(void 0);
+				} else {
+					setInValid(false);
+					setValue(parsedDate);
+				}
+			},
+			onBlur: (e) => {
+				handleUpdate(parseDate(e.target.value));
+			}
+		}), /* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				tabIndex: -1,
+				disabled: !isAllowed,
+				className: cn("absolute bottom-0 right-0 top-0 opacity-50", !value && "text-muted-foreground"),
+				children: /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" })
+			})
+		})]
+	}), /* @__PURE__ */ jsx(PopoverContent, {
+		className: "w-auto p-0",
+		children: /* @__PURE__ */ jsx(Calendar$1, {
+			mode: "single",
+			initialFocus: true,
+			selected: value,
+			defaultMonth: value,
+			disabled: status === "pending",
+			onSelect: (selectedDate) => {
+				if (!selectedDate) return;
+				setValue(selectedDate);
+				setStringDate(formatDate(selectedDate));
+				handleUpdate(selectedDate);
+				setInValid(false);
+			}
+		})
+	})] });
+}
+
+//#endregion
+export { InlineDateInput };
+//# sourceMappingURL=date-input.client.mjs.map

package/dist/modules/inline-edit/components/date-input.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.client.mjs","names":["Calendar"],"sources":["../../../../src/modules/inline-edit/components/date-input.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Input } from \"@/components/ui/input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport React, { ComponentProps } from \"react\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\n\nconst formatDate = (value: Date) => format(value, \"dd/MM/yyyy\");\nconst parseDate = (value: string) => new Date(value.split(\"/\").reverse().join(\"-\"));\n\nexport function InlineDateInput({\n  initialValue,\n  className,\n  action,\n  ...props\n}: ComponentProps<\"div\"> & useInlineEditOptions<Date>) {\n  const [inValid, setInValid] = React.useState<boolean>(false);\n\n  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({\n    initialValue,\n    action,\n  });\n\n  const [stringDate, setStringDate] = React.useState<string>(\n    initialValue ? formatDate(initialValue) : \"\",\n  );\n\n  return (\n    <Popover>\n      <div {...props} className={cn(\"relative h-full\", className)}>\n        <Input\n          data-input\n          type=\"string\"\n          value={stringDate}\n          className={cn(inValid && \"text-destructive\")}\n          disabled={!isAllowed}\n          onChange={(e) => {\n            setStringDate(e.target.value);\n            const parsedDate = parseDate(e.target.value);\n\n            if (parsedDate.toString() === \"Invalid Date\") {\n              setInValid(true);\n              setValue(undefined);\n            } else {\n              setInValid(false);\n              setValue(parsedDate);\n            }\n          }}\n          onBlur={(e) => {\n            const parsedDate = parseDate(e.target.value);\n            handleUpdate(parsedDate);\n          }}\n        />\n\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            tabIndex={-1}\n            disabled={!isAllowed}\n            className={cn(\n              \"absolute bottom-0 right-0 top-0 opacity-50\",\n              !value && \"text-muted-foreground\",\n            )}\n          >\n            <CalendarIcon className=\"h-4 w-4\" />\n          </Button>\n        </PopoverTrigger>\n      </div>\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          initialFocus\n          selected={value}\n          defaultMonth={value}\n          disabled={status === \"pending\"}\n          onSelect={(selectedDate) => {\n            if (!selectedDate) return;\n            setValue(selectedDate);\n            setStringDate(formatDate(selectedDate));\n            handleUpdate(selectedDate);\n            setInValid(false);\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,cAAc,UAAgB,OAAO,OAAO,aAAa;AAC/D,MAAM,aAAa,UAAkB,IAAI,KAAK,MAAM,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;AAEnF,SAAgB,gBAAgB,EAC9B,cACA,WACA,QACA,GAAG,SACkD;CACrD,MAAM,CAAC,SAAS,cAAc,MAAM,SAAkB,MAAM;CAE5D,MAAM,EAAE,OAAO,UAAU,cAAc,cAAc,cAAc;EACjE;EACA;EACD,CAAC;CAEF,MAAM,CAAC,YAAY,iBAAiB,MAAM,SACxC,eAAe,WAAW,aAAa,GAAG,GAC3C;AAED,QACE,qBAAC,sBACC,qBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,mBAAmB,UAAU;aACzD,oBAAC;GACC;GACA,MAAK;GACL,OAAO;GACP,WAAW,GAAG,WAAW,mBAAmB;GAC5C,UAAU,CAAC;GACX,WAAW,MAAM;AACf,kBAAc,EAAE,OAAO,MAAM;IAC7B,MAAM,aAAa,UAAU,EAAE,OAAO,MAAM;AAE5C,QAAI,WAAW,UAAU,KAAK,gBAAgB;AAC5C,gBAAW,KAAK;AAChB,cAAS,OAAU;WACd;AACL,gBAAW,MAAM;AACjB,cAAS,WAAW;;;GAGxB,SAAS,MAAM;AAEb,iBADmB,UAAU,EAAE,OAAO,MAAM,CACpB;;IAE1B,EAEF,oBAAC;GAAe;aACd,oBAAC;IACC,SAAQ;IACR,UAAU;IACV,UAAU,CAAC;IACX,WAAW,GACT,8CACA,CAAC,SAAS,wBACX;cAED,oBAAC,gBAAa,WAAU,YAAY;KAC7B;IACM;GACb,EACN,oBAAC;EAAe,WAAU;YACxB,oBAACA;GACC,MAAK;GACL;GACA,UAAU;GACV,cAAc;GACd,UAAU,WAAW;GACrB,WAAW,iBAAiB;AAC1B,QAAI,CAAC,aAAc;AACnB,aAAS,aAAa;AACtB,kBAAc,WAAW,aAAa,CAAC;AACvC,iBAAa,aAAa;AAC1B,eAAW,MAAM;;IAEnB;GACa,IACT"}

package/dist/modules/inline-edit/components/date-picker.client.d.mts

@@ -0,0 +1,16 @@
+import { Button } from "../../../components/ui/button.mjs";
+import { useInlineEditOptions } from "../hooks/use-inline.client.mjs";
+import * as react_jsx_runtime15 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/modules/inline-edit/components/date-picker.client.d.ts
+type InlineEditDatePickerProps = ComponentProps<typeof Button> & useInlineEditOptions<Date>;
+declare function InlineDatePicker({
+  initialValue,
+  className,
+  disabled,
+  ...props
+}: InlineEditDatePickerProps): react_jsx_runtime15.JSX.Element;
+//#endregion
+export { InlineDatePicker };
+//# sourceMappingURL=date-picker.client.d.mts.map

package/dist/modules/inline-edit/components/date-picker.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.client.d.mts","names":[],"sources":["../../../../src/modules/inline-edit/components/date-picker.client.tsx"],"sourcesContent":[],"mappings":";;;;;;KAWK,yBAAA,GAA4B,sBAAsB,UAAU,qBAAqB;iBAEtE,gBAAA;;;;;GAKb,4BAAyB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/inline-edit/components/date-picker.client.mjs

@@ -0,0 +1,50 @@
+"use client";
+
+import { cn } from "../../../lib/utils/cn.mjs";
+import { Button } from "../../../components/ui/button.mjs";
+import { formatDate } from "../../../lib/utils/format.mjs";
+import { Calendar as Calendar$1 } from "../../../components/ui/calendar.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.mjs";
+import { useInlineEdit } from "../hooks/use-inline.client.mjs";
+import { CalendarIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/modules/inline-edit/components/date-picker.client.tsx
+function InlineDatePicker({ initialValue, className, disabled, ...props }) {
+	const [open, setOpen] = React.useState(false);
+	const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+		initialValue,
+		action: props.action
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (open$1) => {
+			setOpen(open$1);
+			if (!open$1 && value) handleUpdate(value);
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsxs(Button, {
+				...props,
+				type: "button",
+				variant: "outline",
+				className: cn("w-full", className),
+				disabled: disabled || !isAllowed,
+				children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), value ? formatDate(value) : /* @__PURE__ */ jsx("span", { children: "Kies een datum" })]
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-auto p-0",
+			children: /* @__PURE__ */ jsx(Calendar$1, {
+				mode: "single",
+				selected: value ? new Date(value) : void 0,
+				onSelect: (date) => date && setValue(date),
+				initialFocus: true
+			})
+		})]
+	});
+}
+
+//#endregion
+export { InlineDatePicker };
+//# sourceMappingURL=date-picker.client.mjs.map

package/dist/modules/inline-edit/components/date-picker.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.client.mjs","names":["open","Calendar"],"sources":["../../../../src/modules/inline-edit/components/date-picker.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { formatDate } from \"@/lib/utils/format\";\nimport { CalendarIcon } from \"lucide-react\";\nimport React, { ComponentProps } from \"react\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\n\ntype InlineEditDatePickerProps = ComponentProps<typeof Button> & useInlineEditOptions<Date>;\n\nexport function InlineDatePicker({\n  initialValue,\n  className,\n  disabled,\n  ...props\n}: InlineEditDatePickerProps) {\n  const [open, setOpen] = React.useState(false);\n\n  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({\n    initialValue,\n    action: props.action,\n  });\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(open) => {\n        setOpen(open);\n        if (!open && value) handleUpdate(value);\n      }}\n    >\n      <PopoverTrigger asChild>\n        <Button\n          {...props}\n          type=\"button\"\n          variant=\"outline\"\n          className={cn(\"w-full\", className)}\n          disabled={disabled || !isAllowed}\n        >\n          <CalendarIcon className=\"mr-2 h-4 w-4\" />\n          {value ? formatDate(value) : <span>Kies een datum</span>}\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          selected={value ? new Date(value) : undefined}\n          onSelect={(date) => date && setValue(date)}\n          initialFocus\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAgB,iBAAiB,EAC/B,cACA,WACA,UACA,GAAG,SACyB;CAC5B,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,MAAM;CAE7C,MAAM,EAAE,OAAO,UAAU,cAAc,cAAc,cAAc;EACjE;EACA,QAAQ,MAAM;EACf,CAAC;AAEF,QACE,qBAAC;EACO;EACN,eAAe,WAAS;AACtB,WAAQA,OAAK;AACb,OAAI,CAACA,UAAQ,MAAO,cAAa,MAAM;;aAGzC,oBAAC;GAAe;aACd,qBAAC;IACC,GAAI;IACJ,MAAK;IACL,SAAQ;IACR,WAAW,GAAG,UAAU,UAAU;IAClC,UAAU,YAAY,CAAC;eAEvB,oBAAC,gBAAa,WAAU,iBAAiB,EACxC,QAAQ,WAAW,MAAM,GAAG,oBAAC,oBAAK,mBAAqB;KACjD;IACM,EAEjB,oBAAC;GAAe,WAAU;aACxB,oBAACC;IACC,MAAK;IACL,UAAU,QAAQ,IAAI,KAAK,MAAM,GAAG;IACpC,WAAW,SAAS,QAAQ,SAAS,KAAK;IAC1C;KACA;IACa;GACT"}

package/dist/modules/inline-edit/components/editor.client.d.mts

@@ -0,0 +1,18 @@
+import { useInlineEditOptions } from "../hooks/use-inline.client.mjs";
+import { InlineEditVariantsProps } from "../lib/variants.mjs";
+import * as react_jsx_runtime16 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+import { JSONContent } from "@tiptap/react";
+
+//#region src/modules/inline-edit/components/editor.client.d.ts
+declare function InlineEditor({
+  initialValue,
+  action,
+  variant,
+  className,
+  disabled,
+  ...props
+}: Omit<ComponentProps<"input">, "type"> & useInlineEditOptions<JSONContent> & InlineEditVariantsProps): react_jsx_runtime16.JSX.Element;
+//#endregion
+export { InlineEditor };
+//# sourceMappingURL=editor.client.d.mts.map

package/dist/modules/inline-edit/components/editor.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.client.d.mts","names":[],"sources":["../../../../src/modules/inline-edit/components/editor.client.tsx"],"sourcesContent":[],"mappings":";;;;;;;iBAUgB,YAAA;;;;;;;GAOb,KAAK,mCACN,qBAAqB,eACrB,0BAAuB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/inline-edit/components/editor.client.mjs

@@ -0,0 +1,35 @@
+"use client";
+
+import { cn } from "../../../lib/utils/cn.mjs";
+import { useInlineEdit } from "../hooks/use-inline.client.mjs";
+import { inlineEditVariants } from "../lib/variants.mjs";
+import { jsx } from "react/jsx-runtime";
+import StarterKit from "@tiptap/starter-kit";
+import { EditorContent, useEditor } from "@tiptap/react";
+import Underline from "@tiptap/extension-underline";
+
+//#region src/modules/inline-edit/components/editor.client.tsx
+function InlineEditor({ initialValue, action, variant, className, disabled, ...props }) {
+	const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+		initialValue,
+		action
+	});
+	const editor = useEditor({
+		extensions: [StarterKit, Underline],
+		content: value,
+		editable: !disabled && isAllowed,
+		immediatelyRender: false,
+		injectCSS: false,
+		onUpdate: ({ editor: editor$1 }) => setValue(editor$1.getJSON()),
+		onBlur: ({ editor: editor$1 }) => handleUpdate(editor$1.getJSON()),
+		editorProps: { attributes: { class: cn("prose max-w-full bg-background ring-offset-background rounded-md border border-input dark:prose-invert p-3 focus:outline-none prose-a:text-primary prose-li:marker:text-primary ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring rounded-md border text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 [&[contenteditable=false]]:opacity-50 [&[contenteditable=false]]:cursor-not-allowed md:text-sm", inlineEditVariants({ variant }), className) } }
+	});
+	return /* @__PURE__ */ jsx(EditorContent, {
+		...props,
+		editor
+	});
+}
+
+//#endregion
+export { InlineEditor };
+//# sourceMappingURL=editor.client.mjs.map

package/dist/modules/inline-edit/components/editor.client.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.client.mjs","names":["editor"],"sources":["../../../../src/modules/inline-edit/components/editor.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"@/lib/utils/cn\";\nimport Underline from \"@tiptap/extension-underline\";\nimport { EditorContent, JSONContent, useEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\nimport { ComponentProps } from \"react\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { inlineEditVariants, InlineEditVariantsProps } from \"../lib/variants\";\n\nexport function InlineEditor({\n  initialValue,\n  action,\n  variant,\n  className,\n  disabled,\n  ...props\n}: Omit<ComponentProps<\"input\">, \"type\"> &\n  useInlineEditOptions<JSONContent> &\n  InlineEditVariantsProps) {\n  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({\n    initialValue,\n    action,\n  });\n\n  const editor = useEditor({\n    extensions: [StarterKit, Underline],\n    content: value,\n    editable: !disabled && isAllowed,\n    immediatelyRender: false,\n    injectCSS: false,\n    onUpdate: ({ editor }) => setValue(editor.getJSON()),\n    onBlur: ({ editor }) => handleUpdate(editor.getJSON()),\n    editorProps: {\n      attributes: {\n        class: cn(\n          \"prose max-w-full bg-background ring-offset-background rounded-md border border-input dark:prose-invert p-3 focus:outline-none prose-a:text-primary prose-li:marker:text-primary ring-offset-background file:text-foreground placeholder:text-muted-foreground focus-visible:ring-ring rounded-md border text-base file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 [&[contenteditable=false]]:opacity-50 [&[contenteditable=false]]:cursor-not-allowed md:text-sm\",\n          inlineEditVariants({ variant }),\n          className,\n        ),\n      },\n    },\n  });\n\n  return <EditorContent {...props} editor={editor} />;\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,aAAa,EAC3B,cACA,QACA,SACA,WACA,UACA,GAAG,SAGsB;CACzB,MAAM,EAAE,OAAO,UAAU,cAAc,cAAc,cAAc;EACjE;EACA;EACD,CAAC;CAEF,MAAM,SAAS,UAAU;EACvB,YAAY,CAAC,YAAY,UAAU;EACnC,SAAS;EACT,UAAU,CAAC,YAAY;EACvB,mBAAmB;EACnB,WAAW;EACX,WAAW,EAAE,uBAAa,SAASA,SAAO,SAAS,CAAC;EACpD,SAAS,EAAE,uBAAa,aAAaA,SAAO,SAAS,CAAC;EACtD,aAAa,EACX,YAAY,EACV,OAAO,GACL,giBACA,mBAAmB,EAAE,SAAS,CAAC,EAC/B,UACD,EACF,EACF;EACF,CAAC;AAEF,QAAO,oBAAC;EAAc,GAAI;EAAe;GAAU"}

package/dist/modules/inline-edit/components/input-recipient.client.d.mts

@@ -0,0 +1,24 @@
+import { useInlineEditOptions } from "../hooks/use-inline.client.mjs";
+import { InlineEditVariantsProps } from "../lib/variants.mjs";
+import { Contact, RecipientInput } from "../../../components/ui/input-recipient.mjs";
+import * as react_jsx_runtime17 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/modules/inline-edit/components/input-recipient.client.d.ts
+type InlineRecipientInputProps = Omit<ComponentProps<typeof RecipientInput>, "value" | "onChange"> & useInlineEditOptions<string[]> & InlineEditVariantsProps & {
+  contacts: Contact[];
+};
+/**
+ * The inline edit recipient input component.
+ */
+declare function InlineRecipientInput({
+  initialValue,
+  action,
+  variant,
+  disabled,
+  contacts,
+  ...props
+}: InlineRecipientInputProps): react_jsx_runtime17.JSX.Element;
+//#endregion
+export { InlineRecipientInput };
+//# sourceMappingURL=input-recipient.client.d.mts.map

package/dist/modules/inline-edit/components/input-recipient.client.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-recipient.client.d.mts","names":[],"sources":["../../../../src/modules/inline-edit/components/input-recipient.client.tsx"],"sourcesContent":[],"mappings":";;;;;;;KAOK,yBAAA,GAA4B,KAAK,sBAAsB,yCAC1D,iCACA;YACY;;AAL4C;;;AAEzB,iBASjB,oBAAA,CATiB;EAAA,YAAA;EAAA,MAAA;EAAA,OAAA;EAAA,QAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAgB9B,yBAhB8B,CAAA,EAgBL,mBAAA,CAAA,GAAA,CAAA,OAhBK"}

package/dist/modules/inline-edit/components/input-recipient.client.mjs

@@ -0,0 +1,30 @@
+"use client";
+
+import { useInlineEdit } from "../hooks/use-inline.client.mjs";
+import { RecipientInput } from "../../../components/ui/input-recipient.mjs";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/inline-edit/components/input-recipient.client.tsx
+/**
+* The inline edit recipient input component.
+*/
+function InlineRecipientInput({ initialValue, action, variant, disabled, contacts, ...props }) {
+	const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+		initialValue,
+		action
+	});
+	return /* @__PURE__ */ jsx(RecipientInput, {
+		...props,
+		contacts,
+		value: value ?? [],
+		onChange: (newValue) => {
+			setValue(newValue);
+			handleUpdate(newValue);
+		},
+		disabled: disabled || !isAllowed
+	});
+}
+
+//#endregion
+export { InlineRecipientInput };
+//# sourceMappingURL=input-recipient.client.mjs.map