@intlayer/design-system 8.7.0-canary.0 → 8.7.0

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/Navbar/index.mjs

@@ -3,66 +3,11 @@
 import { useDevice } from "../../hooks/useDevice.mjs";
 import { useIsMounted } from "../../hooks/useIsMounted.mjs";
 import { DesktopNavbar } from "./DesktopNavbar.mjs";
+import { Burger } from "./Burger.mjs";
 import { MobileNavbar } from "./MobileNavbar.mjs";
 import { Fragment, jsx } from "react/jsx-runtime";
 
 //#region src/components/Navbar/index.tsx
-/**
-* Responsive Navbar Component
-*
-* A highly adaptable navigation component that automatically switches between desktop and mobile
-* layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.
-*
-* Features:
-* - Automatic responsive switching at 'lg' breakpoint (1024px)
-* - Separate section configurations for desktop and mobile layouts
-* - Support for logo placement and right-aligned utility items
-* - Generic typing for tab properties and selected states
-* - Mobile-specific top/bottom content areas for enhanced mobile UX
-* - Hydration-safe rendering with useIsMounted hook
-*
-* @example
-* Basic usage:
-* ```tsx
-* const navSections = [
-*   { key: 'home', label: 'Home', href: '/' },
-*   { key: 'about', label: 'About', href: '/about' }
-* ];
-*
-* <Navbar
-*   logo={<Logo />}
-*   selectedChoice="home"
-*   desktopSections={navSections}
-*   mobileTopSections={navSections}
-*   rightItemsDesktop={<UserMenu />}
-* />
-* ```
-*
-* @example
-* Advanced mobile configuration:
-* ```tsx
-* <Navbar
-*   logo={<Logo />}
-*   selectedChoice={activeTab}
-*   desktopSections={mainNavItems}
-*   mobileTopSections={primaryMobileNavItems}
-*   mobileTopChildren={<SearchBar />}
-*   mobileBottomSections={secondaryMobileNavItems}
-*   mobileBottomChildren={<UserProfile />}
-*   rightItemsDesktop={<DesktopActions />}
-*   rightItemsMobile={<MobileActions />}
-* />
-* ```
-*
-* Responsive Behavior:
-* - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout
-* - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout
-* - Automatic detection with no flash of unstyled content
-*
-* @template T - Tab properties type extending TabProps for type safety
-* @param props - Navbar component props
-* @returns Responsive navbar JSX element
-*/
 const Navbar = ({ logo, mobileTopChildren, desktopSections = [], mobileTopSections = [], mobileBottomChildren, mobileBottomSections = [], rightItemsDesktop, rightItemsMobile, selectedChoice, mobileRollable = true }) => {
 	const { isMobile } = useDevice("lg");
 	if (!useIsMounted()) return /* @__PURE__ */ jsx(Fragment, {});
@@ -83,5 +28,5 @@ const Navbar = ({ logo, mobileTopChildren, desktopSections = [], mobileTopSectio
 };
 
 //#endregion
-export { Navbar };
+export { Burger, DesktopNavbar, MobileNavbar, Navbar };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/components/Navbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport { useIsMounted } from '@hooks/useIsMounted';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n  /** Whether the mobile navbar should be rollable (default: true) */\n  mobileRollable?: boolean;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Automatic detection with no flash of unstyled content\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport const Navbar = <T extends TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n  mobileRollable = true,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n      rollable={mobileRollable}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4FA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,EAAE,EACpB,oBAAoB,EAAE,EACtB,sBACA,uBAAuB,EAAE,EACzB,mBACA,kBACA,gBACA,iBAAiB,WACG;CACpB,MAAM,EAAE,aAAa,UAAU,KAAK;AAGpC,KAAI,CAFc,cAAc,CAEhB,QAAO,gCAAK;AAE5B,QAAO,WACL,oBAAC,cAAD;EACE,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;EACZ,UAAU;EACV,IAEF,oBAAC,eAAD;EACE,UAAU;EACV,YAAY;EACN;EACU;EAChB"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Navbar/index.tsx"],"sourcesContent":["'use client';\n\nimport { useDevice } from '@hooks/useDevice';\nimport { useIsMounted } from '@hooks/useIsMounted';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TabSelectorItemProps } from '../TabSelector';\nimport { DesktopNavbar } from './DesktopNavbar';\nimport { MobileNavbar } from './MobileNavbar';\n\n/**\n * Props for the responsive Navbar component\n * @template T - The tab props type extending TabProps\n */\ntype NavbarProps<T extends TabSelectorItemProps> = {\n  /** Logo component or element to display in navbar */\n  logo: ReactNode;\n  /** Currently selected tab key for active state management */\n  selectedChoice: T['key'];\n  /** Navigation sections displayed on desktop layout */\n  desktopSections?: ReactElement<T>[];\n  /** Additional content displayed at top of mobile navbar */\n  mobileTopChildren?: ReactNode;\n  /** Navigation sections displayed at top of mobile navbar */\n  mobileTopSections?: ReactElement<T>[];\n  /** Additional content displayed at bottom of mobile navbar */\n  mobileBottomChildren?: ReactNode;\n  /** Navigation sections displayed at bottom of mobile navbar */\n  mobileBottomSections?: ReactElement<T>[];\n  /** Right-aligned items for desktop navbar (e.g., user menu, settings) */\n  rightItemsDesktop?: ReactNode;\n  /** Right-aligned items for mobile navbar */\n  rightItemsMobile?: ReactNode;\n  /** Whether the mobile navbar should be rollable (default: true) */\n  mobileRollable?: boolean;\n};\n\n/**\n * Responsive Navbar Component\n *\n * A highly adaptable navigation component that automatically switches between desktop and mobile\n * layouts based on screen size. Provides comprehensive navigation structure with flexible content areas.\n *\n * Features:\n * - Automatic responsive switching at 'lg' breakpoint (1024px)\n * - Separate section configurations for desktop and mobile layouts\n * - Support for logo placement and right-aligned utility items\n * - Generic typing for tab properties and selected states\n * - Mobile-specific top/bottom content areas for enhanced mobile UX\n * - Hydration-safe rendering with useIsMounted hook\n *\n * @example\n * Basic usage:\n * ```tsx\n * const navSections = [\n *   { key: 'home', label: 'Home', href: '/' },\n *   { key: 'about', label: 'About', href: '/about' }\n * ];\n *\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice=\"home\"\n *   desktopSections={navSections}\n *   mobileTopSections={navSections}\n *   rightItemsDesktop={<UserMenu />}\n * />\n * ```\n *\n * @example\n * Advanced mobile configuration:\n * ```tsx\n * <Navbar\n *   logo={<Logo />}\n *   selectedChoice={activeTab}\n *   desktopSections={mainNavItems}\n *   mobileTopSections={primaryMobileNavItems}\n *   mobileTopChildren={<SearchBar />}\n *   mobileBottomSections={secondaryMobileNavItems}\n *   mobileBottomChildren={<UserProfile />}\n *   rightItemsDesktop={<DesktopActions />}\n *   rightItemsMobile={<MobileActions />}\n * />\n * ```\n *\n * Responsive Behavior:\n * - Desktop (≥1024px): Shows DesktopNavbar with horizontal layout\n * - Mobile (<1024px): Shows MobileNavbar with collapsible vertical layout\n * - Automatic detection with no flash of unstyled content\n *\n * @template T - Tab properties type extending TabProps for type safety\n * @param props - Navbar component props\n * @returns Responsive navbar JSX element\n */\nexport { Burger } from './Burger';\nexport { DesktopNavbar } from './DesktopNavbar';\nexport { MobileNavbar } from './MobileNavbar';\n\nexport const Navbar = <T extends TabSelectorItemProps>({\n  logo,\n  mobileTopChildren,\n  desktopSections = [],\n  mobileTopSections = [],\n  mobileBottomChildren,\n  mobileBottomSections = [],\n  rightItemsDesktop,\n  rightItemsMobile,\n  selectedChoice,\n  mobileRollable = true,\n}: NavbarProps<T>) => {\n  const { isMobile } = useDevice('lg');\n  const isMoUnted = useIsMounted();\n\n  if (!isMoUnted) return <></>;\n\n  return isMobile ? (\n    <MobileNavbar\n      topChildren={mobileTopChildren}\n      topSections={mobileTopSections}\n      bottomChildren={mobileBottomChildren}\n      bottomSections={mobileBottomSections}\n      logo={logo}\n      rightItems={rightItemsMobile}\n      rollable={mobileRollable}\n    />\n  ) : (\n    <DesktopNavbar\n      sections={desktopSections}\n      rightItems={rightItemsDesktop}\n      logo={logo}\n      selectedChoice={selectedChoice}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;AAgGA,MAAa,UAA0C,EACrD,MACA,mBACA,kBAAkB,EAAE,EACpB,oBAAoB,EAAE,EACtB,sBACA,uBAAuB,EAAE,EACzB,mBACA,kBACA,gBACA,iBAAiB,WACG;CACpB,MAAM,EAAE,aAAa,UAAU,KAAK;AAGpC,KAAI,CAFc,cAAc,CAEhB,QAAO,gCAAK;AAE5B,QAAO,WACL,oBAAC,cAAD;EACE,aAAa;EACb,aAAa;EACb,gBAAgB;EAChB,gBAAgB;EACV;EACN,YAAY;EACZ,UAAU;EACV,IAEF,oBAAC,eAAD;EACE,UAAU;EACV,YAAY;EACN;EACU;EAChB"}

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { cn } from "../../utils/cn.mjs";
-import { useItemSelector } from "../../hooks/useItemSelector.mjs";
 import { Button, ButtonColor, ButtonSize, ButtonVariant } from "../Button/Button.mjs";
+import { useItemSelector } from "../../hooks/useItemSelector.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/SmartTable.mjs

@@ -0,0 +1,222 @@
+'use client';
+
+import { cn } from "../../utils/cn.mjs";
+import { ExpandCollapse } from "../ExpandCollapse/ExpandCollapse.mjs";
+import { Modal, ModalSize } from "../Modal/Modal.mjs";
+import { ExpandButton } from "./ExpandButton.mjs";
+import { Table } from "./Table.mjs";
+import { useTableWidths } from "./useTableWidths.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/Table/SmartTable.tsx
+/**
+* Table component that provides an enhanced table experience with modal expansion and collapsible content
+*
+* The Table component wraps a standard HTML table element with additional functionality:
+* - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal
+* - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving
+* - **Responsive Design**: Handles large tables gracefully with modal overflow
+* - **Sticky Controls**: Table controls remain accessible even when scrolling
+*
+* ## Features
+* - **Modal View**: Full-screen modal for better viewing of large tables
+* - **Expand/Collapse**: Optional collapsible wrapper to save space
+* - **Responsive**: Handles overflow and responsive behavior automatically
+* - **Accessibility**: Maintains proper table semantics and keyboard navigation
+* - **Customizable**: Supports all standard HTML table attributes and styling
+*
+* ## Best Practices
+* - Use semantic HTML table structure (thead, tbody, tfoot)
+* - Provide proper column headers with scope attributes
+* - Use the isRollable prop for large tables that might need space management
+* - Apply consistent styling through the className prop
+* - Consider pagination for very large datasets
+*
+* @param {SmartTableProps} props - The properties for the Table component
+* @returns {JSX.Element} The rendered table with enhanced functionality
+*
+* @example
+* ```tsx
+* // Simple data table
+* <SmartTable>
+*   <thead>
+*     <tr>
+*       <th scope="col">Name</th>
+*       <th scope="col">Email</th>
+*       <th scope="col">Status</th>
+*     </tr>
+*   </thead>
+*   <tbody>
+*     <tr>
+*       <td>John Doe</td>
+*       <td>john@example.com</td>
+*       <td>
+*         <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
+*           Active
+*         </span>
+*       </td>
+*     </tr>
+*     <tr>
+*       <td>Jane Smith</td>
+*       <td>jane@example.com</td>
+*       <td>
+*         <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">
+*           Pending
+*         </span>
+*       </td>
+*     </tr>
+*   </tbody>
+* </SmartTable>
+*
+* // Large collapsible table with custom styling
+* <SmartTable
+*   isRollable
+*   className="border border-gray-200 rounded-lg overflow-hidden"
+* >
+*   <thead className="bg-gray-50">
+*     <tr>
+*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+*         Product ID
+*       </th>
+*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+*         Name
+*       </th>
+*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+*         Category
+*       </th>
+*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+*         Price
+*       </th>
+*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
+*         Stock
+*       </th>
+*     </tr>
+*   </thead>
+*   <tbody className="bg-white divide-y divide-gray-200">
+*     {products.map((product) => (
+*       <tr key={product.id} className="hover:bg-gray-50">
+*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+*           #{product.id}
+*         </td>
+*         <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
+*           {product.name}
+*         </td>
+*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+*           {product.category}
+*         </td>
+*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+*           ${product.price.toFixed(2)}
+*         </td>
+*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+*           {product.stock} units
+*         </td>
+*       </tr>
+*     ))}
+*   </tbody>
+* </SmartTable>
+*
+* // Financial data table with formatted numbers
+* <SmartTable className="w-full border-collapse">
+*   <thead>
+*     <tr className="border-b-2 border-gray-300">
+*       <th scope="col" className="text-left py-3 px-4">Quarter</th>
+*       <th scope="col" className="text-right py-3 px-4">Revenue</th>
+*       <th scope="col" className="text-right py-3 px-4">Profit</th>
+*       <th scope="col" className="text-right py-3 px-4">Growth</th>
+*     </tr>
+*   </thead>
+*   <tbody>
+*     <tr className="border-b border-gray-200">
+*       <td className="py-3 px-4 font-medium">Q1 2024</td>
+*       <td className="py-3 px-4 text-right">$2,450,000</td>
+*       <td className="py-3 px-4 text-right text-green-600">$345,000</td>
+*       <td className="py-3 px-4 text-right text-green-600">+12.5%</td>
+*     </tr>
+*     <tr className="border-b border-gray-200">
+*       <td className="py-3 px-4 font-medium">Q2 2024</td>
+*       <td className="py-3 px-4 text-right">$2,780,000</td>
+*       <td className="py-3 px-4 text-right text-green-600">$398,000</td>
+*       <td className="py-3 px-4 text-right text-green-600">+13.5%</td>
+*     </tr>
+*   </tbody>
+* </SmartTable>
+* ```
+*
+* @see {@link ExpandCollapse} - Component used for collapsible table content
+* @see {@link Modal} - Component used for full-screen table view
+* @see {@link Button} - Component used for the modal trigger button
+*/
+const SmartTable = ({ className, isRollable = false, displayModal, isInteractive, 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 (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {
+			const row = modalTableRef.current.rows[highlightedRowIndex];
+			if (row) {
+				row.scrollIntoView({
+					behavior: "smooth",
+					block: "center"
+				});
+				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: "group relative",
+		children: [
+			displayModal && /* @__PURE__ */ jsx(ExpandButton, { setIsModalOpen }),
+			/* @__PURE__ */ jsx(ExpandCollapse, {
+				isRollable,
+				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,
+					isInteractive: isInteractive ?? displayModal,
+					onClick: handleTableClick,
+					onKeyDown: (e) => {
+						if (e.key === "Enter" || e.key === " ") handleTableClick(e);
+					},
+					...props
+				})
+			}),
+			/* @__PURE__ */ jsx(Modal, {
+				isOpen: isModalOpen,
+				onClose: () => setIsModalOpen(false),
+				size: ModalSize.XL,
+				hasCloseButton: true,
+				isScrollable: true,
+				children: isModalOpen ? /* @__PURE__ */ jsx("div", {
+					className: "grid",
+					children: /* @__PURE__ */ jsx(Table, {
+						ref: modalTableRef,
+						className: cn("min-w-full max-w-full text-left", className),
+						isInteractive,
+						...props
+					})
+				}) : /* @__PURE__ */ jsx(Fragment$1, {})
+			})
+		]
+	});
+};
+
+//#endregion
+export { SmartTable };
+//# sourceMappingURL=SmartTable.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SmartTable.mjs","names":[],"sources":["../../../../src/components/Table/SmartTable.tsx"],"sourcesContent":["'use client';\n\nimport { cn } from '@utils/cn';\nimport {\n  type FC,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { ExpandCollapse } from '../ExpandCollapse';\nimport { Modal, ModalSize } from '../Modal';\nimport { ExpandButton } from './ExpandButton';\nimport type { TableProps } from './Table';\nimport { Table } from './Table';\nimport { useTableWidths } from './useTableWidths';\n\n/**\n * Properties for the SmartTable component\n *\n * @interface SmartTableProps\n * @extends {TableProps}\n *\n * @property {boolean} [isRollable] - Whether the table content can be collapsed/expanded using the ExpandCollapse wrapper\n * @property {boolean} [displayModal] - Whether the table should be able to expand into a modal\n */\ntype SmartTableProps = TableProps & {\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 {SmartTableProps} 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 * <SmartTable>\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 * </SmartTable>\n *\n * // Large collapsible table with custom styling\n * <SmartTable\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 * </SmartTable>\n *\n * // Financial data table with formatted numbers\n * <SmartTable 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 * </SmartTable>\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 SmartTable: FC<SmartTableProps> = ({\n  className,\n  isRollable = false,\n  displayModal,\n  isInteractive,\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={className}\n          isInteractive={isInteractive ?? displayModal}\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('min-w-full max-w-full text-left', className)}\n              isInteractive={isInteractive}\n              {...props}\n            />\n          </div>\n        ) : (\n          <></>\n        )}\n      </Modal>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuKA,MAAa,cAAmC,EAC9C,WACA,aAAa,OACb,cACA,eACA,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,OAAD;KACE,KAAK;KACM;KACX,eAAe,iBAAiB;KAChC,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,OAAD;MACE,KAAK;MACL,WAAW,GAAG,mCAAmC,UAAU;MAC5C;MACf,GAAI;MACJ;KACE,IAEN,kCAAK;IAED;GACJ"}

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

@@ -1,218 +1,13 @@
-'use client';
-
 import { cn } from "../../utils/cn.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 { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 
 //#region src/components/Table/Table.tsx
-/**
-* Table component that provides an enhanced table experience with modal expansion and collapsible content
-*
-* The Table component wraps a standard HTML table element with additional functionality:
-* - **Modal Expansion**: Click the diagonal arrow button to view the table in a full-screen modal
-* - **Collapsible Content**: Optionally wrap content in an ExpandCollapse component for space-saving
-* - **Responsive Design**: Handles large tables gracefully with modal overflow
-* - **Sticky Controls**: Table controls remain accessible even when scrolling
-*
-* ## Features
-* - **Modal View**: Full-screen modal for better viewing of large tables
-* - **Expand/Collapse**: Optional collapsible wrapper to save space
-* - **Responsive**: Handles overflow and responsive behavior automatically
-* - **Accessibility**: Maintains proper table semantics and keyboard navigation
-* - **Customizable**: Supports all standard HTML table attributes and styling
-*
-* ## Best Practices
-* - Use semantic HTML table structure (thead, tbody, tfoot)
-* - Provide proper column headers with scope attributes
-* - Use the isRollable prop for large tables that might need space management
-* - Apply consistent styling through the className prop
-* - Consider pagination for very large datasets
-*
-* @param {TableProps} props - The properties for the Table component
-* @returns {JSX.Element} The rendered table with enhanced functionality
-*
-* @example
-* ```tsx
-* // Simple data table
-* <Table>
-*   <thead>
-*     <tr>
-*       <th scope="col">Name</th>
-*       <th scope="col">Email</th>
-*       <th scope="col">Status</th>
-*     </tr>
-*   </thead>
-*   <tbody>
-*     <tr>
-*       <td>John Doe</td>
-*       <td>john@example.com</td>
-*       <td>
-*         <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">
-*           Active
-*         </span>
-*       </td>
-*     </tr>
-*     <tr>
-*       <td>Jane Smith</td>
-*       <td>jane@example.com</td>
-*       <td>
-*         <span className="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">
-*           Pending
-*         </span>
-*       </td>
-*     </tr>
-*   </tbody>
-* </Table>
-*
-* // Large collapsible table with custom styling
-* <Table
-*   isRollable
-*   className="border border-gray-200 rounded-lg overflow-hidden"
-* >
-*   <thead className="bg-gray-50">
-*     <tr>
-*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-*         Product ID
-*       </th>
-*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-*         Name
-*       </th>
-*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-*         Category
-*       </th>
-*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-*         Price
-*       </th>
-*       <th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">
-*         Stock
-*       </th>
-*     </tr>
-*   </thead>
-*   <tbody className="bg-white divide-y divide-gray-200">
-*     {products.map((product) => (
-*       <tr key={product.id} className="hover:bg-gray-50">
-*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-*           #{product.id}
-*         </td>
-*         <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
-*           {product.name}
-*         </td>
-*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-*           {product.category}
-*         </td>
-*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
-*           ${product.price.toFixed(2)}
-*         </td>
-*         <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
-*           {product.stock} units
-*         </td>
-*       </tr>
-*     ))}
-*   </tbody>
-* </Table>
-*
-* // Financial data table with formatted numbers
-* <Table className="w-full border-collapse">
-*   <thead>
-*     <tr className="border-b-2 border-gray-300">
-*       <th scope="col" className="text-left py-3 px-4">Quarter</th>
-*       <th scope="col" className="text-right py-3 px-4">Revenue</th>
-*       <th scope="col" className="text-right py-3 px-4">Profit</th>
-*       <th scope="col" className="text-right py-3 px-4">Growth</th>
-*     </tr>
-*   </thead>
-*   <tbody>
-*     <tr className="border-b border-gray-200">
-*       <td className="py-3 px-4 font-medium">Q1 2024</td>
-*       <td className="py-3 px-4 text-right">$2,450,000</td>
-*       <td className="py-3 px-4 text-right text-green-600">$345,000</td>
-*       <td className="py-3 px-4 text-right text-green-600">+12.5%</td>
-*     </tr>
-*     <tr className="border-b border-gray-200">
-*       <td className="py-3 px-4 font-medium">Q2 2024</td>
-*       <td className="py-3 px-4 text-right">$2,780,000</td>
-*       <td className="py-3 px-4 text-right text-green-600">$398,000</td>
-*       <td className="py-3 px-4 text-right text-green-600">+13.5%</td>
-*     </tr>
-*   </tbody>
-* </Table>
-* ```
-*
-* @see {@link ExpandCollapse} - Component used for collapsible table content
-* @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, 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 (isModalOpen && highlightedRowIndex !== null && modalTableRef.current) {
-			const row = modalTableRef.current.rows[highlightedRowIndex];
-			if (row) {
-				row.scrollIntoView({
-					behavior: "smooth",
-					block: "center"
-				});
-				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: "group relative",
-		children: [
-			displayModal && /* @__PURE__ */ jsx(ExpandButton, { setIsModalOpen }),
-			/* @__PURE__ */ jsx(ExpandCollapse, {
-				isRollable,
-				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 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
-				})
-			}),
-			/* @__PURE__ */ jsx(Modal, {
-				isOpen: isModalOpen,
-				onClose: () => setIsModalOpen(false),
-				size: ModalSize.XL,
-				hasCloseButton: true,
-				isScrollable: true,
-				children: isModalOpen ? /* @__PURE__ */ jsx("div", {
-					className: "grid",
-					children: /* @__PURE__ */ jsx("table", {
-						ref: modalTableRef,
-						className: cn("min-w-full max-w-full table-auto text-left", className),
-						...props
-					})
-				}) : /* @__PURE__ */ jsx(Fragment$1, {})
-			})
-		]
-	});
-};
+const Table = forwardRef(({ className, isInteractive, ...props }, ref) => /* @__PURE__ */ jsx("table", {
+	ref,
+	className: cn("w-full table-auto overflow-hidden text-left", isInteractive && "[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors", className),
+	...props
+}));
 
 //#endregion
 export { Table };