@btst/plugin-form-builder 0.0.0-stage → 1.0.0

package/dist/client/components/pages/submissions-page.internal.mjs

@@ -0,0 +1,253 @@
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useTranslate, useNotify, usePluginOverrides, useIdentity, usePluginSiteNavigation, PermissionAccess } from '@btst/stack/context';
+import { Button } from '../../../ui/src/components/button.mjs';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../../../ui/src/components/table.mjs';
+import { AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction } from '../../../ui/src/components/alert-dialog.mjs';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '../../../ui/src/components/dialog.mjs';
+import { ArrowLeft, Eye, Trash2 } from 'lucide-react';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+import { EmptyState } from '../shared/empty-state.mjs';
+import { Pagination } from '../shared/pagination.mjs';
+import { formBuilderPermissions } from '../../../permissions.mjs';
+import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+import { cn } from '../../../utils.mjs';
+import { useSuspenseSubmissions, useDeleteSubmission, useSubmission } from '../../hooks/form-builder-hooks.mjs';
+
+function SubmissionsPage({ formId }) {
+  const t = useTranslate();
+  const notify = useNotify();
+  const { localization, classNames } = usePluginOverrides(FORM_BUILDER_PLUGIN_ID);
+  const { identity } = useIdentity();
+  const { Link: LinkComponent, resolve } = usePluginSiteNavigation(
+    FORM_BUILDER_PLUGIN_ID
+  );
+  const { form, submissions, total, hasMore, isLoadingMore, loadMore } = useSuspenseSubmissions(formId);
+  const deleteMutation = useDeleteSubmission(formId);
+  const [deleteId, setDeleteId] = useState(null);
+  const [viewSubmissionId, setViewSubmissionId] = useState(null);
+  const {
+    submission: viewSubmission,
+    isLoading: isViewLoading,
+    error: viewError
+  } = useSubmission(formId, viewSubmissionId ?? void 0);
+  useEffect(() => {
+    setViewSubmissionId(null);
+  }, [identity]);
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await deleteMutation.mutateAsync(deleteId);
+    } catch {
+      notify.error(
+        localization?.FORM_BUILDER_TOAST_ERROR ?? t("formBuilder.toasts.error", "An error occurred. Please try again.")
+      );
+      return;
+    }
+    notify.success(
+      localization?.FORM_BUILDER_TOAST_SUBMISSION_DELETED ?? t(
+        "formBuilder.toasts.submissionDeleted",
+        "Submission deleted successfully"
+      )
+    );
+    setDeleteId(null);
+  };
+  return /* @__PURE__ */ jsxs(PageWrapper, { testId: "submissions-page", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-full max-w-5xl space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", asChild: true, children: /* @__PURE__ */ jsx(LinkComponent, { href: resolve("forms").href, children: /* @__PURE__ */ jsx(ArrowLeft, { className: "h-4 w-4" }) }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold", children: form?.name || (localization?.FORM_BUILDER_SUBMISSIONS_TITLE ?? t("formBuilder.submissions.title", "Submissions")) }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_SUBTITLE ?? t("formBuilder.submissions.subtitle", "View form submissions") })
+        ] })
+      ] }),
+      submissions.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyState,
+        {
+          title: localization?.FORM_BUILDER_SUBMISSIONS_EMPTY ?? t("formBuilder.submissions.empty", "No submissions yet"),
+          description: localization?.FORM_BUILDER_SUBMISSIONS_EMPTY_DESCRIPTION ?? t(
+            "formBuilder.submissions.emptyDescription",
+            "Submissions will appear here when users submit this form."
+          )
+        }
+      ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("rounded-lg border", classNames?.table),
+            "data-testid": "form-builder-submissions-table",
+            children: /* @__PURE__ */ jsxs(Table, { children: [
+              /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+                /* @__PURE__ */ jsx(TableHead, { className: "w-24", children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_ID ?? t("formBuilder.submissions.columnId", "ID") }),
+                /* @__PURE__ */ jsx(TableHead, { children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_SUBMITTED_AT ?? t(
+                  "formBuilder.submissions.columnSubmittedAt",
+                  "Submitted"
+                ) }),
+                /* @__PURE__ */ jsx(TableHead, { className: "w-24", children: localization?.FORM_BUILDER_SUBMISSIONS_COLUMN_ACTIONS ?? t("formBuilder.submissions.columnActions", "Actions") })
+              ] }) }),
+              /* @__PURE__ */ jsx(TableBody, { children: submissions.map((sub) => /* @__PURE__ */ jsxs(TableRow, { className: classNames?.tableRow, children: [
+                /* @__PURE__ */ jsxs(TableCell, { className: "font-mono text-xs", children: [
+                  sub.id.slice(0, 8),
+                  "..."
+                ] }),
+                /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground", children: new Date(sub.submittedAt).toLocaleString() }),
+                /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex gap-1", children: [
+                  /* @__PURE__ */ jsx(
+                    PermissionAccess,
+                    {
+                      permission: formBuilderPermissions.submission.read({
+                        scope: "record",
+                        formId,
+                        submissionId: sub.id,
+                        exists: true,
+                        ...form?.createdBy ? { ownerId: form.createdBy } : {},
+                        ...sub.submittedBy ? { submittedBy: sub.submittedBy } : {}
+                      }),
+                      children: /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          onClick: () => setViewSubmissionId(sub.id),
+                          children: [
+                            /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4" }),
+                            /* @__PURE__ */ jsx("span", { className: "sr-only", children: localization?.FORM_BUILDER_SUBMISSIONS_ACTION_VIEW ?? t(
+                              "formBuilder.submissions.actionView",
+                              "View"
+                            ) })
+                          ]
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    PermissionAccess,
+                    {
+                      permission: formBuilderPermissions.submission.delete(
+                        {
+                          formId,
+                          submissionId: sub.id,
+                          exists: true,
+                          ...form?.createdBy ? { ownerId: form.createdBy } : {},
+                          ...sub.submittedBy ? { submittedBy: sub.submittedBy } : {}
+                        }
+                      ),
+                      children: /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: "ghost",
+                          size: "icon",
+                          className: "text-destructive",
+                          onClick: () => setDeleteId(sub.id),
+                          children: [
+                            /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" }),
+                            /* @__PURE__ */ jsx("span", { className: "sr-only", children: localization?.FORM_BUILDER_SUBMISSIONS_ACTION_DELETE ?? t(
+                              "formBuilder.submissions.actionDelete",
+                              "Delete"
+                            ) })
+                          ]
+                        }
+                      )
+                    }
+                  )
+                ] }) })
+              ] }, sub.id)) })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Pagination,
+          {
+            total,
+            showing: submissions.length,
+            hasMore,
+            isLoadingMore,
+            onLoadMore: loadMore,
+            className: classNames?.pagination,
+            labels: {
+              showing: localization?.FORM_BUILDER_LIST_PAGINATION_SHOWING ?? t(
+                "formBuilder.list.paginationShowing",
+                "Showing {count} of {total}"
+              ),
+              next: localization?.FORM_BUILDER_LIST_PAGINATION_NEXT ?? t("formBuilder.list.paginationNext", "Load More"),
+              loading: localization?.FORM_BUILDER_STATUS_LOADING ?? t("formBuilder.common.statusLoading", "Loading...")
+            }
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: !!viewSubmissionId,
+        onOpenChange: (open) => {
+          if (!open) setViewSubmissionId(null);
+        },
+        children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl max-h-[80vh] overflow-auto", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: localization?.FORM_BUILDER_SUBMISSIONS_DETAILS_TITLE ?? t("formBuilder.submissions.detailsTitle", "Submission Details") }),
+            /* @__PURE__ */ jsx(DialogDescription, { className: "sr-only", children: t(
+              "formBuilder.submissions.detailsDescription",
+              "Submitted form data and request metadata."
+            ) })
+          ] }),
+          isViewLoading && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: localization?.FORM_BUILDER_STATUS_LOADING ?? t("formBuilder.common.statusLoading", "Loading...") }),
+          viewError && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm text-destructive", children: localization?.FORM_BUILDER_TOAST_ERROR ?? t(
+            "formBuilder.toasts.error",
+            "An error occurred. Please try again."
+          ) }),
+          !isViewLoading && !viewError && viewSubmission && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_ID ?? t("formBuilder.submissions.fieldId", "ID:") }),
+                /* @__PURE__ */ jsx("p", { className: "font-mono truncate", children: viewSubmission.id })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_SUBMITTED ?? t("formBuilder.submissions.fieldSubmitted", "Submitted:") }),
+                /* @__PURE__ */ jsx("p", { className: "truncate", children: new Date(viewSubmission.submittedAt).toLocaleString() })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_IP ?? t("formBuilder.submissions.fieldIp", "IP Address:") }),
+                /* @__PURE__ */ jsx("p", { className: "font-mono truncate", children: viewSubmission.ipAddress || "-" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_USER_AGENT ?? t(
+                  "formBuilder.submissions.fieldUserAgent",
+                  "User Agent:"
+                ) }),
+                /* @__PURE__ */ jsx("p", { className: "text-xs truncate", children: viewSubmission.userAgent || "-" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: localization?.FORM_BUILDER_SUBMISSIONS_FIELD_DATA ?? t("formBuilder.submissions.fieldData", "Data:") }),
+              /* @__PURE__ */ jsx("pre", { className: "mt-2 p-4 bg-muted rounded-lg text-sm overflow-auto", children: JSON.stringify(viewSubmission.parsedData, null, 2) })
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(AlertDialog, { open: !!deleteId, onOpenChange: () => setDeleteId(null), children: /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
+      /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+        /* @__PURE__ */ jsx(AlertDialogTitle, { children: localization?.FORM_BUILDER_SUBMISSIONS_DELETE_TITLE ?? t("formBuilder.submissions.deleteTitle", "Delete Submission") }),
+        /* @__PURE__ */ jsx(AlertDialogDescription, { children: localization?.FORM_BUILDER_SUBMISSIONS_DELETE_CONFIRM ?? t(
+          "formBuilder.submissions.deleteConfirm",
+          "Are you sure you want to delete this submission?"
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+        /* @__PURE__ */ jsx(AlertDialogCancel, { children: localization?.FORM_BUILDER_BUTTON_CANCEL ?? t("formBuilder.common.buttonCancel", "Cancel") }),
+        /* @__PURE__ */ jsx(
+          AlertDialogAction,
+          {
+            onClick: handleDelete,
+            className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            children: deleteMutation.isPending ? localization?.FORM_BUILDER_STATUS_DELETING ?? t("formBuilder.common.statusDeleting", "Deleting...") : localization?.FORM_BUILDER_BUTTON_DELETE ?? t("formBuilder.common.buttonDelete", "Delete")
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+export { SubmissionsPage };

package/dist/client/components/pages/submissions-page.mjs

@@ -0,0 +1,62 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ComposedRoute, PermissionRouteAccess } from '@btst/stack/client/components';
+import { DefaultError } from '../shared/default-error.mjs';
+import { SubmissionsSkeleton } from '../loading/submissions-skeleton.mjs';
+import { NotFoundPage } from './404-page.mjs';
+import { formBuilderPermissions } from '../../../permissions.mjs';
+import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+import { useSuspenseSubmissions } from '../../hooks/form-builder-hooks.mjs';
+
+const SubmissionsPage = lazy(
+  () => import('./submissions-page.internal.mjs').then((m) => ({
+    default: m.SubmissionsPage
+  }))
+);
+function SubmissionsPageComponent({ formId }) {
+  const { onRouteError } = usePluginOverrides(
+    FORM_BUILDER_PLUGIN_ID
+  );
+  const path = `/forms/${formId}/submissions`;
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path,
+      PageComponent: AuthorizedSubmissionsPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: SubmissionsSkeleton,
+      NotFoundComponent: NotFoundPage,
+      props: { formId },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("submissions", error, {
+            path,
+            params: { formId },
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+function AuthorizedSubmissionsPage({ formId }) {
+  const { form } = useSuspenseSubmissions(formId);
+  if (!form) return /* @__PURE__ */ jsx(NotFoundPage, {});
+  return /* @__PURE__ */ jsx(
+    PermissionRouteAccess,
+    {
+      permission: formBuilderPermissions.submission.read({
+        scope: "collection",
+        formId,
+        formExists: form !== null,
+        ...form?.createdBy ? { ownerId: form.createdBy } : {}
+      }),
+      LoadingComponent: SubmissionsSkeleton,
+      children: /* @__PURE__ */ jsx(SubmissionsPage, { formId })
+    }
+  );
+}
+
+export { SubmissionsPageComponent };

package/dist/client/components/shared/default-error.cjs

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+const button = require('../../../ui/src/components/button.cjs');
+
+function DefaultError({ error, resetErrorBoundary }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-destructive/10 p-4 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.AlertCircle, { className: "h-8 w-8 text-destructive" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: "Something went wrong" }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-4 max-w-sm", children: (error instanceof Error ? error.message : void 0) || "An unexpected error occurred" }),
+    resetErrorBoundary && /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", onClick: resetErrorBoundary, children: "Try again" })
+  ] });
+}
+
+exports.DefaultError = DefaultError;

package/dist/client/components/shared/default-error.mjs

@@ -0,0 +1,15 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AlertCircle } from 'lucide-react';
+import { Button } from '../../../ui/src/components/button.mjs';
+
+function DefaultError({ error, resetErrorBoundary }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-full bg-destructive/10 p-4 mb-4", children: /* @__PURE__ */ jsx(AlertCircle, { className: "h-8 w-8 text-destructive" }) }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: "Something went wrong" }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4 max-w-sm", children: (error instanceof Error ? error.message : void 0) || "An unexpected error occurred" }),
+    resetErrorBoundary && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: resetErrorBoundary, children: "Try again" })
+  ] });
+}
+
+export { DefaultError };

