@tulip-systems/core 0.2.0

package/dist/modules/data-tables/tables/inline-table/components/inputs/advanced-select.client.js

@@ -0,0 +1,53 @@
+"use client";
+
+
+import { Icons } from "../../../../../../components/common/icons.js";
+import { cn } from "../../../../../../lib/utils/cn.js";
+import { DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../../../../../components/ui/dropdown-menu.js";
+import { useInlineTableContext } from "../../hooks/context.client.js";
+import { useInlineDataTableInput } from "../../hooks/use-input.client.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DropdownMenu } from "@radix-ui/react-dropdown-menu";
+
+//#region src/modules/data-tables/tables/inline-table/components/inputs/advanced-select.client.tsx
+function InlineDataTableAdvancedSelect({ context, action, permission, options, disabled, autoSelect, className }) {
+	const { disabledColumns } = useInlineTableContext();
+	const { value, setValue, isAllowed } = useInlineDataTableInput({
+		context,
+		action,
+		permission
+	});
+	const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-full",
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "text",
+			value: value ?? "",
+			"data-input": true,
+			disabled: isDisabled,
+			onFocus: (e) => {
+				if (autoSelect) e.target.select();
+			},
+			onChange: (e) => {
+				setValue(e.target.value);
+			},
+			className: cn("h- placeholder:text-primary-foreground read-only:bg-muted/50 flex w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", className)
+		}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			disabled: isDisabled,
+			className: "bg-muted/30 flex aspect-square h-full items-center justify-center rounded-none border-none outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none",
+			children: /* @__PURE__ */ jsx(Icons.chevronDown, { className: "size-4 opacity-50" })
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "w-56",
+			children: options.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, {
+				disabled: item.disabled,
+				className: "cursor-pointer",
+				onSelect: () => setValue(item.id),
+				children: item.label
+			}, item.id))
+		})] })]
+	});
+}
+
+//#endregion
+export { InlineDataTableAdvancedSelect };
+//# sourceMappingURL=advanced-select.client.js.map

package/dist/modules/data-tables/tables/inline-table/components/inputs/advanced-select.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"advanced-select.client.js","names":[],"sources":["../../../../../../../src/modules/data-tables/tables/inline-table/components/inputs/advanced-select.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Icons } from \"@/components/common/icons\";\nimport {\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { DropdownMenu } from \"@radix-ui/react-dropdown-menu\";\nimport { useInlineTableContext } from \"../../hooks/context.client\";\nimport {\n  useInlineDataTableInput,\n  UseInlineDataTableInputParams,\n} from \"../../hooks/use-input.client\";\n\nexport type AdvancedSelectItem = {\n  id: string;\n  label: string;\n  disabled?: boolean;\n};\n\nexport type InlineDataTableAdvancedSelectProps<TData, TValue> = UseInlineDataTableInputParams<\n  TData,\n  TValue\n> & {\n  options: AdvancedSelectItem[];\n  disabled?: boolean;\n  className?: string;\n  autoSelect?: boolean;\n};\n\nexport function InlineDataTableAdvancedSelect<TData extends { id: string }, TValue>({\n  context,\n  action,\n  permission,\n  options,\n  disabled,\n  autoSelect,\n  className,\n}: InlineDataTableAdvancedSelectProps<TData, TValue>) {\n  const { disabledColumns } = useInlineTableContext();\n\n  const { value, setValue, isAllowed } = useInlineDataTableInput({ context, action, permission });\n\n  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;\n\n  return (\n    <div className=\"flex h-full\">\n      <input\n        type=\"text\"\n        value={(value as string) ?? \"\"}\n        data-input\n        disabled={isDisabled}\n        onFocus={(e) => {\n          if (autoSelect) e.target.select();\n        }}\n        onChange={(e) => {\n          setValue(e.target.value as TValue);\n        }}\n        className={cn(\n          \"h- placeholder:text-primary-foreground read-only:bg-muted/50 flex w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n          className,\n        )}\n      />\n\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          disabled={isDisabled}\n          className=\"bg-muted/30 flex aspect-square h-full items-center justify-center rounded-none border-none outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none\"\n        >\n          <Icons.chevronDown className=\"size-4 opacity-50\" />\n        </DropdownMenuTrigger>\n\n        <DropdownMenuContent className=\"w-56\">\n          {options.map((item) => (\n            <DropdownMenuItem\n              disabled={item.disabled}\n              className=\"cursor-pointer\"\n              key={item.id}\n              onSelect={() => setValue(item.id as TValue)}\n            >\n              {item.label}\n            </DropdownMenuItem>\n          ))}\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAgCA,SAAgB,8BAAoE,EAClF,SACA,QACA,YACA,SACA,UACA,YACA,aACoD;CACpD,MAAM,EAAE,oBAAoB,uBAAuB;CAEnD,MAAM,EAAE,OAAO,UAAU,cAAc,wBAAwB;EAAE;EAAS;EAAQ;EAAY,CAAC;CAE/F,MAAM,aAAa,YAAY,kBAAkB,QAAQ,OAAO,OAAO,CAAC;AAExE,QACE,qBAAC;EAAI,WAAU;aACb,oBAAC;GACC,MAAK;GACL,OAAQ,SAAoB;GAC5B;GACA,UAAU;GACV,UAAU,MAAM;AACd,QAAI,WAAY,GAAE,OAAO,QAAQ;;GAEnC,WAAW,MAAM;AACf,aAAS,EAAE,OAAO,MAAgB;;GAEpC,WAAW,GACT,0PACA,UACD;IACD,EAEF,qBAAC,2BACC,oBAAC;GACC,UAAU;GACV,WAAU;aAEV,oBAAC,MAAM,eAAY,WAAU,sBAAsB;IAC/B,EAEtB,oBAAC;GAAoB,WAAU;aAC5B,QAAQ,KAAK,SACZ,oBAAC;IACC,UAAU,KAAK;IACf,WAAU;IAEV,gBAAgB,SAAS,KAAK,GAAa;cAE1C,KAAK;MAHD,KAAK,GAIO,CACnB;IACkB,IACT;GACX"}

