@intlayer/design-system 8.5.0 → 8.5.2

package/dist/esm/components/ContentEditor/ContentEditorTextArea.mjs

@@ -1,8 +1,8 @@
 'use client';
 
+import { useUser } from "../../hooks/useUser/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { AutoCompleteTextarea } from "../TextArea/AutocompleteTextArea.mjs";
-import { useUser } from "../../hooks/useUser/index.mjs";
 import { useEffect, useState } from "react";
 import { Check, X } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/DictionaryFieldEditor/ContentEditorView/TextEditor.mjs

@@ -1,13 +1,13 @@
 'use client';
 
 import { renameKey } from "../../../utils/object.mjs";
+import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
 import { Container } from "../../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { InputVariant } from "../../Input/Input.mjs";
 import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../../SwitchSelector/index.mjs";
 import { useLocaleSwitcherContent } from "../../LocaleSwitcherContentDropDown/LocaleSwitcherContentContext.mjs";
 import { ContentEditorInput as ContentEditorInput$1 } from "../../ContentEditor/ContentEditorInput.mjs";
-import { useAuditContentDeclarationField } from "../../../hooks/reactQuery.mjs";
 import { ContentEditorTextArea as ContentEditorTextArea$1 } from "../../ContentEditor/ContentEditorTextArea.mjs";
 import { Label } from "../../Label/index.mjs";
 import { MarkdownRenderer as MarkdownRenderer$1 } from "../../MarkDownRender/MarkDownRender.mjs";
@@ -15,9 +15,9 @@ import { EnumKeyInput } from "../EnumKeyInput.mjs";
 import { Fragment, useState } from "react";
 import { Plus, Trash, WandSparkles } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { useIntlayer, useLocale } from "react-intlayer";
 import { getLocaleName } from "@intlayer/core/localization";
