@doneisbetter/gds-admin 2.6.1

package/dist/index.js

@@ -0,0 +1,458 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AppShell: () => AppShell,
+  ContentOpsActionBar: () => ContentOpsActionBar,
+  ContentOpsEditor: () => ContentOpsEditor,
+  ContentOpsSection: () => ContentOpsSection,
+  DataTable: () => DataTable,
+  EditorScaffold: () => EditorScaffold,
+  FormSection: () => FormSection,
+  InfoCard: () => InfoCard,
+  PageHeader: () => PageHeader,
+  ResponsiveDataView: () => ResponsiveDataView,
+  SemanticNavLink: () => SemanticNavLink,
+  StatsStrip: () => StatsStrip,
+  WorkspaceHeader: () => WorkspaceHeader
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/AppShell.tsx
+var import_core = require("@mantine/core");
+var import_hooks = require("@mantine/hooks");
+var import_gds_core = require("@doneisbetter/gds-core");
+var import_jsx_runtime = require("react/jsx-runtime");
+function AppShell({
+  logoText = "GDS",
+  navLinks,
+  primaryNavigation,
+  secondaryNavigation,
+  accountPanel,
+  headerContext,
+  headerActions,
+  mobileNavigation,
+  children
+}) {
+  const [opened, { toggle }] = (0, import_hooks.useDisclosure)();
+  const primaryNav = primaryNavigation ?? navLinks;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_core.AppShell,
+    {
+      header: { height: headerContext ? 72 : 60 },
+      footer: mobileNavigation ? { height: 68 } : void 0,
+      navbar: {
+        width: 250,
+        breakpoint: "sm",
+        collapsed: { mobile: !opened }
+      },
+      padding: "md",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.AppShell.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { h: "100%", px: "md", justify: "space-between", align: "center", wrap: "nowrap", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Burger, { opened, onClick: toggle, hiddenFrom: "sm", size: "sm", "aria-label": "Toggle navigation" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: 0, style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Title, { order: 3, lineClamp: 1, children: logoText }),
+              headerContext ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "sm", c: "dimmed", lineClamp: 1, children: headerContext }) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { wrap: "nowrap", children: [
+            headerActions,
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_gds_core.ThemeToggle, {})
+          ] })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.AppShell.Navbar, { p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.ScrollArea, { h: "100%", type: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "md", h: "100%", children: [
+          primaryNav ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "Primary" }),
+            primaryNav
+          ] }) : null,
+          secondaryNavigation ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Divider, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "More" }),
+              secondaryNavigation
+            ] })
+          ] }) : null,
+          accountPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Divider, { mt: "auto" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "Account" }),
+              accountPanel
+            ] })
+          ] }) : null
+        ] }) }) }),
+        mobileNavigation ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.AppShell.Footer, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Group, { h: "100%", px: "md", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.AppShell.Main, { children })
+      ]
+    }
+  );
+}
+
+// src/DataTable.tsx
+var import_core2 = require("@mantine/core");
+var import_gds_theme = require("@doneisbetter/gds-theme");
+var import_gds_core2 = require("@doneisbetter/gds-core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function DataTable({ data, columns, loading = false, getRowKey }) {
+  const { t } = (0, import_gds_theme.useGdsTranslation)();
+  if (!data.length && !loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Paper, { p: "xl", withBorder: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_gds_core2.StateBlock,
+      {
+        variant: "empty",
+        title: t("gds.state.emptyDataTitle", "No data available"),
+        description: t("gds.state.emptyData", "No data available."),
+        compact: true
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core2.Paper, { withBorder: true, pos: "relative", style: { overflow: "hidden" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.LoadingOverlay, { visible: loading, zIndex: 1e3, overlayProps: { radius: "sm", blur: 2 } }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_core2.Table, { striped: true, highlightOnHover: true, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Table.Thead, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Table.Tr, { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Table.Th, { children: col.label }, col.key)) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Table.Tbody, { children: data.map((item, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Table.Tr, { children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_core2.Table.Td, { children: col.render ? col.render(item) : item[col.key] }, col.key)) }, getRowKey ? getRowKey(item, rowIndex) : rowIndex)) })
+    ] })
+  ] });
+}
+
+// src/FormSection.tsx
+var import_core3 = require("@mantine/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FormSection({ title, description, children, withDivider = true }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Box, { mb: "xl", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_core3.Box, { mb: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Title, { order: 4, children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Text, { c: "dimmed", size: "sm", children: description })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Stack, { gap: "md", children }),
+    withDivider && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_core3.Divider, { my: "xl" })
+  ] });
+}
+
+// src/StatsStrip.tsx
+var import_core4 = require("@mantine/core");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function StatsStrip({ stats }) {
+  const items = stats.map((stat, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Paper, { p: "lg", withBorder: true, radius: "md", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Group, { justify: "space-between", align: "flex-end", gap: "xs", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { c: "dimmed", tt: "uppercase", fw: 700, size: "xs", children: stat.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.Text, { fw: 700, size: "xl", mt: "sm", children: stat.value })
+    ] }),
+    stat.diff !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_core4.Text, { c: stat.diff > 0 ? "teal" : "red", size: "sm", fw: 600, children: [
+      stat.diff > 0 ? "+" : "",
+      stat.diff,
+      "%"
+    ] })
+  ] }) }, index));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core4.SimpleGrid, { cols: { base: 1, sm: 2, md: 3 }, spacing: "md", children: items });
+}
+
+// src/SemanticNavLink.tsx
+var import_react = require("react");
+var import_core5 = require("@mantine/core");
+var import_gds_theme2 = require("@doneisbetter/gds-theme");
+var import_gds_core3 = require("@doneisbetter/gds-core");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var _SemanticNavLink = (0, import_react.forwardRef)(
+  ({ action, ...props }, ref) => {
+    const { t } = (0, import_gds_theme2.useGdsTranslation)();
+    const config = import_gds_core3.GdsVocabulary[action];
+    const Icon = config.icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_core5.NavLink,
+      {
+        ref,
+        label: t(config.id, config.defaultMessage),
+        leftSection: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: "1rem", stroke: 1.5 }),
+        ...props
+      }
+    );
+  }
+);
+var SemanticNavLink = (0, import_core5.createPolymorphicComponent)(_SemanticNavLink);
+
+// src/InfoCard.tsx
+var import_core6 = require("@mantine/core");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function InfoCard({ title, value, description, icon, color = "blue" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Card, { p: "xl", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Group, { justify: "space-between", align: "flex-start", wrap: "nowrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_core6.Box, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Text, { tt: "uppercase", fw: 700, c: "dimmed", size: "xs", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Text, { fw: 700, size: "xl", mt: "sm", children: value }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.Text, { c: "dimmed", size: "sm", mt: "xs", children: description })
+    ] }),
+    icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_core6.ThemeIcon, { size: "xl", radius: "md", variant: "light", color, children: icon })
+  ] }) });
+}
+
+// src/PageHeader.tsx
+var import_core7 = require("@mantine/core");
+var import_gds_core4 = require("@doneisbetter/gds-core");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function PageHeader({
+  title,
+  description,
+  subtitle,
+  eyebrow,
+  breadcrumbs,
+  status,
+  primaryAction,
+  secondaryActions,
+  overflowActions = []
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Stack, { gap: "sm", mb: "xl", children: [
+    breadcrumbs?.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Breadcrumbs, { children: breadcrumbs }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { justify: "space-between", align: "flex-start", gap: "md", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Box, { style: { minWidth: 0, flex: 1 }, children: [
+        eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Text, { c: "dimmed", size: "sm", fw: 700, mb: 4, children: eyebrow }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Title, { order: 1, children: title }),
+        subtitle ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Text, { c: "dimmed", mt: "xs", size: "sm", children: subtitle }) : null,
+        description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Text, { c: "dimmed", mt: "xs", size: "lg", children: description }),
+        status ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Group, { mt: "sm", gap: "sm", children: status }) : null
+      ] }),
+      (secondaryActions || primaryAction || overflowActions.length) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Group, { wrap: "wrap", justify: "flex-end", children: [
+        secondaryActions,
+        primaryAction,
+        overflowActions.length ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core7.Menu, { shadow: "md", width: 220, withinPortal: true, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.ActionIcon, { variant: "default", size: "lg", "aria-label": "More actions", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_gds_core4.GdsIcons.Menu, { size: "1rem" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core7.Menu.Dropdown, { children: overflowActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            import_core7.Menu.Item,
+            {
+              component: action.href ? "a" : "button",
+              href: action.href,
+              onClick: action.onClick,
+              color: action.color,
+              disabled: action.disabled,
+              children: action.label
+            },
+            `${String(action.label)}-${index}`
+          )) })
+        ] }) : null
+      ] })
+    ] })
+  ] });
+}
+
+// src/ResponsiveDataView.tsx
+var import_react2 = __toESM(require("react"));
+var import_core8 = require("@mantine/core");
+var import_hooks2 = require("@mantine/hooks");
+var import_gds_core5 = require("@doneisbetter/gds-core");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function ResponsiveDataView({
+  data,
+  columns,
+  renderCard,
+  loading = false,
+  error,
+  errorAction,
+  emptyTitle = "No results yet",
+  emptyDescription = "Try changing filters or create a new record.",
+  emptyAction,
+  activeFilters = [],
+  toolbar,
+  filterDrawer,
+  mobileFilters,
+  getRowKey
+}) {
+  const isMobile = (0, import_hooks2.useMediaQuery)("(max-width: 48em)");
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Stack, { gap: "md", children: [
+    toolbar,
+    activeFilters.length ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Group, { gap: "xs", wrap: "wrap", children: activeFilters.map((filter, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_core8.Badge,
+      {
+        variant: "light",
+        color: "violet",
+        rightSection: filter.onRemove ? "\xD7" : void 0,
+        style: filter.onRemove ? { cursor: "pointer" } : void 0,
+        onClick: filter.onRemove,
+        children: filter.label
+      },
+      `${filter.label}-${index}`
+    )) }) : null,
+    mobileFilters && isMobile ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.Stack, { gap: "xs", children: mobileFilters }) : null,
+    filterDrawer && isMobile ? filterDrawer : null,
+    error ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_gds_core5.StateBlock, { variant: "error", title: "Unable to load data", description: error, action: errorAction, compact: true }) : null,
+    !error && loading ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_gds_core5.StateBlock, { variant: "loading", title: "Loading records", description: "The shared registry surface is synchronizing.", compact: true }) : null,
+    !error && !loading && data.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_gds_core5.StateBlock, { variant: "empty", title: emptyTitle, description: emptyDescription, action: emptyAction, compact: true }) : null,
+    !error && isMobile && data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_core8.SimpleGrid, { cols: { base: 1, sm: 2 }, spacing: "md", children: data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_react2.default.Fragment, { children: renderCard(item, index) }, getRowKey ? getRowKey(item, index) : index)) }) : null,
+    !error && !isMobile ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DataTable, { data, columns, loading, getRowKey }) : null
+  ] });
+}
+
+// src/WorkspaceHeader.tsx
+var import_core9 = require("@mantine/core");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function WorkspaceHeader({
+  breadcrumbs,
+  eyebrow,
+  title,
+  description,
+  primaryAction,
+  secondaryActions
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Stack, { gap: "sm", mb: "xl", children: [
+    breadcrumbs?.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Breadcrumbs, { children: breadcrumbs }) : null,
+    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Stack, { gap: 6, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Title, { order: 1, children: title }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Text, { c: "dimmed", maw: 640, children: description }) : null
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Group, { gap: "sm", children: [
+        secondaryActions,
+        primaryAction
+      ] })
+    ] })
+  ] });
+}
+
+// src/EditorScaffold.tsx
+var import_core10 = require("@mantine/core");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function EditorScaffold({
+  header,
+  context,
+  form,
+  preview,
+  settings,
+  footer,
+  stickyFooter = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Stack, { gap: "lg", children: [
+    header,
+    context,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Grid, { gutter: "lg", align: "start", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Grid.Col, { span: { base: 12, md: preview ? 7 : 8 }, children: form }),
+      preview || settings ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Grid.Col, { span: { base: 12, md: preview ? 5 : 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Stack, { gap: "lg", children: [
+        preview,
+        settings
+      ] }) }) : null
+    ] }),
+    footer ? stickyFooter ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      import_core10.Paper,
+      {
+        withBorder: true,
+        radius: "xl",
+        p: "md",
+        style: {
+          position: "sticky",
+          bottom: "1rem",
+          zIndex: 10
+        },
+        children: footer
+      }
+    ) : footer : null
+  ] });
+}
+
+// src/ContentOpsSection.tsx
+var import_gds_core6 = require("@doneisbetter/gds-core");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function ContentOpsSection({
+  id,
+  title,
+  description,
+  action,
+  children,
+  tone = "default"
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_gds_core6.SectionPanel, { id, title, description, action, tone, children });
+}
+
+// src/ContentOpsActionBar.tsx
+var import_core11 = require("@mantine/core");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ContentOpsActionBar({
+  dirty = false,
+  saving = false,
+  status,
+  primaryAction,
+  secondaryAction,
+  tertiaryAction
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Paper, { withBorder: true, radius: "xl", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { justify: "space-between", align: "center", gap: "md", wrap: "wrap", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { gap: "sm", wrap: "wrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Badge, { color: saving ? "violet" : dirty ? "yellow" : "teal", variant: "light", children: saving ? "Saving" : dirty ? "Unsaved changes" : "Saved" }),
+      status ? typeof status === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", c: "dimmed", children: status }) : status : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { gap: "sm", wrap: "wrap", children: [
+      tertiaryAction,
+      secondaryAction,
+      primaryAction
+    ] })
+  ] }) });
+}
+
+// src/ContentOpsEditor.tsx
+var import_core12 = require("@mantine/core");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ContentOpsEditor({
+  header,
+  context,
+  status,
+  sections,
+  actionBar,
+  preview,
+  settings
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: "lg", children: [
+    header,
+    status,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      EditorScaffold,
+      {
+        context,
+        form: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Stack, { gap: "lg", children: sections }),
+        preview,
+        settings,
+        footer: actionBar,
+        stickyFooter: true
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppShell,
+  ContentOpsActionBar,
+  ContentOpsEditor,
+  ContentOpsSection,
+  DataTable,
+  EditorScaffold,
+  FormSection,
+  InfoCard,
+  PageHeader,
+  ResponsiveDataView,
+  SemanticNavLink,
+  StatsStrip,
+  WorkspaceHeader
+});

package/dist/index.mjs

@@ -0,0 +1,32 @@
+import {
+  AppShell,
+  DataTable,
+  ResponsiveDataView,
+  SemanticNavLink
+} from "./chunk-DCLRWG2B.mjs";
+import {
+  ContentOpsActionBar,
+  ContentOpsEditor,
+  ContentOpsSection,
+  EditorScaffold,
+  FormSection,
+  InfoCard,
+  PageHeader,
+  StatsStrip,
+  WorkspaceHeader
+} from "./chunk-ZUUEDN7I.mjs";
+export {
+  AppShell,
+  ContentOpsActionBar,
+  ContentOpsEditor,
+  ContentOpsSection,
+  DataTable,
+  EditorScaffold,
+  FormSection,
+  InfoCard,
+  PageHeader,
+  ResponsiveDataView,
+  SemanticNavLink,
+  StatsStrip,
+  WorkspaceHeader
+};

package/dist/server.d.mts

@@ -0,0 +1,92 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FormSectionProps {
+    title: string;
+    description?: string;
+    children: ReactNode;
+    withDivider?: boolean;
+}
+declare function FormSection({ title, description, children, withDivider }: FormSectionProps): react_jsx_runtime.JSX.Element;
+
+interface StatItem {
+    label: string;
+    value: string | number;
+    diff?: number;
+}
+interface StatsStripProps {
+    stats: StatItem[];
+}
+declare function StatsStrip({ stats }: StatsStripProps): react_jsx_runtime.JSX.Element;
+
+interface InfoCardProps {
+    title: string;
+    value: string | number;
+    description?: string;
+    icon?: React.ReactNode;
+    color?: string;
+}
+declare function InfoCard({ title, value, description, icon, color }: InfoCardProps): react_jsx_runtime.JSX.Element;
+
+interface PageHeaderOverflowAction {
+    label: ReactNode;
+    onClick?: () => void;
+    href?: string;
+    color?: string;
+    disabled?: boolean;
+}
+interface PageHeaderProps {
+    title: string;
+    description?: ReactNode;
+    subtitle?: ReactNode;
+    eyebrow?: string;
+    breadcrumbs?: ReactNode[];
+    status?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryActions?: ReactNode;
+    overflowActions?: PageHeaderOverflowAction[];
+}
+declare function PageHeader({ title, description, subtitle, eyebrow, breadcrumbs, status, primaryAction, secondaryActions, overflowActions, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface WorkspaceHeaderProps {
+    breadcrumbs?: ReactNode[];
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    primaryAction?: ReactNode;
+    secondaryActions?: ReactNode;
+}
+declare function WorkspaceHeader({ breadcrumbs, eyebrow, title, description, primaryAction, secondaryActions, }: WorkspaceHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface ContentOpsSectionProps {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+    tone?: 'default' | 'warning' | 'critical';
+}
+declare function ContentOpsSection({ id, title, description, action, children, tone, }: ContentOpsSectionProps): react_jsx_runtime.JSX.Element;
+
+interface ContentOpsActionBarProps {
+    dirty?: boolean;
+    saving?: boolean;
+    status?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryAction?: ReactNode;
+    tertiaryAction?: ReactNode;
+}
+declare function ContentOpsActionBar({ dirty, saving, status, primaryAction, secondaryAction, tertiaryAction, }: ContentOpsActionBarProps): react_jsx_runtime.JSX.Element;
+
+interface ContentOpsEditorProps {
+    header?: ReactNode;
+    context?: ReactNode;
+    status?: ReactNode;
+    sections: ReactNode;
+    actionBar?: ReactNode;
+    preview?: ReactNode;
+    settings?: ReactNode;
+}
+declare function ContentOpsEditor({ header, context, status, sections, actionBar, preview, settings, }: ContentOpsEditorProps): react_jsx_runtime.JSX.Element;
+
+export { ContentOpsActionBar, type ContentOpsActionBarProps, ContentOpsEditor, type ContentOpsEditorProps, ContentOpsSection, type ContentOpsSectionProps, FormSection, type FormSectionProps, InfoCard, type InfoCardProps, PageHeader, type PageHeaderOverflowAction, type PageHeaderProps, type StatItem, StatsStrip, type StatsStripProps, WorkspaceHeader, type WorkspaceHeaderProps };

package/dist/server.d.ts

@@ -0,0 +1,92 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface FormSectionProps {
+    title: string;
+    description?: string;
+    children: ReactNode;
+    withDivider?: boolean;
+}
+declare function FormSection({ title, description, children, withDivider }: FormSectionProps): react_jsx_runtime.JSX.Element;
+
+interface StatItem {
+    label: string;
+    value: string | number;
+    diff?: number;
+}
+interface StatsStripProps {
+    stats: StatItem[];
+}
+declare function StatsStrip({ stats }: StatsStripProps): react_jsx_runtime.JSX.Element;
+
+interface InfoCardProps {
+    title: string;
+    value: string | number;
+    description?: string;
+    icon?: React.ReactNode;
+    color?: string;
+}
+declare function InfoCard({ title, value, description, icon, color }: InfoCardProps): react_jsx_runtime.JSX.Element;
+
+interface PageHeaderOverflowAction {
+    label: ReactNode;
+    onClick?: () => void;
+    href?: string;
+    color?: string;
+    disabled?: boolean;
+}
+interface PageHeaderProps {
+    title: string;
+    description?: ReactNode;
+    subtitle?: ReactNode;
+    eyebrow?: string;
+    breadcrumbs?: ReactNode[];
+    status?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryActions?: ReactNode;
+    overflowActions?: PageHeaderOverflowAction[];
+}
+declare function PageHeader({ title, description, subtitle, eyebrow, breadcrumbs, status, primaryAction, secondaryActions, overflowActions, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface WorkspaceHeaderProps {
+    breadcrumbs?: ReactNode[];
+    eyebrow?: string;
+    title: string;
+    description?: string;
+    primaryAction?: ReactNode;
+    secondaryActions?: ReactNode;
+}
+declare function WorkspaceHeader({ breadcrumbs, eyebrow, title, description, primaryAction, secondaryActions, }: WorkspaceHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface ContentOpsSectionProps {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ReactNode;
+    children: ReactNode;
+    tone?: 'default' | 'warning' | 'critical';
+}
+declare function ContentOpsSection({ id, title, description, action, children, tone, }: ContentOpsSectionProps): react_jsx_runtime.JSX.Element;
+
+interface ContentOpsActionBarProps {
+    dirty?: boolean;
+    saving?: boolean;
+    status?: ReactNode;
+    primaryAction?: ReactNode;
+    secondaryAction?: ReactNode;
+    tertiaryAction?: ReactNode;
+}
+declare function ContentOpsActionBar({ dirty, saving, status, primaryAction, secondaryAction, tertiaryAction, }: ContentOpsActionBarProps): react_jsx_runtime.JSX.Element;
+
+interface ContentOpsEditorProps {
+    header?: ReactNode;
+    context?: ReactNode;
+    status?: ReactNode;
+    sections: ReactNode;
+    actionBar?: ReactNode;
+    preview?: ReactNode;
+    settings?: ReactNode;
+}
+declare function ContentOpsEditor({ header, context, status, sections, actionBar, preview, settings, }: ContentOpsEditorProps): react_jsx_runtime.JSX.Element;
+
+export { ContentOpsActionBar, type ContentOpsActionBarProps, ContentOpsEditor, type ContentOpsEditorProps, ContentOpsSection, type ContentOpsSectionProps, FormSection, type FormSectionProps, InfoCard, type InfoCardProps, PageHeader, type PageHeaderOverflowAction, type PageHeaderProps, type StatItem, StatsStrip, type StatsStripProps, WorkspaceHeader, type WorkspaceHeaderProps };