package/dist/modules/data-tables/tables/inline-table/components/inputs/combobox.client.d.ts

@@ -0,0 +1,27 @@
+import { UseInlineDataTableInputParams } from "../../hooks/use-input.client.js";
+import * as react_jsx_runtime168 from "react/jsx-runtime";
+
+//#region src/modules/data-tables/tables/inline-table/components/inputs/combobox.client.d.ts
+type ComboboxItem = {
+  id: string;
+  label: string;
+  disabled?: boolean;
+};
+type InlineDataTableComboboxProps<TData, TValue> = UseInlineDataTableInputParams<TData, TValue> & {
+  options: ComboboxItem[];
+  emptyMessage?: string;
+  placeholder?: string;
+  disabled?: boolean;
+};
+declare function InlineDataTableCombobox<TData extends {
+  id: string;
+}, TValue>({
+  context,
+  action,
+  permission,
+  disabled,
+  ...props
+}: InlineDataTableComboboxProps<TData, TValue>): react_jsx_runtime168.JSX.Element;
+//#endregion
+export { ComboboxItem, InlineDataTableCombobox };
+//# sourceMappingURL=combobox.client.d.ts.map

package/dist/modules/data-tables/tables/inline-table/components/inputs/combobox.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.client.d.ts","names":[],"sources":["../../../../../../../src/modules/data-tables/tables/inline-table/components/inputs/combobox.client.tsx"],"sourcesContent":[],"mappings":";;;;KASY,YAAA;;;EAAA,QAAA,CAAA,EAAA,OAAY;AAItB,CAAA;KAEG,4BAA4B,CAAA,KAAA,EAAA,MAAA,CAAA,GAAkB,6BAAlB,CAAgD,KAAhD,EAAuD,MAAvD,CAAA,GAAA;SAAgD,EACtE,YADsE,EAAA;cAAO,CAAA,EAAA,MAAA;aAArC,CAAA,EAAA,MAAA;UACxC,CAAA,EAAA,OAAA;CAAY;AAMP,iBAAA,uBAAuB,CAAA,cAAA;EAAA,EAAA,EAAA,MAAA;SACrC,CAAA,CAAA;EAAA,OAAA;EAAA,MAAA;EAAA,UAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAKC,4BALD,CAK8B,KAL9B,EAKqC,MALrC,CAAA,CAAA,EAK4C,oBAAA,CAAA,GAAA,CAAA,OAL5C"}

package/dist/modules/data-tables/tables/inline-table/components/inputs/combobox.client.js

@@ -0,0 +1,30 @@
+"use client";
+
+
+import { Combobox } from "../../../../../../components/ui/combobox.client.js";
+import { useInlineTableContext } from "../../hooks/context.client.js";
+import { useInlineDataTableInput } from "../../hooks/use-input.client.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/modules/data-tables/tables/inline-table/components/inputs/combobox.client.tsx
+function InlineDataTableCombobox({ context, action, permission, disabled,...props }) {
+	const { disabledColumns } = useInlineTableContext();
+	const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({
+		context,
+		action,
+		permission
+	});
+	const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
+	return /* @__PURE__ */ jsx(Combobox, {
+		...props,
+		value,
+		disabled: isDisabled,
+		onSelect: setValue,
+		onBlur: (e) => mutate(e.target.value),
+		className: "rounded-none border-none shadow-none"
+	});
+}
+
+//#endregion
+export { InlineDataTableCombobox };
+//# sourceMappingURL=combobox.client.js.map

package/dist/modules/data-tables/tables/inline-table/components/inputs/combobox.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.client.js","names":[],"sources":["../../../../../../../src/modules/data-tables/tables/inline-table/components/inputs/combobox.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Combobox } from \"@/components/ui/combobox.client\";\nimport { useInlineTableContext } from \"../../hooks/context.client\";\nimport {\n  useInlineDataTableInput,\n  UseInlineDataTableInputParams,\n} from \"../../hooks/use-input.client\";\n\nexport type ComboboxItem = {\n  id: string;\n  label: string;\n  disabled?: boolean;\n};\n\ntype InlineDataTableComboboxProps<TData, TValue> = UseInlineDataTableInputParams<TData, TValue> & {\n  options: ComboboxItem[];\n  emptyMessage?: string;\n  placeholder?: string;\n  disabled?: boolean;\n};\n\nexport function InlineDataTableCombobox<TData extends { id: string }, TValue>({\n  context,\n  action,\n  permission,\n  disabled,\n  ...props\n}: InlineDataTableComboboxProps<TData, TValue>) {\n  const { disabledColumns } = useInlineTableContext();\n\n  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({\n    context,\n    action,\n    permission,\n  });\n\n  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;\n\n  return (\n    <Combobox\n      {...props}\n      value={value}\n      disabled={isDisabled}\n      onSelect={setValue}\n      onBlur={(e) => mutate(e.target.value as TValue)}\n      className=\"rounded-none border-none shadow-none\"\n    />\n  );\n\n  // return (\n  //   <Popover open={open} onOpenChange={setOpen}>\n  //     <Command className=\"text-foreground bg-transparent\">\n  //       <PopoverAnchor asChild>\n  //         <CommandPrimitive.Input\n  //           data-input\n  //           value={value?.toString() ?? \"\"}\n  //           placeholder={placeholder}\n  //           disabled={isDisabled}\n  //           onValueChange={(value) => setValue(value as TValue)}\n  //           onKeyDown={(e) => setOpen(e.key !== \"Escape\")}\n  //           onMouseDown={() => setOpen((open) => !!value || !open)}\n  //           onBlur={(e) => {\n  //             setOpen(false);\n  //             mutate(e.target.value as TValue);\n  //           }}\n  //           onFocus={() => setOpen(true)}\n  //           className=\"read-only:bg-muted/50 h-full w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\"\n  //         />\n  //       </PopoverAnchor>\n\n  //       {!open && <CommandList aria-hidden=\"true\" className=\"hidden\" />}\n\n  //       <PopoverContent\n  //         asChild\n  //         onOpenAutoFocus={(e) => e.preventDefault()}\n  //         onInteractOutside={(e) => {\n  //           if (e.target instanceof Element && e.target.hasAttribute(\"cmdk-input\")) {\n  //             e.preventDefault();\n  //           }\n  //         }}\n  //         className=\"w-[var(--radix-popover-trigger-width)] p-0\"\n  //       >\n  //         <CommandList>\n  //           {options.length > 0 && (\n  //             <CommandGroup>\n  //               {options.map((option) => (\n  //                 <CommandItem\n  //                   key={option.id}\n  //                   value={option.id}\n  //                   onMouseDown={(e) => e.preventDefault()}\n  //                   onSelect={(id) => {\n  //                     setValue(id as TValue);\n  //                     setOpen(false);\n  //                   }}\n  //                 >\n  //                   {option.label}\n  //                 </CommandItem>\n  //               ))}\n  //             </CommandGroup>\n  //           )}\n\n  //           <CommandEmpty className=\"px-3 py-1\">{emptyMessage}</CommandEmpty>\n  //         </CommandList>\n  //       </PopoverContent>\n  //     </Command>\n  //   </Popover>\n  // );\n}\n"],"mappings":";;;;;;;;;AAsBA,SAAgB,wBAA8D,EAC5E,SACA,QACA,YACA,SACA,GAAG,SAC2C;CAC9C,MAAM,EAAE,oBAAoB,uBAAuB;CAEnD,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,wBAAwB;EACrE;EACA;EACA;EACD,CAAC;CAEF,MAAM,aAAa,YAAY,kBAAkB,QAAQ,OAAO,OAAO,CAAC;AAExE,QACE,oBAAC;EACC,GAAI;EACG;EACP,UAAU;EACV,UAAU;EACV,SAAS,MAAM,OAAO,EAAE,OAAO,MAAgB;EAC/C,WAAU;GACV"}

