qaema-ui 0.0.23 → 0.0.25

package/dist/components/DropDownWithTable/Table/Table.styles.d.ts

@@ -0,0 +1,58 @@
+import { ColumnAlignment } from './Table.types';
+export declare const ActionButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const DropdownContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DropdownButton: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const DropdownMenu: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isOpen: boolean;
+}>> & string;
+export declare const DropdownItem: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    $disabled?: boolean;
+}>> & string;
+export declare const TableContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTable: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>> & string;
+export declare const TableScrollContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const StyledTableHead: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, {
+    $sticky?: boolean;
+}>> & string;
+export declare const TableHeaderRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, never>> & string;
+export declare const TableHeaderCell: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {
+    $align?: ColumnAlignment;
+    $sortable?: boolean;
+    $width?: string;
+    $minWidth?: string;
+    $maxWidth?: string;
+    $isFirstColumn?: boolean;
+    $isLastColumn?: boolean;
+    $isActionCell?: boolean;
+}>> & string;
+export declare const TableBody: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, never>> & string;
+export declare const TableRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, {
+    $selected?: boolean;
+    $disabled?: boolean;
+    $clickable?: boolean;
+}>> & string;
+export declare const TableCellContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, {
+    $align?: ColumnAlignment;
+    $isFirstColumn?: boolean;
+    $isLastColumn?: boolean;
+    $isActionCell?: boolean;
+}>> & string;
+export declare const SortIcon: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const TableFooter: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const EmptyState: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LoadingOverlay: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Badge: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $variant: "primary" | "success" | "warning" | "error" | "neutral";
+}>> & string;
+export declare const StatusIndicator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $status: "success" | "warning" | "error" | "neutral";
+}>> & string;
+export declare const TablesWrapper: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const DataScrollBox: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const ActionsTable: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<Omit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLTableElement | null) => void | import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import('react').DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import('react').RefObject<HTMLTableElement> | null | undefined;
+}, never>> & string;

package/dist/components/DropDownWithTable/Table/Table.styles.js

