@btst/stack 3.1.2 → 4.1.0

package/dist/packages/stack/src/plugins/blog/client/components/shared/post-card.cjs

@@ -9,6 +9,7 @@ const formatPostDate = require('./format-post-date.cjs');
 const LucideIcons = require('lucide-react');
 const constants = require('../../constants.cjs');
 const defaults = require('./defaults.cjs');
+const utils = require('../../../utils.cjs');
 
 const GRADIENT_PALETTES = [
   {
@@ -208,7 +209,7 @@ function getGradientFromTitle(title) {
 }
 function PostCard({ post }) {
   const t = context.useTranslate();
-  const { localization } = context.usePluginOverrides(constants.BLOG_PLUGIN_ID, {});
+  const { localization, classNames } = context.usePluginOverrides(constants.BLOG_PLUGIN_ID, {});
   const { router } = context.useStack();
   const Link = router?.Link ?? defaults.DefaultLink;
   const Image = router?.Image ?? defaults.DefaultImage;
@@ -217,59 +218,87 @@ function PostCard({ post }) {
   const timestamp = post.publishedAt || post.createdAt;
   const postDate = formatPostDate.formatPostDate(timestamp);
   const gradient = post.image ? null : getGradientFromTitle(post.title);
-  return /* @__PURE__ */ jsxRuntime.jsxs(card.Card, { className: "group relative flex h-full flex-col gap-4 pt-0! pb-4! transition-shadow duration-200 hover:shadow-lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Link,
-      {
-        href: blogPath,
-        className: "relative block h-48 w-full overflow-hidden rounded-t-xl bg-muted",
-        "aria-label": post.title,
-        children: post.image ? /* @__PURE__ */ jsxRuntime.jsx(
-          Image,
+  const tags = post.tags?.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "secondary", className: "text-xs", children: tag.name }, tag.id));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    card.Card,
+    {
+      className: utils.cn(
+        "group relative flex h-full flex-col gap-4 pt-0! pb-4! transition-shadow duration-200 hover:shadow-lg",
+        classNames?.postCard
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Link,
           {
-            src: post.image,
-            alt: post.title,
-            className: "h-full w-full object-cover transition-transform duration-200 group-hover:scale-105",
-            width: 500,
-            height: 300
+            href: blogPath,
+            className: "relative block h-48 w-full overflow-hidden rounded-t-xl bg-muted",
+            "aria-label": post.title,
+            children: post.image ? /* @__PURE__ */ jsxRuntime.jsx(
+              Image,
+              {
+                src: post.image,
+                alt: post.title,
+                className: "h-full w-full object-cover transition-transform duration-200 group-hover:scale-105",
+                width: 500,
+                height: 300
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-full overflow-hidden transition-transform duration-200 group-hover:scale-105", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `absolute inset-0 bg-linear-to-br ${gradient.from} ${gradient.via} ${gradient.to}`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `absolute inset-0 bg-linear-to-tr ${gradient.overlay} via-transparent to-transparent`
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex h-full w-full items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-center text-xl font-bold leading-tight text-white drop-shadow-lg line-clamp-3", children: post.title }) })
+            ] })
           }
-        ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-full overflow-hidden transition-transform duration-200 group-hover:scale-105", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: `absolute inset-0 bg-linear-to-br ${gradient.from} ${gradient.via} ${gradient.to}`
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: `absolute inset-0 bg-linear-to-tr ${gradient.overlay} via-transparent to-transparent`
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative z-10 flex h-full w-full items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-center text-xl font-bold leading-tight text-white drop-shadow-lg line-clamp-3", children: post.title }) })
-        ] })
-      }
-    ),
-    !post.published && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "destructive", className: "absolute top-2 left-2 text-xs", children: localization?.BLOG_CARD_DRAFT_BADGE ?? t("blog.card.draftBadge", "Draft") }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Link,
-      {
-        href: blogPath,
-        "aria-label": `${post.title}`,
-        className: "block focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 grow",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(card.CardHeader, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(card.CardTitle, { className: "line-clamp-3 text-lg leading-tight transition-colors group-hover:underline", children: post.title }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(card.CardContent, { className: "flex flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CalendarIcon, { className: "h-3 w-3" }),
-              /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: timestamp, children: postDate })
-            ] }),
-            post.tags && post.tags.length > 0 && post.tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "secondary", className: "text-xs", children: tag.name }, tag.id))
-          ] }) })
-        ]
-      }
-    )
-  ] });
+        ),
+        !post.published && /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "destructive", className: "absolute top-2 left-2 text-xs", children: localization?.BLOG_CARD_DRAFT_BADGE ?? t("blog.card.draftBadge", "Draft") }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Link,
+          {
+            href: blogPath,
+            "aria-label": `${post.title}`,
+            className: "block focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 grow",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(card.CardHeader, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+                card.CardTitle,
+                {
+                  className: utils.cn(
+                    "line-clamp-3 text-lg leading-tight transition-colors group-hover:underline",
+                    classNames?.postTitle
+                  ),
+                  children: post.title
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(card.CardContent, { className: "flex flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: utils.cn(
+                      "flex items-center gap-2 text-muted-foreground text-xs",
+                      classNames?.postMeta
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.CalendarIcon, { className: "h-3 w-3" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: timestamp, children: postDate })
+                    ]
+                  }
+                ),
+                classNames?.tagsList ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex flex-wrap gap-2", classNames.tagsList), children: tags }) : tags
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 exports.PostCard = PostCard;

package/dist/packages/stack/src/plugins/blog/client/components/shared/post-card.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Badge } from '../../../../../../../ui/src/components/badge.mjs';
 import { Card, CardHeader, CardTitle, CardContent } from '../../../../../../../ui/src/components/card.mjs';
 import { useTranslate, usePluginOverrides, useStack, useBasePath } from '@btst/stack/context';