package/dist/modules/data-tables/tables/inline-table/components/inputs/input.client.d.ts

@@ -0,0 +1,39 @@
+import { Input } from "../../../../../../components/ui/input.js";
+import { UseInlineDataTableInputParams } from "../../hooks/use-input.client.js";
+import * as react_jsx_runtime169 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/modules/data-tables/tables/inline-table/components/inputs/input.client.d.ts
+type InlineDataTableInputProps<TData, TValue> = Omit<ComponentProps<typeof Input>, "type"> & UseInlineDataTableInputParams<TData, TValue> & {
+  autoSelect?: boolean;
+};
+declare function InlineDataTableStringInput<TData extends {
+  id: string;
+}, TValue>({
+  context,
+  action,
+  permission,
+  onChange,
+  onBlur,
+  onFocus,
+  autoSelect,
+  disabled,
+  className,
+  ...props
+}: InlineDataTableInputProps<TData, TValue>): react_jsx_runtime169.JSX.Element;
+declare function InlineDataTableNumberInput<TData extends {
+  id: string;
+}, TValue>({
+  context,
+  action,
+  onChange,
+  onFocus,
+  onBlur,
+  autoSelect,
+  disabled,
+  className,
+  ...props
+}: InlineDataTableInputProps<TData, TValue>): react_jsx_runtime169.JSX.Element;
+//#endregion
+export { InlineDataTableInputProps, InlineDataTableNumberInput, InlineDataTableStringInput };
+//# sourceMappingURL=input.client.d.ts.map

package/dist/modules/data-tables/tables/inline-table/components/inputs/input.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.client.d.ts","names":[],"sources":["../../../../../../../src/modules/data-tables/tables/inline-table/components/inputs/input.client.tsx"],"sourcesContent":[],"mappings":";;;;;;KAWY,2CAA2C,KAAK,sBAAsB,kBAChF,8BAA8B,OAAO;;;AAD3B,iBAGI,0BAHqB,CAAA,cAAA;EAAA,EAAA,EAAA,MAAA;SAA6C,CAAA,CAAA;EAAA,OAAA;EAAA,MAAA;EAAA,UAAA;EAAA,QAAA;EAAA,MAAA;EAAA,OAAA;EAAA,UAAA;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAc/E,yBAd+E,CAcrD,KAdqD,EAc9C,MAd8C,CAAA,CAAA,EAcvC,oBAAA,CAAA,GAAA,CAAA,OAduC;AAAtB,iBAqD5C,0BArD4C,CAAA,cAAA;MAAL,MAAA;SACvB,CAAA,CAAA;EAAA,OAAA;EAAA,MAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,UAAA;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA8D7B,yBA9D6B,CA8DH,KA9DG,EA8DI,MA9DJ,CAAA,CAAA,EA8DW,oBAAA,CAAA,GAAA,CAAA,OA9DX"}

package/dist/modules/data-tables/tables/inline-table/components/inputs/input.client.js

@@ -0,0 +1,72 @@
+"use client";
+
+
+import { cn } from "../../../../../../lib/utils/cn.js";
+import { useInlineTableContext } from "../../hooks/context.client.js";
+import { useInlineDataTableInput } from "../../hooks/use-input.client.js";
+import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+
+//#region src/modules/data-tables/tables/inline-table/components/inputs/input.client.tsx
+function InlineDataTableStringInput({ context, action, permission, onChange, onBlur, onFocus, autoSelect, disabled, className,...props }) {
+	const { disabledColumns } = useInlineTableContext();
+	const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({
+		context,
+		action,
+		permission
+	});
+	const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
+	return /* @__PURE__ */ createElement("input", {
+		...props,
+		key: `${context.row.id}-${context.column.id}`,
+		type: "text",
+		value,
+		"data-input": true,
+		disabled: isDisabled,
+		onFocus: (e) => {
+			if (autoSelect) e.target.select();
+			onFocus?.(e);
+		},
+		onChange: (e) => {
+			setValue(e.target.value);
+			onChange?.(e);
+		},
+		onBlur: (e) => {
+			mutate(e.target.value);
+			onBlur?.(e);
+		},
+		className: cn("placeholder:text-primary-foreground read-only:bg-muted/50 flex h-full w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", className)
+	});
+}
+function InlineDataTableNumberInput({ context, action, onChange, onFocus, onBlur, autoSelect, disabled, className,...props }) {
+	const { disabledColumns } = useInlineTableContext();
+	const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({
+		context,
+		action
+	});
+	const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		type: "number",
+		value,
+		"data-input": true,
+		disabled: isDisabled,
+		onFocus: (e) => {
+			if (autoSelect) e.target.select();
+			onFocus?.(e);
+		},
+		onChange: (e) => {
+			setValue(e.target.valueAsNumber);
+			onChange?.(e);
+		},
+		onBlur: (e) => {
+			mutate(e.target.value);
+			onBlur?.(e);
+		},
+		className: cn("placeholder:text-primary-foreground read-only:bg-muted/50 flex h-full w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none", className)
+	});
+}
+
+//#endregion
+export { InlineDataTableNumberInput, InlineDataTableStringInput };
+//# sourceMappingURL=input.client.js.map