@@ -0,0 +1,285 @@
+import r, { css as n } from "styled-components";
+import { Scrollbar as s } from "../../../styles/Scrollbar.styles.js";
+r.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin: 0 ${({ theme: o }) => o.spacing.xxs};
+  color: ${({ theme: o }) => o.colors.primary.purple.n500};
+
+  &:hover {
+    color: ${({ theme: o }) => o.colors.primary.purple.n400};
+  }
+`;
+const a = r.div`
+  position: relative;
+  display: inline-block;
+`, c = r.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: ${({ theme: o }) => o.colors.primary.purple.n500};
+  padding: ${({ theme: o }) => o.spacing.xs};
+  border-radius: ${({ theme: o }) => o.borderRadius.sm};
+
+  &:hover {
+    background-color: ${({ theme: o }) => o.colors.primary.purple.n100};
+  }
+`, d = r.div`
+  position: absolute;
+  /* right: 0; */
+  right: ${({ theme: o }) => o.dir === "rtl" ? "unset" : "1.7rem"};
+  left: ${({ theme: o }) => o.dir === "rtl" ? "1.7rem" : "unset"};
+  top: ${({ theme: o }) => o.dir === "rtl" ? "-165%" : "-200%"};
+  width: 9.375rem;
+  background-color: ${({ theme: o }) => o.colors.grey.n50};
+  border-radius: ${({ theme: o }) => o.borderRadius.md};
+  box-shadow: ${({ theme: o }) => o.boxShadow.s3};
+  z-index: 100;
+  display: ${({ $isOpen: o }) => o ? "block" : "none"};
+  overflow: hidden;
+`, p = r.button`
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: ${({ theme: o }) => o.spacing.xs} ${({ theme: o }) => o.spacing.sm};
+  column-gap: ${({ theme: o }) => o.spacing.xs};
+  background: none;
+  border: none;
+  text-align: left;
+  cursor: ${({ $disabled: o }) => o ? "not-allowed" : "pointer"};
+  opacity: ${({ $disabled: o }) => o ? 0.5 : 1};
+  color: ${({ theme: o }) => o.colors.grey.n600};
+
+  &:hover {
+    background-color: ${({ theme: o, $disabled: e }) => e ? "transparent" : o.colors.primary.purple.n100};
+  }
+
+  svg {
+    color: ${({ theme: o }) => o.colors.primary.purple.n500};
+  }
+`, g = r.div`
+  width: 100%;
+  position: relative;
+  border-radius: ${({ theme: o }) => o.borderRadius.md};
+  box-shadow: ${({ theme: o }) => o.boxShadow.s2};
+  background-color: ${({ theme: o }) => o.colors.grey.n50};
+  overflow-x: hidden;
+  overflow-y: auto;
+`, t = r.table`
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-family: ${({ theme: o }) => o.fonts.english};
+  overflow-x: auto;
+`;
+r(s)`
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+`;
+const u = r.thead`
+  ${({ $sticky: o }) => o && n`
+      top: 0;
+    `}
+`, $ = r.tr`
+  background-color: ${({ theme: o }) => o.colors.grey.n100};
+`, b = r.th`
+  padding: ${({ theme: o }) => o.spacing.s} ${({ theme: o }) => o.spacing.sm};
+  text-align: ${({ $align: o }) => o ?? "left"};
+  font-weight: ${({ theme: o }) => o.typography.weights.semiBold};
+  color: ${({ theme: o }) => o.colors.grey.n600};
+  /* border-bottom: 1px solid ${({ theme: o }) => o.colors.grey.n150}; */
+  white-space: nowrap;
+  transition: background-color 0.2s;
+  width: ${({ $width: o }) => o ?? "auto"};
+  min-width: ${({ $minWidth: o }) => o ?? "unset"};
+  max-width: ${({ $maxWidth: o }) => o ?? "none"};
+  background-color: ${({ theme: o }) => o.colors.primary.purple.n100};
+  height: 3.5rem;
+
+  /* Apply sticky positioning for first and last columns */
+  ${({ $isFirstColumn: o }) => o && n`
+      left: 0;
+      /* z-index: 2; */
+    `}
+
+  ${({ $isLastColumn: o }) => o && n`
+      right: 0;
+      /* z-index: 2; */
+      text-align: end;
+    `}
+        ${({ $isActionCell: o }) => o && n`
+      padding: ${({ theme: e }) => e.spacing.sm} 0;
+      text-align: center;
+    `}
+ 
+  &:hover {
+    ${({ $sortable: o }) => o && n`
+        background-color: ${({ theme: e }) => e.colors.grey.n150};
+      `}
+  }
+`, y = r.tbody``, x = r.tr`
+  background-color: ${({ theme: o, $selected: e }) => e ? o.colors.primary.purple.n100 : o.colors.grey.n50};
+  height: 3.5rem;
+  ${({ $disabled: o }) => o && n`
+      opacity: 0.6;
+      pointer-events: none;
+    `}
+
+  ${({ $clickable: o }) => o && n`
+      cursor: pointer;
+    `}
+`, h = r.td`
+  padding: ${({ theme: o }) => o.spacing.s} ${({ theme: o }) => o.spacing.sm};
+  text-align: ${({ $align: o }) => o ?? "left"};
+  /* border-bottom: 1px solid ${({ theme: o }) => o.colors.grey.n150}; */
+  color: ${({ theme: o }) => o.colors.grey.n700};
+  /* min-height: 3.5rem;
+  max-height: 3.5rem; */
+  background-color: ${({ theme: o }) => o.colors.grey.n50};
+  /* height: 3.5rem; */
+  /* Apply sticky positioning for first and last columns */
+  ${({ $isFirstColumn: o }) => o && n`
+      z-index: 1;
+      left: 0;
+    `}
+
+  ${({ $isLastColumn: o }) => o && n`
+      right: 0;
+      width: 0px;
+      z-index: 1;
+      background-color: transparent;
+    `}
+
+      ${({ $isActionCell: o }) => o && n`
+      padding: 0 ${({ theme: e }) => e.spacing.sm};
+    `}
+`;
+r.span`
+  display: inline-flex;
+  align-items: center;
+  margin-left: ${({ theme: o }) => o.spacing.xxs};
+`;
+const m = r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${({ theme: o }) => o.spacing.sm};
+`, w = r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${({ theme: o }) => o.spacing.xl};
+  color: ${({ theme: o }) => o.colors.grey.n400};
+`, f = r.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 20;
+`;
+r.span`
+  display: inline-flex;
+  align-items: center;
+  padding: ${({ theme: o }) => `${o.spacing.xxs} ${o.spacing.xs}`};
+  border-radius: ${({ theme: o }) => o.borderRadius.md};
+  font-size: ${({ theme: o }) => o.typography.sizes.s2};
+  font-weight: ${({ theme: o }) => o.typography.weights.semiBold};
+
+  ${({ theme: o, $variant: e }) => {
+  switch (e) {
+    case "primary":
+      return n`
+          background-color: ${o.colors.primary.purple.n100};
+          color: ${o.colors.primary.purple.n500};
+        `;
+    case "success":
+      return n`
+          background-color: ${o.colors.state.success.n100};
+          color: ${o.colors.state.success.n500};
+        `;
+    case "warning":
+      return n`
+          background-color: ${o.colors.secondary.yellow.n200};
+          color: ${o.colors.secondary.yellow.n600};
+        `;
+    case "error":
+      return n`
+          background-color: ${o.colors.state.error.n100};
+          color: ${o.colors.state.error.n500};
+        `;
+    default:
+      return n`
+          background-color: ${o.colors.grey.n200};
+          color: ${o.colors.grey.n600};
+        `;
+  }
+}}
+`;
+r.span`
+  display: inline-block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  margin-right: ${({ theme: o }) => o.spacing.xxs};
+  background-color: ${({ theme: o, $status: e }) => {
+  switch (e) {
+    case "success":
+      return o.colors.state.success.n500;
+    case "warning":
+      return o.colors.secondary.yellow.n500;
+    case "error":
+      return o.colors.state.error.n500;
+    default:
+      return o.colors.grey.n400;
+  }
+}};
+`;
+const k = r.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+`, v = r(s)`
+  flex: 1 1 auto;
+  overflow-x: auto;
+  min-width: 0;
+  &::-webkit-scrollbar {
+    height: ${({ theme: o }) => o.spacing.s};
+  }
+  &::-webkit-scrollbar-thumb {
+    height: ${({ theme: o }) => o.spacing.s};
+  }
+`, T = r(t)`
+  /* position: sticky;
+  right: 0; */
+  flex: 0 0 auto;
+  width: 4.5rem; /* adjust to your icon width */
+  table-layout: fixed;
+  background-color: ${({ theme: o }) => o.colors.grey.n50};
+`;
+export {
+  T as ActionsTable,
+  v as DataScrollBox,
+  c as DropdownButton,
+  a as DropdownContainer,
+  p as DropdownItem,
+  d as DropdownMenu,
+  w as EmptyState,
+  f as LoadingOverlay,
+  t as StyledTable,
+  u as StyledTableHead,
+  y as TableBody,
+  h as TableCellContainer,
+  g as TableContainer,
+  m as TableFooter,
+  b as TableHeaderCell,
+  $ as TableHeaderRow,
+  x as TableRow,
+  k as TablesWrapper
+};

