@tulip-systems/core 0.6.1 → 0.8.0

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

@@ -1 +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 type { VisibilityState } from \"@tanstack/react-table\";\nimport React, { type PropsWithChildren } from \"react\";\nimport { arrayMove } from \"@/lib/entry\";\nimport { useAction } from \"@/lib/hooks/use-action\";\nimport { useTableConfigContext } from \"@/modules/data-tables/entry.client\";\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"}
+{"version":3,"file":"context.client.mjs","names":[],"sources":["../../../../../../src/modules/data-tables/tables/inline-table/hooks/context.client.tsx"],"sourcesContent":["\"use client\";\n\nimport type { VisibilityState } from \"@tanstack/react-table\";\nimport React, { type PropsWithChildren } from \"react\";\nimport { arrayMove } from \"@/lib/entry\";\nimport { useAction } from \"@/lib/hooks/use-action\";\nimport { useTableConfigContext } from \"@/modules/data-tables/entry.client\";\nimport type { InlineDataTableHotkeysConfig } from \"./use-hotkeys.client\";\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  hotkeys?: InlineDataTableHotkeysConfig;\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  hotkeys,\n}: PropsWithChildren<{\n  disabledColumns?: VisibilityState;\n  moveRowAction?: (input: { fromIndex: number; toIndex: number }) => Promise<unknown>;\n  hotkeys?: InlineDataTableHotkeysConfig;\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        hotkeys,\n        ...(moveRowAction\n          ? { isDraggable: true, moveRow: moveRowMutation.mutate }\n          : { isDraggable: false, moveRow: undefined }),\n      }}\n    >\n      {children}\n    </InlineTableContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAkCA,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,eACA,WAKE;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;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.d.mts

@@ -0,0 +1,30 @@
+import { Keys } from "react-hotkeys-hook/dist/types";
+
+//#region src/modules/data-tables/tables/inline-table/hooks/use-hotkeys.client.d.ts
+/**
+ * Inline input data attribute used to identify navigable cells in the data table.
+ */
+declare const INLINE_INPUT_ATTR = "data-inline-input";
+/**
+ * Props for configuring the hotkeys used for navigating between inline-editable cells in a data table.
+ * Each property corresponds to a direction of navigation and accepts an array of key combinations that trigger the navigation in that direction.
+ * If a property is not provided or is an empty array, the corresponding navigation hotkeys will be disabled.
+ */
+type InlineDataTableHotkeysConfig = {
+  moveLeft?: Keys | undefined;
+  moveRight?: Keys | undefined;
+  moveUp?: Keys | undefined;
+  moveDown?: Keys | undefined;
+};
+/**
+ * Sets up hotkeys for navigating between inline-editable cells in a data table:
+ * - ArrowUp / ArrowDown: Move vertically to the next cell with an input in the same column.
+ * - ArrowLeft / ArrowRight: Move horizontally to the next cell with an input in the same row.
+ *
+ * The hotkeys only trigger when focused within a table that uses the "inline-data-table" scope,
+ * and they look for elements with the [data-inline-input] attribute to determine navigable cells.
+ */
+declare function useInlineDataTableHotkeys(props?: InlineDataTableHotkeysConfig): void;
+//#endregion
+export { INLINE_INPUT_ATTR, InlineDataTableHotkeysConfig, useInlineDataTableHotkeys };
+//# sourceMappingURL=use-hotkeys.client.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-hotkeys.client.d.mts","names":[],"sources":["../../../../../../src/modules/data-tables/tables/inline-table/hooks/use-hotkeys.client.ts"],"mappings":";;;;;AAMA;cAAa,iBAAA;;;;AAOb;;KAAY,4BAAA;EACV,QAAA,GAAW,IAAA;EACX,SAAA,GAAY,IAAA;EACZ,MAAA,GAAS,IAAA;EACT,QAAA,GAAW,IAAA;AAAA;;;;;;;;;iBAWG,yBAAA,CAA0B,KAAA,GAAO,4BAAA"}

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

@@ -1,27 +1,95 @@
 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) => {
+/**
+* Inline input data attribute used to identify navigable cells in the data table.
+*/
+const INLINE_INPUT_ATTR = "data-inline-input";
+/**
+* Sets up hotkeys for navigating between inline-editable cells in a data table:
+* - ArrowUp / ArrowDown: Move vertically to the next cell with an input in the same column.
+* - ArrowLeft / ArrowRight: Move horizontally to the next cell with an input in the same row.
+*
+* The hotkeys only trigger when focused within a table that uses the "inline-data-table" scope,
+* and they look for elements with the [data-inline-input] attribute to determine navigable cells.
+*/
+function useInlineDataTableHotkeys(props = {}) {
+	/**
+	* Move left hotkey handler
+	*/
+	useHotkeys(props.moveLeft ?? [], (e) => {
 		const currentCell = e.target?.closest("td");
-		((handler.keys?.includes("left") ? currentCell?.previousElementSibling : currentCell?.nextElementSibling)?.querySelector("[data-input]"))?.focus();
+		if (!currentCell) return;
+		let cell = currentCell.previousElementSibling;
+		while (cell) {
+			const input = cell.querySelector(`[${INLINE_INPUT_ATTR}]`);
+			if (input) {
+				input.focus();
+				return;
+			}
+			cell = cell.previousElementSibling;
+		}
 	}, {
+		enabled: !!(props.moveLeft && props.moveLeft.length > 0),
 		scopes: "inline-data-table",
 		enableOnFormTags: true,
+		enableOnContentEditable: 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();
+	/**
+	* Move right hotkey handler
+	*/
+	useHotkeys(props.moveRight ?? [], (e) => {
+		const currentCell = e.target?.closest("td");
+		if (!currentCell) return;
+		let cell = currentCell.nextElementSibling;
+		while (cell) {
+			const input = cell.querySelector(`[${INLINE_INPUT_ATTR}]`);
+			if (input) {
+				input.focus();
+				return;
+			}
+			cell = cell.nextElementSibling;
+		}
+	}, {
+		enabled: !!(props.moveRight && props.moveRight.length > 0),
+		scopes: "inline-data-table",
+		enableOnFormTags: true,
+		enableOnContentEditable: true,
+		preventDefault: true
+	});
+	/**
+	* Move up hotkey handler
+	*/
+	useHotkeys(props.moveUp ?? [], (e) => {
+		const currentCell = e.target?.closest("td");
+		if (!currentCell) return;
+		const nextRow = currentCell.closest("tr")?.previousElementSibling;
+		(nextRow ? nextRow.cells?.[currentCell.cellIndex]?.querySelector(`[${INLINE_INPUT_ATTR}]`) : null)?.focus();
+	}, {
+		enabled: !!(props.moveUp && props.moveUp.length > 0),
+		scopes: "inline-data-table",
+		enableOnFormTags: true,
+		enableOnContentEditable: true,
+		preventDefault: true
+	});
+	/**
+	* Move down hotkey handler
+	*/
+	useHotkeys(props.moveDown ?? [], (e) => {
+		const currentCell = e.target?.closest("td");
+		if (!currentCell) return;
+		const nextRow = currentCell.closest("tr")?.nextElementSibling;
+		(nextRow ? nextRow.cells?.[currentCell.cellIndex]?.querySelector(`[${INLINE_INPUT_ATTR}]`) : null)?.focus();
 	}, {
+		enabled: !!(props.moveDown && props.moveDown.length > 0),
 		scopes: "inline-data-table",
 		enableOnFormTags: true,
+		enableOnContentEditable: true,
 		preventDefault: true
 	});
 }
 
 //#endregion
-export { useInlineDataTableHotkeys };
+export { INLINE_INPUT_ATTR, useInlineDataTableHotkeys };
 //# sourceMappingURL=use-hotkeys.client.mjs.map

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

@@ -1 +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"}
+{"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\";\nimport type { Keys } from \"react-hotkeys-hook/dist/types\";\n\n/**\n * Inline input data attribute used to identify navigable cells in the data table.\n */\nexport const INLINE_INPUT_ATTR = \"data-inline-input\";\n\n/**\n * Props for configuring the hotkeys used for navigating between inline-editable cells in a data table.\n * Each property corresponds to a direction of navigation and accepts an array of key combinations that trigger the navigation in that direction.\n * If a property is not provided or is an empty array, the corresponding navigation hotkeys will be disabled.\n */\nexport type InlineDataTableHotkeysConfig = {\n  moveLeft?: Keys | undefined;\n  moveRight?: Keys | undefined;\n  moveUp?: Keys | undefined;\n  moveDown?: Keys | undefined;\n};\n\n/**\n * Sets up hotkeys for navigating between inline-editable cells in a data table:\n * - ArrowUp / ArrowDown: Move vertically to the next cell with an input in the same column.\n * - ArrowLeft / ArrowRight: Move horizontally to the next cell with an input in the same row.\n *\n * The hotkeys only trigger when focused within a table that uses the \"inline-data-table\" scope,\n * and they look for elements with the [data-inline-input] attribute to determine navigable cells.\n */\nexport function useInlineDataTableHotkeys(props: InlineDataTableHotkeysConfig = {}) {\n  /**\n   * Move left hotkey handler\n   */\n  useHotkeys(\n    props.moveLeft ?? [],\n    (e) => {\n      const currentCell = (e.target as HTMLElement)?.closest(\"td\");\n      if (!currentCell) return;\n\n      let cell = currentCell.previousElementSibling;\n\n      while (cell) {\n        const input = cell.querySelector(`[${INLINE_INPUT_ATTR}]`) as HTMLElement | null;\n        if (input) {\n          input.focus();\n          return;\n        }\n        cell = cell.previousElementSibling;\n      }\n    },\n    {\n      enabled: !!(props.moveLeft && props.moveLeft.length > 0),\n      scopes: \"inline-data-table\",\n      enableOnFormTags: true,\n      enableOnContentEditable: true,\n      preventDefault: true,\n    },\n  );\n\n  /**\n   * Move right hotkey handler\n   */\n  useHotkeys(\n    props.moveRight ?? [],\n    (e) => {\n      const currentCell = (e.target as HTMLElement)?.closest(\"td\");\n      if (!currentCell) return;\n\n      let cell = currentCell.nextElementSibling;\n\n      while (cell) {\n        const input = cell.querySelector(`[${INLINE_INPUT_ATTR}]`) as HTMLElement | null;\n        if (input) {\n          input.focus();\n          return;\n        }\n        cell = cell.nextElementSibling;\n      }\n    },\n    {\n      enabled: !!(props.moveRight && props.moveRight.length > 0),\n      scopes: \"inline-data-table\",\n      enableOnFormTags: true,\n      enableOnContentEditable: true,\n      preventDefault: true,\n    },\n  );\n\n  /**\n   * Move up hotkey handler\n   */\n  useHotkeys(\n    props.moveUp ?? [],\n    (e) => {\n      const currentCell = (e.target as HTMLElement)?.closest(\"td\") as HTMLTableCellElement | null;\n      if (!currentCell) return;\n\n      const currentRow = currentCell.closest(\"tr\");\n      const nextRow = currentRow?.previousElementSibling;\n\n      const nextInput = nextRow\n        ? ((nextRow as HTMLTableRowElement).cells?.[currentCell.cellIndex]?.querySelector(\n            `[${INLINE_INPUT_ATTR}]`,\n          ) as HTMLElement | null)\n        : null;\n\n      nextInput?.focus();\n    },\n    {\n      enabled: !!(props.moveUp && props.moveUp.length > 0),\n      scopes: \"inline-data-table\",\n      enableOnFormTags: true,\n      enableOnContentEditable: true,\n      preventDefault: true,\n    },\n  );\n\n  /**\n   * Move down hotkey handler\n   */\n  useHotkeys(\n    props.moveDown ?? [],\n    (e) => {\n      const currentCell = (e.target as HTMLElement)?.closest(\"td\") as HTMLTableCellElement | null;\n      if (!currentCell) return;\n\n      const currentRow = currentCell.closest(\"tr\");\n      const nextRow = currentRow?.nextElementSibling;\n\n      const nextInput = nextRow\n        ? ((nextRow as HTMLTableRowElement).cells?.[currentCell.cellIndex]?.querySelector(\n            `[${INLINE_INPUT_ATTR}]`,\n          ) as HTMLElement | null)\n        : null;\n\n      nextInput?.focus();\n    },\n    {\n      enabled: !!(props.moveDown && props.moveDown.length > 0),\n      scopes: \"inline-data-table\",\n      enableOnFormTags: true,\n      enableOnContentEditable: true,\n      preventDefault: true,\n    },\n  );\n}\n"],"mappings":";;;;;;AAMA,MAAa,oBAAoB;;;;;;;;;AAsBjC,SAAgB,0BAA0B,QAAsC,EAAE,EAAE;;;;AAIlF,YACE,MAAM,YAAY,EAAE,GACnB,MAAM;EACL,MAAM,cAAe,EAAE,QAAwB,QAAQ,KAAK;AAC5D,MAAI,CAAC,YAAa;EAElB,IAAI,OAAO,YAAY;AAEvB,SAAO,MAAM;GACX,MAAM,QAAQ,KAAK,cAAc,IAAI,kBAAkB,GAAG;AAC1D,OAAI,OAAO;AACT,UAAM,OAAO;AACb;;AAEF,UAAO,KAAK;;IAGhB;EACE,SAAS,CAAC,EAAE,MAAM,YAAY,MAAM,SAAS,SAAS;EACtD,QAAQ;EACR,kBAAkB;EAClB,yBAAyB;EACzB,gBAAgB;EACjB,CACF;;;;AAKD,YACE,MAAM,aAAa,EAAE,GACpB,MAAM;EACL,MAAM,cAAe,EAAE,QAAwB,QAAQ,KAAK;AAC5D,MAAI,CAAC,YAAa;EAElB,IAAI,OAAO,YAAY;AAEvB,SAAO,MAAM;GACX,MAAM,QAAQ,KAAK,cAAc,IAAI,kBAAkB,GAAG;AAC1D,OAAI,OAAO;AACT,UAAM,OAAO;AACb;;AAEF,UAAO,KAAK;;IAGhB;EACE,SAAS,CAAC,EAAE,MAAM,aAAa,MAAM,UAAU,SAAS;EACxD,QAAQ;EACR,kBAAkB;EAClB,yBAAyB;EACzB,gBAAgB;EACjB,CACF;;;;AAKD,YACE,MAAM,UAAU,EAAE,GACjB,MAAM;EACL,MAAM,cAAe,EAAE,QAAwB,QAAQ,KAAK;AAC5D,MAAI,CAAC,YAAa;EAGlB,MAAM,UADa,YAAY,QAAQ,KAAK,EAChB;AAQ5B,GANkB,UACZ,QAAgC,QAAQ,YAAY,YAAY,cAChE,IAAI,kBAAkB,GACvB,GACD,OAEO,OAAO;IAEpB;EACE,SAAS,CAAC,EAAE,MAAM,UAAU,MAAM,OAAO,SAAS;EAClD,QAAQ;EACR,kBAAkB;EAClB,yBAAyB;EACzB,gBAAgB;EACjB,CACF;;;;AAKD,YACE,MAAM,YAAY,EAAE,GACnB,MAAM;EACL,MAAM,cAAe,EAAE,QAAwB,QAAQ,KAAK;AAC5D,MAAI,CAAC,YAAa;EAGlB,MAAM,UADa,YAAY,QAAQ,KAAK,EAChB;AAQ5B,GANkB,UACZ,QAAgC,QAAQ,YAAY,YAAY,cAChE,IAAI,kBAAkB,GACvB,GACD,OAEO,OAAO;IAEpB;EACE,SAAS,CAAC,EAAE,MAAM,YAAY,MAAM,SAAS,SAAS;EACtD,QAAQ;EACR,kBAAkB;EAClB,yBAAyB;EACzB,gBAAgB;EACjB,CACF"}

package/dist/modules/{config/db → database/lib}/helpers.d.mts

@@ -1,7 +1,7 @@
-import * as drizzle_orm0 from "drizzle-orm";
 import * as drizzle_orm_pg_core0 from "drizzle-orm/pg-core";
+import * as drizzle_orm0 from "drizzle-orm";
 
-//#region src/modules/config/db/helpers.d.ts
+//#region src/modules/database/lib/helpers.d.ts
 declare const generateDefaultUUID: () => string;
 /**
  * Base columns4

package/dist/modules/database/lib/helpers.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.mts","names":[],"sources":["../../../../src/modules/database/lib/helpers.ts"],"mappings":";;;;cAGa,mBAAA;;;;cAKA,WAAA;4GAWZ,oBAAA,CAAA,oBAAA"}

package/dist/modules/{config/db → database/lib}/helpers.mjs

@@ -1,7 +1,7 @@
 import { timestamp, uuid } from "drizzle-orm/pg-core";
 import { v7 } from "uuid";
 
-//#region src/modules/config/db/helpers.ts
+//#region src/modules/database/lib/helpers.ts
 const generateDefaultUUID = () => v7();
 /**
 * Base columns4

package/dist/modules/database/lib/helpers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.mjs","names":["uuidv7"],"sources":["../../../../src/modules/database/lib/helpers.ts"],"sourcesContent":["import { timestamp, uuid } from \"drizzle-orm/pg-core\";\nimport { v7 as uuidv7 } from \"uuid\";\n\nexport const generateDefaultUUID = () => uuidv7();\n\n/**\n * Base columns4\n */\nexport const baseColumns = {\n  // Primary key\n  id: uuid()\n    .primaryKey()\n    .$defaultFn(() => generateDefaultUUID()),\n  // Timestamps\n  createdAt: timestamp().defaultNow().notNull(),\n  updatedAt: timestamp()\n    .defaultNow()\n    .notNull()\n    .$onUpdate(() => new Date()),\n};\n"],"mappings":";;;;AAGA,MAAa,4BAA4BA,IAAQ;;;;AAKjD,MAAa,cAAc;CAEzB,IAAI,MAAM,CACP,YAAY,CACZ,iBAAiB,qBAAqB,CAAC;CAE1C,WAAW,WAAW,CAAC,YAAY,CAAC,SAAS;CAC7C,WAAW,WAAW,CACnB,YAAY,CACZ,SAAS,CACT,gCAAgB,IAAI,MAAM,CAAC;CAC/B"}

package/dist/modules/database/lib/service.server.d.mts

@@ -0,0 +1,34 @@
+import { TDatabaseSchema } from "./types.mjs";
+import * as drizzle_orm_node_postgres0 from "drizzle-orm/node-postgres";
+import { Pool } from "pg";
+
+//#region src/modules/database/lib/service.server.d.ts
+type InitDatabaseProps<TSchema extends TDatabaseSchema> = {
+  schema: TSchema;
+  pool: Pool;
+};
+/**
+ * Create a Drizzle database client.
+ */
+declare function createDatabase<TSchema extends TDatabaseSchema>({
+  schema,
+  pool
+}: InitDatabaseProps<TSchema>): drizzle_orm_node_postgres0.NodePgDatabase<TSchema> & {
+  $client: Pool;
+};
+/**
+ * Drizzle database client type returned by `Database.init()`.
+ */
+type Database<TSchema extends TDatabaseSchema> = ReturnType<typeof createDatabase<TSchema>>;
+/**
+ * Database service namespace.
+ *
+ * @example
+ * const db = Database.init<DatabaseSchema>({ schema, pool });
+ */
+declare const Database: {
+  init: typeof createDatabase;
+};
+//#endregion
+export { Database };
+//# sourceMappingURL=service.server.d.mts.map

package/dist/modules/database/lib/service.server.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.server.d.mts","names":[],"sources":["../../../../src/modules/database/lib/service.server.ts"],"mappings":";;;;;KAIK,iBAAA,iBAAkC,eAAA;EACrC,MAAA,EAAQ,OAAA;EACR,IAAA,EAAM,IAAA;AAAA;;;;iBAMC,cAAA,iBAA+B,eAAA,CAAA,CAAA;EACtC,MAAA;EACA;AAAA,GACC,iBAAA,CAAkB,OAAA,IAAQ,0BAAA,CAAA,cAAA,CAAA,OAAA;;;;;;KAOjB,QAAA,iBAAyB,eAAA,IAAmB,UAAA,QAAkB,cAAA,CAAe,OAAA;;;;;;AAhB7E;cAwBC,QAAA;eAEZ,cAAA;AAAA"}

package/dist/modules/database/lib/service.server.mjs

@@ -0,0 +1,24 @@
+import { drizzle } from "drizzle-orm/node-postgres";
+
+//#region src/modules/database/lib/service.server.ts
+/**
+* Create a Drizzle database client.
+*/
+function createDatabase({ schema, pool }) {
+	return drizzle({
+		client: pool,
+		schema,
+		casing: "snake_case"
+	});
+}
+/**
+* Database service namespace.
+*
+* @example
+* const db = Database.init<DatabaseSchema>({ schema, pool });
+*/
+const Database = { init: createDatabase };
+
+//#endregion
+export { Database };
+//# sourceMappingURL=service.server.mjs.map

package/dist/modules/database/lib/service.server.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.server.mjs","names":[],"sources":["../../../../src/modules/database/lib/service.server.ts"],"sourcesContent":["import { drizzle } from \"drizzle-orm/node-postgres\";\nimport type { Pool } from \"pg\";\nimport type { TDatabaseSchema } from \"./types\";\n\ntype InitDatabaseProps<TSchema extends TDatabaseSchema> = {\n  schema: TSchema;\n  pool: Pool;\n};\n\n/**\n * Create a Drizzle database client.\n */\nfunction createDatabase<TSchema extends TDatabaseSchema>({\n  schema,\n  pool,\n}: InitDatabaseProps<TSchema>) {\n  return drizzle({ client: pool, schema, casing: \"snake_case\" });\n}\n\n/**\n * Drizzle database client type returned by `Database.init()`.\n */\nexport type Database<TSchema extends TDatabaseSchema> = ReturnType<typeof createDatabase<TSchema>>;\n\n/**\n * Database service namespace.\n *\n * @example\n * const db = Database.init<DatabaseSchema>({ schema, pool });\n */\nexport const Database = {\n  init: createDatabase,\n};\n"],"mappings":";;;;;;AAYA,SAAS,eAAgD,EACvD,QACA,QAC6B;AAC7B,QAAO,QAAQ;EAAE,QAAQ;EAAM;EAAQ,QAAQ;EAAc,CAAC;;;;;;;;AAchE,MAAa,WAAW,EACtB,MAAM,gBACP"}

package/dist/modules/{config/db → database/lib}/types.d.mts

@@ -1,4 +1,4 @@
-//#region src/modules/config/db/types.d.ts
+//#region src/modules/database/lib/types.d.ts
 type TDatabaseSchema = Record<string, unknown>;
 //#endregion
 export { TDatabaseSchema };

package/dist/modules/database/lib/types.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.mts","names":[],"sources":["../../../../src/modules/database/lib/types.ts"],"mappings":";KAAY,eAAA,GAAkB,MAAA"}

package/dist/modules/emails/lib/service.server.d.mts

@@ -0,0 +1,29 @@
+import "server-cli-only";
+import { Resend } from "resend";
+
+//#region src/modules/emails/lib/service.server.d.ts
+type InitEmailProps = {
+  key: string;
+};
+/**
+ * Create a Resend email client.
+ */
+declare function createEmail({
+  key
+}: InitEmailProps): Resend;
+/**
+ * Resend email client type returned by `Email.init()`.
+ */
+type Email = ReturnType<typeof createEmail>;
+/**
+ * Email service namespace.
+ *
+ * @example
+ * const email = Email.init({ key: env.RESEND_API_KEY });
+ */
+declare const Email: {
+  init: typeof createEmail;
+};
+//#endregion
+export { Email };
+//# sourceMappingURL=service.server.d.mts.map

package/dist/modules/emails/lib/service.server.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.server.d.mts","names":[],"sources":["../../../../src/modules/emails/lib/service.server.ts"],"mappings":";;;;KAIK,cAAA;EACH,GAAA;AAAA;;;;iBAMO,WAAA,CAAA;EAAc;AAAA,GAAO,cAAA,GAAc,MAAA;AANvC;;;AAAA,KAaO,KAAA,GAAQ,UAAA,QAAkB,WAAA;;;;;;;cAQzB,KAAA;eAEZ,WAAA;AAAA"}

package/dist/modules/emails/lib/service.server.mjs

@@ -0,0 +1,21 @@
+import "server-cli-only";
+import { Resend } from "resend";
+
+//#region src/modules/emails/lib/service.server.ts
+/**
+* Create a Resend email client.
+*/
+function createEmail({ key }) {
+	return new Resend(key);
+}
+/**
+* Email service namespace.
+*
+* @example
+* const email = Email.init({ key: env.RESEND_API_KEY });
+*/
+const Email = { init: createEmail };
+
+//#endregion
+export { Email };
+//# sourceMappingURL=service.server.mjs.map

package/dist/modules/emails/lib/service.server.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.server.mjs","names":[],"sources":["../../../../src/modules/emails/lib/service.server.ts"],"sourcesContent":["import \"server-cli-only\";\n\nimport { Resend } from \"resend\";\n\ntype InitEmailProps = {\n  key: string;\n};\n\n/**\n * Create a Resend email client.\n */\nfunction createEmail({ key }: InitEmailProps) {\n  return new Resend(key);\n}\n\n/**\n * Resend email client type returned by `Email.init()`.\n */\nexport type Email = ReturnType<typeof createEmail>;\n\n/**\n * Email service namespace.\n *\n * @example\n * const email = Email.init({ key: env.RESEND_API_KEY });\n */\nexport const Email = {\n  init: createEmail,\n};\n"],"mappings":";;;;;;;AAWA,SAAS,YAAY,EAAE,OAAuB;AAC5C,QAAO,IAAI,OAAO,IAAI;;;;;;;;AAcxB,MAAa,QAAQ,EACnB,MAAM,aACP"}

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