package/dist/modules/data-tables/tables/inline-table/components/inputs/input.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.client.js","names":[],"sources":["../../../../../../../src/modules/data-tables/tables/inline-table/components/inputs/input.client.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Input } from \"@/components/ui/input\";\nimport { cn } from \"@/lib/utils/cn\";\nimport { ComponentProps } from \"react\";\nimport { useInlineTableContext } from \"../../hooks/context.client\";\nimport {\n  useInlineDataTableInput,\n  UseInlineDataTableInputParams,\n} from \"../../hooks/use-input.client\";\n\nexport type InlineDataTableInputProps<TData, TValue> = Omit<ComponentProps<typeof Input>, \"type\"> &\n  UseInlineDataTableInputParams<TData, TValue> & { autoSelect?: boolean };\n\nexport function InlineDataTableStringInput<TData extends { id: string }, TValue>({\n  context,\n  action,\n  permission,\n  onChange,\n  onBlur,\n  onFocus,\n  autoSelect,\n  disabled,\n  className,\n  ...props\n}: InlineDataTableInputProps<TData, TValue>) {\n  const { disabledColumns } = useInlineTableContext();\n\n  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({\n    context,\n    action,\n    permission,\n  });\n\n  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;\n\n  return (\n    <input\n      {...props}\n      key={`${context.row.id}-${context.column.id}`}\n      type=\"text\"\n      value={value as string}\n      data-input\n      disabled={isDisabled}\n      onFocus={(e) => {\n        if (autoSelect) e.target.select();\n        onFocus?.(e);\n      }}\n      onChange={(e) => {\n        setValue(e.target.value as TValue);\n        onChange?.(e);\n      }}\n      onBlur={(e) => {\n        mutate(e.target.value as TValue);\n        onBlur?.(e);\n      }}\n      className={cn(\n        \"placeholder:text-primary-foreground read-only:bg-muted/50 flex h-full w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n    />\n  );\n}\n\nexport function InlineDataTableNumberInput<TData extends { id: string }, TValue>({\n  context,\n  action,\n  onChange,\n  onFocus,\n  onBlur,\n  autoSelect,\n  disabled,\n  className,\n  ...props\n}: InlineDataTableInputProps<TData, TValue>) {\n  const { disabledColumns } = useInlineTableContext();\n\n  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({ context, action });\n\n  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;\n\n  return (\n    <input\n      {...props}\n      type=\"number\"\n      value={value as number}\n      data-input\n      disabled={isDisabled}\n      onFocus={(e) => {\n        if (autoSelect) e.target.select();\n        onFocus?.(e);\n      }}\n      onChange={(e) => {\n        setValue(e.target.valueAsNumber as TValue);\n        onChange?.(e);\n      }}\n      onBlur={(e) => {\n        mutate(e.target.value as TValue);\n        onBlur?.(e);\n      }}\n      className={cn(\n        \"placeholder:text-primary-foreground read-only:bg-muted/50 flex h-full w-full bg-transparent px-3 py-0.5 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        \"[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none\",\n        className,\n      )}\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;AAcA,SAAgB,2BAAiE,EAC/E,SACA,QACA,YACA,UACA,QACA,SACA,YACA,UACA,UACA,GAAG,SACwC;CAC3C,MAAM,EAAE,oBAAoB,uBAAuB;CAEnD,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,wBAAwB;EACrE;EACA;EACA;EACD,CAAC;CAEF,MAAM,aAAa,YAAY,kBAAkB,QAAQ,OAAO,OAAO,CAAC;AAExE,QACE,8BAAC;EACC,GAAI;EACJ,KAAK,GAAG,QAAQ,IAAI,GAAG,GAAG,QAAQ,OAAO;EACzC,MAAK;EACE;EACP;EACA,UAAU;EACV,UAAU,MAAM;AACd,OAAI,WAAY,GAAE,OAAO,QAAQ;AACjC,aAAU,EAAE;;EAEd,WAAW,MAAM;AACf,YAAS,EAAE,OAAO,MAAgB;AAClC,cAAW,EAAE;;EAEf,SAAS,MAAM;AACb,UAAO,EAAE,OAAO,MAAgB;AAChC,YAAS,EAAE;;EAEb,WAAW,GACT,8PACA,UACD;GACD;;AAIN,SAAgB,2BAAiE,EAC/E,SACA,QACA,UACA,SACA,QACA,YACA,UACA,UACA,GAAG,SACwC;CAC3C,MAAM,EAAE,oBAAoB,uBAAuB;CAEnD,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,wBAAwB;EAAE;EAAS;EAAQ,CAAC;CAE3F,MAAM,aAAa,YAAY,kBAAkB,QAAQ,OAAO,OAAO,CAAC;AAExE,QACE,oBAAC;EACC,GAAI;EACJ,MAAK;EACE;EACP;EACA,UAAU;EACV,UAAU,MAAM;AACd,OAAI,WAAY,GAAE,OAAO,QAAQ;AACjC,aAAU,EAAE;;EAEd,WAAW,MAAM;AACf,YAAS,EAAE,OAAO,cAAwB;AAC1C,cAAW,EAAE;;EAEf,SAAS,MAAM;AACb,UAAO,EAAE,OAAO,MAAgB;AAChC,YAAS,EAAE;;EAEb,WAAW,GACT,8PACA,wHACA,UACD;GACD"}