package/dist/components/DropDownWithTable/Table/Table.types.d.ts

@@ -0,0 +1,73 @@
+export type ColumnAlignment = 'left' | 'center' | 'right';
+export type CellAlignment = 'left' | 'center' | 'right';
+export type TableColumn<T> = {
+    id: string;
+    header: string | React.ReactNode;
+    accessor: keyof T | ((row: T) => React.ReactNode);
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    align?: ColumnAlignment;
+    cellType?: CellType;
+    renderCell?: (value: unknown, row: T, index: number) => React.ReactNode;
+    renderHeader?: (column: TableColumn<T>) => React.ReactNode;
+    hidden?: boolean | ((breakpoint: string) => boolean);
+};
+export type RowAction<T> = {
+    label: string;
+    icon?: React.ReactNode;
+    onClick: (row: T) => void;
+    onConfirm?: (id: number) => void;
+    row?: T;
+    action: string;
+    disabled?: boolean | ((row: T) => boolean);
+    hidden?: boolean | ((row: T) => boolean);
+};
+export type TableProps<T> = {
+    columns: TableColumn<T>[];
+    data: T[];
+    keyField: string;
+    selectable?: boolean;
+    onRowSelect?: (selectedRows: T[]) => void;
+    rowActions?: RowAction<T>[];
+    renderActions?: (row: T) => React.ReactNode;
+    stickyHeader?: boolean;
+    loading?: boolean;
+    emptyStateMessage?: string;
+    pagination?: {
+        enabled: boolean;
+        pageSize: number;
+        currentPage: number;
+        totalPages: number;
+        onPageChange: (page: number) => void;
+        hidePrevButton?: boolean;
+        hideNextButton?: boolean;
+        siblingCount?: number;
+        boundaryCount?: number;
+        totalItems?: number;
+        itemsPerPageOptions?: number[];
+        onItemsPerPageChange?: (itemsPerPage: number) => void;
+    };
+    onRowClick?: (row: T) => void;
+    rowClassName?: (row: T, index: number) => string;
+    isRowDisabled?: (row: T) => boolean;
+    breakpoint?: string;
+    alignHeader?: ColumnAlignment;
+    isTableHeadVisible?: boolean;
+    isRowSelected?: (row: T) => boolean;
+};
+export type CurrencyCode = 'SAR';
+export type CellType = 'user' | 'product' | 'flag' | 'text' | 'amount' | 'badge' | 'progress' | 'icon' | 'header' | 'checkbox' | 'radioButton' | 'custom' | 'transaction';
+export type CellData = {
+    imageSrc?: string;
+    name?: string;
+    description?: string;
+};
+export type AmountCellData = {
+    value?: string;
+    currencyCode?: string;
+};
+export type TransactionCellData = {
+    value: string | number;
+    transactionType?: 'up' | 'down' | 'default';
+};