@@ -2,9 +2,9 @@
 
 import { cn } from "../../../lib/utils/cn.mjs";
 import { Button } from "../../../components/ui/button.mjs";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.client.mjs";
 import { Input } from "../../../components/ui/input.mjs";
-import { Calendar as Calendar$1 } from "../../../components/ui/calendar.mjs";
+import { Calendar as Calendar$1 } from "../../../components/ui/calendar.client.mjs";
 import { useInlineEdit } from "../hooks/use-inline.client.mjs";
 import { inlineEditVariants } from "../lib/variants.mjs";
 import { CalendarIcon } from "lucide-react";
@@ -40,7 +40,7 @@ function InlineDateInput({ initialValue, action, permission, variant, className,
 		...props,
 		className: cn("relative h-full", className),
 		children: [/* @__PURE__ */ jsx(Input, {
-			"data-input": true,
+			"data-inline-input": "date",
 			type: "string",
 			value: stringDate,
 			className: cn(inlineEditVariants({
@@ -69,7 +69,7 @@ function InlineDateInput({ initialValue, action, permission, variant, className,
 				variant: "ghost",
 				tabIndex: -1,
 				disabled: !isAllowed,
-				className: cn("absolute bottom-0 right-0 top-0 opacity-50", !value && "text-muted-foreground"),
+				className: cn("absolute top-0 right-0 bottom-0 opacity-50", !value && "text-muted-foreground"),
 				children: /* @__PURE__ */ jsx(CalendarIcon, { className: "h-4 w-4" })
 			})
 		})]

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

@@ -1 +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 { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport React, { type ComponentProps } from \"react\";\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 { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { type InlineEditVariantsProps, inlineEditVariants } from \"../lib/variants\";\n\nconst formatDate = (value: Date) => format(value, \"dd/MM/yyyy\");\nconst parseDate = (value: string) => new Date(value.split(\"/\").reverse().join(\"-\"));\nconst isValidDate = (date: Date) => date instanceof Date && date.toString() !== \"Invalid Date\";\n\nexport function InlineDateInput<Required extends boolean = false>({\n  initialValue,\n  action,\n  permission,\n  variant,\n  className,\n  updateStrategy,\n  isRequired,\n  ...props\n}: ComponentProps<\"div\"> & useInlineEditOptions<Date, Required> & InlineEditVariantsProps) {\n  const [inValid, setInValid] = React.useState<boolean>(false);\n\n  const { value, setValue, handleChange, handleBlur, status, isAllowed } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  const [stringDate, setStringDate] = React.useState<string>(\n    initialValue ? formatDate(initialValue) : \"\",\n  );\n\n  /**\n   * Update string date when value changes\n   */\n  React.useEffect(() => {\n    if (value) setStringDate(formatDate(value));\n  }, [value]);\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(inlineEditVariants({ variant, status }), inValid && \"text-destructive\")}\n          disabled={!isAllowed}\n          onChange={(e) => {\n            setStringDate(e.target.value);\n            const parsedDate = parseDate(e.target.value);\n\n            if (!isValidDate(parsedDate)) {\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            handleBlur(isValidDate(parsedDate) ? parsedDate : null);\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\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          autoFocus\n          selected={value ?? undefined}\n          defaultMonth={value ?? undefined}\n          disabled={!isAllowed}\n          onSelect={(selectedDate) => {\n            if (!selectedDate) return;\n\n            setStringDate(formatDate(selectedDate));\n\n            handleChange(selectedDate ?? null);\n            handleBlur(selectedDate ?? null);\n\n            setInValid(false);\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,cAAc,UAAgB,OAAO,OAAO,aAAa;AAC/D,MAAM,aAAa,UAAkB,IAAI,KAAK,MAAM,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;AACnF,MAAM,eAAe,SAAe,gBAAgB,QAAQ,KAAK,UAAU,KAAK;AAEhF,SAAgB,gBAAkD,EAChE,cACA,QACA,YACA,SACA,WACA,gBACA,YACA,GAAG,SACsF;CACzF,MAAM,CAAC,SAAS,cAAc,MAAM,SAAkB,MAAM;CAE5D,MAAM,EAAE,OAAO,UAAU,cAAc,YAAY,QAAQ,cAAc,cAAc;EACrF;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;CAEF,MAAM,CAAC,YAAY,iBAAiB,MAAM,SACxC,eAAe,WAAW,aAAa,GAAG,GAC3C;;;;AAKD,OAAM,gBAAgB;AACpB,MAAI,MAAO,eAAc,WAAW,MAAM,CAAC;IAC1C,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,sBACC,qBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,mBAAmB,UAAU;aACzD,oBAAC;GACC;GACA,MAAK;GACL,OAAO;GACP,WAAW,GAAG,mBAAmB;IAAE;IAAS;IAAQ,CAAC,EAAE,WAAW,mBAAmB;GACrF,UAAU,CAAC;GACX,WAAW,MAAM;AACf,kBAAc,EAAE,OAAO,MAAM;IAC7B,MAAM,aAAa,UAAU,EAAE,OAAO,MAAM;AAE5C,QAAI,CAAC,YAAY,WAAW,EAAE;AAC5B,gBAAW,KAAK;AAChB,cAAS,OAAU;WACd;AACL,gBAAW,MAAM;AACjB,cAAS,WAAW;;;GAGxB,SAAS,MAAM;IACb,MAAM,aAAa,UAAU,EAAE,OAAO,MAAM;AAC5C,eAAW,YAAY,WAAW,GAAG,aAAa,KAAK;;IAEzD,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,EAEN,oBAAC;EAAe,WAAU;YACxB,oBAACA;GACC,MAAK;GACL;GACA,UAAU,SAAS;GACnB,cAAc,SAAS;GACvB,UAAU,CAAC;GACX,WAAW,iBAAiB;AAC1B,QAAI,CAAC,aAAc;AAEnB,kBAAc,WAAW,aAAa,CAAC;AAEvC,iBAAa,gBAAgB,KAAK;AAClC,eAAW,gBAAgB,KAAK;AAEhC,eAAW,MAAM;;IAEnB;GACa,IACT"}
+{"version":3,"file":"date-input.client.mjs","names":["Calendar"],"sources":["../../../../src/modules/inline-edit/components/date-input.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { format } from \"date-fns\";\nimport { CalendarIcon } from \"lucide-react\";\nimport React, { type ComponentProps } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar.client\";\nimport { Input } from \"@/components/ui/input\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover.client\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { type InlineEditVariantsProps, inlineEditVariants } from \"../lib/variants\";\n\nconst formatDate = (value: Date) => format(value, \"dd/MM/yyyy\");\nconst parseDate = (value: string) => new Date(value.split(\"/\").reverse().join(\"-\"));\nconst isValidDate = (date: Date) => date instanceof Date && date.toString() !== \"Invalid Date\";\n\nexport function InlineDateInput<Required extends boolean = false>({\n  initialValue,\n  action,\n  permission,\n  variant,\n  className,\n  updateStrategy,\n  isRequired,\n  ...props\n}: ComponentProps<\"div\"> & useInlineEditOptions<Date, Required> & InlineEditVariantsProps) {\n  const [inValid, setInValid] = React.useState<boolean>(false);\n\n  const { value, setValue, handleChange, handleBlur, status, isAllowed } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  const [stringDate, setStringDate] = React.useState<string>(\n    initialValue ? formatDate(initialValue) : \"\",\n  );\n\n  /**\n   * Update string date when value changes\n   */\n  React.useEffect(() => {\n    if (value) setStringDate(formatDate(value));\n  }, [value]);\n\n  return (\n    <Popover>\n      <div {...props} className={cn(\"relative h-full\", className)}>\n        <Input\n          data-inline-input=\"date\"\n          type=\"string\"\n          value={stringDate}\n          className={cn(inlineEditVariants({ variant, status }), inValid && \"text-destructive\")}\n          disabled={!isAllowed}\n          onChange={(e) => {\n            setStringDate(e.target.value);\n            const parsedDate = parseDate(e.target.value);\n\n            if (!isValidDate(parsedDate)) {\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            handleBlur(isValidDate(parsedDate) ? parsedDate : null);\n          }}\n        />\n\n        <PopoverTrigger asChild>\n          <Button\n            variant=\"ghost\"\n            tabIndex={-1}\n            disabled={!isAllowed}\n            className={cn(\n              \"absolute top-0 right-0 bottom-0 opacity-50\",\n              !value && \"text-muted-foreground\",\n            )}\n          >\n            <CalendarIcon className=\"h-4 w-4\" />\n          </Button>\n        </PopoverTrigger>\n      </div>\n\n      <PopoverContent className=\"w-auto p-0\">\n        <Calendar\n          mode=\"single\"\n          autoFocus\n          selected={value ?? undefined}\n          defaultMonth={value ?? undefined}\n          disabled={!isAllowed}\n          onSelect={(selectedDate) => {\n            if (!selectedDate) return;\n\n            setStringDate(formatDate(selectedDate));\n\n            handleChange(selectedDate ?? null);\n            handleBlur(selectedDate ?? null);\n\n            setInValid(false);\n          }}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;AAaA,MAAM,cAAc,UAAgB,OAAO,OAAO,aAAa;AAC/D,MAAM,aAAa,UAAkB,IAAI,KAAK,MAAM,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,CAAC;AACnF,MAAM,eAAe,SAAe,gBAAgB,QAAQ,KAAK,UAAU,KAAK;AAEhF,SAAgB,gBAAkD,EAChE,cACA,QACA,YACA,SACA,WACA,gBACA,YACA,GAAG,SACsF;CACzF,MAAM,CAAC,SAAS,cAAc,MAAM,SAAkB,MAAM;CAE5D,MAAM,EAAE,OAAO,UAAU,cAAc,YAAY,QAAQ,cAAc,cAAc;EACrF;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;CAEF,MAAM,CAAC,YAAY,iBAAiB,MAAM,SACxC,eAAe,WAAW,aAAa,GAAG,GAC3C;;;;AAKD,OAAM,gBAAgB;AACpB,MAAI,MAAO,eAAc,WAAW,MAAM,CAAC;IAC1C,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,sBACC,qBAAC;EAAI,GAAI;EAAO,WAAW,GAAG,mBAAmB,UAAU;aACzD,oBAAC;GACC,qBAAkB;GAClB,MAAK;GACL,OAAO;GACP,WAAW,GAAG,mBAAmB;IAAE;IAAS;IAAQ,CAAC,EAAE,WAAW,mBAAmB;GACrF,UAAU,CAAC;GACX,WAAW,MAAM;AACf,kBAAc,EAAE,OAAO,MAAM;IAC7B,MAAM,aAAa,UAAU,EAAE,OAAO,MAAM;AAE5C,QAAI,CAAC,YAAY,WAAW,EAAE;AAC5B,gBAAW,KAAK;AAChB,cAAS,OAAU;WACd;AACL,gBAAW,MAAM;AACjB,cAAS,WAAW;;;GAGxB,SAAS,MAAM;IACb,MAAM,aAAa,UAAU,EAAE,OAAO,MAAM;AAC5C,eAAW,YAAY,WAAW,GAAG,aAAa,KAAK;;IAEzD,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,EAEN,oBAAC;EAAe,WAAU;YACxB,oBAACA;GACC,MAAK;GACL;GACA,UAAU,SAAS;GACnB,cAAc,SAAS;GACvB,UAAU,CAAC;GACX,WAAW,iBAAiB;AAC1B,QAAI,CAAC,aAAc;AAEnB,kBAAc,WAAW,aAAa,CAAC;AAEvC,iBAAa,gBAAgB,KAAK;AAClC,eAAW,gBAAgB,KAAK;AAEhC,eAAW,MAAM;;IAEnB;GACa,IACT"}

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

@@ -3,8 +3,8 @@
 import { cn } from "../../../lib/utils/cn.mjs";
 import { Button } from "../../../components/ui/button.mjs";
 import { formatDate } from "../../../lib/utils/format.mjs";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.mjs";
-import { Calendar as Calendar$1 } from "../../../components/ui/calendar.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../../../components/ui/popover.client.mjs";
+import { Calendar as Calendar$1 } from "../../../components/ui/calendar.client.mjs";
 import { useInlineEdit } from "../hooks/use-inline.client.mjs";
 import { inlineEditVariants } from "../lib/variants.mjs";
 import { CalendarIcon } from "lucide-react";
@@ -35,6 +35,7 @@ function InlineDatePicker({ initialValue, action, permission, variant, className
 			asChild: true,
 			children: /* @__PURE__ */ jsxs(Button, {
 				...props,
+				"data-inline-input": "date-picker",
 				type: "button",
 				variant: "outline",
 				className: cn("w-full", inlineEditVariants({

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker.client.mjs","names":["Calendar"],"sources":["../../../../src/modules/inline-edit/components/date-picker.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { CalendarIcon } from \"lucide-react\";\nimport React, { type ComponentProps } from \"react\";\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 { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { type InlineEditVariantsProps, inlineEditVariants } from \"../lib/variants\";\n\ntype InlineEditDatePickerProps<Required extends boolean> = ComponentProps<typeof Button> &\n  useInlineEditOptions<Date, Required> &\n  InlineEditVariantsProps;\n\nexport function InlineDatePicker<Required extends boolean = false>({\n  initialValue,\n  action,\n  permission,\n  variant,\n  className,\n  disabled,\n  updateStrategy,\n  isRequired,\n  ...props\n}: InlineEditDatePickerProps<Required>) {\n  const [open, setOpen] = React.useState(false);\n\n  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(open) => {\n        setOpen(open);\n        if (!open && value) handleBlur(value);\n      }}\n    >\n      <PopoverTrigger asChild>\n        <Button\n          {...props}\n          type=\"button\"\n          variant=\"outline\"\n          className={cn(\"w-full\", inlineEditVariants({ variant, status }), 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          autoFocus\n          selected={value ? new Date(value) : undefined}\n          onSelect={(date) => handleChange(date ?? null)}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,SAAgB,iBAAmD,EACjE,cACA,QACA,YACA,SACA,WACA,UACA,gBACA,YACA,GAAG,SACmC;CACtC,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,MAAM;CAE7C,MAAM,EAAE,OAAO,cAAc,YAAY,WAAW,WAAW,cAAc;EAC3E;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;AAEF,QACE,qBAAC;EACO;EACN,eAAe,SAAS;AACtB,WAAQ,KAAK;AACb,OAAI,CAAC,QAAQ,MAAO,YAAW,MAAM;;aAGvC,oBAAC;GAAe;aACd,qBAAC;IACC,GAAI;IACJ,MAAK;IACL,SAAQ;IACR,WAAW,GAAG,UAAU,mBAAmB;KAAE;KAAS;KAAQ,CAAC,EAAE,UAAU;IAC3E,UAAU,YAAY,CAAC;eAEvB,oBAAC,gBAAa,WAAU,iBAAiB,EACxC,QAAQ,WAAW,MAAM,GAAG,oBAAC,oBAAK,mBAAqB;KACjD;IACM,EAEjB,oBAAC;GAAe,WAAU;aACxB,oBAACA;IACC,MAAK;IACL;IACA,UAAU,QAAQ,IAAI,KAAK,MAAM,GAAG;IACpC,WAAW,SAAS,aAAa,QAAQ,KAAK;KAC9C;IACa;GACT"}
+{"version":3,"file":"date-picker.client.mjs","names":["Calendar"],"sources":["../../../../src/modules/inline-edit/components/date-picker.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { CalendarIcon } from \"lucide-react\";\nimport React, { type ComponentProps } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Calendar } from \"@/components/ui/calendar.client\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover.client\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { formatDate } from \"@/lib/utils/format\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { type InlineEditVariantsProps, inlineEditVariants } from \"../lib/variants\";\n\ntype InlineEditDatePickerProps<Required extends boolean> = ComponentProps<typeof Button> &\n  useInlineEditOptions<Date, Required> &\n  InlineEditVariantsProps;\n\nexport function InlineDatePicker<Required extends boolean = false>({\n  initialValue,\n  action,\n  permission,\n  variant,\n  className,\n  disabled,\n  updateStrategy,\n  isRequired,\n  ...props\n}: InlineEditDatePickerProps<Required>) {\n  const [open, setOpen] = React.useState(false);\n\n  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(open) => {\n        setOpen(open);\n        if (!open && value) handleBlur(value);\n      }}\n    >\n      <PopoverTrigger asChild>\n        <Button\n          {...props}\n          data-inline-input=\"date-picker\"\n          type=\"button\"\n          variant=\"outline\"\n          className={cn(\"w-full\", inlineEditVariants({ variant, status }), 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          autoFocus\n          selected={value ? new Date(value) : undefined}\n          onSelect={(date) => handleChange(date ?? null)}\n        />\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,SAAgB,iBAAmD,EACjE,cACA,QACA,YACA,SACA,WACA,UACA,gBACA,YACA,GAAG,SACmC;CACtC,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,MAAM;CAE7C,MAAM,EAAE,OAAO,cAAc,YAAY,WAAW,WAAW,cAAc;EAC3E;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;AAEF,QACE,qBAAC;EACO;EACN,eAAe,SAAS;AACtB,WAAQ,KAAK;AACb,OAAI,CAAC,QAAQ,MAAO,YAAW,MAAM;;aAGvC,oBAAC;GAAe;aACd,qBAAC;IACC,GAAI;IACJ,qBAAkB;IAClB,MAAK;IACL,SAAQ;IACR,WAAW,GAAG,UAAU,mBAAmB;KAAE;KAAS;KAAQ,CAAC,EAAE,UAAU;IAC3E,UAAU,YAAY,CAAC;eAEvB,oBAAC,gBAAa,WAAU,iBAAiB,EACxC,QAAQ,WAAW,MAAM,GAAG,oBAAC,oBAAK,mBAAqB;KACjD;IACM,EAEjB,oBAAC;GAAe,WAAU;aACxB,oBAACA;IACC,MAAK;IACL;IACA,UAAU,QAAQ,IAAI,KAAK,MAAM,GAAG;IACpC,WAAW,SAAS,aAAa,QAAQ,KAAK;KAC9C;IACa;GACT"}

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

@@ -1,4 +1,4 @@
-import { DateTimeInput } from "../../../components/ui/input-date-time.mjs";
+import { DateTimeInput } from "../../../components/ui/input-date-time.client.mjs";
 import { useInlineEditOptions } from "../hooks/use-inline.client.mjs";
 import { InlineEditVariantsProps } from "../lib/variants.mjs";
 import * as react_jsx_runtime0 from "react/jsx-runtime";

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "../../../lib/utils/cn.mjs";
-import { DateTimeInput } from "../../../components/ui/input-date-time.mjs";
+import { DateTimeInput } from "../../../components/ui/input-date-time.client.mjs";
 import { useInlineEdit } from "../hooks/use-inline.client.mjs";
 import { inlineEditVariants } from "../lib/variants.mjs";
 import { jsx } from "react/jsx-runtime";
@@ -21,6 +21,7 @@ function InlineDateTimeInput({ initialValue, action, permission, variant, classN
 		}
 	});
 	return /* @__PURE__ */ jsx(DateTimeInput, {
+		"data-inline-input": "date-time",
 		value: value ?? void 0,
 		className: cn(inlineEditVariants({
 			variant,

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

@@ -1 +1 @@
-{"version":3,"file":"date-time.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/date-time.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { format } from \"date-fns\";\nimport type { ComponentProps } from \"react\";\nimport { DateTimeInput } from \"@/components/ui/input-date-time\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { type InlineEditVariantsProps, inlineEditVariants } from \"../lib/variants\";\n\nexport function InlineDateTimeInput<Required extends boolean = false>({\n  initialValue,\n  action,\n  permission,\n  variant,\n  className,\n  updateStrategy,\n  isRequired,\n  disabled,\n  ...props\n}: ComponentProps<typeof DateTimeInput> &\n  useInlineEditOptions<Date, Required> &\n  InlineEditVariantsProps) {\n  const { value, handleChange, handleBlur, status, isAllowed } = useInlineEdit<\n    string,\n    Date,\n    Required\n  >({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) =>\n        (value instanceof Date\n          ? format(value, \"yyyy-MM-dd'T'HH:mm\")\n          : typeof value === \"string\"\n            ? value\n            : undefined) as string,\n      encode: (value) => (value ? new Date(value) : null) as Date,\n    },\n  });\n\n  return (\n    <DateTimeInput\n      value={value ?? undefined}\n      className={cn(inlineEditVariants({ variant, status }), className)}\n      disabled={disabled || !isAllowed}\n      onValueChange={(date) => handleChange(date ?? null)}\n      onValueBlur={(date) => handleBlur(date ?? null)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,oBAAsD,EACpE,cACA,QACA,YACA,SACA,WACA,gBACA,YACA,UACA,GAAG,SAGsB;CACzB,MAAM,EAAE,OAAO,cAAc,YAAY,QAAQ,cAAc,cAI7D;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UACN,iBAAiB,OACd,OAAO,OAAO,qBAAqB,GACnC,OAAO,UAAU,WACf,QACA;GACR,SAAS,UAAW,QAAQ,IAAI,KAAK,MAAM,GAAG;GAC/C;EACF,CAAC;AAEF,QACE,oBAAC;EACC,OAAO,SAAS;EAChB,WAAW,GAAG,mBAAmB;GAAE;GAAS;GAAQ,CAAC,EAAE,UAAU;EACjE,UAAU,YAAY,CAAC;EACvB,gBAAgB,SAAS,aAAa,QAAQ,KAAK;EACnD,cAAc,SAAS,WAAW,QAAQ,KAAK;EAC/C,GAAI;GACJ"}
+{"version":3,"file":"date-time.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/date-time.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { format } from \"date-fns\";\nimport type { ComponentProps } from \"react\";\nimport { DateTimeInput } from \"@/components/ui/input-date-time.client\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { type InlineEditVariantsProps, inlineEditVariants } from \"../lib/variants\";\n\nexport function InlineDateTimeInput<Required extends boolean = false>({\n  initialValue,\n  action,\n  permission,\n  variant,\n  className,\n  updateStrategy,\n  isRequired,\n  disabled,\n  ...props\n}: ComponentProps<typeof DateTimeInput> &\n  useInlineEditOptions<Date, Required> &\n  InlineEditVariantsProps) {\n  const { value, handleChange, handleBlur, status, isAllowed } = useInlineEdit<\n    string,\n    Date,\n    Required\n  >({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) =>\n        (value instanceof Date\n          ? format(value, \"yyyy-MM-dd'T'HH:mm\")\n          : typeof value === \"string\"\n            ? value\n            : undefined) as string,\n      encode: (value) => (value ? new Date(value) : null) as Date,\n    },\n  });\n\n  return (\n    <DateTimeInput\n      data-inline-input=\"date-time\"\n      value={value ?? undefined}\n      className={cn(inlineEditVariants({ variant, status }), className)}\n      disabled={disabled || !isAllowed}\n      onValueChange={(date) => handleChange(date ?? null)}\n      onValueBlur={(date) => handleBlur(date ?? null)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,oBAAsD,EACpE,cACA,QACA,YACA,SACA,WACA,gBACA,YACA,UACA,GAAG,SAGsB;CACzB,MAAM,EAAE,OAAO,cAAc,YAAY,QAAQ,cAAc,cAI7D;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UACN,iBAAiB,OACd,OAAO,OAAO,qBAAqB,GACnC,OAAO,UAAU,WACf,QACA;GACR,SAAS,UAAW,QAAQ,IAAI,KAAK,MAAM,GAAG;GAC/C;EACF,CAAC;AAEF,QACE,oBAAC;EACC,qBAAkB;EAClB,OAAO,SAAS;EAChB,WAAW,GAAG,mBAAmB;GAAE;GAAS;GAAQ,CAAC,EAAE,UAAU;EACjE,UAAU,YAAY,CAAC;EACvB,gBAAgB,SAAS,aAAa,QAAQ,KAAK;EACnD,cAAc,SAAS,WAAW,QAAQ,KAAK;EAC/C,GAAI;GACJ"}

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

@@ -30,6 +30,7 @@ function InlineEditor({ initialValue, action, extensions, variant, disabled, per
 		}), className),
 		disabled: disabled || !isAllowed,
 		variant,
+		attributes: { "data-inline-input": "editor" },
 		children
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"editor.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/editor.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Editor, type EditorProps } from \"@/components/editor/components/editor.client\";\nimport type { EditorJSONContent } from \"@/components/editor/lib/types\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { type InlineEditVariantsProps, inlineEditVariants } from \"../lib/variants\";\n\nexport type InlineEditorProps<Required extends boolean = false> = useInlineEditOptions<\n  EditorJSONContent,\n  Required\n> &\n  InlineEditVariantsProps &\n  Omit<EditorProps, \"value\" | \"onUpdate\" | \"onBlur\" | \"variant\">;\n\nexport function InlineEditor<Required extends boolean = false>({\n  initialValue,\n  action,\n  extensions,\n  variant,\n  disabled,\n  permission,\n  updateStrategy,\n  isRequired,\n  className,\n  children,\n}: InlineEditorProps<Required>) {\n  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  return (\n    <Editor\n      value={value}\n      extensions={extensions}\n      onUpdate={(value) => handleChange(value)}\n      onBlur={(value) => handleBlur(value)}\n      className={cn(inlineEditVariants({ variant, status }), className)}\n      disabled={disabled || !isAllowed}\n      variant={variant}\n    >\n      {children}\n    </Editor>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,aAA+C,EAC7D,cACA,QACA,YACA,SACA,UACA,YACA,gBACA,YACA,WACA,YAC8B;CAC9B,MAAM,EAAE,OAAO,cAAc,YAAY,WAAW,WAAW,cAAc;EAC3E;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;AAEF,QACE,oBAAC;EACQ;EACK;EACZ,WAAW,UAAU,aAAa,MAAM;EACxC,SAAS,UAAU,WAAW,MAAM;EACpC,WAAW,GAAG,mBAAmB;GAAE;GAAS;GAAQ,CAAC,EAAE,UAAU;EACjE,UAAU,YAAY,CAAC;EACd;EAER;GACM"}
+{"version":3,"file":"editor.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/editor.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Editor, type EditorProps } from \"@/components/editor/components/editor.client\";\nimport type { EditorJSONContent } from \"@/components/editor/lib/types\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { type InlineEditVariantsProps, inlineEditVariants } from \"../lib/variants\";\n\nexport type InlineEditorProps<Required extends boolean = false> = useInlineEditOptions<\n  EditorJSONContent,\n  Required\n> &\n  InlineEditVariantsProps &\n  Omit<EditorProps, \"value\" | \"onUpdate\" | \"onBlur\" | \"variant\">;\n\nexport function InlineEditor<Required extends boolean = false>({\n  initialValue,\n  action,\n  extensions,\n  variant,\n  disabled,\n  permission,\n  updateStrategy,\n  isRequired,\n  className,\n  children,\n}: InlineEditorProps<Required>) {\n  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  return (\n    <Editor\n      value={value}\n      extensions={extensions}\n      onUpdate={(value) => handleChange(value)}\n      onBlur={(value) => handleBlur(value)}\n      className={cn(inlineEditVariants({ variant, status }), className)}\n      disabled={disabled || !isAllowed}\n      variant={variant}\n      attributes={{\n        \"data-inline-input\": \"editor\",\n      }}\n    >\n      {children}\n    </Editor>\n  );\n}\n"],"mappings":";;;;;;;;;AAeA,SAAgB,aAA+C,EAC7D,cACA,QACA,YACA,SACA,UACA,YACA,gBACA,YACA,WACA,YAC8B;CAC9B,MAAM,EAAE,OAAO,cAAc,YAAY,WAAW,WAAW,cAAc;EAC3E;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;AAEF,QACE,oBAAC;EACQ;EACK;EACZ,WAAW,UAAU,aAAa,MAAM;EACxC,SAAS,UAAU,WAAW,MAAM;EACpC,WAAW,GAAG,mBAAmB;GAAE;GAAS;GAAQ,CAAC,EAAE,UAAU;EACjE,UAAU,YAAY,CAAC;EACd;EACT,YAAY,EACV,qBAAqB,UACtB;EAEA;GACM"}

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

@@ -24,6 +24,7 @@ function InlineRecipientInput({ initialValue, action, variant, disabled, contact
 	});
 	return /* @__PURE__ */ jsx(RecipientInput, {
 		...props,
+		"data-inline-input": "recipient",
 		contacts,
 		value: value ?? [],
 		onChange: (newValue) => {

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

@@ -1 +1 @@
-{"version":3,"file":"input-recipient.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/input-recipient.client.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { type Contact, RecipientInput } from \"@/components/ui/input-recipient\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { type InlineEditVariantsProps, inlineEditVariants } from \"../lib/variants\";\n\ntype InlineRecipientInputProps<Required extends boolean = false> = Omit<\n  ComponentProps<typeof RecipientInput>,\n  \"value\" | \"onChange\"\n> &\n  useInlineEditOptions<string[], Required> &\n  InlineEditVariantsProps & {\n    contacts: Contact[];\n  };\n\n/**\n * The inline edit recipient input component.\n */\nexport function InlineRecipientInput<Required extends boolean = false>({\n  initialValue,\n  action,\n  variant,\n  disabled,\n  contacts,\n  permission,\n  updateStrategy,\n  isRequired,\n  className,\n  ...props\n}: InlineRecipientInputProps<Required>) {\n  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  return (\n    <RecipientInput\n      {...props}\n      contacts={contacts}\n      value={value ?? []}\n      onChange={(newValue) => {\n        handleChange(newValue);\n        handleBlur(newValue);\n      }}\n      disabled={disabled || !isAllowed}\n      className={cn(inlineEditVariants({ variant, status }), className)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAgB,qBAAuD,EACrE,cACA,QACA,SACA,UACA,UACA,YACA,gBACA,YACA,WACA,GAAG,SACmC;CACtC,MAAM,EAAE,OAAO,cAAc,YAAY,WAAW,WAAW,cAAc;EAC3E;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;AAEF,QACE,oBAAC;EACC,GAAI;EACM;EACV,OAAO,SAAS,EAAE;EAClB,WAAW,aAAa;AACtB,gBAAa,SAAS;AACtB,cAAW,SAAS;;EAEtB,UAAU,YAAY,CAAC;EACvB,WAAW,GAAG,mBAAmB;GAAE;GAAS;GAAQ,CAAC,EAAE,UAAU;GACjE"}
+{"version":3,"file":"input-recipient.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/input-recipient.client.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { type Contact, RecipientInput } from \"@/components/ui/input-recipient\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\nimport { type InlineEditVariantsProps, inlineEditVariants } from \"../lib/variants\";\n\ntype InlineRecipientInputProps<Required extends boolean = false> = Omit<\n  ComponentProps<typeof RecipientInput>,\n  \"value\" | \"onChange\"\n> &\n  useInlineEditOptions<string[], Required> &\n  InlineEditVariantsProps & {\n    contacts: Contact[];\n  };\n\n/**\n * The inline edit recipient input component.\n */\nexport function InlineRecipientInput<Required extends boolean = false>({\n  initialValue,\n  action,\n  variant,\n  disabled,\n  contacts,\n  permission,\n  updateStrategy,\n  isRequired,\n  className,\n  ...props\n}: InlineRecipientInputProps<Required>) {\n  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  return (\n    <RecipientInput\n      {...props}\n      data-inline-input=\"recipient\"\n      contacts={contacts}\n      value={value ?? []}\n      onChange={(newValue) => {\n        handleChange(newValue);\n        handleBlur(newValue);\n      }}\n      disabled={disabled || !isAllowed}\n      className={cn(inlineEditVariants({ variant, status }), className)}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAgB,qBAAuD,EACrE,cACA,QACA,SACA,UACA,UACA,YACA,gBACA,YACA,WACA,GAAG,SACmC;CACtC,MAAM,EAAE,OAAO,cAAc,YAAY,WAAW,WAAW,cAAc;EAC3E;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;AAEF,QACE,oBAAC;EACC,GAAI;EACJ,qBAAkB;EACR;EACV,OAAO,SAAS,EAAE;EAClB,WAAW,aAAa;AACtB,gBAAa,SAAS;AACtB,cAAW,SAAS;;EAEtB,UAAU,YAAY,CAAC;EACvB,WAAW,GAAG,mBAAmB;GAAE;GAAS;GAAQ,CAAC,EAAE,UAAU;GACjE"}

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

@@ -32,17 +32,18 @@ function InlineStringInputToggle({ initialValue, action, disabled, permission, u
 		className: "relative",
 		children: [/* @__PURE__ */ jsx(Input, {
 			...props,
+			"data-inline-input": "input-toggle",
 			type: "text",
 			value: value ?? void 0,
 			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)
 		}), /* @__PURE__ */ jsx(Button, {
 			variant: "ghost",
 			onClick: handleToggle,
 			tabIndex: -1,
-			className: cn("absolute bottom-0 right-0 top-0 opacity-50", !value && "text-muted-foreground"),
+			className: cn("absolute top-0 right-0 bottom-0 opacity-50", !value && "text-muted-foreground"),
 			children: enabled ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(XIcon, {})
 		})]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"input-toggle.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/input-toggle.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { type ComponentProps, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/entry\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\n\ntype InlineStringInputToggleProps<Required extends boolean = false> = Omit<\n  ComponentProps<typeof Input>,\n  \"type\"\n> &\n  useInlineEditOptions<string, Required>;\n\nexport function InlineStringInputToggle<Required extends boolean>({\n  initialValue,\n  action,\n  disabled,\n  permission,\n  updateStrategy,\n  isRequired,\n  className,\n  ...props\n}: InlineStringInputToggleProps<Required>) {\n  const [enabled, setEnabled] = useState(!!initialValue);\n\n  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  function handleToggle() {\n    setEnabled(!enabled);\n    if (!enabled) return;\n\n    handleBlur(null);\n  }\n\n  const isDisabled = !enabled || disabled || !isAllowed;\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        type=\"text\"\n        value={value ?? undefined}\n        disabled={isDisabled}\n        onChange={(e) => handleChange(e.target.value ? e.target.value : null)}\n        onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}\n        className={cn(\"border-border/70 hover:border-border w-full\", className)}\n      />\n\n      <Button\n        variant=\"ghost\"\n        onClick={handleToggle}\n        tabIndex={-1}\n        className={cn(\n          \"absolute bottom-0 right-0 top-0 opacity-50\",\n          !value && \"text-muted-foreground\",\n        )}\n      >\n        {enabled ? <CheckIcon /> : <XIcon />}\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAeA,SAAgB,wBAAkD,EAChE,cACA,QACA,UACA,YACA,gBACA,YACA,WACA,GAAG,SACsC;CACzC,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,CAAC,aAAa;CAEtD,MAAM,EAAE,OAAO,cAAc,YAAY,cAAc,cAAc;EACnE;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;CAEF,SAAS,eAAe;AACtB,aAAW,CAAC,QAAQ;AACpB,MAAI,CAAC,QAAS;AAEd,aAAW,KAAK;;CAGlB,MAAM,aAAa,CAAC,WAAW,YAAY,CAAC;AAE5C,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,GAAI;GACJ,MAAK;GACL,OAAO,SAAS;GAChB,UAAU;GACV,WAAW,MAAM,aAAa,EAAE,OAAO,QAAQ,EAAE,OAAO,QAAQ,KAAK;GACrE,SAAS,MAAM,WAAW,EAAE,OAAO,QAAQ,EAAE,OAAO,QAAQ,KAAK;GACjE,WAAW,GAAG,+CAA+C,UAAU;IACvE,EAEF,oBAAC;GACC,SAAQ;GACR,SAAS;GACT,UAAU;GACV,WAAW,GACT,8CACA,CAAC,SAAS,wBACX;aAEA,UAAU,oBAAC,cAAY,GAAG,oBAAC,UAAQ;IAC7B;GACL"}
+{"version":3,"file":"input-toggle.client.mjs","names":[],"sources":["../../../../src/modules/inline-edit/components/input-toggle.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckIcon, XIcon } from \"lucide-react\";\nimport { type ComponentProps, useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/entry\";\nimport { useInlineEdit, type useInlineEditOptions } from \"../hooks/use-inline.client\";\n\ntype InlineStringInputToggleProps<Required extends boolean = false> = Omit<\n  ComponentProps<typeof Input>,\n  \"type\"\n> &\n  useInlineEditOptions<string, Required>;\n\nexport function InlineStringInputToggle<Required extends boolean>({\n  initialValue,\n  action,\n  disabled,\n  permission,\n  updateStrategy,\n  isRequired,\n  className,\n  ...props\n}: InlineStringInputToggleProps<Required>) {\n  const [enabled, setEnabled] = useState(!!initialValue);\n\n  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({\n    initialValue,\n    action,\n    permission,\n    updateStrategy,\n    isRequired,\n    parser: {\n      decode: (value) => value,\n      encode: (value) => value,\n    },\n  });\n\n  function handleToggle() {\n    setEnabled(!enabled);\n    if (!enabled) return;\n\n    handleBlur(null);\n  }\n\n  const isDisabled = !enabled || disabled || !isAllowed;\n\n  return (\n    <div className=\"relative\">\n      <Input\n        {...props}\n        data-inline-input=\"input-toggle\"\n        type=\"text\"\n        value={value ?? undefined}\n        disabled={isDisabled}\n        onChange={(e) => handleChange(e.target.value ? e.target.value : null)}\n        onBlur={(e) => handleBlur(e.target.value ? e.target.value : null)}\n        className={cn(\"w-full border-border/70 hover:border-border\", className)}\n      />\n\n      <Button\n        variant=\"ghost\"\n        onClick={handleToggle}\n        tabIndex={-1}\n        className={cn(\n          \"absolute top-0 right-0 bottom-0 opacity-50\",\n          !value && \"text-muted-foreground\",\n        )}\n      >\n        {enabled ? <CheckIcon /> : <XIcon />}\n      </Button>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAeA,SAAgB,wBAAkD,EAChE,cACA,QACA,UACA,YACA,gBACA,YACA,WACA,GAAG,SACsC;CACzC,MAAM,CAAC,SAAS,cAAc,SAAS,CAAC,CAAC,aAAa;CAEtD,MAAM,EAAE,OAAO,cAAc,YAAY,cAAc,cAAc;EACnE;EACA;EACA;EACA;EACA;EACA,QAAQ;GACN,SAAS,UAAU;GACnB,SAAS,UAAU;GACpB;EACF,CAAC;CAEF,SAAS,eAAe;AACtB,aAAW,CAAC,QAAQ;AACpB,MAAI,CAAC,QAAS;AAEd,aAAW,KAAK;;CAGlB,MAAM,aAAa,CAAC,WAAW,YAAY,CAAC;AAE5C,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,GAAI;GACJ,qBAAkB;GAClB,MAAK;GACL,OAAO,SAAS;GAChB,UAAU;GACV,WAAW,MAAM,aAAa,EAAE,OAAO,QAAQ,EAAE,OAAO,QAAQ,KAAK;GACrE,SAAS,MAAM,WAAW,EAAE,OAAO,QAAQ,EAAE,OAAO,QAAQ,KAAK;GACjE,WAAW,GAAG,+CAA+C,UAAU;IACvE,EAEF,oBAAC;GACC,SAAQ;GACR,SAAS;GACT,UAAU;GACV,WAAW,GACT,8CACA,CAAC,SAAS,wBACX;aAEA,UAAU,oBAAC,cAAY,GAAG,oBAAC,UAAQ;IAC7B;GACL"}

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

@@ -1 +1 @@
-{"version":3,"file":"input.client.d.mts","names":[],"sources":["../../../../src/modules/inline-edit/components/input.client.tsx"],"mappings":";;;;;;;KAQK,oBAAA,6CAAiE,IAAA,CACpE,cAAA,QAAsB,KAAA,aAGtB,oBAAA,CAAqB,MAAA,EAAQ,QAAA,IAC7B,uBAAA;;;AAPiF;iBAYnE,iBAAA,kCAAA,CAAA;EACd,YAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,SAA6B,QAAA,IAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAoCzB,iBAAA,kCAAA,CAAA;EACd,YAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,SAA6B,QAAA,IAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAiCzB,kBAAA,CAAA;EACd,YAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,WAA4B,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"input.client.d.mts","names":[],"sources":["../../../../src/modules/inline-edit/components/input.client.tsx"],"mappings":";;;;;;;KAQK,oBAAA,6CAAiE,IAAA,CACpE,cAAA,QAAsB,KAAA,aAGtB,oBAAA,CAAqB,MAAA,EAAQ,QAAA,IAC7B,uBAAA;;;AAPiF;iBAYnE,iBAAA,kCAAA,CAAA;EACd,YAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,SAA6B,QAAA,IAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;AAAA,iBAqCzB,iBAAA,kCAAA,CAAA;EACd,YAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,SAA6B,QAAA,IAAS,kBAAA,CAAA,GAAA,CAAA,OAAA;;;;iBAkCzB,kBAAA,CAAA;EACd,YAAA;EACA,MAAA;EACA,OAAA;EACA,SAAA;EACA,UAAA;EACA,cAAA;EACA,UAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,oBAAA,WAA4B,kBAAA,CAAA,GAAA,CAAA,OAAA"}