Let's continue

package.json

@@ -15,7 +15,7 @@
         "react-dom": "^18.3.1",
         "react-hook-form": "7.54.2",
         "react-tooltip": "5.28.0",
-        "react-transition-state": "^2.1.2",
+        "react-transition-state": "^2.3.0",
         "recharts": "2.15.1",
         "tailwind-merge": "2.6.0",
         "tailwind-styled-components": "^2.2.0",

sample/index.tsx

@@ -1,5 +1,5 @@
 import { ArrowSync24Regular, Dismiss24Regular } from '@fluentui/react-icons';
-import { Dialog, DialogPanel, Select, SelectItem } from '@tremor/react';
+import { Select, SelectItem } from '@tremor/react';
 import React, { useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import {
@@ -15,6 +15,8 @@ import {
     ChartFunnel,
     ComposedLineChart,
     DataChart,
+    Dialog,
+    DialogPanel,
     DialogHeader,
     ErrorBoundary,
     Flex,

src/Dialog/index.tsx

@@ -0,0 +1,69 @@
+import {
+    DialogBackdrop,
+    Dialog as HeadlessuiDialog,
+    DialogPanel as HeadlessuiDialogPanel,
+    Transition,
+    TransitionChild,
+} from '@headlessui/react';
+import React from 'react';
+import { makeClassName } from '../theme';
+import { tremorTwMerge } from '../tremorTwMerge';
+
+const makeDisplayClassName = makeClassName('dialog');
+
+type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
+type XOR<T, U> = T | U extends object ? (Without<T, U> & U) | (Without<U, T> & T) : T | U;
+
+export type DialogProps = React.HTMLAttributes<HTMLDivElement> & {
+    open: boolean;
+    onClose: (val: boolean) => void;
+    role?: 'dialog' | 'alertdialog';
+} & XOR<{ unmount?: boolean }, { static?: boolean }>;
+
+export const Dialog = React.forwardRef<HTMLDivElement, DialogProps>(({ children, className, open, ...other }, ref) => (
+    <Transition appear show={open}>
+        <HeadlessuiDialog
+            ref={ref}
+            {...other}
+            className={tremorTwMerge(makeDisplayClassName('root'), 'relative z-50', className)}
+        >
+            <DialogBackdrop className='fixed bg-slate-950/30  dark:bg-slate-950/50  inset-0  transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in' />
+            <div className='fixed inset-0 overflow-y-auto w-screen'>
+                <div className='flex min-h-full items-center justify-center p-4'>{children}</div>
+            </div>
+        </HeadlessuiDialog>
+    </Transition>
+));
+
+export type DialogPanelProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const DialogPanel = React.forwardRef<HTMLDivElement, DialogPanelProps>(
+    ({ children, className, ...other }, ref) => (
+        <TransitionChild
+            enter='ease-out duration-300'
+            enterFrom='opacity-0 scale-95'
+            enterTo='opacity-100 scale-100'
+            leave='ease-in duration-200'
+            leaveFrom='opacity-100 scale-100'
+            leaveTo='opacity-0 scale-95'
+        >
+            <HeadlessuiDialogPanel
+                ref={ref}
+                className={tremorTwMerge(
+                    makeDisplayClassName('panel'),
+                    // common
+                    'w-full max-w-lg overflow-visible text-left ring-1 shadow-tremor transition-all transform',
+                    // light
+                    'bg-tremor-background  text-tremor-content ring-tremor-ring',
+                    // dark
+                    'dark:bg-dark-tremor-background dark:text-dark-tremor-content dark:ring-dark-tremor-ring',
+                    'rounded-tremor-default p-6',
+                    className,
+                )}
+                {...other}
+            >
+                {children}
+            </HeadlessuiDialogPanel>
+        </TransitionChild>
+    ),
+);

src/InfoDialog/index.tsx

@@ -1,7 +1,7 @@
 import { Info16Regular } from '@fluentui/react-icons';
-import { Dialog, DialogPanel } from '@tremor/react';
 import type { PropsWithChildren } from 'react';
 import { Button } from '../Button';
+import { Dialog, DialogPanel } from '../Dialog';
 import { useToggle } from '../hooks';
 
 export type InfoDialogSettings = {

src/Table/TableFoot.tsx

@@ -1,27 +1,26 @@
-import React from "react";
-import { makeClassName } from "../theme";
-import { tremorTwMerge } from "../tremorTwMerge";
+import React from 'react';
+import { makeClassName } from '../theme';
+import { tremorTwMerge } from '../tremorTwMerge';
 
-const makeTableFootClassName = makeClassName("TableFoot");
+const makeTableFootClassName = makeClassName('TableFoot');
 
-export const TableFoot = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ children, className, ...other }, ref) => (
-    <tfoot
-        ref={ref}
-        className={tremorTwMerge(
-            makeTableFootClassName("root"),
-            // common
-            "text-left font-medium border-t-[1px] ",
-            // light
-            "text-tremor-content border-tremor-border",
-            // dark
-            "dark:text-dark-tremor-content dark:border-dark-tremor-border",
-            className
-        )}
-        {...other}
-    >
-        {children}
-    </tfoot>
-));
+export const TableFoot = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+    ({ children, className, ...other }, ref) => (
+        <tfoot
+            ref={ref}
+            className={tremorTwMerge(
+                makeTableFootClassName('root'),
+                // common
+                'text-left font-medium border-t-[1px] ',
+                // light
+                'text-tremor-content border-tremor-border',
+                // dark
+                'dark:text-dark-tremor-content dark:border-dark-tremor-border',
+                className,
+            )}
+            {...other}
+        >
+            {children}
+        </tfoot>
+    ),
+);

