@doneisbetter/gds-admin 2.6.3 → 2.6.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/{chunk-ZUUEDN7I.mjs → chunk-CFL7O7EU.mjs} +3 -1
  2. package/dist/{chunk-DCLRWG2B.mjs → chunk-LKBDBFHP.mjs} +41 -59
  3. package/dist/client.d.mts +5 -5
  4. package/dist/client.d.ts +5 -5
  5. package/dist/client.js +42 -58
  6. package/dist/client.mjs +2 -2
  7. package/dist/index.d.mts +21 -2
  8. package/dist/index.d.ts +21 -2
  9. package/dist/index.js +124 -89
  10. package/dist/index.mjs +52 -2
  11. package/dist/server.d.mts +3 -1
  12. package/dist/server.d.ts +3 -1
  13. package/dist/server.js +3 -1
  14. package/dist/server.mjs +1 -1
  15. package/package.json +3 -3
package/dist/{chunk-ZUUEDN7I.mjs → chunk-CFL7O7EU.mjs} RENAMED
@@ -174,11 +174,13 @@ function ContentOpsSection({
174
174
 
175
175
  // src/ContentOpsActionBar.tsx
176
176
  import { Badge, Group as Group5, Paper as Paper3, Text as Text6 } from "@mantine/core";
177
+ import { ActionBar } from "@doneisbetter/gds-core";
177
178
  import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
178
179
  function ContentOpsActionBar({
179
180
  dirty = false,
180
181
  saving = false,
181
182
  status,
183
+ actions,
182
184
  primaryAction,
183
185
  secondaryAction,
184
186
  tertiaryAction
@@ -188,7 +190,7 @@ function ContentOpsActionBar({
188
190
  /* @__PURE__ */ jsx8(Badge, { color: saving ? "violet" : dirty ? "yellow" : "teal", variant: "light", children: saving ? "Saving" : dirty ? "Unsaved changes" : "Saved" }),
189
191
  status ? typeof status === "string" ? /* @__PURE__ */ jsx8(Text6, { size: "sm", c: "dimmed", children: status }) : status : null
190
192
  ] }),
191
- /* @__PURE__ */ jsxs7(Group5, { gap: "sm", wrap: "wrap", children: [
193
+ actions ? /* @__PURE__ */ jsx8(ActionBar, { ...actions }) : /* @__PURE__ */ jsxs7(Group5, { gap: "sm", wrap: "wrap", children: [
192
194
  tertiaryAction,
193
195
  secondaryAction,
194
196
  primaryAction
package/dist/{chunk-DCLRWG2B.mjs → chunk-LKBDBFHP.mjs} RENAMED
@@ -1,7 +1,6 @@
1
1
  // src/AppShell.tsx
2
- import { AppShell as MantineAppShell, Burger, Divider, Group, ScrollArea, Stack, Text, Title } from "@mantine/core";
3
- import { useDisclosure } from "@mantine/hooks";
4
- import { ThemeToggle } from "@doneisbetter/gds-core";
2
+ import { Divider, Group, Stack, Text, Title } from "@mantine/core";
3
+ import { DiscoveryShell, ThemeToggle } from "@doneisbetter/gds-core";
5
4
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
5
  function AppShell({
7
6
  logoText = "GDS",
@@ -12,58 +11,46 @@ function AppShell({
12
11
  headerContext,
13
12
  headerActions,
14
13
  mobileNavigation,
14
+ showThemeToggle = true,
15
15
  children
16
16
  }) {
17
- const [opened, { toggle }] = useDisclosure();
18
17
  const primaryNav = primaryNavigation ?? navLinks;
19
- return /* @__PURE__ */ jsxs(
20
- MantineAppShell,
18
+ return /* @__PURE__ */ jsx(
19
+ DiscoveryShell,
21
20
  {
22
- header: { height: headerContext ? 72 : 60 },
23
- footer: mobileNavigation ? { height: 68 } : void 0,
24
- navbar: {
25
- width: 250,
26
- breakpoint: "sm",
27
- collapsed: { mobile: !opened }
28
- },
29
- padding: "md",
30
- children: [
31
- /* @__PURE__ */ jsx(MantineAppShell.Header, { children: /* @__PURE__ */ jsxs(Group, { h: "100%", px: "md", justify: "space-between", align: "center", wrap: "nowrap", children: [
32
- /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: [
33
- /* @__PURE__ */ jsx(Burger, { opened, onClick: toggle, hiddenFrom: "sm", size: "sm", "aria-label": "Toggle navigation" }),
34
- /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { minWidth: 0 }, children: [
35
- /* @__PURE__ */ jsx(Title, { order: 3, lineClamp: 1, children: logoText }),
36
- headerContext ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", lineClamp: 1, children: headerContext }) : null
37
- ] })
38
- ] }),
39
- /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", children: [
40
- headerActions,
41
- /* @__PURE__ */ jsx(ThemeToggle, {})
42
- ] })
21
+ headerHeight: headerContext ? 72 : 60,
22
+ header: /* @__PURE__ */ jsxs(Group, { h: "100%", justify: "space-between", align: "center", wrap: "nowrap", children: [
23
+ /* @__PURE__ */ jsx(Group, { wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { minWidth: 0 }, children: [
24
+ /* @__PURE__ */ jsx(Title, { order: 3, lineClamp: 1, children: logoText }),
25
+ headerContext ? /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", lineClamp: 1, children: headerContext }) : null
43
26
  ] }) }),
44
- /* @__PURE__ */ jsx(MantineAppShell.Navbar, { p: "md", children: /* @__PURE__ */ jsx(ScrollArea, { h: "100%", type: "auto", children: /* @__PURE__ */ jsxs(Stack, { gap: "md", h: "100%", children: [
45
- primaryNav ? /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
46
- /* @__PURE__ */ jsx(Text, { size: "xs", fw: 700, c: "dimmed", children: "Primary" }),
47
- primaryNav
48
- ] }) : null,
49
- secondaryNavigation ? /* @__PURE__ */ jsxs(Fragment, { children: [
50
- /* @__PURE__ */ jsx(Divider, {}),
51
- /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
52
- /* @__PURE__ */ jsx(Text, { size: "xs", fw: 700, c: "dimmed", children: "More" }),
53
- secondaryNavigation
54
- ] })
55
- ] }) : null,
56
- accountPanel ? /* @__PURE__ */ jsxs(Fragment, { children: [
57
- /* @__PURE__ */ jsx(Divider, { mt: "auto" }),
58
- /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
59
- /* @__PURE__ */ jsx(Text, { size: "xs", fw: 700, c: "dimmed", children: "Account" }),
60
- accountPanel
61
- ] })
62
- ] }) : null
63
- ] }) }) }),
64
- mobileNavigation ? /* @__PURE__ */ jsx(MantineAppShell.Footer, { children: /* @__PURE__ */ jsx(Group, { h: "100%", px: "md", justify: "space-around", wrap: "nowrap", children: mobileNavigation }) }) : null,
65
- /* @__PURE__ */ jsx(MantineAppShell.Main, { children })
66
- ]
27
+ /* @__PURE__ */ jsxs(Group, { wrap: "nowrap", children: [
28
+ headerActions,
29
+ showThemeToggle ? /* @__PURE__ */ jsx(ThemeToggle, {}) : null
30
+ ] })
31
+ ] }),
32
+ sidebar: /* @__PURE__ */ jsxs(Stack, { gap: "md", h: "100%", children: [
33
+ primaryNav ? /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
34
+ /* @__PURE__ */ jsx(Text, { size: "xs", fw: 700, c: "dimmed", children: "Primary" }),
35
+ primaryNav
36
+ ] }) : null,
37
+ secondaryNavigation ? /* @__PURE__ */ jsxs(Fragment, { children: [
38
+ /* @__PURE__ */ jsx(Divider, {}),
39
+ /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
40
+ /* @__PURE__ */ jsx(Text, { size: "xs", fw: 700, c: "dimmed", children: "More" }),
41
+ secondaryNavigation
42
+ ] })
43
+ ] }) : null,
44
+ accountPanel ? /* @__PURE__ */ jsxs(Fragment, { children: [
45
+ /* @__PURE__ */ jsx(Divider, { mt: "auto" }),
46
+ /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
47
+ /* @__PURE__ */ jsx(Text, { size: "xs", fw: 700, c: "dimmed", children: "Account" }),
48
+ accountPanel
49
+ ] })
50
+ ] }) : null
51
+ ] }),
52
+ footer: mobileNavigation,
53
+ children
67
54
  }
