@gardenfi/garden-book 0.2.31 → 0.3.0-beta.2

package/dist/DashboardLayout/MobileMenu.js

@@ -0,0 +1,126 @@
+import { jsxs as a, Fragment as C, jsx as e } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { HamburgerIcon as S } from "../HamburgerIcon/index.js";
+import { ResponsiveModal as w } from "../ResponsiveModal/index.js";
+import { Typography as t } from "../Typography/index.js";
+import { Button as M } from "../Button/index.js";
+import { cn as j } from "../utils/index.js";
+import I from "../node_modules/lucide-react/dist/esm/icons/log-out.js";
+const R = ({ title: i, isOpen: n, onToggle: o, children: s }) => /* @__PURE__ */ a("div", { children: [
+  /* @__PURE__ */ e("span", { onClick: o, className: "gf-block gf-cursor-pointer", children: /* @__PURE__ */ e(t, { size: "h3", weight: "medium", children: i }) }),
+  /* @__PURE__ */ e(
+    "div",
+    {
+      className: j(
+        "gf-grid gf-transition-[grid-template-rows,opacity] gf-duration-500 gf-ease-[cubic-bezier(0.22,1,0.36,1)]",
+        n ? "gf-grid-rows-[1fr] gf-opacity-100" : "gf-grid-rows-[0fr] gf-opacity-0"
+      ),
+      children: /* @__PURE__ */ e("div", { className: "gf-overflow-hidden", children: /* @__PURE__ */ e("div", { className: "gf-ml-6 gf-flex gf-flex-col", children: s }) })
+    }
+  )
+] }), A = ({
+  navGroups: i,
+  activePath: n,
+  onNavigate: o,
+  onLogout: s,
+  showLogoutConfirm: N = !1,
+  onLogoutConfirmClose: c
+}) => {
+  var b;
+  const [h, p] = m(!1), [y, g] = m(!1), [k, u] = m(
+    ((b = i[0]) == null ? void 0 : b.label) ?? "group-0"
+  ), d = () => {
+    var l;
+    p(!1), u(((l = i[0]) == null ? void 0 : l.label) ?? "group-0");
+  }, v = () => {
+    d(), N ? g(!0) : s();
+  }, z = () => {
+    g(!1), c == null || c();
+  };
+  return /* @__PURE__ */ a(C, { children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        type: "button",
+        onClick: () => p((l) => !l),
+        "aria-label": "Open menu",
+        className: "gf-shrink-0",
+        children: /* @__PURE__ */ e(S, { isOpen: h })
+      }
+    ),
+    /* @__PURE__ */ a(w, { open: h, onClose: d, className: "gf-w-full", children: [
+      /* @__PURE__ */ e("nav", { className: "gf-flex gf-flex-col gf-gap-4 gf-p-6 gf-bg-white/30 gf-rounded-xl", children: i.map((l, O) => {
+        const f = l.label ?? `group-${O}`;
+        return /* @__PURE__ */ e(
+          R,
+          {
+            title: l.label ?? "Navigation",
+            isOpen: k === f,
+            onToggle: () => u((r) => r === f ? "" : f),
+            children: l.items.map((r) => {
+              const x = n === r.href || n === `${r.href}/`;
+              return /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "gf-cursor-pointer gf-pt-4",
+                  onClick: () => {
+                    o(r.href), d();
+                  },
+                  children: /* @__PURE__ */ e(
+                    t,
+                    {
+                      size: "h3",
+                      weight: x ? "medium" : "regular",
+                      className: x ? "gf-text-primaryIris" : "gf-text-dark-grey",
+                      children: r.title
+                    }
+                  )
+                },
+                r.href
+              );
+            })
+          },
+          f
+        );
+      }) }),
+      /* @__PURE__ */ e("nav", { className: "gf-py-5 gf-px-6 gf-bg-white/30 gf-rounded-xl", children: /* @__PURE__ */ a(
+        "button",
+        {
+          type: "button",
+          onClick: v,
+          className: "gf-flex gf-w-full gf-cursor-pointer gf-items-center gf-gap-2 focus:gf-outline-none",
+          children: [
+            /* @__PURE__ */ e(I, { className: "gf-h-5 gf-w-5" }),
+            /* @__PURE__ */ e(t, { size: "h3", weight: "medium", children: "Log out" })
+          ]
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ a(
+      w,
+      {
+        open: y,
+        onClose: z,
+        label: "Ready to sign out?",
+        className: "gf-max-w-sm",
+        children: [
+          /* @__PURE__ */ e("div", { className: "gf-flex gf-flex-col gf-gap-2", children: /* @__PURE__ */ e(t, { size: "h5", weight: "regular", children: "You'll be signed out and redirected to the login page." }) }),
+          /* @__PURE__ */ e(
+            M,
+            {
+              variant: "primary",
+              className: "gf-w-full",
+              onClick: () => {
+                g(!1), s();
+              },
+              children: "Sign out"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  A as MobileMenu
+};

package/dist/DashboardLayout/PageHeader.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+export type PageHeaderProps = {
+    title: string;
+    description?: string;
+    compactDescription?: string;
+    descriptionClassName?: string;
+    widgets?: ReactNode;
+    action?: ReactNode;
+    hideDescription?: boolean;
+    className?: string;
+};
+export declare const PageHeader: ({ title, description, compactDescription, descriptionClassName, widgets, action, hideDescription, className, }: PageHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/DashboardLayout/PageHeader.js

@@ -0,0 +1,47 @@
+import { jsxs as e, jsx as a } from "react/jsx-runtime";
+import { Typography as t } from "../Typography/index.js";
+import { useViewport as x } from "../Viewport/index.js";
+import { cn as m } from "../utils/index.js";
+const y = ({
+  title: o,
+  description: n,
+  compactDescription: f,
+  descriptionClassName: c,
+  widgets: g,
+  action: r,
+  hideDescription: p = !1,
+  className: d
+}) => {
+  const s = x(), i = s === "mobile", l = s === "smallTab" && f ? f : n;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: m(
+        "gf-flex gf-justify-between gf-items-center gf-gap-3 gf-p-4 gf-bg-transparent gf-backdrop-blur-3xl gf-sticky gf-top-0 gf-z-[40] gf-transition-all gf-duration-200",
+        i ? "" : "md:gf-items-start",
+        d
+      ),
+      children: [
+        /* @__PURE__ */ e("div", { className: "gf-flex gf-flex-col gf-gap-2 gf-min-w-0", children: [
+          /* @__PURE__ */ a(t, { size: "h2", weight: "medium", children: o }),
+          !p && !i && l && /* @__PURE__ */ a(
+            t,
+            {
+              size: "h4",
+              weight: "regular",
+              className: m("gf-max-w-[350px] lg:gf-max-w-full", c),
+              children: l
+            }
+          )
+        ] }),
+        (g || r) && /* @__PURE__ */ e("div", { className: "gf-flex gf-items-center gf-gap-3 gf-shrink-0 gf-flex-wrap gf-justify-end", children: [
+          g,
+          r
+        ] })
+      ]
+    }
+  );
+};
+export {
+  y as PageHeader
+};

package/dist/DashboardLayout/index.d.ts

@@ -0,0 +1,10 @@
+export { DashboardSidebar } from './DashboardSidebar';
+export type { DashboardSidebarProps, NavItem, NavGroup, SidebarUser } from './DashboardSidebar';
+export { DashboardNavbar } from './DashboardNavbar';
+export type { DashboardNavbarProps } from './DashboardNavbar';
+export { MobileMenu } from './MobileMenu';
+export type { MobileMenuProps } from './MobileMenu';
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps } from './PageHeader';
+export { DashboardLayout } from './DashboardLayout';
+export type { DashboardLayoutProps } from './DashboardLayout';

package/dist/DashboardLayout/index.js

@@ -0,0 +1,93 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { useViewport as D } from "../Viewport/index.js";
+import { DashboardSidebar as S } from "./DashboardSidebar.js";
+import { DashboardNavbar as j } from "./DashboardNavbar.js";
+import { MobileMenu as T } from "./MobileMenu.js";
+import { PageHeader as h } from "./PageHeader.js";
+import { cn as v } from "../utils/index.js";
+const H = ({
+  children: f,
+  pageTitle: i,
+  pageDescription: l,
+  pageCompactDescription: s,
+  pageWidgets: a,
+  headerAction: o,
+  navGroups: m,
+  activePath: t,
+  logo: c,
+  logoHref: n,
+  user: N,
+  onLogout: g,
+  showLogoutConfirm: d,
+  onLogoutConfirmClose: b,
+  onNavigate: u,
+  renderLink: w,
+  className: x
+}) => {
+  const p = D(), y = p === "mobile", M = p === "smallTab";
+  return y ? /* @__PURE__ */ e("div", { className: v("gf-min-h-screen gf-text-foreground gf-flex gf-flex-col gf-bg-primaryMist gf-no-scrollbar", x), children: [
+    /* @__PURE__ */ r(
+      j,
+      {
+        logo: c,
+        logoHref: n,
+        menuSlot: /* @__PURE__ */ r(
+          T,
+          {
+            navGroups: m,
+            activePath: t,
+            onNavigate: u,
+            onLogout: g,
+            showLogoutConfirm: d,
+            onLogoutConfirmClose: b
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e("main", { className: "gf-flex-1 gf-overflow-y-auto", children: [
+      /* @__PURE__ */ r(
+        h,
+        {
+          title: i,
+          description: l,
+          compactDescription: s,
+          widgets: a,
+          action: o
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "gf-p-4", children: f })
+    ] })
+  ] }) : /* @__PURE__ */ e("div", { className: v("gf-min-h-screen gf-text-foreground gf-flex gf-bg-primaryMist gf-no-scrollbar", x), children: [
+    /* @__PURE__ */ r(
+      S,
+      {
+        navGroups: m,
+        activePath: t,
+        logo: c,
+        logoHref: n,
+        user: N,
+        onLogout: g,
+        showLogoutConfirm: d,
+        onLogoutConfirmClose: b,
+        renderLink: w,
+        className: M ? "gf-w-[13.5rem]" : void 0
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "gf-flex-1 gf-flex gf-flex-col gf-min-w-0 gf-h-screen", children: /* @__PURE__ */ e("main", { className: "gf-flex-1 gf-overflow-y-auto gf-h-full", children: [
+      /* @__PURE__ */ r(
+        h,
+        {
+          title: i,
+          description: l,
+          compactDescription: s,
+          widgets: a,
+          action: o
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "gf-p-4", children: f })
+    ] }) })
+  ] });
+};
+export {
+  H as DashboardLayout
+};

package/dist/DataTable/DataTable.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+
+export type DataTableColumn<T> = {
+    key: string;
+    header: string;
+    align?: "left" | "right";
+    /** Tailwind width class (e.g. "gf-w-1/4"). Applies to the desktop column. */
+    width?: string;
+    cell: (row: T) => ReactNode;
+    /** Enables a clickable sort arrow in the column header. */
+    sortable?: boolean;
+    /** Current sort direction for this column. null = unsorted (neutral icon). */
+    sortDir?: "asc" | "desc" | null;
+    /** Called when the user clicks the column header to sort. */
+    onSort?: () => void;
+};
+export type DataTableBodyState = "loading" | "error" | "empty" | "data";
+export type DataTableError = {
+    status?: number;
+    message: string;
+};
+export type DataTableProps<T> = {
+    title?: string;
+    /** Optional content rendered to the right of the title (e.g. filter dropdowns). */
+    headerActions?: ReactNode;
+    rows: T[];
+    columns: DataTableColumn<T>[];
+    getKey: (row: T, index: number) => string;
+    emptyMessage: string;
+    emptyMinHeight?: number | string;
+    minWidth?: number;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    /** Custom card renderer for the mobile view (<md). Falls back to label/value columns. */
+    renderMobileCard?: (row: T, index: number) => ReactNode;
+    renderExpanded?: (row: T, index: number) => ReactNode;
+    /** Called when a non-expandable row is clicked. Ignored when `renderExpanded` is set. */
+    onRowClick?: (row: T, index: number) => void;
+    loading?: boolean;
+    skeletonRowCount?: number;
+    error?: DataTableError | null;
+    onRetry?: () => void;
+    /** Extra content rendered below the table (e.g. pagination). */
+    footer?: ReactNode;
+    oddRowColor?: string;
+    evenRowColor?: string;
+    /** Defaults to `evenRowColor`. */
+    headerBgColor?: string;
+};
+export declare const DataTable: <T>({ title, headerActions, rows, columns, getKey, emptyMessage, emptyMinHeight, minWidth, emptyTitle, emptyDescription, renderMobileCard, renderExpanded, onRowClick, loading, skeletonRowCount, error, onRetry, footer, oddRowColor, evenRowColor, headerBgColor, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/DataTable/Table.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
+export declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+export declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+export declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;

package/dist/DataTable/Table.js

@@ -0,0 +1,57 @@
+import { jsx as f } from "react/jsx-runtime";
+import * as o from "react";
+import { cn as t } from "../utils/index.js";
+const r = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ f(
+  "table",
+  {
+    ref: l,
+    className: t("gf-w-full gf-caption-bottom gf-text-sm", a),
+    ...e
+  }
+));
+r.displayName = "Table";
+const d = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ f(
+  "thead",
+  {
+    ref: l,
+    className: t("[&_tr]:gf-h-10", a),
+    ...e
+  }
+));
+d.displayName = "TableHeader";
+const s = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ f("tbody", { ref: l, className: a, ...e }));
+s.displayName = "TableBody";
+const m = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ f("tr", { ref: l, className: t("gf-h-10", a), ...e }));
+m.displayName = "TableRow";
+const c = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ f(
+  "th",
+  {
+    ref: l,
+    className: t(
+      "gf-px-4 gf-py-2 gf-text-left gf-align-middle gf-font-medium gf-text-midGrey [&:has([role=checkbox])]:gf-pr-0",
+      a
+    ),
+    ...e
+  }
+));
+c.displayName = "TableHead";
+const b = o.forwardRef(({ className: a, ...e }, l) => /* @__PURE__ */ f(
+  "td",
+  {
+    ref: l,
+    className: t(
+      "gf-px-4 gf-align-middle [&:has([role=checkbox])]:gf-pr-0",
+      a
+    ),
+    ...e
+  }
+));
+b.displayName = "TableCell";
+export {
+  r as Table,
+  s as TableBody,
+  b as TableCell,
+  c as TableHead,
+  d as TableHeader,
+  m as TableRow
+};

package/dist/DataTable/index.d.ts

@@ -0,0 +1,2 @@
+export { DataTable } from './DataTable';
+export type { DataTableColumn, DataTableProps } from './DataTable';

package/dist/DataTable/index.js

@@ -0,0 +1,269 @@
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
+import { useState as R, useRef as ee, Fragment as te } from "react";
+import { motion as b, AnimatePresence as ae } from "framer-motion";
+import { Typography as c } from "../Typography/index.js";
+import { cn as h } from "../utils/index.js";
+import { Table as re, TableHeader as ie, TableRow as T, TableHead as H, TableBody as ne, TableCell as x } from "./Table.js";
+import { useAnimatedTable as fe } from "./useAnimatedTable.js";
+import { ErrorStateContent as O } from "../ErrorState/index.js";
+import { EmptyStateContent as U } from "../EmptyState/index.js";
+import { CardList as le } from "../CardList/index.js";
+import ge from "../node_modules/lucide-react/dist/esm/icons/arrow-up.js";
+import se from "../node_modules/lucide-react/dist/esm/icons/arrow-down.js";
+import oe from "../node_modules/lucide-react/dist/esm/icons/arrow-up-down.js";
+import de from "../node_modules/lucide-react/dist/esm/icons/chevron-down.js";
+const he = b(T), Te = ({
+  title: p,
+  headerActions: N,
+  rows: m,
+  columns: l,
+  getKey: v,
+  emptyMessage: j,
+  emptyMinHeight: w = "40dvh",
+  minWidth: F = 900,
+  emptyTitle: u,
+  emptyDescription: z,
+  renderMobileCard: L,
+  renderExpanded: y,
+  onRowClick: g,
+  loading: k = !1,
+  skeletonRowCount: C = 6,
+  error: s = null,
+  onRetry: I,
+  footer: A,
+  oddRowColor: _ = "#f5f8fa",
+  evenRowColor: B = "#ebf0f5",
+  headerBgColor: q
+}) => {
+  const r = !!y, J = m.length === 0, o = k ? "loading" : s ? "error" : J ? "empty" : "data", [M, Q] = R(null), D = (t) => Q((a) => a === t ? null : t), V = `${o}-${m.length}`, { wrapperRef: W, animatedKeys: S, wasPreloaded: X, skeletonCount: Y } = fe(k, m.length, C, V), K = ee(null);
+  o === "data" && K.current === "loading" && m.forEach((t, a) => S.current.add(v(t, a))), K.current = o;
+  const $ = q ?? B, E = (t) => ({
+    backgroundColor: t % 2 === 0 ? _ : B
+  }), Z = l.length + (r ? 1 : 0);
+  return /* @__PURE__ */ f("div", { className: "gf-w-full gf-overflow-hidden gf-rounded-2xl gf-bg-white/30 gf-flex gf-flex-col [overflow-anchor:none]", children: [
+    (p || N) && /* @__PURE__ */ f(
+      "div",
+      {
+        className: "gf-flex gf-items-center gf-justify-between gf-gap-3 gf-px-6 gf-py-4",
+        style: { backgroundColor: $ },
+        children: [
+          p ? /* @__PURE__ */ e(c, { size: "h5", weight: "medium", children: p }) : /* @__PURE__ */ e("span", {}),
+          N && /* @__PURE__ */ e("div", { className: "gf-flex gf-items-center gf-gap-2 gf-flex-wrap", children: N })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "md:gf-hidden", children: /* @__PURE__ */ e(
+      le,
+      {
+        rows: m,
+        columns: l,
+        getKey: v,
+        emptyMinHeight: w,
+        loading: k,
+        skeletonRowCount: Math.max(3, Math.floor(C / 2)),
+        error: s ? /* @__PURE__ */ e(
+          O,
+          {
+            status: s.status,
+            message: s.message,
+            onRetry: I
+          }
+        ) : void 0,
+        empty: u ? /* @__PURE__ */ e(U, { title: u, description: z }) : /* @__PURE__ */ e(c, { size: "h5", weight: "regular", className: "gf-text-midGrey", children: j }),
+        renderCard: L,
+        renderExpanded: y,
+        onRowClick: g,
+        className: p && "gf-rounded-none"
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      b.div,
+      {
+        ref: W,
+        className: "gf-hidden md:gf-block gf-overflow-x-auto gf-overflow-y-hidden gf-no-scrollbar @container",
+        children: /* @__PURE__ */ f(re, { className: "gf-table-fixed", style: { minWidth: F }, children: [
+          /* @__PURE__ */ e(ie, { children: /* @__PURE__ */ f(T, { style: { backgroundColor: $ }, children: [
+            l.map((t, a) => /* @__PURE__ */ e(
+              H,
+              {
+                className: h(
+                  t.width,
+                  a === 0 && "gf-pl-6",
+                  !r && a === l.length - 1 && "gf-pr-6",
+                  t.align === "right" && "gf-text-right"
+                ),
+                children: t.sortable ? /* @__PURE__ */ f(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: t.onSort,
+                    className: h(
+                      "gf-inline-flex gf-items-center gf-gap-1 gf-cursor-pointer gf-transition-colors hover:gf-text-primaryIris",
+                      t.align === "right" && "gf-ml-auto"
+                    ),
+                    children: [
+                      /* @__PURE__ */ e(c, { size: "h5", weight: "regular", children: t.header }),
+                      t.sortDir === "asc" ? /* @__PURE__ */ e(ge, { className: "gf-h-3 gf-w-3 gf-text-primaryIris gf-shrink-0" }) : t.sortDir === "desc" ? /* @__PURE__ */ e(se, { className: "gf-h-3 gf-w-3 gf-text-primaryIris gf-shrink-0" }) : /* @__PURE__ */ e(oe, { className: "gf-h-3 gf-w-3 gf-text-midGrey gf-shrink-0" })
+                    ]
+                  }
+                ) : /* @__PURE__ */ e(c, { size: "h5", weight: "regular", children: t.header })
+              },
+              t.key
+            )),
+            r && /* @__PURE__ */ e(H, { className: "gf-w-12 gf-pl-0 gf-pr-6", "aria-hidden": !0 })
+          ] }) }),
+          /* @__PURE__ */ f(ne, { children: [
+            o === "loading" && Array.from({ length: Y }).map((t, a) => /* @__PURE__ */ f(
+              T,
+              {
+                className: "gf-h-[42px] gf-pointer-events-none",
+                style: E(a),
+                children: [
+                  l.map((n, d) => /* @__PURE__ */ e(
+                    x,
+                    {
+                      className: h(
+                        d === 0 && "gf-pl-6",
+                        !r && d === l.length - 1 && "gf-pr-6",
+                        n.align === "right" && "gf-text-right"
+                      ),
+                      children: /* @__PURE__ */ e(
+                        "div",
+                        {
+                          className: h(
+                            "gf-h-4 gf-w-3/4 gf-bg-gray-100 gf-rounded-md gf-animate-pulse",
+                            n.align === "right" && "gf-ml-auto"
+                          )
+                        }
+                      )
+                    },
+                    n.key
+                  )),
+                  r && /* @__PURE__ */ e(x, { className: "gf-w-12 gf-pl-0 gf-pr-6" })
+                ]
+              },
+              `skel-${a}`
+            )),
+            o === "data" && m.map((t, a) => {
+              const n = v(t, a), d = r && M === n, G = !X.current && !S.current.has(n);
+              return G && S.current.add(n), /* @__PURE__ */ f(te, { children: [
+                /* @__PURE__ */ f(
+                  he,
+                  {
+                    className: h(
+                      "gf-h-[42px]",
+                      (r || g) && "gf-cursor-pointer gf-transition-colors hover:!gf-bg-white/70"
+                    ),
+                    style: E(a),
+                    initial: G ? { opacity: 0 } : !1,
+                    animate: { opacity: 1 },
+                    transition: { duration: 0.15, ease: [0.4, 0, 0.2, 1] },
+                    onClick: r ? () => D(n) : g ? () => g(t, a) : void 0,
+                    role: r || g ? "button" : void 0,
+                    tabIndex: r || g ? 0 : void 0,
+                    onKeyDown: r ? (i) => {
+                      (i.key === "Enter" || i.key === " ") && (i.preventDefault(), D(n));
+                    } : g ? (i) => {
+                      (i.key === "Enter" || i.key === " ") && (i.preventDefault(), g(t, a));
+                    } : void 0,
+                    "aria-expanded": r ? d : void 0,
+                    children: [
+                      l.map((i, P) => /* @__PURE__ */ e(
+                        x,
+                        {
+                          className: h(
+                            P === 0 && "gf-pl-6",
+                            !r && P === l.length - 1 && "gf-pr-6",
+                            i.align === "right" && "gf-text-right"
+                          ),
+                          children: /* @__PURE__ */ e(c, { size: "h5", weight: "medium", as: "span", children: i.cell(t) })
+                        },
+                        i.key
+                      )),
+                      r && /* @__PURE__ */ e(x, { className: "gf-w-12 gf-pl-0 gf-pr-6", children: /* @__PURE__ */ e(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (i) => {
+                            i.stopPropagation(), D(n);
+                          },
+                          className: "gf-ml-auto gf-flex gf-items-center gf-justify-center gf-rounded-full focus:gf-outline-none",
+                          "aria-label": d ? "Collapse row" : "Expand row",
+                          tabIndex: -1,
+                          children: /* @__PURE__ */ e(
+                            de,
+                            {
+                              className: h(
+                                "gf-h-4 gf-w-4 gf-text-primaryIris gf-transition-transform",
+                                d && "gf-rotate-180"
+                              )
+                            }
+                          )
+                        }
+                      ) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(ae, { initial: !1, children: d && y && /* @__PURE__ */ e(
+                  b.tr,
+                  {
+                    style: E(a),
+                    initial: { opacity: 0 },
+                    animate: { opacity: 1 },
+                    exit: { opacity: 0 },
+                    transition: { duration: 0.2, ease: "easeOut" },
+                    children: /* @__PURE__ */ e("td", { colSpan: Z, className: "gf-p-0 gf-border-0", children: /* @__PURE__ */ e(
+                      b.div,
+                      {
+                        initial: { height: 0 },
+                        animate: { height: "auto" },
+                        exit: { height: 0 },
+                        transition: { duration: 0.3, ease: "easeOut" },
+                        className: "gf-overflow-hidden",
+                        children: y(t, a)
+                      }
+                    ) })
+                  },
+                  `${n}-exp`
+                ) })
+              ] }, n);
+            })
+          ] })
+        ] })
+      }
+    ),
+    o === "error" && s && /* @__PURE__ */ e(
+      "div",
+      {
+        className: "gf-flex gf-items-center gf-justify-center gf-w-full gf-bg-white/50",
+        style: { minHeight: w },
+        children: /* @__PURE__ */ e(
+          O,
+          {
+            status: s.status,
+            message: s.message,
+            onRetry: I
+          }
+        )
+      }
+    ),
+    o === "empty" && /* @__PURE__ */ e(
+      "div",
+      {
+        className: "gf-flex gf-items-center gf-justify-center gf-w-full gf-bg-white/50",
+        style: { minHeight: w },
+        children: u ? /* @__PURE__ */ e(
+          U,
+          {
+            title: u,
+            description: z
+          }
+        ) : /* @__PURE__ */ e(c, { size: "h5", weight: "regular", className: "gf-text-midGrey", children: j })
+      }
+    ),
+    A && /* @__PURE__ */ e("div", { className: "gf-px-4 sm:gf-px-6 gf-pb-4", children: A })
+  ] });
+};
+export {
+  Te as DataTable
+};