package/dist/modules/data-tables/tables/inline-table/components/inputs/read-only.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime171 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/modules/data-tables/tables/inline-table/components/inputs/read-only.d.ts
+declare function InlineDataTableReadOnly({
+  className,
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime171.JSX.Element;
+//#endregion
+export { InlineDataTableReadOnly };
+//# sourceMappingURL=read-only.d.ts.map

package/dist/modules/data-tables/tables/inline-table/components/inputs/read-only.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"read-only.d.ts","names":[],"sources":["../../../../../../../src/modules/data-tables/tables/inline-table/components/inputs/read-only.tsx"],"sourcesContent":[],"mappings":";;;;iBAGgB,uBAAA;;;;GAIb,KAAA,CAAM,eAAe,mBAAgB,oBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/data-tables/tables/inline-table/components/inputs/read-only.js

@@ -0,0 +1,16 @@
+import { cn } from "../../../../../../lib/utils/cn.js";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/modules/data-tables/tables/inline-table/components/inputs/read-only.tsx
+function InlineDataTableReadOnly({ className, children,...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		className: cn("bg-muted/50 flex h-full w-full items-center truncate px-3", className),
+		children
+	});
+}
+
+//#endregion
+export { InlineDataTableReadOnly };
+//# sourceMappingURL=read-only.js.map

package/dist/modules/data-tables/tables/inline-table/components/inputs/read-only.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"read-only.js","names":[],"sources":["../../../../../../../src/modules/data-tables/tables/inline-table/components/inputs/read-only.tsx"],"sourcesContent":["import { cn } from \"@/lib/utils/cn\";\nimport React from \"react\";\n\nexport function InlineDataTableReadOnly({\n  className,\n  children,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) {\n  return (\n    <span\n      {...props}\n      className={cn(\"bg-muted/50 flex h-full w-full items-center truncate px-3\", className)}\n    >\n      {children}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAgB,wBAAwB,EACtC,WACA,SACA,GAAG,SACqC;AACxC,QACE,oBAAC;EACC,GAAI;EACJ,WAAW,GAAG,6DAA6D,UAAU;EAEpF;GACI"}

package/dist/modules/data-tables/tables/inline-table/components/inputs/select.client.d.ts

@@ -0,0 +1,33 @@
+import { UseInlineDataTableInputParams } from "../../hooks/use-input.client.js";
+import * as react_jsx_runtime172 from "react/jsx-runtime";
+import React from "react";
+
+//#region src/modules/data-tables/tables/inline-table/components/inputs/select.client.d.ts
+type SelectItem = {
+  id: string;
+  value: string;
+  label?: React.ReactNode;
+  disabled?: boolean;
+};
+type InlineDataTableSelectProps<TData, TValue> = UseInlineDataTableInputParams<TData, TValue> & {
+  placeholder?: React.ReactNode;
+  options: SelectItem[];
+  renderSelectedItem?: (selectedItem: SelectItem) => React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+};
+declare function InlineDataTableSelect<TData extends {
+  id: string;
+}, TValue>({
+  context,
+  action,
+  permission,
+  placeholder,
+  options,
+  renderSelectedItem,
+  disabled,
+  className
+}: InlineDataTableSelectProps<TData, TValue>): react_jsx_runtime172.JSX.Element;
+//#endregion
+export { InlineDataTableSelect, InlineDataTableSelectProps, SelectItem };
+//# sourceMappingURL=select.client.d.ts.map

package/dist/modules/data-tables/tables/inline-table/components/inputs/select.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.client.d.ts","names":[],"sources":["../../../../../../../src/modules/data-tables/tables/inline-table/components/inputs/select.client.tsx"],"sourcesContent":[],"mappings":";;;;;KAWY,UAAA;;;EAAA,KAAA,CAAA,EAGF,KAAA,CAAM,SAHM;EAOV,QAAA,CAAA,EAAA,OAAA;CAA0B;AACpC,KADU,0BACV,CAAA,KAAA,EAAA,MAAA,CAAA,GADsD,6BACtD,CAAA,KAAA,EACA,MADA,CAAA,GAAA;aACA,CAAA,EAEc,KAAA,CAAM,SAFpB;SAFsD,EAK7C,UAL6C,EAAA;oBAIlC,CAAA,EAAA,CAAA,YAAA,EAEgB,UAFhB,EAAA,GAE+B,KAAA,CAAM,SAFrC;UACX,CAAA,EAAA,OAAA;WAC2B,CAAA,EAAA,MAAA;;AAA8B,iBAKpD,qBALoD,CAAA,cAAA;EAKpD,EAAA,EAAA,MAAA;CAAqB,EAAA,MAAA,CAAA,CAAA;EAAA,OAAA;EAAA,MAAA;EAAA,UAAA;EAAA,WAAA;EAAA,OAAA;EAAA,kBAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EASlC,0BATkC,CASP,KATO,EASA,MATA,CAAA,CAAA,EASO,oBAAA,CAAA,GAAA,CAAA,OATP"}

package/dist/modules/data-tables/tables/inline-table/components/inputs/select.client.js

@@ -0,0 +1,53 @@
+"use client";
+
+
+import { cn } from "../../../../../../lib/utils/cn.js";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../../../../../../components/ui/select.client.js";
+import { useInlineTableContext } from "../../hooks/context.client.js";
+import { useInlineDataTableInput } from "../../hooks/use-input.client.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+
+//#region src/modules/data-tables/tables/inline-table/components/inputs/select.client.tsx
+function InlineDataTableSelect({ context, action, permission, placeholder, options, renderSelectedItem, disabled, className }) {
+	const { disabledColumns } = useInlineTableContext();
+	const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({
+		context,
+		action,
+		permission
+	});
+	const incomingSelectedItem = options.find((item) => item.id === value);
+	const [open, setOpen] = React.useState(false);
+	const [internalSelectedItem, setInternalSelectedItem] = React.useState();
+	const selectedItem = incomingSelectedItem ?? internalSelectedItem;
+	return /* @__PURE__ */ jsxs(Select, {
+		open,
+		defaultValue: value,
+		onOpenChange: setOpen,
+		onValueChange: (id) => {
+			const foundItem = options.find((item) => item.id === id);
+			if (!foundItem) return;
+			setValue(foundItem.id);
+			mutate(foundItem.id);
+			setInternalSelectedItem(foundItem);
+			setOpen(false);
+		},
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			disabled: disabled || disabledColumns?.[context.column.id] || !isAllowed,
+			className: cn("h-full w-full border-none outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none", className),
+			children: selectedItem ? /* @__PURE__ */ jsx("div", {
+				className: "flex items-center",
+				children: renderSelectedItem?.(selectedItem) ?? selectedItem.label ?? selectedItem.value
+			}) : placeholder ?? "Kies een optie..."
+		}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((item) => /* @__PURE__ */ jsx(SelectItem, {
+			disabled: item.disabled,
+			className: "cursor-pointer",
+			value: item.id,
+			children: item.label ?? item.value
+		}, item.id)) })]
+	});
+}
+
+//#endregion
+export { InlineDataTableSelect };
+//# sourceMappingURL=select.client.js.map

