qaema-ui 0.0.1

package/dist/components/Table/Table.js

@@ -0,0 +1,166 @@
+import { j as t } from "../../_virtual/jsx-runtime.js";
+import { useState as v, useEffect as A, useMemo as G } from "react";
+import { useTranslation as J } from "react-i18next";
+import N from "../Spinner.js";
+import Q from "../Pagination.js";
+import U from "../Typography.js";
+import L, { CheckboxCell as X } from "./components/CellComponents.js";
+import O from "./components/TableHead.js";
+import { TableContainer as Y, LoadingOverlay as Z, TablesWrapper as H, DataScrollBox as D, StyledTable as k, TableBody as z, EmptyState as F, TableRow as W, TableCellContainer as b, ActionsTable as R, TableFooter as w } from "./Table.styles.js";
+function de({
+  columns: T,
+  data: i,
+  keyField: r,
+  selectable: j = !1,
+  onRowSelect: x,
+  rowActions: m,
+  stickyHeader: $ = !1,
+  loading: a = !1,
+  emptyStateMessage: y,
+  pagination: n,
+  onRowClick: f,
+  rowClassName: u,
+  isRowDisabled: d,
+  breakpoint: I = "md",
+  alignHeader: S = "start"
+}) {
+  const [c, g] = v([]), [C, p] = v(I), [_, B] = v(null), { t: K } = J();
+  A(() => {
+    const e = () => {
+      B(null);
+    };
+    return document.addEventListener("click", e), () => {
+      document.removeEventListener("click", e);
+    };
+  }, []), A(() => {
+    const e = () => {
+      const l = window.innerWidth;
+      l < 576 ? p("sm") : l < 992 ? p("md") : p("lg");
+    };
+    return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []);
+  const P = G(() => T.filter((e) => typeof e.hidden == "function" ? !e.hidden(C) : !e.hidden), [T, C]), M = () => {
+    c.length === i.length ? g([]) : g([...i]), x && x(c.length === i.length ? [] : [...i]);
+  }, V = (e) => {
+    const l = c.filter((s) => e[r] === s[r]);
+    return l && l.length > 0;
+  }, q = (e) => {
+    const l = c.some((o) => o[r] === e[r]);
+    let s;
+    l ? s = c.filter((o) => o[r] !== e[r]) : s = [...c, e], g(s), x && x(s);
+  };
+  return /* @__PURE__ */ t.jsxs(Y, { children: [
+    a && /* @__PURE__ */ t.jsx(Z, { children: /* @__PURE__ */ t.jsx(N, { size: "3rem" }) }),
+    /* @__PURE__ */ t.jsxs(H, { children: [
+      /* @__PURE__ */ t.jsx(D, { children: /* @__PURE__ */ t.jsxs(k, { children: [
+        /* @__PURE__ */ t.jsx(
+          O,
+          {
+            data: i,
+            handleSelectAll: M,
+            selectedRows: c,
+            visibleColumns: P,
+            alignHeader: S,
+            rowActions: void 0,
+            stickyHeader: $,
+            selectable: j,
+            loading: a
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, { children: i.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { colSpan: (j ? 1 : 0) + P.length, children: /* @__PURE__ */ t.jsx(F, { children: /* @__PURE__ */ t.jsx(U, { variant: "mdText", children: y ?? K("NO_DATA_AVAILABLE") }) }) }) }) : i.map((e, l) => {
+          const s = (d == null ? void 0 : d(e)) ?? !1, o = c.some((h) => h[r] === e[r]), E = e[r];
+          return /* @__PURE__ */ t.jsxs(
+            W,
+            {
+              $selected: o,
+              $disabled: s,
+              $clickable: !!f && !s,
+              onClick: () => !s && (f == null ? void 0 : f(e)),
+              className: (u == null ? void 0 : u(e, l)) ?? "",
+              children: [
+                j && /* @__PURE__ */ t.jsx(b, { $align: "center", $isFirstColumn: !0, children: /* @__PURE__ */ t.jsx(
+                  X,
+                  {
+                    checkBoxOptions: {
+                      checked: V(e),
+                      $variant: "primary",
+                      $disabled: s,
+                      $size: "sm",
+                      onChange: () => !s && q(e)
+                    }
+                  }
+                ) }),
+                P.map((h) => /* @__PURE__ */ t.jsx(b, { $align: h.align, children: /* @__PURE__ */ t.jsx(
+                  L,
+                  {
+                    column: h,
+                    row: e,
+                    type: h.cellType ?? "text",
+                    align: h.align,
+                    width: h.width ?? "",
+                    minWidth: h.minWidth ?? "",
+                    maxWidth: h.maxWidth ?? ""
+                  }
+                ) }, `${E}-${h.id}`))
+              ]
+            },
+            E
+          );
+        }) })
+      ] }) }),
+      m && m.length > 0 && /* @__PURE__ */ t.jsxs(R, { children: [
+        /* @__PURE__ */ t.jsx(
+          O,
+          {
+            data: i,
+            handleSelectAll: () => {
+            },
+            selectedRows: c,
+            visibleColumns: [],
+            alignHeader: S,
+            rowActions: m,
+            stickyHeader: $,
+            selectable: !1,
+            loading: a
+          }
+        ),
+        /* @__PURE__ */ t.jsx(z, { children: i.length === 0 ? /* @__PURE__ */ t.jsx("tr", { children: /* @__PURE__ */ t.jsx("td", { children: /* @__PURE__ */ t.jsx("div", { style: { height: "3.5rem" } }) }) }) : i.map((e) => {
+          const l = (d == null ? void 0 : d(e)) ?? !1;
+          return /* @__PURE__ */ t.jsx(W, { $disabled: l, children: /* @__PURE__ */ t.jsx(b, { $align: "right", children: /* @__PURE__ */ t.jsx(
+            L,
+            {
+              row: e,
+              type: "icon",
+              iconOptions: {
+                keyField: r,
+                rowActions: m,
+                activeDropdown: _,
+                setActiveDropdown: B
+              }
+            }
+          ) }) }, `action-${e[r]}`);
+        }) })
+      ] })
+    ] }),
+    n && n.enabled && /* @__PURE__ */ t.jsx(w, { children: /* @__PURE__ */ t.jsx(
+      Q,
+      {
+        currentPage: n.currentPage,
+        totalPages: n.totalPages,
+        onChange: n.onPageChange,
+        disabled: a,
+        hidePrevButton: n.hidePrevButton,
+        hideNextButton: n.hideNextButton,
+        siblingCount: n.siblingCount,
+        boundaryCount: n.boundaryCount,
+        itemsPerPage: n.pageSize,
+        totalItems: n.totalItems,
+        itemsPerPageOptions: n.itemsPerPageOptions,
+        onItemsPerPageChange: n.onItemsPerPageChange
+      }
+    ) })
+  ] });
+}
+export {
+  de as default
+};

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