68
55
  );
69
56
  }
@@ -97,21 +84,16 @@ function DataTable({ data, columns, loading = false, getRowKey }) {
97
84
 
98
85
  // src/SemanticNavLink.tsx
99
86
  import { forwardRef } from "react";
100
- import { NavLink, createPolymorphicComponent } from "@mantine/core";
101
- import { useGdsTranslation as useGdsTranslation2 } from "@doneisbetter/gds-theme";
102
- import { GdsVocabulary } from "@doneisbetter/gds-core";
87
+ import { createPolymorphicComponent } from "@mantine/core";
88
+ import { SidebarNavItem } from "@doneisbetter/gds-core";
103
89
  import { jsx as jsx3 } from "react/jsx-runtime";
104
90
  var _SemanticNavLink = forwardRef(
105
91
  ({ action, ...props }, ref) => {
106
- const { t } = useGdsTranslation2();
107
- const config = GdsVocabulary[action];
108
- const Icon = config.icon;
109
92
  return /* @__PURE__ */ jsx3(
110
- NavLink,
93
+ SidebarNavItem,
111
94
  {
112
95
  ref,
113
- label: t(config.id, config.defaultMessage),
114
- leftSection: /* @__PURE__ */ jsx3(Icon, { size: "1rem", stroke: 1.5 }),
96
+ action,
115
97
  ...props
116
98
  }
117
99
  );
package/dist/client.d.mts CHANGED
@@ -1,10 +1,9 @@
1
- export { ContentOpsActionBar, ContentOpsActionBarProps, ContentOpsEditor, ContentOpsEditorProps, ContentOpsSection, ContentOpsSectionProps, FormSection, FormSectionProps, InfoCard, InfoCardProps, PageHeader, PageHeaderOverflowAction, PageHeaderProps, StatItem, StatsStrip, StatsStripProps, WorkspaceHeader, WorkspaceHeaderProps } from './server.mjs';
2
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
2
  import * as React$1 from 'react';
4
3
  import React__default, { ReactNode, Key } from 'react';
4
+ export { ContentOpsActionBar, ContentOpsActionBarProps, ContentOpsEditor, ContentOpsEditorProps, ContentOpsSection, ContentOpsSectionProps, FormSection, FormSectionProps, InfoCard, InfoCardProps, PageHeader, PageHeaderOverflowAction, PageHeaderProps, StatItem, StatsStrip, StatsStripProps, WorkspaceHeader, WorkspaceHeaderProps } from './server.mjs';
5
5
  import * as _mantine_core from '@mantine/core';
6
- import { NavLinkProps } from '@mantine/core';
7
- import { SemanticAction } from '@doneisbetter/gds-core';
6
+ import { SidebarNavItemProps, SemanticAction } from '@doneisbetter/gds-core';
8
7
 
9
8
  interface AppShellProps {
10
9
  logoText?: string;
@@ -15,13 +14,14 @@ interface AppShellProps {
15
14
  headerContext?: ReactNode;
16
15
  headerActions?: ReactNode;
17
16
  mobileNavigation?: ReactNode;
17
+ showThemeToggle?: boolean;
18
18
  children: ReactNode;
19
19
  }
20
20
  /**
21
21
  * AppShell provides the standard GDS application layout.
22
22
  * It strictly controls the header, sidebar, and main content area.
23
23
  */
24
- declare function AppShell({ logoText, navLinks, primaryNavigation, secondaryNavigation, accountPanel, headerContext, headerActions, mobileNavigation, children, }: AppShellProps): react_jsx_runtime.JSX.Element;
24
+ declare function AppShell({ logoText, navLinks, primaryNavigation, secondaryNavigation, accountPanel, headerContext, headerActions, mobileNavigation, showThemeToggle, children, }: AppShellProps): react_jsx_runtime.JSX.Element;
25
25
 
26
26
  interface DataTableColumn<T> {
27
27
  key: string;
@@ -39,7 +39,7 @@ interface DataTableProps<T> {
39
39
  */
40
40
  declare function DataTable<T extends Record<string, unknown>>({ data, columns, loading, getRowKey }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
41
41
 
42
- interface SemanticNavLinkProps extends Omit<NavLinkProps, 'leftSection' | 'label'> {
42
+ interface SemanticNavLinkProps extends Omit<SidebarNavItemProps, 'label' | 'icon' | 'action'> {
43
43
  action: SemanticAction;
44
44
  }
45
45
  declare const SemanticNavLink: (<C = "a">(props: _mantine_core.PolymorphicComponentProps<C, SemanticNavLinkProps>) => React.ReactElement) & Omit<React$1.FunctionComponent<(SemanticNavLinkProps & {
package/dist/client.d.ts CHANGED
@@ -1,10 +1,9 @@
1
- export { ContentOpsActionBar, ContentOpsActionBarProps, ContentOpsEditor, ContentOpsEditorProps, ContentOpsSection, ContentOpsSectionProps, FormSection, FormSectionProps, InfoCard, InfoCardProps, PageHeader, PageHeaderOverflowAction, PageHeaderProps, StatItem, StatsStrip, StatsStripProps, WorkspaceHeader, WorkspaceHeaderProps } from './server.js';
2
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
2
  import * as React$1 from 'react';
4
3
  import React__default, { ReactNode, Key } from 'react';
4
+ export { ContentOpsActionBar, ContentOpsActionBarProps, ContentOpsEditor, ContentOpsEditorProps, ContentOpsSection, ContentOpsSectionProps, FormSection, FormSectionProps, InfoCard, InfoCardProps, PageHeader, PageHeaderOverflowAction, PageHeaderProps, StatItem, StatsStrip, StatsStripProps, WorkspaceHeader, WorkspaceHeaderProps } from './server.js';
5
5
  import * as _mantine_core from '@mantine/core';
6
- import { NavLinkProps } from '@mantine/core';
7
- import { SemanticAction } from '@doneisbetter/gds-core';
6
+ import { SidebarNavItemProps, SemanticAction } from '@doneisbetter/gds-core';
8
7
 
9
8
  interface AppShellProps {
10
9
  logoText?: string;
@@ -15,13 +14,14 @@ interface AppShellProps {
15
14
  headerContext?: ReactNode;
16
15
  headerActions?: ReactNode;
17
16
  mobileNavigation?: ReactNode;
17
+ showThemeToggle?: boolean;
18
18
  children: ReactNode;
19
19
  }
20
20
  /**
21
21
  * AppShell provides the standard GDS application layout.
22
22
  * It strictly controls the header, sidebar, and main content area.
23
23
  */
24
- declare function AppShell({ logoText, navLinks, primaryNavigation, secondaryNavigation, accountPanel, headerContext, headerActions, mobileNavigation, children, }: AppShellProps): react_jsx_runtime.JSX.Element;
24
+ declare function AppShell({ logoText, navLinks, primaryNavigation, secondaryNavigation, accountPanel, headerContext, headerActions, mobileNavigation, showThemeToggle, children, }: AppShellProps): react_jsx_runtime.JSX.Element;
25
25
 
26
26
  interface DataTableColumn<T> {
27
27
  key: string;
@@ -39,7 +39,7 @@ interface DataTableProps<T> {
39
39
  */
40
40
  declare function DataTable<T extends Record<string, unknown>>({ data, columns, loading, getRowKey }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
41
41
 
42
- interface SemanticNavLinkProps extends Omit<NavLinkProps, 'leftSection' | 'label'> {
42
+ interface SemanticNavLinkProps extends Omit<SidebarNavItemProps, 'label' | 'icon' | 'action'> {
43
43
  action: SemanticAction;
44
44
  }
45
45
  declare const SemanticNavLink: (<C = "a">(props: _mantine_core.PolymorphicComponentProps<C, SemanticNavLinkProps>) => React.ReactElement) & Omit<React$1.FunctionComponent<(SemanticNavLinkProps & {
package/dist/client.js CHANGED
@@ -48,7 +48,6 @@ module.exports = __toCommonJS(client_exports);
48
48
 
49
49
  // src/AppShell.tsx
50
50
  var import_core = require("@mantine/core");
51
- var import_hooks = require("@mantine/hooks");
52
51
  var import_gds_core = require("@doneisbetter/gds-core");
53
52
  var import_jsx_runtime = require("react/jsx-runtime");
54
53
  function AppShell({
@@ -60,58 +59,46 @@ function AppShell({
60
59
  headerContext,
61
60
  headerActions,
62
61
  mobileNavigation,
62
+ showThemeToggle = true,
63
63
  children
64
64
  }) {
65
- const [opened, { toggle }] = (0, import_hooks.useDisclosure)();
66
65
  const primaryNav = primaryNavigation ?? navLinks;
67
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
68
- import_core.AppShell,
66
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
67
+ import_gds_core.DiscoveryShell,
69
68
  {
70
- header: { height: headerContext ? 72 : 60 },
71
- footer: mobileNavigation ? { height: 68 } : void 0,
72
- navbar: {
73
- width: 250,
74
- breakpoint: "sm",
75
- collapsed: { mobile: !opened }
76
- },
77
- padding: "md",
78
- children: [
79
- /* @__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: [
80
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: [
81
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Burger, { opened, onClick: toggle, hiddenFrom: "sm", size: "sm", "aria-label": "Toggle navigation" }),
82
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: 0, style: { minWidth: 0 }, children: [
83
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Title, { order: 3, lineClamp: 1, children: logoText }),
84
- headerContext ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "sm", c: "dimmed", lineClamp: 1, children: headerContext }) : null
85
- ] })
86
- ] }),
87
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { wrap: "nowrap", children: [
88
- headerActions,
89
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_gds_core.ThemeToggle, {})
90
- ] })
69
+ headerHeight: headerContext ? 72 : 60,
70
+ header: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { h: "100%", justify: "space-between", align: "center", wrap: "nowrap", children: [
71
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Group, { wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: 0, style: { minWidth: 0 }, children: [
72
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Title, { order: 3, lineClamp: 1, children: logoText }),
73
+ headerContext ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "sm", c: "dimmed", lineClamp: 1, children: headerContext }) : null
91
74
  ] }) }),
92
- /* @__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: [
93
- primaryNav ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
94
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "Primary" }),
95
- primaryNav
96
- ] }) : null,
97
- secondaryNavigation ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
98
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Divider, {}),
99
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
100
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "More" }),
101
- secondaryNavigation
102
- ] })
103
- ] }) : null,
104
- accountPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
105
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Divider, { mt: "auto" }),
106
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
107
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "Account" }),
108
- accountPanel
109
- ] })
110
- ] }) : null
111
- ] }) }) }),
112
- 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,
113
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.AppShell.Main, { children })
114
- ]
75
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { wrap: "nowrap", children: [
76
+ headerActions,
77
+ showThemeToggle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_gds_core.ThemeToggle, {}) : null
78
+ ] })
79
+ ] }),
80
+ sidebar: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "md", h: "100%", children: [
81
+ primaryNav ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
82
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "Primary" }),
83
+ primaryNav
84
+ ] }) : null,
85
+ secondaryNavigation ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
86
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Divider, {}),
87
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
88
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "More" }),
89
+ secondaryNavigation
90
+ ] })
91
+ ] }) : null,
92
+ accountPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
93
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Divider, { mt: "auto" }),
94
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
95
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "Account" }),
96
+ accountPanel
97
+ ] })
98
+ ] }) : null
99
+ ] }),
100
+ footer: mobileNavigation,
101
+ children
115
102
  }
116
103
  );
117
104
  }
@@ -178,20 +165,15 @@ function StatsStrip({ stats }) {
178
165
  // src/SemanticNavLink.tsx
179
166
  var import_react = require("react");
180
167
  var import_core5 = require("@mantine/core");
181
- var import_gds_theme2 = require("@doneisbetter/gds-theme");
182
168
  var import_gds_core3 = require("@doneisbetter/gds-core");
183
169
  var import_jsx_runtime5 = require("react/jsx-runtime");
184
170
  var _SemanticNavLink = (0, import_react.forwardRef)(
185
171
  ({ action, ...props }, ref) => {
186
- const { t } = (0, import_gds_theme2.useGdsTranslation)();
187
- const config = import_gds_core3.GdsVocabulary[action];
188
- const Icon = config.icon;
189
172
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
190
- import_core5.NavLink,
173
+ import_gds_core3.SidebarNavItem,
191
174
  {
192
175
  ref,
193
- label: t(config.id, config.defaultMessage),
194
- leftSection: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: "1rem", stroke: 1.5 }),
176
+ action,
195
177
  ...props
196
178
  }
197
179
  );
@@ -264,7 +246,7 @@ function PageHeader({
264
246
  // src/ResponsiveDataView.tsx
265
247
  var import_react2 = __toESM(require("react"));
266
248
  var import_core8 = require("@mantine/core");
267
- var import_hooks2 = require("@mantine/hooks");
249
+ var import_hooks = require("@mantine/hooks");
268
250
  var import_gds_core5 = require("@doneisbetter/gds-core");
269
251
  var import_jsx_runtime8 = require("react/jsx-runtime");
270
252
  function ResponsiveDataView({
@@ -283,7 +265,7 @@ function ResponsiveDataView({
283
265
  mobileFilters,
284
266
  getRowKey
285
267
  }) {
286
- const isMobile = (0, import_hooks2.useMediaQuery)("(max-width: 48em)");
268
+ const isMobile = (0, import_hooks.useMediaQuery)("(max-width: 48em)");
287
269
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Stack, { gap: "md", children: [
288
270
  toolbar,
289
271
  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)(
@@ -390,11 +372,13 @@ function ContentOpsSection({
390
372
 
391
373
  // src/ContentOpsActionBar.tsx
392
374
  var import_core11 = require("@mantine/core");
375
+ var import_gds_core7 = require("@doneisbetter/gds-core");
393
376
  var import_jsx_runtime12 = require("react/jsx-runtime");
394
377
  function ContentOpsActionBar({
395
378
  dirty = false,
396
379
  saving = false,
397
380
  status,
381
+ actions,
398
382
  primaryAction,
399
383
  secondaryAction,
400
384
  tertiaryAction
@@ -404,7 +388,7 @@ function ContentOpsActionBar({
404
388
  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Badge, { color: saving ? "violet" : dirty ? "yellow" : "teal", variant: "light", children: saving ? "Saving" : dirty ? "Unsaved changes" : "Saved" }),
405
389
  status ? typeof status === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", c: "dimmed", children: status }) : status : null
406
390
  ] }),
407
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { gap: "sm", wrap: "wrap", children: [
391
+ actions ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_gds_core7.ActionBar, { ...actions }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { gap: "sm", wrap: "wrap", children: [
408
392
  tertiaryAction,
409
393
  secondaryAction,
410
394
  primaryAction
package/dist/client.mjs CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  DataTable,
4
4
  ResponsiveDataView,
5
5
  SemanticNavLink
6
- } from "./chunk-DCLRWG2B.mjs";
6
+ } from "./chunk-LKBDBFHP.mjs";
7
7
  import {
8
8
  ContentOpsActionBar,
9
9
  ContentOpsEditor,
@@ -14,7 +14,7 @@ import {
14
14
  PageHeader,
15
15
  StatsStrip,
16
16
  WorkspaceHeader
17
- } from "./chunk-ZUUEDN7I.mjs";
17
+ } from "./chunk-CFL7O7EU.mjs";
18
18
  export {
19
19
  AppShell,
20
20
  ContentOpsActionBar,
package/dist/index.d.mts CHANGED
@@ -1,6 +1,25 @@
1
1
  export { AppShell, AppShellProps, DataTable, DataTableColumn, DataTableProps, EditorScaffold, EditorScaffoldProps, ResponsiveDataView, ResponsiveDataViewFilterChip, ResponsiveDataViewProps, SemanticNavLink, SemanticNavLinkProps } from './client.mjs';
2
2
  export { ContentOpsActionBar, ContentOpsActionBarProps, ContentOpsEditor, ContentOpsEditorProps, ContentOpsSection, ContentOpsSectionProps, FormSection, FormSectionProps, InfoCard, InfoCardProps, PageHeader, PageHeaderOverflowAction, PageHeaderProps, StatItem, StatsStrip, StatsStripProps, WorkspaceHeader, WorkspaceHeaderProps } from './server.mjs';
3
- import 'react/jsx-runtime';
4
- import 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { ReactNode } from 'react';
5
5
  import '@mantine/core';
6
6
  import '@doneisbetter/gds-core';
7
+
8
+ interface ReferenceSiteLocaleOption {
9
+ id: string;
10
+ label: string;
11
+ }
12
+ interface ReferenceSiteShellProps {
13
+ logoText?: string;
14
+ headerContext: ReactNode;
15
+ primaryNavigation: ReactNode;
16
+ secondaryNavigation?: ReactNode;
17
+ locale: string;
18
+ localeOptions: ReferenceSiteLocaleOption[];
19
+ onLocaleChange: (locale: string) => void;
20
+ localizationNotice?: ReactNode;
21
+ children: ReactNode;
22
+ }
23
+ declare function ReferenceSiteShell({ logoText, headerContext, primaryNavigation, secondaryNavigation, locale, localeOptions, onLocaleChange, localizationNotice, children, }: ReferenceSiteShellProps): react_jsx_runtime.JSX.Element;
24
+
25
+ export { type ReferenceSiteLocaleOption, ReferenceSiteShell, type ReferenceSiteShellProps };
package/dist/index.d.ts CHANGED
@@ -1,6 +1,25 @@
1
1
  export { AppShell, AppShellProps, DataTable, DataTableColumn, DataTableProps, EditorScaffold, EditorScaffoldProps, ResponsiveDataView, ResponsiveDataViewFilterChip, ResponsiveDataViewProps, SemanticNavLink, SemanticNavLinkProps } from './client.js';
2
2
  export { ContentOpsActionBar, ContentOpsActionBarProps, ContentOpsEditor, ContentOpsEditorProps, ContentOpsSection, ContentOpsSectionProps, FormSection, FormSectionProps, InfoCard, InfoCardProps, PageHeader, PageHeaderOverflowAction, PageHeaderProps, StatItem, StatsStrip, StatsStripProps, WorkspaceHeader, WorkspaceHeaderProps } from './server.js';
3
- import 'react/jsx-runtime';
4
- import 'react';
3
+ import * as react_jsx_runtime from 'react/jsx-runtime';
4
+ import { ReactNode } from 'react';
5
5
  import '@mantine/core';
6
6
  import '@doneisbetter/gds-core';
7
+
8
+ interface ReferenceSiteLocaleOption {
9
+ id: string;
10
+ label: string;
11
+ }
12
+ interface ReferenceSiteShellProps {
13
+ logoText?: string;
14
+ headerContext: ReactNode;
15
+ primaryNavigation: ReactNode;
16
+ secondaryNavigation?: ReactNode;
17
+ locale: string;
18
+ localeOptions: ReferenceSiteLocaleOption[];
19
+ onLocaleChange: (locale: string) => void;
20
+ localizationNotice?: ReactNode;
21
+ children: ReactNode;
22
+ }
23
+ declare function ReferenceSiteShell({ logoText, headerContext, primaryNavigation, secondaryNavigation, locale, localeOptions, onLocaleChange, localizationNotice, children, }: ReferenceSiteShellProps): react_jsx_runtime.JSX.Element;
24
+
25
+ export { type ReferenceSiteLocaleOption, ReferenceSiteShell, type ReferenceSiteShellProps };
package/dist/index.js CHANGED
@@ -39,6 +39,7 @@ __export(index_exports, {
39
39
  FormSection: () => FormSection,
40
40
  InfoCard: () => InfoCard,
41
41
  PageHeader: () => PageHeader,
42
+ ReferenceSiteShell: () => ReferenceSiteShell,
42
43
  ResponsiveDataView: () => ResponsiveDataView,
43
44
  SemanticNavLink: () => SemanticNavLink,
44
45
  StatsStrip: () => StatsStrip,
@@ -48,7 +49,6 @@ module.exports = __toCommonJS(index_exports);
48
49
 
49
50
  // src/AppShell.tsx
50
51
  var import_core = require("@mantine/core");
51
- var import_hooks = require("@mantine/hooks");
52
52
  var import_gds_core = require("@doneisbetter/gds-core");
53
53
  var import_jsx_runtime = require("react/jsx-runtime");
54
54
  function AppShell({
@@ -60,58 +60,46 @@ function AppShell({
60
60
  headerContext,
61
61
  headerActions,
62
62
  mobileNavigation,
63
+ showThemeToggle = true,
63
64
  children
64
65
  }) {
65
- const [opened, { toggle }] = (0, import_hooks.useDisclosure)();
66
66
  const primaryNav = primaryNavigation ?? navLinks;
67
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
68
- import_core.AppShell,
67
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
68
+ import_gds_core.DiscoveryShell,
69
69
  {
70
- header: { height: headerContext ? 72 : 60 },
71
- footer: mobileNavigation ? { height: 68 } : void 0,
72
- navbar: {
73
- width: 250,
74
- breakpoint: "sm",
75
- collapsed: { mobile: !opened }
76
- },
77
- padding: "md",
78
- children: [
79
- /* @__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: [
80
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: [
81
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Burger, { opened, onClick: toggle, hiddenFrom: "sm", size: "sm", "aria-label": "Toggle navigation" }),
82
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: 0, style: { minWidth: 0 }, children: [
83
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Title, { order: 3, lineClamp: 1, children: logoText }),
84
- headerContext ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "sm", c: "dimmed", lineClamp: 1, children: headerContext }) : null
85
- ] })
86
- ] }),
87
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { wrap: "nowrap", children: [
88
- headerActions,
89
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_gds_core.ThemeToggle, {})
90
- ] })
70
+ headerHeight: headerContext ? 72 : 60,
71
+ header: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { h: "100%", justify: "space-between", align: "center", wrap: "nowrap", children: [
72
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Group, { wrap: "nowrap", style: { minWidth: 0, flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: 0, style: { minWidth: 0 }, children: [
73
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Title, { order: 3, lineClamp: 1, children: logoText }),
74
+ headerContext ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "sm", c: "dimmed", lineClamp: 1, children: headerContext }) : null
91
75
  ] }) }),
92
- /* @__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: [
93
- primaryNav ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
94
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "Primary" }),
95
- primaryNav
96
- ] }) : null,
97
- secondaryNavigation ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
98
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Divider, {}),
99
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
100
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "More" }),
101
- secondaryNavigation
102
- ] })
103
- ] }) : null,
104
- accountPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
105
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Divider, { mt: "auto" }),
106
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
107
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "Account" }),
108
- accountPanel
109
- ] })
110
- ] }) : null
111
- ] }) }) }),
112
- 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,
113
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.AppShell.Main, { children })
114
- ]
76
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Group, { wrap: "nowrap", children: [
77
+ headerActions,
78
+ showThemeToggle ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_gds_core.ThemeToggle, {}) : null
79
+ ] })
80
+ ] }),
81
+ sidebar: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "md", h: "100%", children: [
82
+ primaryNav ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
83
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "Primary" }),
84
+ primaryNav
85
+ ] }) : null,
86
+ secondaryNavigation ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
87
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Divider, {}),
88
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
89
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "More" }),
90
+ secondaryNavigation
91
+ ] })
92
+ ] }) : null,
93
+ accountPanel ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
94
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Divider, { mt: "auto" }),
95
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_core.Stack, { gap: "xs", children: [
96
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_core.Text, { size: "xs", fw: 700, c: "dimmed", children: "Account" }),
97
+ accountPanel
98
+ ] })
99
+ ] }) : null
100
+ ] }),
101
+ footer: mobileNavigation,
102
+ children
115
103
  }
116
104
  );
117
105
  }
@@ -178,20 +166,15 @@ function StatsStrip({ stats }) {
178
166
  // src/SemanticNavLink.tsx
179
167
  var import_react = require("react");
180
168
  var import_core5 = require("@mantine/core");
181
- var import_gds_theme2 = require("@doneisbetter/gds-theme");
182
169
  var import_gds_core3 = require("@doneisbetter/gds-core");
183
170
  var import_jsx_runtime5 = require("react/jsx-runtime");
184
171
  var _SemanticNavLink = (0, import_react.forwardRef)(
185
172
  ({ action, ...props }, ref) => {
186
- const { t } = (0, import_gds_theme2.useGdsTranslation)();
187
- const config = import_gds_core3.GdsVocabulary[action];
188
- const Icon = config.icon;
189
173
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
190
- import_core5.NavLink,
174
+ import_gds_core3.SidebarNavItem,
191
175
  {
192
176
  ref,
193
- label: t(config.id, config.defaultMessage),
194
- leftSection: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: "1rem", stroke: 1.5 }),
177
+ action,
195
178
  ...props
196
179
  }
197
180
  );
@@ -264,7 +247,7 @@ function PageHeader({
264
247
  // src/ResponsiveDataView.tsx
265
248
  var import_react2 = __toESM(require("react"));
266
249
  var import_core8 = require("@mantine/core");
267
- var import_hooks2 = require("@mantine/hooks");
250
+ var import_hooks = require("@mantine/hooks");
268
251
  var import_gds_core5 = require("@doneisbetter/gds-core");
269
252
  var import_jsx_runtime8 = require("react/jsx-runtime");
270
253
  function ResponsiveDataView({
@@ -283,7 +266,7 @@ function ResponsiveDataView({
283
266
  mobileFilters,
284
267
  getRowKey
285
268
  }) {
286
- const isMobile = (0, import_hooks2.useMediaQuery)("(max-width: 48em)");
269
+ const isMobile = (0, import_hooks.useMediaQuery)("(max-width: 48em)");
287
270
  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_core8.Stack, { gap: "md", children: [
288
271
  toolbar,
289
272
  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)(
@@ -308,9 +291,58 @@ function ResponsiveDataView({
308
291
  ] });
309
292
  }
310
293
 
311
- // src/WorkspaceHeader.tsx
294
+ // src/ReferenceSiteShell.tsx
312
295
  var import_core9 = require("@mantine/core");
296
+ var import_icons_react = require("@tabler/icons-react");
297
+ var import_gds_core6 = require("@doneisbetter/gds-core");
313
298
  var import_jsx_runtime9 = require("react/jsx-runtime");
299
+ function ReferenceSiteShell({
300
+ logoText = "General Design System",
301
+ headerContext,
302
+ primaryNavigation,
303
+ secondaryNavigation,
304
+ locale,
305
+ localeOptions,
306
+ onLocaleChange,
307
+ localizationNotice,
308
+ children
309
+ }) {
310
+ const activeLocale = localeOptions.find((option) => option.id === locale) ?? localeOptions[0];
311
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
312
+ AppShell,
313
+ {
314
+ logoText,
315
+ primaryNavigation,
316
+ secondaryNavigation,
317
+ headerContext,
318
+ showThemeToggle: false,
319
+ headerActions: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Group, { gap: "sm", children: [
320
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Menu, { position: "bottom-end", withArrow: true, children: [
321
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Menu.Target, { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
322
+ import_core9.Button,
323
+ {
324
+ variant: "light",
325
+ radius: "md",
326
+ leftSection: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons_react.IconLanguage, { size: "1.1rem" }),
327
+ rightSection: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_icons_react.IconChevronDown, { size: "0.95rem" }),
328
+ children: activeLocale?.label ?? "Language"
329
+ }
330
+ ) }),
331
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Menu.Dropdown, { children: localeOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Menu.Item, { onClick: () => onLocaleChange(option.id), children: option.label }, option.id)) })
332
+ ] }),
333
+ /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_gds_core6.ThemeToggle, {})
334
+ ] }),
335
+ children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Stack, { gap: "md", children: [
336
+ localizationNotice ? typeof localizationNotice === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_gds_core6.AccentPanel, { tone: "amber", variant: "soft-outline", title: "Localization status", badge: activeLocale?.label ?? locale, children: localizationNotice }) : localizationNotice : null,
337
+ children
338
+ ] })
339
+ }
340
+ );
341
+ }
342
+
343
+ // src/WorkspaceHeader.tsx
344
+ var import_core10 = require("@mantine/core");
345
+ var import_jsx_runtime10 = require("react/jsx-runtime");
314
346
  function WorkspaceHeader({
315
347
  breadcrumbs,
316
348
  eyebrow,
@@ -319,15 +351,15 @@ function WorkspaceHeader({
319
351
  primaryAction,
320
352
  secondaryActions
321
353
  }) {
322
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Stack, { gap: "sm", mb: "xl", children: [
323
- breadcrumbs?.length ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Breadcrumbs, { children: breadcrumbs }) : null,
324
- eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
325
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
326
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Stack, { gap: 6, children: [
327
- /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Title, { order: 1, children: title }),
328
- description ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_core9.Text, { c: "dimmed", maw: 640, children: description }) : null
354
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Stack, { gap: "sm", mb: "xl", children: [
355
+ breadcrumbs?.length ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Breadcrumbs, { children: breadcrumbs }) : null,
356
+ eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Text, { size: "sm", fw: 700, c: "dimmed", tt: "uppercase", children: eyebrow }) : null,
357
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Group, { justify: "space-between", align: "flex-start", gap: "md", children: [
358
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Stack, { gap: 6, children: [
359
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Title, { order: 1, children: title }),
360
+ description ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Text, { c: "dimmed", maw: 640, children: description }) : null
329
361
  ] }),
330
- /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_core9.Group, { gap: "sm", children: [
362
+ /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Group, { gap: "sm", children: [
331
363
  secondaryActions,
332
364
  primaryAction
333
365
  ] })
@@ -336,8 +368,8 @@ function WorkspaceHeader({
336
368
  }
337
369
 
338
370
  // src/EditorScaffold.tsx
339
- var import_core10 = require("@mantine/core");
340
- var import_jsx_runtime10 = require("react/jsx-runtime");
371
+ var import_core11 = require("@mantine/core");
372
+ var import_jsx_runtime11 = require("react/jsx-runtime");
341
373
  function EditorScaffold({
342
374
  header,
343
375
  context,
@@ -347,18 +379,18 @@ function EditorScaffold({
347
379
  footer,
348
380
  stickyFooter = false
349
381
  }) {
350
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Stack, { gap: "lg", children: [
382
+ return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core11.Stack, { gap: "lg", children: [
351
383
  header,
352
384
  context,
353
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_core10.Grid, { gutter: "lg", align: "start", children: [
354
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_core10.Grid.Col, { span: { base: 12, md: preview ? 7 : 8 }, children: form }),
355
- 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: [
385
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core11.Grid, { gutter: "lg", align: "start", children: [
386
+ /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core11.Grid.Col, { span: { base: 12, md: preview ? 7 : 8 }, children: form }),
387
+ preview || settings ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_core11.Grid.Col, { span: { base: 12, md: preview ? 5 : 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_core11.Stack, { gap: "lg", children: [
356
388
  preview,
357
389
  settings
358
390
  ] }) }) : null
359
391
  ] }),
360
- footer ? stickyFooter ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
361
- import_core10.Paper,
392
+ footer ? stickyFooter ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
393
+ import_core11.Paper,
362
394
  {
363
395
  withBorder: true,
364
396
  radius: "xl",
@@ -375,8 +407,8 @@ function EditorScaffold({
375
407
  }
376
408
 
377
409
  // src/ContentOpsSection.tsx
378
- var import_gds_core6 = require("@doneisbetter/gds-core");
379
- var import_jsx_runtime11 = require("react/jsx-runtime");
410
+ var import_gds_core7 = require("@doneisbetter/gds-core");
411
+ var import_jsx_runtime12 = require("react/jsx-runtime");
380
412
  function ContentOpsSection({
381
413
  id,
382
414
  title,
@@ -385,26 +417,28 @@ function ContentOpsSection({
385
417
  children,
386
418
  tone = "default"
387
419
  }) {
388
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_gds_core6.SectionPanel, { id, title, description, action, tone, children });
420
+ return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_gds_core7.SectionPanel, { id, title, description, action, tone, children });
389
421
  }
390
422
 
391
423
  // src/ContentOpsActionBar.tsx
392
- var import_core11 = require("@mantine/core");
393
- var import_jsx_runtime12 = require("react/jsx-runtime");
424
+ var import_core12 = require("@mantine/core");
425
+ var import_gds_core8 = require("@doneisbetter/gds-core");
426
+ var import_jsx_runtime13 = require("react/jsx-runtime");
394
427
  function ContentOpsActionBar({
395
428
  dirty = false,
396
429
  saving = false,
397
430
  status,
431
+ actions,
398
432
  primaryAction,
399
433
  secondaryAction,
400
434
  tertiaryAction
401
435
  }) {
402
- 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: [
403
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { gap: "sm", wrap: "wrap", children: [
404
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Badge, { color: saving ? "violet" : dirty ? "yellow" : "teal", variant: "light", children: saving ? "Saving" : dirty ? "Unsaved changes" : "Saved" }),
405
- status ? typeof status === "string" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_core11.Text, { size: "sm", c: "dimmed", children: status }) : status : null
436
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Paper, { withBorder: true, radius: "xl", p: "md", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { justify: "space-between", align: "center", gap: "md", wrap: "wrap", children: [
437
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { gap: "sm", wrap: "wrap", children: [
438
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Badge, { color: saving ? "violet" : dirty ? "yellow" : "teal", variant: "light", children: saving ? "Saving" : dirty ? "Unsaved changes" : "Saved" }),
439
+ status ? typeof status === "string" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Text, { size: "sm", c: "dimmed", children: status }) : status : null
406
440
  ] }),
407
- /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_core11.Group, { gap: "sm", wrap: "wrap", children: [
441
+ actions ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_gds_core8.ActionBar, { ...actions }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Group, { gap: "sm", wrap: "wrap", children: [
408
442
  tertiaryAction,
409
443
  secondaryAction,
410
444
  primaryAction
@@ -413,8 +447,8 @@ function ContentOpsActionBar({
413
447
  }
414
448
 
415
449
  // src/ContentOpsEditor.tsx
416
- var import_core12 = require("@mantine/core");
417
- var import_jsx_runtime13 = require("react/jsx-runtime");
450
+ var import_core13 = require("@mantine/core");
451
+ var import_jsx_runtime14 = require("react/jsx-runtime");
418
452
  function ContentOpsEditor({
419
453
  header,
420
454
  context,
@@ -424,14 +458,14 @@ function ContentOpsEditor({
424
458
  preview,
425
459
  settings
426
460
  }) {
427
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_core12.Stack, { gap: "lg", children: [
461
+ return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_core13.Stack, { gap: "lg", children: [
428
462
  header,
429
463
  status,
430
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
464
+ /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
431
465
  EditorScaffold,
432
466
  {
433
467
  context,
434
- form: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core12.Stack, { gap: "lg", children: sections }),
468
+ form: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_core13.Stack, { gap: "lg", children: sections }),
435
469
  preview,
436
470
  settings,
437
471
  footer: actionBar,
@@ -451,6 +485,7 @@ function ContentOpsEditor({
451
485
  FormSection,
452
486
  InfoCard,
453
487
  PageHeader,
488
+ ReferenceSiteShell,
454
489
  ResponsiveDataView,
455
490
  SemanticNavLink,
456
491
  StatsStrip,
package/dist/index.mjs CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  DataTable,
4
4
  ResponsiveDataView,
5
5
  SemanticNavLink
6
- } from "./chunk-DCLRWG2B.mjs";
6
+ } from "./chunk-LKBDBFHP.mjs";
7
7
  import {
8
8
  ContentOpsActionBar,
9
9
  ContentOpsEditor,
@@ -14,7 +14,56 @@ import {
14
14
  PageHeader,
15
15
  StatsStrip,
16
16
  WorkspaceHeader
17
- } from "./chunk-ZUUEDN7I.mjs";
17
+ } from "./chunk-CFL7O7EU.mjs";
18
+
19
+ // src/ReferenceSiteShell.tsx
20
+ import { Button, Group, Menu, Stack } from "@mantine/core";
21
+ import { IconChevronDown, IconLanguage } from "@tabler/icons-react";
22
+ import { AccentPanel, ThemeToggle } from "@doneisbetter/gds-core";
23
+ import { jsx, jsxs } from "react/jsx-runtime";
24
+ function ReferenceSiteShell({
25
+ logoText = "General Design System",
26
+ headerContext,
27
+ primaryNavigation,
28
+ secondaryNavigation,
29
+ locale,
30
+ localeOptions,
31
+ onLocaleChange,
32
+ localizationNotice,
33
+ children
34
+ }) {
35
+ const activeLocale = localeOptions.find((option) => option.id === locale) ?? localeOptions[0];
36
+ return /* @__PURE__ */ jsx(
37
+ AppShell,
38
+ {
39
+ logoText,
40
+ primaryNavigation,
41
+ secondaryNavigation,
42
+ headerContext,
43
+ showThemeToggle: false,
44
+ headerActions: /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
45
+ /* @__PURE__ */ jsxs(Menu, { position: "bottom-end", withArrow: true, children: [
46
+ /* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(
47
+ Button,
48
+ {
49
+ variant: "light",
50
+ radius: "md",
51
+ leftSection: /* @__PURE__ */ jsx(IconLanguage, { size: "1.1rem" }),
52
+ rightSection: /* @__PURE__ */ jsx(IconChevronDown, { size: "0.95rem" }),
53
+ children: activeLocale?.label ?? "Language"
54
+ }
55
+ ) }),
56
+ /* @__PURE__ */ jsx(Menu.Dropdown, { children: localeOptions.map((option) => /* @__PURE__ */ jsx(Menu.Item, { onClick: () => onLocaleChange(option.id), children: option.label }, option.id)) })
57
+ ] }),
58
+ /* @__PURE__ */ jsx(ThemeToggle, {})
59
+ ] }),
60
+ children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
61
+ localizationNotice ? typeof localizationNotice === "string" ? /* @__PURE__ */ jsx(AccentPanel, { tone: "amber", variant: "soft-outline", title: "Localization status", badge: activeLocale?.label ?? locale, children: localizationNotice }) : localizationNotice : null,
62
+ children
63
+ ] })
64
+ }
65
+ );
66
+ }
18
67
  export {
19
68
  AppShell,
20
69
  ContentOpsActionBar,
@@ -25,6 +74,7 @@ export {
25
74
  FormSection,
26
75
  InfoCard,
27
76
  PageHeader,
77
+ ReferenceSiteShell,
28
78
  ResponsiveDataView,
29
79
  SemanticNavLink,
30
80
  StatsStrip,
package/dist/server.d.mts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ReactNode } from 'react';
3
+ import { ActionBarProps } from '@doneisbetter/gds-core';
3
4
 
4
5
  interface FormSectionProps {
5
6
  title: string;
@@ -72,11 +73,12 @@ interface ContentOpsActionBarProps {
72
73
  dirty?: boolean;
73
74
  saving?: boolean;
74
75
  status?: ReactNode;
76
+ actions?: ActionBarProps;
75
77
  primaryAction?: ReactNode;
76
78
  secondaryAction?: ReactNode;
77
79
  tertiaryAction?: ReactNode;
78
80
  }
79
- declare function ContentOpsActionBar({ dirty, saving, status, primaryAction, secondaryAction, tertiaryAction, }: ContentOpsActionBarProps): react_jsx_runtime.JSX.Element;
81
+ declare function ContentOpsActionBar({ dirty, saving, status, actions, primaryAction, secondaryAction, tertiaryAction, }: ContentOpsActionBarProps): react_jsx_runtime.JSX.Element;
80
82
 
81
83
  interface ContentOpsEditorProps {
82
84
  header?: ReactNode;
package/dist/server.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { ReactNode } from 'react';
3
+ import { ActionBarProps } from '@doneisbetter/gds-core';
3
4
 
4
5
  interface FormSectionProps {
5
6
  title: string;
@@ -72,11 +73,12 @@ interface ContentOpsActionBarProps {
72
73
  dirty?: boolean;
73
74
  saving?: boolean;
74
75
  status?: ReactNode;
76
+ actions?: ActionBarProps;
75
77
  primaryAction?: ReactNode;
76
78
  secondaryAction?: ReactNode;
77
79
  tertiaryAction?: ReactNode;
78
80
  }
79
- declare function ContentOpsActionBar({ dirty, saving, status, primaryAction, secondaryAction, tertiaryAction, }: ContentOpsActionBarProps): react_jsx_runtime.JSX.Element;
81
+ declare function ContentOpsActionBar({ dirty, saving, status, actions, primaryAction, secondaryAction, tertiaryAction, }: ContentOpsActionBarProps): react_jsx_runtime.JSX.Element;
80
82
 
81
83
  interface ContentOpsEditorProps {
82
84
  header?: ReactNode;
package/dist/server.js CHANGED
@@ -168,11 +168,13 @@ function ContentOpsSection({
168
168
 
169
169
  // src/ContentOpsActionBar.tsx
170
170
  var import_core6 = require("@mantine/core");
171
+ var import_gds_core3 = require("@doneisbetter/gds-core");
171
172
  var import_jsx_runtime7 = require("react/jsx-runtime");
172
173
  function ContentOpsActionBar({
173
174
  dirty = false,
174
175
  saving = false,
175
176
  status,
177
+ actions,
176
178
  primaryAction,
177
179
  secondaryAction,
178
180
  tertiaryAction
@@ -182,7 +184,7 @@ function ContentOpsActionBar({
182
184
  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Badge, { color: saving ? "violet" : dirty ? "yellow" : "teal", variant: "light", children: saving ? "Saving" : dirty ? "Unsaved changes" : "Saved" }),
183
185
  status ? typeof status === "string" ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_core6.Text, { size: "sm", c: "dimmed", children: status }) : status : null
184
186
  ] }),
185
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core6.Group, { gap: "sm", wrap: "wrap", children: [
187
+ actions ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_gds_core3.ActionBar, { ...actions }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_core6.Group, { gap: "sm", wrap: "wrap", children: [
186
188
  tertiaryAction,
187
189
  secondaryAction,
188
190
  primaryAction
package/dist/server.mjs CHANGED
@@ -7,7 +7,7 @@ import {
7
7
  PageHeader,
8
8
  StatsStrip,
9
9
  WorkspaceHeader
10
- } from "./chunk-ZUUEDN7I.mjs";
10
+ } from "./chunk-CFL7O7EU.mjs";
11
11
  export {
12
12
  ContentOpsActionBar,
13
13
  ContentOpsEditor,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doneisbetter/gds-admin",
3
- "version": "2.6.3",
3
+ "version": "2.6.5",
4
4
  "main": "./dist/index.js",
5
5
  "module": "./dist/index.mjs",
6
6
  "types": "./dist/index.d.ts",
@@ -38,8 +38,8 @@
38
38
  "dev": "tsup --watch"
39
39
  },
40
40
  "peerDependencies": {
41
- "@doneisbetter/gds-core": "^2.6.3",
42
- "@doneisbetter/gds-theme": "^2.6.3",
41
+ "@doneisbetter/gds-core": "^2.6.5",
42
+ "@doneisbetter/gds-theme": "^2.6.5",
43
43
  "@mantine/core": "^7.9.0 || ^8.3.0 || ^9.0.0",
44
44
  "@mantine/hooks": "^7.9.0 || ^8.3.0 || ^9.0.0",
45
45
  "@tabler/icons-react": "^3.5.0",