@@ -7,6 +7,7 @@ import { formatPostDate } from './format-post-date.mjs';
 import { CalendarIcon } from 'lucide-react';
 import { BLOG_PLUGIN_ID } from '../../constants.mjs';
 import { DefaultLink, DefaultImage } from './defaults.mjs';
+import { cn } from '../../../utils.mjs';
 
 const GRADIENT_PALETTES = [
   {
@@ -206,7 +207,7 @@ function getGradientFromTitle(title) {
 }
 function PostCard({ post }) {
   const t = useTranslate();
-  const { localization } = usePluginOverrides(BLOG_PLUGIN_ID, {});
+  const { localization, classNames } = usePluginOverrides(BLOG_PLUGIN_ID, {});
   const { router } = useStack();
   const Link = router?.Link ?? DefaultLink;
   const Image = router?.Image ?? DefaultImage;
@@ -215,59 +216,87 @@ function PostCard({ post }) {
   const timestamp = post.publishedAt || post.createdAt;
   const postDate = formatPostDate(timestamp);
   const gradient = post.image ? null : getGradientFromTitle(post.title);
-  return /* @__PURE__ */ jsxs(Card, { className: "group relative flex h-full flex-col gap-4 pt-0! pb-4! transition-shadow duration-200 hover:shadow-lg", children: [
-    /* @__PURE__ */ jsx(
-      Link,
-      {
-        href: blogPath,
-        className: "relative block h-48 w-full overflow-hidden rounded-t-xl bg-muted",
-        "aria-label": post.title,
-        children: post.image ? /* @__PURE__ */ jsx(
-          Image,
+  const tags = post.tags?.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag.name }, tag.id));
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      className: cn(
+        "group relative flex h-full flex-col gap-4 pt-0! pb-4! transition-shadow duration-200 hover:shadow-lg",
+        classNames?.postCard
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Link,
           {
-            src: post.image,
-            alt: post.title,
-            className: "h-full w-full object-cover transition-transform duration-200 group-hover:scale-105",
-            width: 500,
-            height: 300
+            href: blogPath,
+            className: "relative block h-48 w-full overflow-hidden rounded-t-xl bg-muted",
+            "aria-label": post.title,
+            children: post.image ? /* @__PURE__ */ jsx(
+              Image,
+              {
+                src: post.image,
+                alt: post.title,
+                className: "h-full w-full object-cover transition-transform duration-200 group-hover:scale-105",
+                width: 500,
+                height: 300
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full overflow-hidden transition-transform duration-200 group-hover:scale-105", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `absolute inset-0 bg-linear-to-br ${gradient.from} ${gradient.via} ${gradient.to}`
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `absolute inset-0 bg-linear-to-tr ${gradient.overlay} via-transparent to-transparent`
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-full w-full items-center justify-center p-6", children: /* @__PURE__ */ jsx("h3", { className: "text-center text-xl font-bold leading-tight text-white drop-shadow-lg line-clamp-3", children: post.title }) })
+            ] })
           }
-        ) : /* @__PURE__ */ jsxs("div", { className: "relative h-full w-full overflow-hidden transition-transform duration-200 group-hover:scale-105", children: [
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `absolute inset-0 bg-linear-to-br ${gradient.from} ${gradient.via} ${gradient.to}`
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: `absolute inset-0 bg-linear-to-tr ${gradient.overlay} via-transparent to-transparent`
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-full w-full items-center justify-center p-6", children: /* @__PURE__ */ jsx("h3", { className: "text-center text-xl font-bold leading-tight text-white drop-shadow-lg line-clamp-3", children: post.title }) })
-        ] })
-      }
-    ),
-    !post.published && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "absolute top-2 left-2 text-xs", children: localization?.BLOG_CARD_DRAFT_BADGE ?? t("blog.card.draftBadge", "Draft") }),
-    /* @__PURE__ */ jsxs(
-      Link,
-      {
-        href: blogPath,
-        "aria-label": `${post.title}`,
-        className: "block focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 grow",
-        children: [
-          /* @__PURE__ */ jsx(CardHeader, { className: "flex-1", children: /* @__PURE__ */ jsx(CardTitle, { className: "line-clamp-3 text-lg leading-tight transition-colors group-hover:underline", children: post.title }) }),
-          /* @__PURE__ */ jsx(CardContent, { className: "flex flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-muted-foreground text-xs", children: [
-              /* @__PURE__ */ jsx(CalendarIcon, { className: "h-3 w-3" }),
-              /* @__PURE__ */ jsx("time", { dateTime: timestamp, children: postDate })
-            ] }),
-            post.tags && post.tags.length > 0 && post.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag.name }, tag.id))
-          ] }) })
-        ]
-      }
-    )
-  ] });
+        ),
+        !post.published && /* @__PURE__ */ jsx(Badge, { variant: "destructive", className: "absolute top-2 left-2 text-xs", children: localization?.BLOG_CARD_DRAFT_BADGE ?? t("blog.card.draftBadge", "Draft") }),
+        /* @__PURE__ */ jsxs(
+          Link,
+          {
+            href: blogPath,
+            "aria-label": `${post.title}`,
+            className: "block focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 grow",
+            children: [
+              /* @__PURE__ */ jsx(CardHeader, { className: "flex-1", children: /* @__PURE__ */ jsx(
+                CardTitle,
+                {
+                  className: cn(
+                    "line-clamp-3 text-lg leading-tight transition-colors group-hover:underline",
+                    classNames?.postTitle
+                  ),
+                  children: post.title
+                }
+              ) }),
+              /* @__PURE__ */ jsx(CardContent, { className: "flex flex-1 flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center gap-2 text-muted-foreground text-xs",
+                      classNames?.postMeta
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(CalendarIcon, { className: "h-3 w-3" }),
+                      /* @__PURE__ */ jsx("time", { dateTime: timestamp, children: postDate })
+                    ]
+                  }
+                ),
+                classNames?.tagsList ? /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", classNames.tagsList), children: tags }) : tags
+              ] }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 export { PostCard };