package/dist/modules/data-tables/tables/inline-table/components/inputs/select.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.client.js","names":[],"sources":["../../../../../../../src/modules/data-tables/tables/inline-table/components/inputs/select.client.tsx"],"sourcesContent":["\"use client\";\n\nimport { Select, SelectContent, SelectItem, SelectTrigger } from \"@/components/ui/select.client\";\nimport { cn } from \"@/lib/utils/cn\";\nimport React from \"react\";\nimport { useInlineTableContext } from \"../../hooks/context.client\";\nimport {\n  useInlineDataTableInput,\n  UseInlineDataTableInputParams,\n} from \"../../hooks/use-input.client\";\n\nexport type SelectItem = {\n  id: string;\n  value: string;\n  label?: React.ReactNode;\n  disabled?: boolean;\n};\n\nexport type InlineDataTableSelectProps<TData, TValue> = UseInlineDataTableInputParams<\n  TData,\n  TValue\n> & {\n  placeholder?: React.ReactNode;\n  options: SelectItem[];\n  renderSelectedItem?: (selectedItem: SelectItem) => React.ReactNode;\n  disabled?: boolean;\n  className?: string;\n};\n\nexport function InlineDataTableSelect<TData extends { id: string }, TValue>({\n  context,\n  action,\n  permission,\n  placeholder,\n  options,\n  renderSelectedItem,\n  disabled,\n  className,\n}: InlineDataTableSelectProps<TData, TValue>) {\n  const { disabledColumns } = useInlineTableContext();\n\n  const { value, setValue, mutate, isAllowed } = useInlineDataTableInput({\n    context,\n    action,\n    permission,\n  });\n  const incomingSelectedItem = options.find((item) => item.id === value);\n\n  const [open, setOpen] = React.useState(false);\n  const [internalSelectedItem, setInternalSelectedItem] = React.useState<SelectItem | undefined>();\n\n  const selectedItem = incomingSelectedItem ?? internalSelectedItem;\n\n  const isDisabled = disabled || disabledColumns?.[context.column.id] || !isAllowed;\n\n  return (\n    <Select\n      open={open}\n      defaultValue={value as string}\n      onOpenChange={setOpen}\n      onValueChange={(id) => {\n        const foundItem = options.find((item) => item.id === id);\n\n        if (!foundItem) return;\n\n        setValue(foundItem.id as TValue);\n        mutate(foundItem.id as TValue);\n        setInternalSelectedItem(foundItem);\n        setOpen(false);\n      }}\n    >\n      <SelectTrigger\n        disabled={isDisabled}\n        className={cn(\n          \"h-full w-full border-none outline-none ring-0 focus:border-0 focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none\",\n          className,\n        )}\n      >\n        {selectedItem ? (\n          <div className=\"flex items-center\">\n            {renderSelectedItem?.(selectedItem) ?? selectedItem.label ?? selectedItem.value}\n          </div>\n        ) : (\n          (placeholder ?? \"Kies een optie...\")\n        )}\n      </SelectTrigger>\n\n      <SelectContent>\n        {options.map((item) => (\n          <SelectItem\n            disabled={item.disabled}\n            className=\"cursor-pointer\"\n            key={item.id}\n            value={item.id}\n          >\n            {item.label ?? item.value}\n          </SelectItem>\n        ))}\n      </SelectContent>\n    </Select>\n  );\n}\n"],"mappings":";;;;;;;;;;;AA6BA,SAAgB,sBAA4D,EAC1E,SACA,QACA,YACA,aACA,SACA,oBACA,UACA,aAC4C;CAC5C,MAAM,EAAE,oBAAoB,uBAAuB;CAEnD,MAAM,EAAE,OAAO,UAAU,QAAQ,cAAc,wBAAwB;EACrE;EACA;EACA;EACD,CAAC;CACF,MAAM,uBAAuB,QAAQ,MAAM,SAAS,KAAK,OAAO,MAAM;CAEtE,MAAM,CAAC,MAAM,WAAW,MAAM,SAAS,MAAM;CAC7C,MAAM,CAAC,sBAAsB,2BAA2B,MAAM,UAAkC;CAEhG,MAAM,eAAe,wBAAwB;AAI7C,QACE,qBAAC;EACO;EACN,cAAc;EACd,cAAc;EACd,gBAAgB,OAAO;GACrB,MAAM,YAAY,QAAQ,MAAM,SAAS,KAAK,OAAO,GAAG;AAExD,OAAI,CAAC,UAAW;AAEhB,YAAS,UAAU,GAAa;AAChC,UAAO,UAAU,GAAa;AAC9B,2BAAwB,UAAU;AAClC,WAAQ,MAAM;;aAGhB,oBAAC;GACC,UAnBa,YAAY,kBAAkB,QAAQ,OAAO,OAAO,CAAC;GAoBlE,WAAW,GACT,+IACA,UACD;aAEA,eACC,oBAAC;IAAI,WAAU;cACZ,qBAAqB,aAAa,IAAI,aAAa,SAAS,aAAa;KACtE,GAEL,eAAe;IAEJ,EAEhB,oBAAC,2BACE,QAAQ,KAAK,SACZ,oBAAC;GACC,UAAU,KAAK;GACf,WAAU;GAEV,OAAO,KAAK;aAEX,KAAK,SAAS,KAAK;KAHf,KAAK,GAIC,CACb,GACY;GACT"}