@@ -0,0 +1,57 @@
+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;
+}>> & 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;
+}>> & 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;
+//# sourceMappingURL=Table.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.styles.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/Table.styles.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAErD,eAAO,MAAM,YAAY,yOAUxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,6NAG7B,CAAC;AAEF,eAAO,MAAM,cAAc,yOAW1B,CAAC;AAEF,eAAO,MAAM,YAAY;aAAyB,OAAO;YAaxD,CAAC;AAEF,eAAO,MAAM,YAAY;gBAA+B,OAAO;YAoB9D,CAAC;AAEF,eAAO,MAAM,cAAc,6NAO1B,CAAC;AAEF,eAAO,MAAM,WAAW,sOAMvB,CAAC;AAEF,eAAO,MAAM,oBAAoB;;mBAIhC,CAAC;AAEF,eAAO,MAAM,eAAe;cAA4B,OAAO;YAO9D,CAAC;AAEF,eAAO,MAAM,cAAc,uOAE1B,CAAC;AAEF,eAAO,MAAM,eAAe;aACjB,eAAe;gBACZ,OAAO;aACV,MAAM;gBACH,MAAM;gBACN,MAAM;qBACD,OAAO;oBACR,OAAO;YAwCxB,CAAC;AAEF,eAAO,MAAM,SAAS,+OAAiB,CAAC;AAExC,eAAO,MAAM,QAAQ;gBACP,OAAO;gBACP,OAAO;iBACN,OAAO;YAgBrB,CAAC;AAEF,eAAO,MAAM,kBAAkB;aACpB,eAAe;qBACP,OAAO;oBACR,OAAO;YA4BxB,CAAC;AAEF,eAAO,MAAM,QAAQ,+NAIpB,CAAC;AAEF,eAAO,MAAM,WAAW,6NAKvB,CAAC;AAEF,eAAO,MAAM,UAAU,6NAMtB,CAAC;AAEF,eAAO,MAAM,cAAc,6NAW1B,CAAC;AAGF,eAAO,MAAM,KAAK;cAA2B,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS;YAqCnG,CAAC;AACF,eAAO,MAAM,eAAe;aAA0B,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS;YAkBhG,CAAC;AAGF,eAAO,MAAM,aAAa,6NAIzB,CAAC;AAEF,eAAO,MAAM,aAAa;;mBAIzB,CAAC;AAEF,eAAO,MAAM,YAAY;;mBAOxB,CAAC"}

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