package/dist/components/DropDownWithTable/Table/components/CellComponents.d.ts

@@ -0,0 +1,116 @@
+import { Dispatch, SetStateAction } from 'react';
+import { BadgeProps } from '../../../Badge';
+import { CheckboxProps } from '../../../Checkbox';
+import { RadioButtonProps } from '../../../Radio';
+import { AmountCellData, CellAlignment, CellData, CellType, RowAction, TableColumn, TransactionCellData } from '../Table.types';
+export interface BaseCellProps {
+    align?: CellAlignment;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    className?: string;
+}
+export interface UserCellProps extends BaseCellProps {
+    data: CellData;
+    type: CellType;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+}
+export interface FlagCellProps extends BaseCellProps {
+    data: CellData;
+    type: CellType;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+}
+export interface ProductCellProps extends BaseCellProps {
+    data: CellData;
+    type: CellType;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+}
+export interface TextCellProps extends BaseCellProps {
+    data: CellData;
+    type: CellType;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+}
+export interface AmountCellProps extends BaseCellProps {
+    data: AmountCellData;
+    type: CellType;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+}
+export interface TransactionCellProps extends BaseCellProps {
+    data: TransactionCellData;
+    type: CellType;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+}
+export interface CheckboxCellProps extends BaseCellProps {
+    checkBoxOptions?: CheckboxProps;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+    onClick?: () => void;
+}
+export interface RadioButtonCellProps extends BaseCellProps {
+    radioButtonOptions?: RadioButtonProps;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+    onClick?: () => void;
+}
+export interface BadgeCellProps extends BaseCellProps {
+    badgeOptions?: BadgeProps;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+}
+export interface CustomCellProps<T = unknown> {
+    column: TableColumn<T>;
+    row: T;
+    rowIndex: number;
+    width?: string;
+    maxWidth?: string;
+    minWidth?: string;
+}
+export interface IconCellProps<T = unknown> {
+    row?: T;
+    keyField: string;
+    rowActions?: RowAction<T>[];
+    activeDropdown: number | null;
+    setActiveDropdown: Dispatch<SetStateAction<number | null>>;
+    setConfirmationPopupOpen?: Dispatch<SetStateAction<boolean>>;
+}
+export declare const ProductCell: React.FC<ProductCellProps>;
+export declare const UserCell: React.FC<UserCellProps>;
+export declare const FlagCell: React.FC<FlagCellProps>;
+export declare const TextCell: React.FC<TextCellProps>;
+export declare const AmountCell: React.FC<AmountCellProps>;
+export declare const TransactionCell: React.FC<TransactionCellProps>;
+export declare const CheckboxCell: React.FC<CheckboxCellProps>;
+export declare const RadioButtonCell: React.FC<RadioButtonCellProps>;
+export declare const BadgeCell: React.FC<BadgeCellProps>;
+export declare const CustomCell: <T>({ column, row, rowIndex }: CustomCellProps<T>) => string | number | boolean | Iterable<import('react').ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare const IconCell: <T>({ row, keyField, rowActions, activeDropdown, setActiveDropdown, setConfirmationPopupOpen, }: IconCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export interface CellFactoryProps<T = unknown> {
+    column?: TableColumn<T>;
+    row: unknown;
+    type: CellType;
+    render?: () => React.ReactNode;
+    align?: CellAlignment;
+    isDisabled?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    iconOptions?: IconCellProps<T>;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+}
+declare const TableCellFactory: <T>(props: CellFactoryProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TableCellFactory;

package/dist/components/DropDownWithTable/Table/components/CellComponents.js

@@ -0,0 +1,118 @@
+import { j as r } from "../../../../_virtual/jsx-runtime.js";
+import { FaEllipsisH as p, FaEdit as f } from "../../../../node_modules/react-icons/fa/index.js";
+import { FaPrint as u, FaCopy as j, FaTrash as C, FaEye as h } from "../../../../node_modules/react-icons/fa6/index.js";
+import g from "styled-components";
+import b from "../../../AmountItem.js";
+import y from "../../../Badge.js";
+import F from "../../../Checkbox.js";
+import d from "../../../InfoItem.js";
+import I from "../../../Radio.js";
+import $ from "../../../StatIndicator.js";
+import { DropdownContainer as v, DropdownButton as k, DropdownMenu as T, DropdownItem as B } from "../Table.styles.js";
+const i = g.div`
+  display: flex;
+  align-items: center;
+  direction: inherit;
+  gap: 8px;
+  width: ${({ width: e }) => e};
+  max-width: ${({ maxWidth: e }) => e};
+  min-width: ${({ minWidth: e }) => e};
+`, E = {
+  view: /* @__PURE__ */ r.jsx(h, {}),
+  edit: /* @__PURE__ */ r.jsx(f, {}),
+  delete: /* @__PURE__ */ r.jsx(C, {}),
+  copy: /* @__PURE__ */ r.jsx(j, {}),
+  duplicate: /* @__PURE__ */ r.jsx(j, {}),
+  approve: /* @__PURE__ */ r.jsx(u, {}),
+  print: /* @__PURE__ */ r.jsx(u, {})
+}, R = (e) => E[e.toLowerCase()] ?? null, D = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), L = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), M = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), S = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(d, { data: e, type: t, width: s }) }), V = ({ data: e, type: t, width: s, maxWidth: n, minWidth: o }) => /* @__PURE__ */ r.jsx(i, { width: s, maxWidth: n, minWidth: o, children: e && /* @__PURE__ */ r.jsx(b, { data: e, type: t, width: s }) }), H = ({ data: e, width: t, maxWidth: s, minWidth: n }) => /* @__PURE__ */ r.jsx(i, { width: t, maxWidth: s, minWidth: n, children: /* @__PURE__ */ r.jsx($, { value: e.value, direction: e.transactionType }) }), K = ({ checkBoxOptions: e, width: t, maxWidth: s, minWidth: n }) => {
+  const o = e ? { ...e, name: e.name ?? "" } : void 0;
+  return /* @__PURE__ */ r.jsx(i, { width: t, maxWidth: s, minWidth: n, children: /* @__PURE__ */ r.jsx(F, { ...o }) });
+}, P = ({ radioButtonOptions: e, width: t, maxWidth: s, minWidth: n }) => {
+  const o = e ? { ...e, name: e.name ?? "" } : void 0;
+  return /* @__PURE__ */ r.jsx(i, { width: t, maxWidth: s, minWidth: n, children: /* @__PURE__ */ r.jsx(I, { ...o }) });
+}, U = ({ badgeOptions: e, width: t, maxWidth: s, minWidth: n }) => /* @__PURE__ */ r.jsx(i, { width: t, maxWidth: s, minWidth: n, children: /* @__PURE__ */ r.jsx(y, { ...e }) }), q = ({ column: e, row: t, rowIndex: s }) => {
+  if (e.renderCell) {
+    const n = typeof e.accessor == "function" ? e.accessor(t) : t[e.accessor];
+    return e.renderCell(n, t, s);
+  }
+  return /* @__PURE__ */ r.jsx(r.Fragment, {});
+}, z = ({
+  row: e,
+  keyField: t,
+  rowActions: s,
+  activeDropdown: n,
+  setActiveDropdown: o,
+  setConfirmationPopupOpen: c
+}) => {
+  const a = e ? e[t] : void 0;
+  return /* @__PURE__ */ r.jsxs(v, { onClick: (l) => l.stopPropagation(), children: [
+    /* @__PURE__ */ r.jsx(
+      k,
+      {
+        onClick: (l) => {
+          l.stopPropagation(), o(n === a ? null : a);
+        },
+        children: /* @__PURE__ */ r.jsx(p, {})
+      }
+    ),
+    /* @__PURE__ */ r.jsx(T, { $isOpen: n === a, children: s == null ? void 0 : s.filter((l) => typeof l.hidden == "function" ? !l.hidden(e) : !l.hidden).map((l) => {
+      if (!l) return null;
+      const x = typeof l.disabled == "function" ? l.disabled(e) : l.disabled;
+      return /* @__PURE__ */ r.jsxs(
+        B,
+        {
+          $disabled: x,
+          onClick: (m) => {
+            m.stopPropagation(), o(null), x || l.onClick(e), (l.action.toLowerCase() === "delete" || l.action.includes("delet")) && (c == null || c(!0));
+          },
+          children: [
+            R(l.action) ?? l.icon,
+            l.label
+          ]
+        },
+        `action-${String(e[t])}-${l.action}`
+      );
+    }) })
+  ] });
+}, w = (e) => {
+  const { type: t, column: s, row: n, iconOptions: o, ...c } = e, a = s ? n[s.accessor] : {};
+  switch (t) {
+    case "user":
+      return /* @__PURE__ */ r.jsx(L, { ...c, data: a, type: t });
+    case "flag":
+      return /* @__PURE__ */ r.jsx(M, { ...c, data: a, type: t });
+    case "product":
+      return /* @__PURE__ */ r.jsx(D, { ...c, data: a, type: t });
+    case "amount":
+      return /* @__PURE__ */ r.jsx(V, { ...c, data: a });
+    case "transaction":
+      return /* @__PURE__ */ r.jsx(H, { ...c, data: a });
+    case "checkbox":
+      return /* @__PURE__ */ r.jsx(K, { ...c });
+    case "radioButton":
+      return /* @__PURE__ */ r.jsx(P, { ...c });
+    case "badge":
+      return /* @__PURE__ */ r.jsx(U, { badgeOptions: a });
+    case "icon":
+      return /* @__PURE__ */ r.jsx(z, { row: n, ...o, ...c });
+    case "custom":
+      return /* @__PURE__ */ r.jsx(q, { column: s, row: n, ...c });
+    default:
+      return /* @__PURE__ */ r.jsx(S, { ...c, data: a });
+  }
+};
+export {
+  V as AmountCell,
+  U as BadgeCell,
+  K as CheckboxCell,
+  q as CustomCell,
+  M as FlagCell,
+  z as IconCell,
+  D as ProductCell,
+  P as RadioButtonCell,
+  S as TextCell,
+  H as TransactionCell,
+  L as UserCell,
+  w as default
+};

package/dist/components/DropDownWithTable/Table/components/TableHead.d.ts

@@ -0,0 +1,14 @@
+import { ColumnAlignment, RowAction } from '../Table.types';
+export interface TableHeadProps {
+    data: any[];
+    handleSelectAll: () => void;
+    selectedRows: any[];
+    visibleColumns: any[];
+    alignHeader?: ColumnAlignment;
+    rowActions?: RowAction<any>[];
+    stickyHeader?: boolean;
+    selectable?: boolean;
+    loading?: boolean;
+}
+declare const TableHead: React.FC<TableHeadProps>;
+export default TableHead;