package/dist/modules/data-tables/tables/inline-table/components/row.client.js

@@ -0,0 +1,38 @@
+"use client";
+
+
+import { ContextCommandMenu, ContextCommandMenuContent, ContextCommandMenuTrigger } from "../../../../commands/menus/context-menu.client.js";
+import { TableRow } from "../../../components/table.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+//#region src/modules/data-tables/tables/inline-table/components/row.client.tsx
+function InlineTableRow({ row, table, children,...props }) {
+	const meta = table.options.meta;
+	const rowId = row.original.id;
+	const { setNodeRef, transform, transition } = useSortable({ id: rowId });
+	return /* @__PURE__ */ jsxs(ContextCommandMenu, { children: [/* @__PURE__ */ jsx(ContextCommandMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsx(TableRow, {
+			...props,
+			ref: setNodeRef,
+			"data-state": row.getIsSelected() && "selected",
+			style: {
+				transform: CSS.Transform.toString(transform),
+				transition
+			},
+			children
+		})
+	}), /* @__PURE__ */ jsx(ContextCommandMenuContent, {
+		data: row.original,
+		commands: meta.commands || [],
+		meta,
+		className: "w-[300px]"
+	})] });
+}
+
+//#endregion
+export { InlineTableRow };
+//# sourceMappingURL=row.client.js.map

package/dist/modules/data-tables/tables/inline-table/components/row.client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.client.js","names":[],"sources":["../../../../../../src/modules/data-tables/tables/inline-table/components/row.client.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  ContextCommandMenu,\n  ContextCommandMenuContent,\n  ContextCommandMenuTrigger,\n} from \"@/modules/commands/entry.client\";\nimport { TableRow } from \"@/modules/data-tables/components/table\";\nimport { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { type Row, type Table } from \"@tanstack/react-table\";\nimport * as React from \"react\";\nimport { TableMeta } from \"../../../lib/types\";\n\nexport type InlineTableRowProps<TData extends { id: string }> =\n  React.HTMLAttributes<HTMLTableRowElement> & {\n    row: Row<TData>;\n    table: Table<TData>;\n  };\n\nexport function InlineTableRow<TData extends { id: string }>({\n  row,\n  table,\n  children,\n  ...props\n}: InlineTableRowProps<TData>) {\n  const meta = table.options.meta as TableMeta<TData>;\n\n  const rowId = (row.original as { id: string }).id;\n\n  const { setNodeRef, transform, transition } = useSortable({ id: rowId });\n\n  return (\n    <ContextCommandMenu>\n      <ContextCommandMenuTrigger asChild>\n        <TableRow\n          {...props}\n          ref={setNodeRef}\n          data-state={row.getIsSelected() && \"selected\"}\n          style={{\n            transform: CSS.Transform.toString(transform),\n            transition,\n          }}\n        >\n          {children}\n        </TableRow>\n      </ContextCommandMenuTrigger>\n\n      <ContextCommandMenuContent\n        data={row.original}\n        commands={meta.commands || []}\n        meta={meta as never}\n        className=\"w-[300px]\"\n      />\n    </ContextCommandMenu>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAoBA,SAAgB,eAA6C,EAC3D,KACA,OACA,SACA,GAAG,SAC0B;CAC7B,MAAM,OAAO,MAAM,QAAQ;CAE3B,MAAM,QAAS,IAAI,SAA4B;CAE/C,MAAM,EAAE,YAAY,WAAW,eAAe,YAAY,EAAE,IAAI,OAAO,CAAC;AAExE,QACE,qBAAC,iCACC,oBAAC;EAA0B;YACzB,oBAAC;GACC,GAAI;GACJ,KAAK;GACL,cAAY,IAAI,eAAe,IAAI;GACnC,OAAO;IACL,WAAW,IAAI,UAAU,SAAS,UAAU;IAC5C;IACD;GAEA;IACQ;GACe,EAE5B,oBAAC;EACC,MAAM,IAAI;EACV,UAAU,KAAK,YAAY,EAAE;EACvB;EACN,WAAU;GACV,IACiB"}

package/dist/modules/data-tables/tables/inline-table/components/table.d.ts

@@ -0,0 +1,16 @@
+import { Table } from "../../../components/table.js";
+import { InlineTableProvider } from "../hooks/context.client.js";
+import * as react_jsx_runtime173 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/modules/data-tables/tables/inline-table/components/table.d.ts
+declare function InlineTable<TData extends {
+  id: string;
+}>({
+  disabledColumns,
+  moveRowAction,
+  ...props
+}: ComponentProps<typeof Table> & ComponentProps<typeof InlineTableProvider>): react_jsx_runtime173.JSX.Element;
+//#endregion
+export { InlineTable };
+//# sourceMappingURL=table.d.ts.map

package/dist/modules/data-tables/tables/inline-table/components/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","names":[],"sources":["../../../../../../src/modules/data-tables/tables/inline-table/components/table.tsx"],"sourcesContent":[],"mappings":";;;;;;iBAagB;;;;;;GAIb,sBAAsB,SAAS,sBAAsB,uBAAoB,oBAAA,CAAA,GAAA,CAAA"}

package/dist/modules/data-tables/tables/inline-table/components/table.js