src/Table/TableHeaders.tsx

@@ -1,10 +1,10 @@
 import { CaretDown12Regular, CaretUp12Regular } from '@fluentui/react-icons';
-import { TableRow } from './TableRow';
-import type { TableColumn, SortDirection } from '../constants';
-import { getAlignment } from '../utils';
 import tw from 'tailwind-styled-components';
+import type { SortDirection, TableColumn } from '../constants';
+import { getAlignment } from '../utils';
 import { TableHead } from './TableHead';
 import { TableHeaderCell } from './TableHeaderCell';
+import { TableRow } from './TableRow';
 
 type HeaderSettings = {
     $sortable: boolean;

src/Table/index.tsx

@@ -10,19 +10,19 @@ import { Flex } from '../Flex';
 import { NoData } from '../NoData';
 import { SearchOrClearButton } from '../SearchBox';
 import { TableCell, TableCellContent } from '../TableCell';
+import { TextInput } from '../TextInput';
 import type { ClassNameComponent, DataComponent, SortDirection, TableCellTypes, TableColumn } from '../constants';
 import { useDebounce } from '../hooks';
 import { getAlignment } from '../utils';
-import { ShimmerTable } from './TableShimmer';
-import { renderToRowString } from './exportCsv';
-import { searchData, searchFooter, sortData } from './sortData';
-import { TableHeaders } from './TableHeaders';
-import { TableRow } from './TableRow';
-import { TableBody } from './TableBody';
-import { TextInput } from '../TextInput';
 import { TableBase } from './TableBase';
+import { TableBody } from './TableBody';
 import { TableFoot } from './TableFoot';
 import { TableFooterCell } from './TableFooterCell';
+import { TableHeaders } from './TableHeaders';
+import { TableRow } from './TableRow';
+import { ShimmerTable } from './TableShimmer';
+import { renderToRowString } from './exportCsv';
+import { searchData, searchFooter, sortData } from './sortData';
 
 export * from './sortData';
 export * from './TableRow';

src/TableCell/index.tsx

@@ -4,13 +4,13 @@ import tw from 'tailwind-styled-components';
 import { formatter, toMoney, toPercentage } from 'uno-js';
 import { v4 as uuidv4 } from 'uuid';
 import { Flex } from '../Flex';
+import { List, ListItem } from '../List';
 import { BasicTooltip } from '../Tooltip';
 import type { FinancialMetric, TableCellTypes, TableColumn, Tenure } from '../constants';
 import { useToggle } from '../hooks';
+import { makeClassName } from '../theme';
 import { tremorTwMerge } from '../tremorTwMerge';
 import { getAlignment, translateType } from '../utils';
-import { makeClassName } from '../theme';
-import { List, ListItem } from '../List';
 
 const renderLinkString = (data: TableCellTypes) => {
     if (Array.isArray(data)) {
@@ -186,7 +186,7 @@ export const TableCell = React.forwardRef<
             makeTableCellClassName('root'),
             'align-middle p-2 whitespace-normal text-xs/[13px]',
             getAlignment(column, index),
-            className
+            className,
         )}
         {...other}
     >

src/index.ts

@@ -23,6 +23,7 @@ export * from './Flex';
 export * from './Grid';
 export * from './HorizontalSelector';
 export * from './InfoDialog';
+export * from './Dialog';
 export * from './Menu';
 export * from './Metric';
 export * from './List';

src/utils.ts

@@ -6,7 +6,7 @@ const rightAlign: Array<DataTypes | undefined> = ['decimal', 'number', 'money'];
 
 export const getAlignment = (tableColumn?: TableColumn, index?: number) => {
     if (!tableColumn) return '';
-    
+
     if (tableColumn.textAlign) return `text-${tableColumn.textAlign.toLowerCase()}`;
 
     const { dataType } = tableColumn;