package/dist/packages/stack/src/plugins/blog/client/components/shared/posts-list.cjs

@@ -7,6 +7,7 @@ const emptyList = require('./empty-list.cjs');
 const searchInput = require('./search-input.cjs');
 const constants = require('../../constants.cjs');
 const postCard = require('./post-card.cjs');
+const utils = require('../../../utils.cjs');
 
 function PostsList({
   posts,
@@ -15,7 +16,7 @@ function PostsList({
   isLoadingMore
 }) {
   const t = context.useTranslate();
-  const { localization, PostCard } = context.usePluginOverrides(constants.BLOG_PLUGIN_ID);
+  const { localization, PostCard, classNames } = context.usePluginOverrides(constants.BLOG_PLUGIN_ID);
   const PostCardComponent = PostCard || postCard.PostCard;
   if (posts.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -35,7 +36,7 @@ function PostsList({
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: posts.map((post) => /* @__PURE__ */ jsxRuntime.jsx(PostCardComponent, { post }, post.id)) }),
-    onLoadMore && hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+    onLoadMore && hasMore && /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("flex justify-center", classNames?.pagination), children: /* @__PURE__ */ jsxRuntime.jsx(
       button.Button,
       {
         onClick: onLoadMore,

package/dist/packages/stack/src/plugins/blog/client/components/shared/posts-list.mjs

@@ -5,6 +5,7 @@ import { EmptyList } from './empty-list.mjs';
 import { SearchInput } from './search-input.mjs';
 import { BLOG_PLUGIN_ID } from '../../constants.mjs';
 import { PostCard } from './post-card.mjs';
+import { cn } from '../../../utils.mjs';
 
 function PostsList({
   posts,
@@ -13,7 +14,7 @@ function PostsList({
   isLoadingMore
 }) {
   const t = useTranslate();
-  const { localization, PostCard: PostCard$1 } = usePluginOverrides(BLOG_PLUGIN_ID);
+  const { localization, PostCard: PostCard$1, classNames } = usePluginOverrides(BLOG_PLUGIN_ID);
   const PostCardComponent = PostCard$1 || PostCard;
   if (posts.length === 0) {
     return /* @__PURE__ */ jsx(
@@ -33,7 +34,7 @@ function PostsList({
       }
     ) }),
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3", children: posts.map((post) => /* @__PURE__ */ jsx(PostCardComponent, { post }, post.id)) }),
-    onLoadMore && hasMore && /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+    onLoadMore && hasMore && /* @__PURE__ */ jsx("div", { className: cn("flex justify-center", classNames?.pagination), children: /* @__PURE__ */ jsx(
       Button,
       {
         onClick: onLoadMore,

package/dist/packages/stack/src/plugins/cms/client/components/pages/content-list-page.internal.cjs

@@ -12,6 +12,7 @@ const plugins_cms_permissions = require('../../../../../../../../plugins/cms/per
 const hooks = require('@btst/stack/client/hooks');
 const overrides = require('../../overrides.cjs');
 const constants = require('../../constants.cjs');
+const utils = require('../../../utils.cjs');
 const emptyState = require('../shared/empty-state.cjs');
 const pageWrapper = require('../shared/page-wrapper.cjs');
 const useRouteLifecycle = require('../../../../../../../ui/src/hooks/use-route-lifecycle.cjs');
@@ -25,7 +26,7 @@ function ContentListPage({ typeSlug }) {
   const t = context.useTranslate();
   const notify = context.useNotify();
   const overrides$1 = context.usePluginOverrides(constants.CMS_PLUGIN_ID);
-  const { localization } = overrides$1;
+  const { localization, classNames } = overrides$1;
   const { router, plugins, basePath: stackBasePath } = context.useStack();
   const navigate = router?.navigate;
   const Link = router?.Link;
@@ -207,6 +208,7 @@ function ContentListPage({ typeSlug }) {
         hasMore,
         isLoadingMore,
         localization,
+        classNames,
         t
       }
     )
@@ -226,89 +228,107 @@ function ContentTable({
   hasMore,
   isLoadingMore,
   localization,
+  classNames,
   t
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border rounded-lg", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(table.Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(table.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.CMS_LIST_COLUMN_SLUG ?? t("cms.list.columnSlug", "Slug") }),
-        /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.CMS_LIST_COLUMN_CREATED ?? t("cms.list.columnCreated", "Created") }),
-        /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.CMS_LIST_COLUMN_UPDATED ?? t("cms.list.columnUpdated", "Updated") }),
-        /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-[100px]", children: localization?.CMS_LIST_COLUMN_ACTIONS ?? t("cms.list.columnActions", "Actions") })
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(
-          LinkComponent,
-          {
-            href: context.joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`),
-            className: "hover:underline",
-            children: item.slug
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: formatDate(item.createdAt) }),
-        /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: formatDate(item.updatedAt) }),
-        /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            context.PermissionAccess,
-            {
-              permission: plugins_cms_permissions.cmsPermissions.record.update({
-                contentType: item.contentType?.slug ?? typeSlug,
-                recordId: item.id,
-                ...item.authorId ? { authorId: item.authorId } : {}
-              }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                button.Button,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn("border rounded-lg", classNames?.table),
+      "data-testid": "cms-content-table",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(table.Table, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.CMS_LIST_COLUMN_SLUG ?? t("cms.list.columnSlug", "Slug") }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.CMS_LIST_COLUMN_CREATED ?? t("cms.list.columnCreated", "Created") }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { children: localization?.CMS_LIST_COLUMN_UPDATED ?? t("cms.list.columnUpdated", "Updated") }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableHead, { className: "w-[100px]", children: localization?.CMS_LIST_COLUMN_ACTIONS ?? t("cms.list.columnActions", "Actions") })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(table.TableBody, { children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(table.TableRow, { className: classNames?.tableRow, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { className: "font-medium", children: /* @__PURE__ */ jsxRuntime.jsx(
+              LinkComponent,
+              {
+                href: context.joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`),
+                className: "hover:underline",
+                children: item.slug
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: formatDate(item.createdAt) }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: formatDate(item.updatedAt) }),
+            /* @__PURE__ */ jsxRuntime.jsx(table.TableCell, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                context.PermissionAccess,
                 {
-                  variant: "ghost",
-                  size: "icon",
-                  onClick: () => void navigate?.(
-                    context.joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`)
-                  ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-4 w-4" })
+                  permission: plugins_cms_permissions.cmsPermissions.record.update({
+                    contentType: item.contentType?.slug ?? typeSlug,
+                    recordId: item.id,
+                    ...item.authorId ? { authorId: item.authorId } : {}
+                  }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: () => void navigate?.(
+                        context.joinBasePath(basePath, `/cms/${typeSlug}/${item.id}`)
+                      ),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Pencil, { className: "h-4 w-4" })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                context.PermissionAccess,
+                {
+                  permission: plugins_cms_permissions.cmsPermissions.record.delete({
+                    contentType: item.contentType?.slug ?? typeSlug,
+                    recordId: item.id,
+                    ...item.authorId ? { authorId: item.authorId } : {}
+                  }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      onClick: () => onDelete(item.id),
+                      disabled: isDeleting,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4 text-destructive" })
+                    }
+                  )
                 }
               )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            context.PermissionAccess,
-            {
-              permission: plugins_cms_permissions.cmsPermissions.record.delete({
-                contentType: item.contentType?.slug ?? typeSlug,
-                recordId: item.id,
-                ...item.authorId ? { authorId: item.authorId } : {}
-              }),
-              children: /* @__PURE__ */ jsxRuntime.jsx(
+            ] }) })
+          ] }, item.id)) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: utils.cn(
+              "flex items-center justify-between px-4 py-3 border-t",
+              classNames?.pagination
+            ),
+            "data-testid": "cms-content-pagination",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: (localization?.CMS_LIST_PAGINATION_SHOWING ?? t("cms.list.paginationShowing", "Showing {from}-{to} of {total}")).replace("{from}", "1").replace("{to}", String(items.length)).replace("{total}", String(total)) }),
+              hasMore && /* @__PURE__ */ jsxRuntime.jsxs(
                 button.Button,
                 {
-                  variant: "ghost",
-                  size: "icon",
-                  onClick: () => onDelete(item.id),
-                  disabled: isDeleting,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-4 w-4 text-destructive" })
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => loadMore(),
+                  disabled: isLoadingMore,
+                  children: [
+                    isLoadingMore && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
+                    localization?.CMS_LIST_PAGINATION_NEXT ?? t("cms.list.paginationNext", "Next")
+                  ]
                 }
               )
-            }
-          )
-        ] }) })
-      ] }, item.id)) })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: (localization?.CMS_LIST_PAGINATION_SHOWING ?? t("cms.list.paginationShowing", "Showing {from}-{to} of {total}")).replace("{from}", "1").replace("{to}", String(items.length)).replace("{total}", String(total)) }),
-      hasMore && /* @__PURE__ */ jsxRuntime.jsxs(
-        button.Button,
-        {
-          variant: "outline",
-          size: "sm",
-          onClick: () => loadMore(),
-          disabled: isLoadingMore,
-          children: [
-            isLoadingMore && /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "h-4 w-4 mr-2 animate-spin" }),
-            localization?.CMS_LIST_PAGINATION_NEXT ?? t("cms.list.paginationNext", "Next")
-          ]
-        }
-      )
-    ] })
-  ] });
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 
 exports.ContentListPage = ContentListPage;