-import { useConfiguration, useEditedContent } from "@intlayer/editor-react";
 import { getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 

package/dist/esm/components/DictionaryFieldEditor/DictionaryCreationForm/DictionaryCreationForm.mjs

@@ -1,8 +1,8 @@
 'use client';
 
-import { ButtonColor } from "../../Button/Button.mjs";
 import { useSession } from "../../../hooks/useAuth/useSession.mjs";
 import { useAddDictionary, useGetProjects } from "../../../hooks/reactQuery.mjs";
+import { ButtonColor } from "../../Button/Button.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { useForm } from "../../Form/FormBase.mjs";
 import { Form } from "../../Form/Form.mjs";

package/dist/esm/components/DictionaryFieldEditor/DictionaryDetails/DictionaryDetailsForm.mjs

@@ -1,10 +1,10 @@
 'use client';
 
+import { useSession } from "../../../hooks/useAuth/useSession.mjs";
+import { useAuditContentDeclarationMetadata, useGetProjects, useGetTags } from "../../../hooks/reactQuery.mjs";
 import { Loader } from "../../Loader/index.mjs";
 import { ButtonColor, ButtonSize, ButtonVariant } from "../../Button/Button.mjs";
 import { Checkbox } from "../../Input/Checkbox.mjs";
-import { useSession } from "../../../hooks/useAuth/useSession.mjs";
-import { useAuditContentDeclarationMetadata, useGetProjects, useGetTags } from "../../../hooks/reactQuery.mjs";
 import { MultiSelect } from "../../Select/Multiselect.mjs";
 import { Select } from "../../Select/Select.mjs";
 import { useForm as useForm$1 } from "../../Form/FormBase.mjs";
@@ -13,8 +13,8 @@ import { useDictionaryDetailsSchema } from "./useDictionaryDetailsSchema.mjs";
 import { useEffect } from "react";
 import { WandSparkles } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
 import { useEditedContent } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { AnimatePresence, motion } from "framer-motion";
 import { useWatch } from "react-hook-form";
 

package/dist/esm/components/DictionaryFieldEditor/DictionaryFieldEditor.mjs

@@ -12,8 +12,8 @@ import { StructureEditor } from "./StructureEditor.mjs";
 import { useEffect } from "react";
 import { ArrowLeft } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
 import { useConfiguration, useDictionariesRecordActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 
 //#region src/components/DictionaryFieldEditor/DictionaryFieldEditor.tsx
 const DictionaryFieldEditor = ({ dictionary, onClickDictionaryList, isDarkMode, mode, onDelete, onSave, showReturnButton = true }) => {

package/dist/esm/components/DictionaryFieldEditor/NavigationView/NavigationViewNode.mjs

@@ -1,11 +1,11 @@
 import { Button, ButtonColor, ButtonTextAlign, ButtonVariant } from "../../Button/Button.mjs";
 import { Accordion } from "../../Accordion/Accordion.mjs";
 import { getIsEditableSection } from "../getIsEditableSection.mjs";
-import configuration from "@intlayer/config/built";
 import { ChevronRight, Plus } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
+import configuration from "@intlayer/config/built";
 import { useEditedContentActions, useEditorLocale, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { getContentNodeByKeyPath, getEmptyNode, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";

package/dist/esm/components/DictionaryFieldEditor/SaveForm/SaveForm.mjs

@@ -1,16 +1,16 @@
 'use client';
 
 import { cn } from "../../../utils/cn.mjs";
-import { ButtonColor, ButtonVariant } from "../../Button/Button.mjs";
 import { useAuth } from "../../../hooks/useAuth/useAuth.mjs";
 import { useDeleteDictionary, usePushDictionaries, useWriteDictionary } from "../../../hooks/reactQuery.mjs";
+import { ButtonColor, ButtonVariant } from "../../Button/Button.mjs";
 import { Modal, ModalSize } from "../../Modal/Modal.mjs";
 import { Form } from "../../Form/Form.mjs";
 import { useState } from "react";
 import { ArrowUpFromLine, Download, RotateCcw, Save, Trash } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
 import { useDictionariesRecordActions, useEditedContent } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 
 //#region src/components/DictionaryFieldEditor/SaveForm/SaveForm.tsx
 const SaveForm = ({ dictionary, mode, className, onDelete, onSave, ...props }) => {

package/dist/esm/components/DictionaryFieldEditor/StructureView/StructureView.mjs

@@ -7,8 +7,8 @@ import { EditableFieldInput } from "../../EditableField/EditableFieldInput.mjs";
 import { NodeTypeSelector } from "../NodeTypeSelector.mjs";
 import { Plus, Trash } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useIntlayer } from "react-intlayer";
 import { useConfiguration, useEditedContentActions, useFocusUnmergedDictionary } from "@intlayer/editor-react";
+import { useIntlayer } from "react-intlayer";
 import { getDefaultNode, getNodeChildren, getNodeType } from "@intlayer/core/dictionaryManipulator";
 import * as NodeTypes from "@intlayer/types/nodeType";
 import { isSameKeyPath } from "@intlayer/core/utils";

package/dist/esm/components/Form/elements/OTPElement.mjs

@@ -1,7 +1,7 @@
 'use client';
 
-import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
 import { useItemSelector } from "../../../hooks/useItemSelector.mjs";
+import { InputIndicator, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "../../Input/OTPInput.mjs";
 import { useFormField } from "../FormField.mjs";
 import { FormItemLayout } from "../layout/FormItemLayout.mjs";
 import { Form } from "../Form.mjs";

package/dist/esm/components/IDE/CopyCode.mjs

@@ -7,11 +7,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useIntlayer } from "react-intlayer";
 
 //#region src/components/IDE/CopyCode.tsx
-const CopyCode = ({ code }) => {
+const CopyCode = ({ code, ...props }) => {
 	const { title, description } = useIntlayer("code");
 	return /* @__PURE__ */ jsxs(Popover, {
 		identifier: "copy",
-		children: [/* @__PURE__ */ jsx(CopyButton, { content: code }), /* @__PURE__ */ jsxs(Popover.Detail, {
+		children: [/* @__PURE__ */ jsx(CopyButton, {
+			content: code,
+			...props
+		}), /* @__PURE__ */ jsxs(Popover.Detail, {
 			identifier: "copy",
 			className: "flex min-w-64 flex-col gap-3 p-3 text-sm",
 			xAlign: PopoverXAlign.END,

package/dist/esm/components/IDE/CopyCode.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n  code: string;\n};\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n        xAlign={PopoverXAlign.END}\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,MAAa,YAA+B,EAAE,WAAW;CACvD,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD,EAAY,SAAS,MAAQ,GAE7B,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;aAHxB,CAKE,oBAAC,UAAD,YAAS,OAAe,GACxB,oBAAC,KAAD;IAAG,WAAU;cAAgB;IAAgB,EAC9B;KACT"}
+{"version":3,"file":"CopyCode.mjs","names":[],"sources":["../../../../src/components/IDE/CopyCode.tsx"],"sourcesContent":["'use client';\n\nimport type { ButtonProps } from '@components/Button';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { CopyButton } from '../CopyButton';\nimport { Popover, PopoverXAlign } from '../Popover';\n\ntype CopyCodeProps = {\n  code: string;\n} & Partial<Omit<ButtonProps, 'children'>>;\n\nexport const CopyCode: FC<CopyCodeProps> = ({ code, ...props }) => {\n  const { title, description } = useIntlayer('code');\n\n  return (\n    <Popover identifier=\"copy\">\n      <CopyButton content={code} {...props} />\n\n      <Popover.Detail\n        identifier=\"copy\"\n        className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n        xAlign={PopoverXAlign.END}\n      >\n        <strong>{title}</strong>\n        <p className=\"text-neutral\">{description}</p>\n      </Popover.Detail>\n    </Popover>\n  );\n};\n"],"mappings":";;;;;;;;;AAYA,MAAa,YAA+B,EAAE,MAAM,GAAG,YAAY;CACjE,MAAM,EAAE,OAAO,gBAAgB,YAAY,OAAO;AAElD,QACE,qBAAC,SAAD;EAAS,YAAW;YAApB,CACE,oBAAC,YAAD;GAAY,SAAS;GAAM,GAAI;GAAS,GAExC,qBAAC,QAAQ,QAAT;GACE,YAAW;GACX,WAAU;GACV,QAAQ,cAAc;aAHxB,CAKE,oBAAC,UAAD,YAAS,OAAe,GACxB,oBAAC,KAAD;IAAG,WAAU;cAAgB;IAAgB,EAC9B;KACT"}

package/dist/esm/components/LocaleSwitcherContentDropDown/LocaleSwitcherContent.mjs

@@ -1,10 +1,10 @@
 'use client';
 
+import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonTextAlign, ButtonVariant } from "../Button/Button.mjs";
 import { Input } from "../Input/Input.mjs";
 import { SwitchSelector, SwitchSelectorColor, SwitchSelectorSize } from "../SwitchSelector/index.mjs";
-import { usePersistedStore } from "../../hooks/usePersistedStore.mjs";
 import { DropDown } from "../DropDown/index.mjs";
 import { useLocaleSwitcherContent } from "./LocaleSwitcherContentContext.mjs";
 import { useMemo, useRef, useState } from "react";

package/dist/esm/components/Modal/Modal.mjs

@@ -1,11 +1,11 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { H3 } from "../Headers/index.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useEffect } from "react";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";

package/dist/esm/components/Navbar/MobileNavbar.mjs

@@ -1,9 +1,9 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { useScrollDetection } from "../../hooks/useScrollDetection.mjs";
+import { MaxHeightSmoother } from "../MaxHeightSmoother/index.mjs";
 import { Burger } from "./Burger.mjs";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/esm/components/Pagination/Pagination.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { useItemSelector } from "../../hooks/useItemSelector.mjs";
+import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
 import { useEffect, useRef } from "react";
 import { cva } from "class-variance-authority";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";

package/dist/esm/components/RightDrawer/RightDrawer.mjs

@@ -1,12 +1,12 @@
 'use client';
 
+import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
+import { useDevice } from "../../hooks/useDevice.mjs";
+import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { Container } from "../Container/index.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
-import { useDevice } from "../../hooks/useDevice.mjs";
 import { KeyboardShortcut } from "../KeyboardShortcut/KeyboardShortcut.mjs";
 import { Popover } from "../Popover/dynamic.mjs";
-import { useGetElementOrWindow } from "../../hooks/useGetElementOrWindow.mjs";
-import { useScrollBlockage } from "../../hooks/useScrollBlockage/index.mjs";
 import { MaxWidthSmoother } from "../MaxWidthSmoother/index.mjs";
 import { isElementAtTopAndNotCovered } from "./isElementAtTopAndNotCovered.mjs";
 import { useRightDrawer } from "./useRightDrawer.mjs";

package/dist/esm/components/Table/ExpandButton.mjs

@@ -0,0 +1,41 @@
+import { Button } from "../Button/Button.mjs";
+import { PopoverXAlign } from "../Popover/static.mjs";
+import { Popover } from "../Popover/dynamic.mjs";
+import { MoveDiagonal } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIntlayer } from "react-intlayer";
+
+//#region src/components/Table/ExpandButton.tsx
+const ExpandButton = ({ setIsModalOpen }) => {
+	const { modal: modalContent } = useIntlayer("table");
+	return /* @__PURE__ */ jsx("div", {
+		className: "pointer-events-none absolute inset-y-0 right-4 z-10",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-auto sticky top-48 pt-4",
+			children: /* @__PURE__ */ jsxs(Popover, {
+				identifier: "expand",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "hoverable",
+					size: "icon-md",
+					onClick: () => {
+						setIsModalOpen(true);
+					},
+					label: modalContent.title,
+					Icon: MoveDiagonal
+				}), /* @__PURE__ */ jsxs(Popover.Detail, {
+					identifier: "expand",
+					className: "flex min-w-64 flex-col gap-3 p-3 text-sm",
+					xAlign: PopoverXAlign.END,
+					children: [/* @__PURE__ */ jsx("strong", { children: modalContent.title }), /* @__PURE__ */ jsx("p", {
+						className: "text-neutral",
+						children: modalContent.description
+					})]
+				})]
+			})
+		})
+	});
+};
+
+//#endregion
+export { ExpandButton };
+//# sourceMappingURL=ExpandButton.mjs.map

package/dist/esm/components/Table/ExpandButton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandButton.mjs","names":[],"sources":["../../../../src/components/Table/ExpandButton.tsx"],"sourcesContent":["import { Popover, PopoverXAlign } from '@components/Popover';\nimport { MoveDiagonal } from 'lucide-react';\nimport type { FC } from 'react';\nimport { useIntlayer } from 'react-intlayer';\nimport { Button } from '../Button';\n\ntype ExpandButtonProps = {\n  setIsModalOpen: (isOpen: boolean) => void;\n};\n\nexport const ExpandButton: FC<ExpandButtonProps> = ({ setIsModalOpen }) => {\n  const { modal: modalContent } = useIntlayer('table');\n\n  return (\n    <div className=\"pointer-events-none absolute inset-y-0 right-4 z-10\">\n      <div className=\"pointer-events-auto sticky top-48 pt-4\">\n        <Popover identifier=\"expand\">\n          <Button\n            variant=\"hoverable\"\n            size=\"icon-md\"\n            onClick={() => {\n              setIsModalOpen(true);\n            }}\n            label={modalContent.title}\n            Icon={MoveDiagonal}\n          />\n\n          <Popover.Detail\n            identifier=\"expand\"\n            className=\"flex min-w-64 flex-col gap-3 p-3 text-sm\"\n            xAlign={PopoverXAlign.END}\n          >\n            <strong>{modalContent.title}</strong>\n            <p className=\"text-neutral\">{modalContent.description}</p>\n          </Popover.Detail>\n        </Popover>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;AAUA,MAAa,gBAAuC,EAAE,qBAAqB;CACzE,MAAM,EAAE,OAAO,iBAAiB,YAAY,QAAQ;AAEpD,QACE,oBAAC,OAAD;EAAK,WAAU;YACb,oBAAC,OAAD;GAAK,WAAU;aACb,qBAAC,SAAD;IAAS,YAAW;cAApB,CACE,oBAAC,QAAD;KACE,SAAQ;KACR,MAAK;KACL,eAAe;AACb,qBAAe,KAAK;;KAEtB,OAAO,aAAa;KACpB,MAAM;KACN,GAEF,qBAAC,QAAQ,QAAT;KACE,YAAW;KACX,WAAU;KACV,QAAQ,cAAc;eAHxB,CAKE,oBAAC,UAAD,YAAS,aAAa,OAAe,GACrC,oBAAC,KAAD;MAAG,WAAU;gBAAgB,aAAa;MAAgB,EAC3C;OACT;;GACN;EACF"}

package/dist/esm/components/Table/Table.mjs

@@ -1,17 +1,14 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { Button } from "../Button/Button.mjs";
 import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
 import { Modal, ModalSize } from "../Modal/Modal.mjs";
+import { ExpandButton } from "./ExpandButton.mjs";
+import { useTableWidths } from "./useTableWidths.mjs";
 import { useEffect, useRef, useState } from "react";
-import { MoveDiagonal } from "lucide-react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/Table/Table.tsx
-const CHAR_WIDTH_REM = .55;
-const MIN_WIDTH_REM = 5;
-const MAX_WIDTH_REM = 30;
 /**
 * Table component that provides an enhanced table experience with modal expansion and collapsible content
 *
@@ -149,63 +146,52 @@ const MAX_WIDTH_REM = 30;
 * @see {@link Modal} - Component used for full-screen table view
 * @see {@link Button} - Component used for the modal trigger button
 */
-const Table = ({ className, isRollable = false, displayModal, ...props }) => {
+const Table = ({ className, isRollable = false, displayModal, onClick, ...props }) => {
 	const [isModalOpen, setIsModalOpen] = useState(false);
+	const [highlightedRowIndex, setHighlightedRowIndex] = useState(null);
 	const tableRef = useRef(null);
 	const modalTableRef = useRef(null);
+	useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);
 	useEffect(() => {
-		if (!tableRef.current) return;
-		const colLengths = [];
-		Array.from(tableRef.current.querySelectorAll("tr")).forEach((row) => {
-			Array.from(row.children).forEach((cell, index) => {
-				const len = cell.textContent?.trim().length ?? 0;
-				if (colLengths[index] === void 0 || len > colLengths[index]) colLengths[index] = len;
-			});
-		});
-		const applyToTable = (table) => {
-			const rows = Array.from(table.querySelectorAll("tr"));
-			if (rows.length === 0) return;
-			const applyColStyle = (el, index) => {
-				const minRem = Math.min(MAX_WIDTH_REM, Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM));
-				el.style.minWidth = `${minRem}rem`;
-				el.style.maxWidth = `${MAX_WIDTH_REM}rem`;
-			};
-			table.querySelectorAll("th").forEach((th, index) => {
-				applyColStyle(th, index);
-			});
-			rows.forEach((row) => {
-				row.querySelectorAll("td").forEach((td, index) => {
-					applyColStyle(td, index);
+		if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {
+			const row = modalTableRef.current.rows[highlightedRowIndex];
+			if (row) {
+				row.scrollIntoView({
+					behavior: "smooth",
+					block: "center"
 				});
-			});
-		};
-		applyToTable(tableRef.current);
-		if (modalTableRef.current) applyToTable(modalTableRef.current);
-	}, [props.children, isModalOpen]);
+				row.classList.add("bg-neutral/40", "dark:bg-neutral-dark/40");
+				row.style.transition = "background-color 0.3s ease-in-out";
+			}
+		}
+	}, [isModalOpen, highlightedRowIndex]);
+	useEffect(() => {
+		if (!isModalOpen) setHighlightedRowIndex(null);
+	}, [isModalOpen]);
+	const handleTableClick = (e) => {
+		if (displayModal) {
+			const tr = e.target.closest("tr");
+			if (tr?.closest("tbody")) {
+				setHighlightedRowIndex(tr.rowIndex);
+				setIsModalOpen(true);
+			}
+		}
+		onClick?.(e);
+	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "relative overflow-hidden rounded-2xl bg-background pr-4 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
+		className: "group relative",
 		children: [
-			displayModal && /* @__PURE__ */ jsx("div", {
-				className: "sticky top-48 z-10",
-				children: /* @__PURE__ */ jsx("div", {
-					className: "absolute top-4 right-2",
-					children: /* @__PURE__ */ jsx(Button, {
-						variant: "hoverable",
-						size: "icon-md",
-						onClick: () => {
-							setIsModalOpen(true);
-						},
-						label: "Move",
-						Icon: MoveDiagonal
-					})
-				})
-			}),
+			displayModal && /* @__PURE__ */ jsx(ExpandButton, { setIsModalOpen }),
 			/* @__PURE__ */ jsx(ExpandCollapse, {
 				isRollable,
-				className: "max-w-full overflow-x-auto",
+				className: "max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl",
 				children: /* @__PURE__ */ jsx("table", {
 					ref: tableRef,
-					className: cn("w-full table-auto text-left", className),
+					className: cn("w-full table-auto overflow-hidden", displayModal && "[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors", className),
+					onClick: handleTableClick,
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") handleTableClick(e);
+					},
 					...props
 				})
 			}),

package/dist/esm/components/Table/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport { MoveDiagonal } from 'lucide-react';\nimport {\n  type FC,\n  type HTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { Button } from '../Button';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\n\n/**\n * Properties for the Table component that extends standard HTML table attributes\n *\n * @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n *\n * @example\n * ```tsx\n * // Basic table usage\n * <Table>\n *   <thead>\n *     <tr>\n *       <th>Name</th>\n *       <th>Email</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>John Doe</td>\n *       <td>john@example.com</td>\n *     </tr>\n *   </tbody>\n * </Table>\n *\n * // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n *   <thead>\n *     <tr>\n *       <th>Product</th>\n *       <th>Price</th>\n *       <th>Stock</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>Laptop</td>\n *       <td>$999</td>\n *       <td>15</td>\n *     </tr>\n *   </tbody>\n * </Table>\n * ```\n */\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n  isRollable?: boolean;\n  displayModal?: boolean;\n};\n\n// ~0.55rem per character (mid-point for proportional fonts)\nconst CHAR_WIDTH_REM = 0.55;\nconst MIN_WIDTH_REM = 5; // ~80px at 16px base\nconst MAX_WIDTH_REM = 30; // ~480px at 16px base\n\n/**\n * Table component that provides an enhanced table experience with modal expansion and collapsible content\n *\n * The Table component wraps a standard HTML table element with additional functionality:\n * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal\n * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving\n * - **Responsive Design**: Handles large tables gracefully with modal overflow\n * - **Sticky Controls**: Table controls remain accessible even when scrolling\n *\n * ## Features\n * - **Modal View**: Full-screen modal for better viewing of large tables\n * - **Expand/Collapse**: Optional collapsible wrapper to save space\n * - **Responsive**: Handles overflow and responsive behavior automatically\n * - **Accessibility**: Maintains proper table semantics and keyboard navigation\n * - **Customizable**: Supports all standard HTML table attributes and styling\n *\n * ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n *\n * @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n *\n * @example\n * ```tsx\n * // Simple data table\n * <Table>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Name</th>\n *       <th scope=\"col\">Email</th>\n *       <th scope=\"col\">Status</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>John Doe</td>\n *       <td>john@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n *           Active\n *         </span>\n *       </td>\n *     </tr>\n *     <tr>\n *       <td>Jane Smith</td>\n *       <td>jane@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n *           Pending\n *         </span>\n *       </td>\n *     </tr>\n *   </tbody>\n * </Table>\n *\n * // Large collapsible table with custom styling\n * <Table\n *   isRollable\n *   className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n *   <thead className=\"bg-gray-50\">\n *     <tr>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Product ID\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Name\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Category\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Price\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Stock\n *       </th>\n *     </tr>\n *   </thead>\n *   <tbody className=\"bg-white divide-y divide-gray-200\">\n *     {products.map((product) => (\n *       <tr key={product.id} className=\"hover:bg-gray-50\">\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           #{product.id}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n *           {product.name}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.category}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           ${product.price.toFixed(2)}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.stock} units\n *         </td>\n *       </tr>\n *     ))}\n *   </tbody>\n * </Table>\n *\n * // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n *   <thead>\n *     <tr className=\"border-b-2 border-gray-300\">\n *       <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n *     </tr>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n *     </tr>\n *   </tbody>\n * </Table>\n * ```\n *\n * @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({\n  className,\n  isRollable = false,\n  displayModal,\n  ...props\n}) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const tableRef = useRef<HTMLTableElement>(null);\n  const modalTableRef = useRef<HTMLTableElement>(null);\n\n  useEffect(() => {\n    if (!tableRef.current) return;\n\n    // Calculate the maximum character length per column from the main table\n    const colLengths: number[] = [];\n    Array.from(tableRef.current.querySelectorAll('tr')).forEach((row) => {\n      Array.from(row.children).forEach((cell, index) => {\n        const len = cell.textContent?.trim().length ?? 0;\n        if (colLengths[index] === undefined || len > colLengths[index]) {\n          colLengths[index] = len;\n        }\n      });\n    });\n\n    const applyToTable = (table: HTMLTableElement) => {\n      const rows = Array.from(table.querySelectorAll('tr'));\n      if (rows.length === 0) return;\n\n      const applyColStyle = (el: HTMLElement, index: number) => {\n        const minRem = Math.min(\n          MAX_WIDTH_REM,\n          Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM)\n        );\n        el.style.minWidth = `${minRem}rem`;\n        el.style.maxWidth = `${MAX_WIDTH_REM}rem`;\n      };\n\n      table.querySelectorAll('th').forEach((th, index) => {\n        applyColStyle(th, index);\n      });\n      rows.forEach((row) => {\n        row.querySelectorAll('td').forEach((td, index) => {\n          applyColStyle(td, index);\n        });\n      });\n    };\n\n    applyToTable(tableRef.current);\n\n    if (modalTableRef.current) applyToTable(modalTableRef.current);\n  }, [props.children, isModalOpen]);\n\n  return (\n    <div className=\"relative overflow-hidden rounded-2xl bg-background pr-4 [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\">\n      {displayModal && (\n        <div className=\"sticky top-48 z-10\">\n          <div className=\"absolute top-4 right-2\">\n            <Button\n              variant=\"hoverable\"\n              size=\"icon-md\"\n              onClick={() => {\n                setIsModalOpen(true);\n              }}\n              label=\"Move\"\n              Icon={MoveDiagonal}\n            />\n          </div>\n        </div>\n      )}\n      <ExpandCollapse\n        isRollable={isRollable}\n        className=\"max-w-full overflow-x-auto\"\n      >\n        <table\n          ref={tableRef}\n          className={cn('w-full table-auto text-left', className)}\n          {...props}\n        />\n      </ExpandCollapse>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size={ModalSize.XL}\n        hasCloseButton\n        isScrollable\n      >\n        {isModalOpen ? (\n          <div className=\"grid\">\n            <table\n              ref={modalTableRef}\n              className={cn(\n                'min-w-full max-w-full table-auto text-left',\n                className\n              )}\n              {...props}\n            />\n          </div>\n        ) : (\n          <></>\n        )}\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAoEA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2ItB,MAAa,SAAyB,EACpC,WACA,aAAa,OACb,cACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CAErD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,gBAAgB,OAAyB,KAAK;AAEpD,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;EAGvB,MAAM,aAAuB,EAAE;AAC/B,QAAM,KAAK,SAAS,QAAQ,iBAAiB,KAAK,CAAC,CAAC,SAAS,QAAQ;AACnE,SAAM,KAAK,IAAI,SAAS,CAAC,SAAS,MAAM,UAAU;IAChD,MAAM,MAAM,KAAK,aAAa,MAAM,CAAC,UAAU;AAC/C,QAAI,WAAW,WAAW,UAAa,MAAM,WAAW,OACtD,YAAW,SAAS;KAEtB;IACF;EAEF,MAAM,gBAAgB,UAA4B;GAChD,MAAM,OAAO,MAAM,KAAK,MAAM,iBAAiB,KAAK,CAAC;AACrD,OAAI,KAAK,WAAW,EAAG;GAEvB,MAAM,iBAAiB,IAAiB,UAAkB;IACxD,MAAM,SAAS,KAAK,IAClB,eACA,KAAK,IAAI,gBAAgB,WAAW,UAAU,KAAK,eAAe,CACnE;AACD,OAAG,MAAM,WAAW,GAAG,OAAO;AAC9B,OAAG,MAAM,WAAW,GAAG,cAAc;;AAGvC,SAAM,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAClD,kBAAc,IAAI,MAAM;KACxB;AACF,QAAK,SAAS,QAAQ;AACpB,QAAI,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAChD,mBAAc,IAAI,MAAM;MACxB;KACF;;AAGJ,eAAa,SAAS,QAAQ;AAE9B,MAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;IAC7D,CAAC,MAAM,UAAU,YAAY,CAAC;AAEjC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBACC,oBAAC,OAAD;IAAK,WAAU;cACb,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,QAAD;MACE,SAAQ;MACR,MAAK;MACL,eAAe;AACb,sBAAe,KAAK;;MAEtB,OAAM;MACN,MAAM;MACN;KACE;IACF;GAER,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,SAAD;KACE,KAAK;KACL,WAAW,GAAG,+BAA+B,UAAU;KACvD,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MACE,KAAK;MACL,WAAW,GACT,8CACA,UACD;MACD,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}
+{"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\n\nimport {\n  type FC,\n  type HTMLAttributes,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\nimport { ExpandButton } from './ExpandButton';\nimport { useTableWidths } from './useTableWidths';\n\n/**\n * Properties for the Table component that extends standard HTML table attributes\n *\n * @interface TableProps\n * @extends {HTMLAttributes<HTMLTableElement>}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {string} [className] - Additional CSS classes for custom styling\n * @property {ReactNode} children - The table content including thead, tbody, tfoot elements\n *\n * @example\n * ```tsx\n * // Basic table usage\n * <Table>\n *   <thead>\n *     <tr>\n *       <th>Name</th>\n *       <th>Email</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>John Doe</td>\n *       <td>john@example.com</td>\n *     </tr>\n *   </tbody>\n * </Table>\n *\n * // Collapsible table with custom styling\n * <Table isRollable className=\"border border-gray-300 rounded-lg\">\n *   <thead>\n *     <tr>\n *       <th>Product</th>\n *       <th>Price</th>\n *       <th>Stock</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>Laptop</td>\n *       <td>$999</td>\n *       <td>15</td>\n *     </tr>\n *   </tbody>\n * </Table>\n * ```\n */\ntype TableProps = HTMLAttributes<HTMLTableElement> & {\n  isRollable?: boolean;\n  displayModal?: boolean;\n};\n\n/**\n * Table component that provides an enhanced table experience with modal expansion and collapsible content\n *\n * The Table component wraps a standard HTML table element with additional functionality:\n * - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal\n * - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving\n * - **Responsive Design**: Handles large tables gracefully with modal overflow\n * - **Sticky Controls**: Table controls remain accessible even when scrolling\n *\n * ## Features\n * - **Modal View**: Full-screen modal for better viewing of large tables\n * - **Expand/Collapse**: Optional collapsible wrapper to save space\n * - **Responsive**: Handles overflow and responsive behavior automatically\n * - **Accessibility**: Maintains proper table semantics and keyboard navigation\n * - **Customizable**: Supports all standard HTML table attributes and styling\n *\n * ## Best Practices\n * - Use semantic HTML table structure (thead, tbody, tfoot)\n * - Provide proper column headers with scope attributes\n * - Use the isRollable prop for large tables that might need space management\n * - Apply consistent styling through the className prop\n * - Consider pagination for very large datasets\n *\n * @param {TableProps} props - The properties for the Table component\n * @returns {JSX.Element} The rendered table with enhanced functionality\n *\n * @example\n * ```tsx\n * // Simple data table\n * <Table>\n *   <thead>\n *     <tr>\n *       <th scope=\"col\">Name</th>\n *       <th scope=\"col\">Email</th>\n *       <th scope=\"col\">Status</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr>\n *       <td>John Doe</td>\n *       <td>john@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs\">\n *           Active\n *         </span>\n *       </td>\n *     </tr>\n *     <tr>\n *       <td>Jane Smith</td>\n *       <td>jane@example.com</td>\n *       <td>\n *         <span className=\"px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs\">\n *           Pending\n *         </span>\n *       </td>\n *     </tr>\n *   </tbody>\n * </Table>\n *\n * // Large collapsible table with custom styling\n * <Table\n *   isRollable\n *   className=\"border border-gray-200 rounded-lg overflow-hidden\"\n * >\n *   <thead className=\"bg-gray-50\">\n *     <tr>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Product ID\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Name\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Category\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Price\n *       </th>\n *       <th scope=\"col\" className=\"px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase\">\n *         Stock\n *       </th>\n *     </tr>\n *   </thead>\n *   <tbody className=\"bg-white divide-y divide-gray-200\">\n *     {products.map((product) => (\n *       <tr key={product.id} className=\"hover:bg-gray-50\">\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           #{product.id}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900\">\n *           {product.name}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.category}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-900\">\n *           ${product.price.toFixed(2)}\n *         </td>\n *         <td className=\"px-6 py-4 whitespace-nowrap text-sm text-gray-500\">\n *           {product.stock} units\n *         </td>\n *       </tr>\n *     ))}\n *   </tbody>\n * </Table>\n *\n * // Financial data table with formatted numbers\n * <Table className=\"w-full border-collapse\">\n *   <thead>\n *     <tr className=\"border-b-2 border-gray-300\">\n *       <th scope=\"col\" className=\"text-left py-3 px-4\">Quarter</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Revenue</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Profit</th>\n *       <th scope=\"col\" className=\"text-right py-3 px-4\">Growth</th>\n *     </tr>\n *   </thead>\n *   <tbody>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q1 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,450,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$345,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+12.5%</td>\n *     </tr>\n *     <tr className=\"border-b border-gray-200\">\n *       <td className=\"py-3 px-4 font-medium\">Q2 2024</td>\n *       <td className=\"py-3 px-4 text-right\">$2,780,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">$398,000</td>\n *       <td className=\"py-3 px-4 text-right text-green-600\">+13.5%</td>\n *     </tr>\n *   </tbody>\n * </Table>\n * ```\n *\n * @see {@link ExpandCollapse} - Component used for collapsible table content\n * @see {@link Modal} - Component used for full-screen table view\n * @see {@link Button} - Component used for the modal trigger button\n */\nexport const Table: FC<TableProps> = ({\n  className,\n  isRollable = false,\n  displayModal,\n  onClick,\n  ...props\n}) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [highlightedRowIndex, setHighlightedRowIndex] = useState<number | null>(\n    null\n  );\n\n  const tableRef = useRef<HTMLTableElement>(null);\n  const modalTableRef = useRef<HTMLTableElement>(null);\n\n  useTableWidths(tableRef, modalTableRef, [props.children, isModalOpen]);\n\n  useEffect(() => {\n    if (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {\n      const row = modalTableRef.current.rows[highlightedRowIndex];\n\n      if (row) {\n        row.scrollIntoView({ behavior: 'smooth', block: 'center' });\n\n        row.classList.add('bg-neutral/40', 'dark:bg-neutral-dark/40');\n        row.style.transition = 'background-color 0.3s ease-in-out';\n      }\n    }\n  }, [isModalOpen, highlightedRowIndex]);\n\n  useEffect(() => {\n    if (!isModalOpen) {\n      setHighlightedRowIndex(null);\n    }\n  }, [isModalOpen]);\n\n  const handleTableClick = (e: React.MouseEvent<HTMLTableElement>) => {\n    if (displayModal) {\n      const target = e.target as HTMLElement;\n      const tr = target.closest('tr');\n\n      if (tr?.closest('tbody')) {\n        setHighlightedRowIndex(tr.rowIndex);\n        setIsModalOpen(true);\n      }\n    }\n    onClick?.(e);\n  };\n\n  return (\n    <div className=\"group relative\">\n      {displayModal && <ExpandButton setIsModalOpen={setIsModalOpen} />}\n\n      <ExpandCollapse\n        isRollable={isRollable}\n        className=\"max-w-full overflow-x-auto rounded-2xl bg-background text-left [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-3xl\"\n      >\n        <table\n          ref={tableRef}\n          className={cn(\n            'w-full table-auto overflow-hidden',\n            displayModal &&\n              '[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors',\n            className\n          )}\n          onClick={handleTableClick}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              handleTableClick(\n                e as unknown as React.MouseEvent<HTMLTableElement>\n              );\n            }\n          }}\n          {...props}\n        />\n      </ExpandCollapse>\n\n      <Modal\n        isOpen={isModalOpen}\n        onClose={() => setIsModalOpen(false)}\n        size={ModalSize.XL}\n        hasCloseButton\n        isScrollable\n      >\n        {isModalOpen ? (\n          <div className=\"grid\">\n            <table\n              ref={modalTableRef}\n              className={cn(\n                'min-w-full max-w-full table-auto text-left',\n                className\n              )}\n              {...props}\n            />\n          </div>\n        ) : (\n          <></>\n        )}\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6MA,MAAa,SAAyB,EACpC,WACA,aAAa,OACb,cACA,SACA,GAAG,YACC;CACJ,MAAM,CAAC,aAAa,kBAAkB,SAAS,MAAM;CACrD,MAAM,CAAC,qBAAqB,0BAA0B,SACpD,KACD;CAED,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,gBAAgB,OAAyB,KAAK;AAEpD,gBAAe,UAAU,eAAe,CAAC,MAAM,UAAU,YAAY,CAAC;AAEtE,iBAAgB;AACd,MAAI,eAAe,wBAAwB,QAAQ,cAAc,SAAS;GACxE,MAAM,MAAM,cAAc,QAAQ,KAAK;AAEvC,OAAI,KAAK;AACP,QAAI,eAAe;KAAE,UAAU;KAAU,OAAO;KAAU,CAAC;AAE3D,QAAI,UAAU,IAAI,iBAAiB,0BAA0B;AAC7D,QAAI,MAAM,aAAa;;;IAG1B,CAAC,aAAa,oBAAoB,CAAC;AAEtC,iBAAgB;AACd,MAAI,CAAC,YACH,wBAAuB,KAAK;IAE7B,CAAC,YAAY,CAAC;CAEjB,MAAM,oBAAoB,MAA0C;AAClE,MAAI,cAAc;GAEhB,MAAM,KADS,EAAE,OACC,QAAQ,KAAK;AAE/B,OAAI,IAAI,QAAQ,QAAQ,EAAE;AACxB,2BAAuB,GAAG,SAAS;AACnC,mBAAe,KAAK;;;AAGxB,YAAU,EAAE;;AAGd,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACG,gBAAgB,oBAAC,cAAD,EAA8B,gBAAkB;GAEjE,oBAAC,gBAAD;IACc;IACZ,WAAU;cAEV,oBAAC,SAAD;KACE,KAAK;KACL,WAAW,GACT,qCACA,gBACE,0IACF,UACD;KACD,SAAS;KACT,YAAY,MAAM;AAChB,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,kBACE,EACD;;KAGL,GAAI;KACJ;IACa;GAEjB,oBAAC,OAAD;IACE,QAAQ;IACR,eAAe,eAAe,MAAM;IACpC,MAAM,UAAU;IAChB;IACA;cAEC,cACC,oBAAC,OAAD;KAAK,WAAU;eACb,oBAAC,SAAD;MACE,KAAK;MACL,WAAW,GACT,8CACA,UACD;MACD,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}

package/dist/esm/components/Table/table.content.mjs

@@ -3,26 +3,48 @@ import { t } from "intlayer";
 //#region src/components/Table/table.content.ts
 const tableContent = {
 	key: "table",
-	content: { show: t({
-		en: "Show all table content",
-		fr: "Afficher tout le contenu du tableau",
-		es: "Mostrar todo el contenido de la tabla",
-		"en-GB": "Show all table content",
-		de: "Alle Tabellendaten anzeigen",
-		ja: "テーブルのすべての内容を表示",
-		ko: "테이블의 모든 내용 표시",
-		zh: "显示表格的所有内容",
-		it: "Mostra tutto il contenuto della tabella",
-		pt: "Mostrar todo o conteúdo da tabela",
-		hi: "सभी तालिका सामग्री दिखाएं",
-		ar: "اظهار جميع محتويات الجدول",
-		ru: "Показать все данные таблицы",
-		tr: "Tüm tablo içeriğini göster",
-		pl: "Pokaż całą zawartość tabeli",
-		id: "Tampilkan semua isi tabel",
-		vi: "Hiển thị tất cả nội dung bảng",
-		uk: "Показати весь вміст таблиці"
-	}) },
+	content: { modal: {
+		title: t({
+			en: "Show all table content",
+			fr: "Afficher tout le contenu du tableau",
+			es: "Mostrar todo el contenido de la tabla",
+			"en-GB": "Show all table content",
+			de: "Alle Tabellendaten anzeigen",
+			ja: "テーブルのすべての内容を表示",
+			ko: "테이블의 모든 내용 표시",
+			zh: "显示表格的所有内容",
+			it: "Mostra tutto il contenuto della tabella",
+			pt: "Mostrar todo o conteúdo da tabela",
+			hi: "सभी तालिका सामग्री दिखाएं",
+			ar: "اظهار جميع محتويات الجدول",
+			ru: "Показать все данные таблицы",
+			tr: "Tüm tablo içeriğini göster",
+			pl: "Pokaż całą zawartość tabeli",
+			id: "Tampilkan semua isi tabel",
+			vi: "Hiển thị tất cả nội dung bảng",
+			uk: "Показати весь вміст таблиці"
+		}),
+		description: t({
+			en: "Open the table in a modal to view all data content clearly",
+			fr: "Ouvrir le tableau dans une fenêtre modale pour voir tout le contenu clairement",
+			es: "Abrir la tabla en una ventana flotante para ver todo el contenido claramente",
+			"en-GB": "Open the table in a modal to view all data content clearly",
+			de: "Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen",
+			ja: "テーブルをモーダルで開き、すべてのデータを明確に表示",
+			ko: "테이블을 모달로 열어 모든 데이터를 명확하게 확인",
+			zh: "在弹窗中打开表格以清晰地查看所有数据",
+			it: "Apri la tabella in una finestra modale per visualizzare tutti i dati in modo chiaro",
+			pt: "Abrir a tabela em um modal para ver todo o conteúdo claramente",
+			hi: "सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें",
+			ar: "افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح",
+			ru: "Открыть таблицу в модальном окне для четкого просмотра всех данных",
+			tr: "Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın",
+			pl: "Otwórz tabelę w oknie modalnym, aby wyraźnie zobaczyć całą zawartość",
+			id: "Buka tabel dalam modal untuk melihat semua isi data dengan jelas",
+			vi: "Mở bảng trong một cửa sổ bật lên để xem toàn bộ nội dung dữ liệu một cách rõ ràng",
+			uk: "Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані"
+		})
+	} },
 	title: "Table component content",
 	description: "Content declaration related to the Table component, specifically for UI message to display all table content.",
 	tags: [

package/dist/esm/components/Table/table.content.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"table.content.mjs","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst tableContent = {\n  key: 'table',\n  content: {\n    show: t({\n      en: 'Show all table content',\n      fr: 'Afficher tout le contenu du tableau',\n      es: 'Mostrar todo el contenido de la tabla',\n      'en-GB': 'Show all table content',\n      de: 'Alle Tabellendaten anzeigen',\n      ja: 'テーブルのすべての内容を表示',\n      ko: '테이블의 모든 내용 표시',\n      zh: '显示表格的所有内容',\n      it: 'Mostra tutto il contenuto della tabella',\n      pt: 'Mostrar todo o conteúdo da tabela',\n      hi: 'सभी तालिका सामग्री दिखाएं',\n      ar: 'اظهار جميع محتويات الجدول',\n      ru: 'Показать все данные таблицы',\n      tr: 'Tüm tablo içeriğini göster',\n      pl: 'Pokaż całą zawartość tabeli',\n      id: 'Tampilkan semua isi tabel',\n      vi: 'Hiển thị tất cả nội dung bảng',\n      uk: 'Показати весь вміст таблиці',\n    }),\n  },\n  title: 'Table component content',\n  description:\n    'Content declaration related to the Table component, specifically for UI message to display all table content.',\n  tags: ['table', 'component content', 'design system'],\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"mappings":";;;AAEA,MAAM,eAAe;CACnB,KAAK;CACL,SAAS,EACP,MAAM,EAAE;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,SAAS;EACT,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL,CAAC,EACH;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAS;EAAqB;EAAgB;CACtD"}
+{"version":3,"file":"table.content.mjs","names":[],"sources":["../../../../src/components/Table/table.content.ts"],"sourcesContent":["import { type Dictionary, t } from 'intlayer';\n\nconst tableContent = {\n  key: 'table',\n  content: {\n    modal: {\n      title: t({\n        en: 'Show all table content',\n        fr: 'Afficher tout le contenu du tableau',\n        es: 'Mostrar todo el contenido de la tabla',\n        'en-GB': 'Show all table content',\n        de: 'Alle Tabellendaten anzeigen',\n        ja: 'テーブルのすべての内容を表示',\n        ko: '테이블의 모든 내용 표시',\n        zh: '显示表格的所有内容',\n        it: 'Mostra tutto il contenuto della tabella',\n        pt: 'Mostrar todo o conteúdo da tabela',\n        hi: 'सभी तालिका सामग्री दिखाएं',\n        ar: 'اظهار جميع محتويات الجدول',\n        ru: 'Показать все данные таблицы',\n        tr: 'Tüm tablo içeriğini göster',\n        pl: 'Pokaż całą zawartość tabeli',\n        id: 'Tampilkan semua isi tabel',\n        vi: 'Hiển thị tất cả nội dung bảng',\n        uk: 'Показати весь вміст таблиці',\n      }),\n      description: t({\n        en: 'Open the table in a modal to view all data content clearly',\n        fr: 'Ouvrir le tableau dans une fenêtre modale pour voir tout le contenu clairement',\n        es: 'Abrir la tabla en una ventana flotante para ver todo el contenido claramente',\n        'en-GB': 'Open the table in a modal to view all data content clearly',\n        de: 'Tabelle in einem Modal öffnen, um alle Daten übersichtlich anzuzeigen',\n        ja: 'テーブルをモーダルで開き、すべてのデータを明確に表示',\n        ko: '테이블을 모달로 열어 모든 데이터를 명확하게 확인',\n        zh: '在弹窗中打开表格以清晰地查看所有数据',\n        it: 'Apri la tabella in una finestra modale per visualizzare tutti i dati in modo chiaro',\n        pt: 'Abrir a tabela em um modal para ver todo o conteúdo claramente',\n        hi: 'सभी डेटा सामग्री को स्पष्ट रूप से देखने के लिए तालिका को मोडल में खोलें',\n        ar: 'افتح الجدول في نافذة منبثقة لعرض جميع محتويات البيانات بوضوح',\n        ru: 'Открыть таблицу в модальном окне для четкого просмотра всех данных',\n        tr: 'Tüm veri içeriğini net bir şekilde görmek için tabloyu modalde açın',\n        pl: 'Otwórz tabelę w oknie modalnym, aby wyraźnie zobaczyć całą zawartość',\n        id: 'Buka tabel dalam modal untuk melihat semua isi data dengan jelas',\n        vi: 'Mở bảng trong một cửa sổ bật lên để xem toàn bộ nội dung dữ liệu một cách rõ ràng',\n        uk: 'Відкрийте таблицю в модальному вікні, щоб чітко переглянути всі дані',\n      }),\n    },\n  },\n  title: 'Table component content',\n  description:\n    'Content declaration related to the Table component, specifically for UI message to display all table content.',\n  tags: ['table', 'component content', 'design system'],\n} satisfies Dictionary;\n\nexport default tableContent;\n"],"mappings":";;;AAEA,MAAM,eAAe;CACnB,KAAK;CACL,SAAS,EACP,OAAO;EACL,OAAO,EAAE;GACP,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACF,aAAa,EAAE;GACb,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL,CAAC;EACH,EACF;CACD,OAAO;CACP,aACE;CACF,MAAM;EAAC;EAAS;EAAqB;EAAgB;CACtD"}

package/dist/esm/components/Table/useTableWidths.mjs

@@ -0,0 +1,41 @@
+import { useEffect } from "react";
+
+//#region src/components/Table/useTableWidths.ts
+const CHAR_WIDTH_REM = .55;
+const MIN_WIDTH_REM = 5;
+const MAX_WIDTH_REM = 30;
+const useTableWidths = (tableRef, modalTableRef, dependencies) => {
+	useEffect(() => {
+		if (!tableRef.current) return;
+		const colLengths = [];
+		Array.from(tableRef.current.querySelectorAll("tr")).forEach((row) => {
+			Array.from(row.children).forEach((cell, index) => {
+				const len = cell.textContent?.trim().length ?? 0;
+				if (colLengths[index] === void 0 || len > colLengths[index]) colLengths[index] = len;
+			});
+		});
+		const applyToTable = (table) => {
+			const rows = Array.from(table.querySelectorAll("tr"));
+			if (rows.length === 0) return;
+			const applyColStyle = (el, index) => {
+				const minRem = Math.min(MAX_WIDTH_REM, Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM));
+				el.style.minWidth = `${minRem}rem`;
+				el.style.maxWidth = `${MAX_WIDTH_REM}rem`;
+			};
+			table.querySelectorAll("th").forEach((th, index) => {
+				applyColStyle(th, index);
+			});
+			rows.forEach((row) => {
+				row.querySelectorAll("td").forEach((td, index) => {
+					applyColStyle(td, index);
+				});
+			});
+		};
+		applyToTable(tableRef.current);
+		if (modalTableRef.current) applyToTable(modalTableRef.current);
+	}, dependencies);
+};
+
+//#endregion
+export { useTableWidths };
+//# sourceMappingURL=useTableWidths.mjs.map

package/dist/esm/components/Table/useTableWidths.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableWidths.mjs","names":[],"sources":["../../../../src/components/Table/useTableWidths.ts"],"sourcesContent":["import { type RefObject, useEffect } from 'react';\n\n// ~0.55rem per character (mid-point for proportional fonts)\nconst CHAR_WIDTH_REM = 0.55;\nconst MIN_WIDTH_REM = 5; // ~80px at 16px base\nconst MAX_WIDTH_REM = 30; // ~480px at 16px base\n\nexport const useTableWidths = (\n  tableRef: RefObject<HTMLTableElement | null>,\n  modalTableRef: RefObject<HTMLTableElement | null>,\n  dependencies: any[]\n) => {\n  useEffect(() => {\n    if (!tableRef.current) return;\n\n    // Calculate the maximum character length per column from the main table\n    const colLengths: number[] = [];\n    Array.from(tableRef.current.querySelectorAll('tr')).forEach((row) => {\n      Array.from(row.children).forEach((cell, index) => {\n        const len = cell.textContent?.trim().length ?? 0;\n        if (colLengths[index] === undefined || len > colLengths[index]) {\n          colLengths[index] = len;\n        }\n      });\n    });\n\n    const applyToTable = (table: HTMLTableElement) => {\n      const rows = Array.from(table.querySelectorAll('tr'));\n      if (rows.length === 0) return;\n\n      const applyColStyle = (el: HTMLElement, index: number) => {\n        const minRem = Math.min(\n          MAX_WIDTH_REM,\n          Math.max(MIN_WIDTH_REM, (colLengths[index] ?? 0) * CHAR_WIDTH_REM)\n        );\n        el.style.minWidth = `${minRem}rem`;\n        el.style.maxWidth = `${MAX_WIDTH_REM}rem`;\n      };\n\n      table.querySelectorAll('th').forEach((th, index) => {\n        applyColStyle(th, index);\n      });\n      rows.forEach((row) => {\n        row.querySelectorAll('td').forEach((td, index) => {\n          applyColStyle(td, index);\n        });\n      });\n    };\n\n    applyToTable(tableRef.current);\n\n    if (modalTableRef.current) applyToTable(modalTableRef.current);\n  }, dependencies);\n};\n"],"mappings":";;;AAGA,MAAM,iBAAiB;AACvB,MAAM,gBAAgB;AACtB,MAAM,gBAAgB;AAEtB,MAAa,kBACX,UACA,eACA,iBACG;AACH,iBAAgB;AACd,MAAI,CAAC,SAAS,QAAS;EAGvB,MAAM,aAAuB,EAAE;AAC/B,QAAM,KAAK,SAAS,QAAQ,iBAAiB,KAAK,CAAC,CAAC,SAAS,QAAQ;AACnE,SAAM,KAAK,IAAI,SAAS,CAAC,SAAS,MAAM,UAAU;IAChD,MAAM,MAAM,KAAK,aAAa,MAAM,CAAC,UAAU;AAC/C,QAAI,WAAW,WAAW,UAAa,MAAM,WAAW,OACtD,YAAW,SAAS;KAEtB;IACF;EAEF,MAAM,gBAAgB,UAA4B;GAChD,MAAM,OAAO,MAAM,KAAK,MAAM,iBAAiB,KAAK,CAAC;AACrD,OAAI,KAAK,WAAW,EAAG;GAEvB,MAAM,iBAAiB,IAAiB,UAAkB;IACxD,MAAM,SAAS,KAAK,IAClB,eACA,KAAK,IAAI,gBAAgB,WAAW,UAAU,KAAK,eAAe,CACnE;AACD,OAAG,MAAM,WAAW,GAAG,OAAO;AAC9B,OAAG,MAAM,WAAW,GAAG,cAAc;;AAGvC,SAAM,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAClD,kBAAc,IAAI,MAAM;KACxB;AACF,QAAK,SAAS,QAAQ;AACpB,QAAI,iBAAiB,KAAK,CAAC,SAAS,IAAI,UAAU;AAChD,mBAAc,IAAI,MAAM;MACxB;KACF;;AAGJ,eAAa,SAAS,QAAQ;AAE9B,MAAI,cAAc,QAAS,cAAa,cAAc,QAAQ;IAC7D,aAAa"}