@@ -0,0 +1,47 @@
+"use client";
+
+
+import { Table } from "../../../components/table.js";
+import { useTable } from "../../../hooks/use-table.client.js";
+import { InlineTableProvider } from "../hooks/context.client.js";
+import { TableCommandMenu } from "../../../../commands/menus/data-table-menu.client.js";
+import { TableBottombar, TableFooter } from "../../../components/footer.js";
+import { InlineTableBody } from "./body.js";
+import { InlineTableHeader } from "./header.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HotkeysProvider } from "react-hotkeys-hook";
+
+//#region src/modules/data-tables/tables/inline-table/components/table.tsx
+function InlineTable({ disabledColumns, moveRowAction,...props }) {
+	const table = useTable();
+	const meta = table.options.meta;
+	return /* @__PURE__ */ jsx(InlineTableProvider, {
+		disabledColumns,
+		moveRowAction,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "space-y-4",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "rounded-md border",
+					children: /* @__PURE__ */ jsxs(Table, {
+						...props,
+						children: [
+							/* @__PURE__ */ jsx(InlineTableHeader, { table }),
+							/* @__PURE__ */ jsx(HotkeysProvider, {
+								initiallyActiveScopes: ["inline-data-table"],
+								children: /* @__PURE__ */ jsx(InlineTableBody, { table })
+							}),
+							/* @__PURE__ */ jsx(TableFooter, { table })
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx(TableBottombar, { table }),
+				meta.commands && /* @__PURE__ */ jsx(TableCommandMenu, { table })
+			]
+		})
+	});
+}
+
+//#endregion
+export { InlineTable };
+//# sourceMappingURL=table.js.map

package/dist/modules/data-tables/tables/inline-table/components/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../../../../../src/modules/data-tables/tables/inline-table/components/table.tsx"],"sourcesContent":["\"use client\";\n\nimport { TableCommandMenu } from \"@/modules/commands/menus/data-table-menu.client\";\nimport { TableBottombar, TableFooter } from \"@/modules/data-tables/components/footer\";\nimport { Table } from \"@/modules/data-tables/components/table\";\nimport { TableMeta } from \"@/modules/data-tables/entry\";\nimport { useTable } from \"@/modules/data-tables/hooks/use-table.client\";\nimport { ComponentProps } from \"react\";\nimport { HotkeysProvider } from \"react-hotkeys-hook\";\nimport { InlineTableProvider } from \"../hooks/context.client\";\nimport { InlineTableBody } from \"./body\";\nimport { InlineTableHeader } from \"./header\";\n\nexport function InlineTable<TData extends { id: string }>({\n  disabledColumns,\n  moveRowAction,\n  ...props\n}: ComponentProps<typeof Table> & ComponentProps<typeof InlineTableProvider>) {\n  const table = useTable<TData>();\n  const meta = table.options.meta as TableMeta<TData>;\n\n  return (\n    <InlineTableProvider disabledColumns={disabledColumns} moveRowAction={moveRowAction}>\n      <div className=\"space-y-4\">\n        <div className=\"rounded-md border\">\n          <Table {...props}>\n            <InlineTableHeader table={table} />\n\n            <HotkeysProvider initiallyActiveScopes={[\"inline-data-table\"]}>\n              <InlineTableBody table={table} />\n            </HotkeysProvider>\n\n            <TableFooter table={table} />\n          </Table>\n        </div>\n\n        <TableBottombar table={table} />\n        {meta.commands && <TableCommandMenu table={table} />}\n      </div>\n    </InlineTableProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AAaA,SAAgB,YAA0C,EACxD,iBACA,cACA,GAAG,SACyE;CAC5E,MAAM,QAAQ,UAAiB;CAC/B,MAAM,OAAO,MAAM,QAAQ;AAE3B,QACE,oBAAC;EAAqC;EAAgC;YACpE,qBAAC;GAAI,WAAU;;IACb,oBAAC;KAAI,WAAU;eACb,qBAAC;MAAM,GAAI;;OACT,oBAAC,qBAAyB,QAAS;OAEnC,oBAAC;QAAgB,uBAAuB,CAAC,oBAAoB;kBAC3D,oBAAC,mBAAuB,QAAS;SACjB;OAElB,oBAAC,eAAmB,QAAS;;OACvB;MACJ;IAEN,oBAAC,kBAAsB,QAAS;IAC/B,KAAK,YAAY,oBAAC,oBAAwB,QAAS;;IAChD;GACc"}

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

@@ -0,0 +1,47 @@
+import * as react_jsx_runtime174 from "react/jsx-runtime";
+import { PropsWithChildren } from "react";
+import { VisibilityState } from "@tanstack/react-table";
+
+//#region src/modules/data-tables/tables/inline-table/hooks/context.client.d.ts
+/**
+ * Move row method as meta
+ */
+type MoveRowMethod = {
+  isDraggable: false;
+  moveRow: undefined;
+} | {
+  isDraggable: true;
+  moveRow: (params: {
+    fromIndex: number;
+    toIndex: number;
+  }) => void;
+};
+/**
+ * Inline form table context value
+ */
+type InlineTableContextValue = MoveRowMethod & {
+  disabledColumns?: VisibilityState;
+};
+/**
+ * Inline form table context hook
+ */
+declare function useInlineTableContext(): InlineTableContextValue;
+/**
+ * Inline form table context provider
+ */
+declare function InlineTableProvider<TData extends {
+  id: string;
+}>({
+  children,
+  disabledColumns,
+  moveRowAction
+}: PropsWithChildren<{
+  disabledColumns?: VisibilityState;
+  moveRowAction?: (input: {
+    fromIndex: number;
+    toIndex: number;
+  }) => Promise<unknown>;
+}>): react_jsx_runtime174.JSX.Element;
+//#endregion
+export { InlineTableContextValue, InlineTableProvider, useInlineTableContext };
+//# sourceMappingURL=context.client.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.client.d.ts","names":[],"sources":["../../../../../../src/modules/data-tables/tables/inline-table/hooks/context.client.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AAMiD,KAK5C,aAAA,GAAa;EAaN,WAAA,EAAA,KAAA;EAAuB,OAAA,EAAA,SAAA;;aACf,EAAA,IAAA;EAAe,OAAA,EAAA,CAAA,MAAA,EAAA;IAYnB,SAAA,EAAA,MAAA;IAUA,OAAA,EAAA,MAAA;EAAmB,CAAA,EAAA,GAAA,IAAA;;;;;AAMkC,KA7BzD,uBAAA,GAA0B,aA6B+B,GAAA;iBAFlE,CAAA,EA1BiB,eA0BjB;;;;;iBAda,qBAAA,CAAA,GAAqB;;;;iBAUrB;;;;;;GAIb;oBACiB;;;;QACiD;KACnE,oBAAA,CAAA,GAAA,CAAA"}