@@ -0,0 +1,275 @@
+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 c = r.div`
+  position: relative;
+  display: inline-block;
+`, a = 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" : "0"};
+  left: ${({ theme: o }) => o.dir === "rtl" ? "0" : "unset"};
+  top: 100%;
+  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};
+  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 {
+    margin-right: ${({ theme: o }) => o.spacing.xs};
+    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: 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`
+      position: sticky;
+      top: 0;
+    `}
+`, $ = r.tr`
+  background-color: ${({ theme: o }) => o.colors.grey.n100};
+`, y = 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`
+      position: sticky;
+      left: 0;
+      /* z-index: 2; */
+    `}
+
+  ${({ $isLastColumn: o }) => o && n`
+      position: sticky;
+      right: 0;
+      /* z-index: 2; */
+      text-align: end;
+    `}
+ 
+  &:hover {
+    ${({ $sortable: o }) => o && n`
+        background-color: ${({ theme: e }) => e.colors.grey.n150};
+      `}
+  }
+`, b = 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;
+    `}
+`, w = 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`
+      position: sticky;
+      z-index: 1;
+      left: 0;
+    `}
+
+  ${({ $isLastColumn: o }) => o && n`
+      position: sticky;
+      right: 0;
+      width: 0px;
+      z-index: 1;
+      background-color: transparent;
+    `}
+`;
+r.span`
+  display: inline-flex;
+  align-items: center;
+  margin-left: ${({ theme: o }) => o.spacing.xxs};
+`;
+const h = r.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: ${({ theme: o }) => o.spacing.sm};
+`, m = 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;
+`, 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,
+  a as DropdownButton,
+  c as DropdownContainer,
+  p as DropdownItem,
+  d as DropdownMenu,
+  m as EmptyState,
+  f as LoadingOverlay,
+  t as StyledTable,
+  u as StyledTableHead,
+  b as TableBody,
+  w as TableCellContainer,
+  g as TableContainer,
+  h as TableFooter,
+  y as TableHeaderCell,
+  $ as TableHeaderRow,
+  x as TableRow,
+  k as TablesWrapper
+};

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

@@ -0,0 +1,72 @@
+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;
+};
+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';
+};
+//# sourceMappingURL=Table.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.types.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Table/Table.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,WAAW,CAAC,CAAC,IAAI;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACjC,QAAQ,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACxE,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC3D,MAAM,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,UAAU,EAAE,MAAM,KAAK,OAAO,CAAC,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,GAAG,CAAC,EAAE,CAAC,CAAC;IACR,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;IAC3C,MAAM,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC,CAAC;CAC1C,CAAC;AAEF,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IAC1B,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1C,UAAU,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE;QACX,OAAO,EAAE,OAAO,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;QACrC,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,aAAa,CAAC,EAAE,MAAM,CAAC;QACvB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;QAC/B,oBAAoB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAC;KACvD,CAAC;IACF,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACjD,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,eAAe,CAAC;CAC/B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC;AAEjC,MAAM,MAAM,QAAQ,GAChB,MAAM,GACN,SAAS,GACT,MAAM,GACN,MAAM,GACN,QAAQ,GACR,OAAO,GACP,UAAU,GACV,MAAM,GACN,QAAQ,GACR,UAAU,GACV,aAAa,GACb,QAAQ,GACR,aAAa,CAAC;AAElB,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AACF,MAAM,MAAM,mBAAmB,GAAG;IAChC,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,eAAe,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;CAC7C,CAAC"}