package/dist/client/components/shared/empty-state.cjs

@@ -0,0 +1,16 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const lucideReact = require('lucide-react');
+
+function EmptyState({ title, description, action }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Inbox, { className: "h-8 w-8 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: title }),
+    description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-4 max-w-sm", children: description }),
+    action
+  ] });
+}
+
+exports.EmptyState = EmptyState;

package/dist/client/components/shared/empty-state.mjs

@@ -0,0 +1,14 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Inbox } from 'lucide-react';
+
+function EmptyState({ title, description, action }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ jsx("div", { className: "rounded-full bg-muted p-4 mb-4", children: /* @__PURE__ */ jsx(Inbox, { className: "h-8 w-8 text-muted-foreground" }) }),
+    /* @__PURE__ */ jsx("h3", { className: "text-lg font-medium text-foreground mb-2", children: title }),
+    description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4 max-w-sm", children: description }),
+    action
+  ] });
+}
+
+export { EmptyState };

package/dist/client/components/shared/page-wrapper.cjs

@@ -0,0 +1,29 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const context = require('@btst/stack/context');
+const pageWrapper = require('../../../ui/src/components/page-wrapper.cjs');
+const constants = require('../../constants.cjs');
+const utils = require('../../../utils.cjs');
+
+function PageWrapper({
+  children,
+  className,
+  testId
+}) {
+  const { showAttribution, classNames } = context.usePluginOverrides(constants.FORM_BUILDER_PLUGIN_ID, {
+    showAttribution: true
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    pageWrapper.PageWrapper,
+    {
+      className: utils.cn(className, classNames?.container),
+      testId,
+      showAttribution,
+      children
+    }
+  );
+}
+
+exports.PageWrapper = PageWrapper;

package/dist/client/components/shared/page-wrapper.mjs

@@ -0,0 +1,27 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { usePluginOverrides } from '@btst/stack/context';
+import { PageWrapper as PageWrapper$1 } from '../../../ui/src/components/page-wrapper.mjs';
+import { FORM_BUILDER_PLUGIN_ID } from '../../constants.mjs';
+import { cn } from '../../../utils.mjs';
+
+function PageWrapper({
+  children,
+  className,
+  testId
+}) {
+  const { showAttribution, classNames } = usePluginOverrides(FORM_BUILDER_PLUGIN_ID, {
+    showAttribution: true
+  });
+  return /* @__PURE__ */ jsx(
+    PageWrapper$1,
+    {
+      className: cn(className, classNames?.container),
+      testId,
+      showAttribution,
+      children
+    }
+  );
+}
+
+export { PageWrapper };

package/dist/client/components/shared/pagination.cjs

@@ -0,0 +1,49 @@
+'use client';
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const button = require('../../../ui/src/components/button.cjs');
+const lucideReact = require('lucide-react');
+const utils = require('../../../utils.cjs');
+
+function Pagination({
+  total,
+  showing,
+  hasMore,
+  isLoadingMore,
+  onLoadMore,
+  className,
+  labels = {}
+}) {
+  const {
+    showing: showingLabel = "Showing {count} of {total}",
+    next = "Load More",
+    loading = "Loading..."
+  } = labels;
+  const showingText = showingLabel.replace("{count}", String(showing)).replace("{total}", String(total));
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: utils.cn("flex items-center justify-between py-4", className),
+      "data-testid": "form-builder-pagination",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: showingText }),
+        hasMore && /* @__PURE__ */ jsxRuntime.jsxs(
+          button.Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: onLoadMore,
+            disabled: isLoadingMore,
+            children: [
+              isLoadingMore ? loading : next,
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "ml-2 h-4 w-4" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.Pagination = Pagination;

package/dist/client/components/shared/pagination.mjs

@@ -0,0 +1,47 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../../../ui/src/components/button.mjs';
+import { ChevronRight } from 'lucide-react';
+import { cn } from '../../../utils.mjs';
+
+function Pagination({
+  total,
+  showing,
+  hasMore,
+  isLoadingMore,
+  onLoadMore,
+  className,
+  labels = {}
+}) {
+  const {
+    showing: showingLabel = "Showing {count} of {total}",
+    next = "Load More",
+    loading = "Loading..."
+  } = labels;
+  const showingText = showingLabel.replace("{count}", String(showing)).replace("{total}", String(total));
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-center justify-between py-4", className),
+      "data-testid": "form-builder-pagination",
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: showingText }),
+        hasMore && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: onLoadMore,
+            disabled: isLoadingMore,
+            children: [
+              isLoadingMore ? loading : next,
+              /* @__PURE__ */ jsx(ChevronRight, { className: "ml-2 h-4 w-4" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { Pagination };

package/dist/client/constants.cjs

@@ -0,0 +1,5 @@
+'use strict';
+
+const FORM_BUILDER_PLUGIN_ID = "formBuilder";
+
+exports.FORM_BUILDER_PLUGIN_ID = FORM_BUILDER_PLUGIN_ID;

package/dist/client/constants.mjs

@@ -0,0 +1,3 @@
+const FORM_BUILDER_PLUGIN_ID = "formBuilder";
+
+export { FORM_BUILDER_PLUGIN_ID };