@doneisbetter/gds-core 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.
package/dist/server.mjs CHANGED
@@ -9,33 +9,45 @@ import {
9
9
  ConsumerSection,
10
10
  CtaButtonGroup,
11
11
  DataToolbar,
12
+ DetailProfileShell,
12
13
  DocsPageShell,
13
14
  EditorialCard,
14
15
  EditorialHero,
15
16
  EmptyState,
16
17
  FeatureBand,
17
18
  FilterDrawer,
19
+ FoodMenuSection,
18
20
  FormField,
19
21
  GdsIcons,
20
22
  GdsVocabulary,
23
+ ListingCard,
24
+ MapPanel,
21
25
  MediaCard,
22
26
  MediaField,
23
27
  MetricCard,
24
28
  PageHeader,
25
29
  PlaceholderPanel,
30
+ PlaybackSurface,
26
31
  ProductCard,
27
32
  ProgressCard,
28
33
  PublicBrandFooter,
34
+ PublicFlowShell,
35
+ PublicFoodCard,
29
36
  PublicNav,
30
37
  PublicProductCard,
31
38
  PublicShell,
32
39
  PublicSiteFooter,
40
+ ReferenceLinkGrid,
41
+ ReferenceLocaleNotice,
42
+ ReferenceSection,
33
43
  SectionPanel,
34
44
  SimpleDataTable,
45
+ SocialAuthButtons,
35
46
  StateBlock,
36
47
  StatsSection,
37
48
  StatusBadge,
38
49
  ar,
50
+ createGdsVocabularyPack,
39
51
  de,
40
52
  en,
41
53
  es,
@@ -47,9 +59,11 @@ import {
47
59
  he,
48
60
  hu,
49
61
  it,
62
+ mergeGdsVocabularyPacks,
50
63
  resolveAccentPanelStyles,
64
+ resolveSemanticActionConfig,
51
65
  ru
52
- } from "./chunk-QEPN7PSA.mjs";
66
+ } from "./chunk-6LOTZ3IZ.mjs";
53
67
  export {
54
68
  AccentPanel,
55
69
  AccessSummary,
@@ -61,33 +75,45 @@ export {
61
75
  ConsumerSection,
62
76
  CtaButtonGroup,
63
77
  DataToolbar,
78
+ DetailProfileShell,
64
79
  DocsPageShell,
65
80
  EditorialCard,
66
81
  EditorialHero,
67
82
  EmptyState,
68
83
  FeatureBand,
69
84
  FilterDrawer,
85
+ FoodMenuSection,
70
86
  FormField,
71
87
  GdsIcons,
72
88
  GdsVocabulary,
89
+ ListingCard,
90
+ MapPanel,
73
91
  MediaCard,
74
92
  MediaField,
75
93
  MetricCard,
76
94
  PageHeader,
77
95
  PlaceholderPanel,
96
+ PlaybackSurface,
78
97
  ProductCard,
79
98
  ProgressCard,
80
99
  PublicBrandFooter,
100
+ PublicFlowShell,
101
+ PublicFoodCard,
81
102
  PublicNav,
82
103
  PublicProductCard,
83
104
  PublicShell,
84
105
  PublicSiteFooter,
106
+ ReferenceLinkGrid,
107
+ ReferenceLocaleNotice,
108
+ ReferenceSection,
85
109
  SectionPanel,
86
110
  SimpleDataTable,
111
+ SocialAuthButtons,
87
112
  StateBlock,
88
113
  StatsSection,
89
114
  StatusBadge,
90
115
  ar,
116
+ createGdsVocabularyPack,
91
117
  de,
92
118
  en,
93
119
  es,
@@ -99,6 +125,8 @@ export {
99
125
  he,
100
126
  hu,
101
127
  it,
128
+ mergeGdsVocabularyPacks,
102
129
  resolveAccentPanelStyles,
130
+ resolveSemanticActionConfig,
103
131
  ru
104
132
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doneisbetter/gds-core",
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,7 +38,7 @@
38
38
  "dev": "tsup --watch"
39
39
  },
40
40
  "peerDependencies": {
41
- "@doneisbetter/gds-theme": "^2.6.3",
41
+ "@doneisbetter/gds-theme": "^2.6.5",
42
42
  "@mantine/core": "^7.9.0 || ^8.3.0 || ^9.0.0",
43
43
  "@mantine/hooks": "^7.9.0 || ^8.3.0 || ^9.0.0",
44
44
  "@tabler/icons-react": "^3.5.0",
@@ -1,377 +0,0 @@
1
- import {
2
- GdsIcons,
3
- GdsVocabulary,
4
- StateBlock,
5
- getSemanticActionLabel
6
- } from "./chunk-QEPN7PSA.mjs";
7
-
8
- // src/SemanticButton.tsx
9
- import { useState, useEffect } from "react";
10
- import { Button } from "@mantine/core";
11
- import { useGdsTranslation } from "@doneisbetter/gds-theme";
12
- import { IconCheck, IconX } from "@tabler/icons-react";
13
- import { jsx } from "react/jsx-runtime";
14
- function SemanticButton({ action, loading, feedbackState, feedbackText, prerenderLabelOnly = true, ...props }) {
15
- const { t } = useGdsTranslation();
16
- const config = GdsVocabulary[action];
17
- const [mounted, setMounted] = useState(!prerenderLabelOnly);
18
- const [internalFeedback, setInternalFeedback] = useState(null);
19
- useEffect(() => {
20
- if (prerenderLabelOnly) {
21
- setMounted(true);
22
- }
23
- }, [prerenderLabelOnly]);
24
- useEffect(() => {
25
- if (feedbackState) {
26
- setInternalFeedback(feedbackState);
27
- const timer = setTimeout(() => setInternalFeedback(null), 2e3);
28
- return () => clearTimeout(timer);
29
- }
30
- }, [feedbackState]);
31
- let Icon = config.icon;
32
- let label = getSemanticActionLabel(action, t);
33
- let color = props.color;
34
- if (!mounted) {
35
- const { leftSection, ...buttonProps } = props;
36
- return /* @__PURE__ */ jsx(Button, { loading, color, ...buttonProps, children: getSemanticActionLabel(action) });
37
- }
38
- if (internalFeedback === "success") {
39
- const defaultFeedback = "feedback" in config && config.feedback ? config.feedback : { icon: IconCheck, color: "teal", messageId: "gds.feedback.saved" };
40
- Icon = defaultFeedback.icon;
41
- label = feedbackText || t(defaultFeedback.messageId, "Success");
42
- color = defaultFeedback.color;
43
- } else if (internalFeedback === "error") {
44
- Icon = IconX;
45
- label = feedbackText || t("gds.feedback.error", "Something went wrong");
46
- color = "red";
47
- }
48
- return /* @__PURE__ */ jsx(
49
- Button,
50
- {
51
- leftSection: /* @__PURE__ */ jsx(Icon, { size: "1rem" }),
52
- loading,
53
- color,
54
- ...props,
55
- children: label
56
- }
57
- );
58
- }
59
-
60
- // src/ConfirmDialog.tsx
61
- import { Modal, Group, Text } from "@mantine/core";
62
- import { jsx as jsx2, jsxs } from "react/jsx-runtime";
63
- function ConfirmDialog({
64
- opened,
65
- onClose,
66
- onConfirm,
67
- title,
68
- children,
69
- confirmAction = "confirm",
70
- cancelAction = "cancel",
71
- isDanger = true,
72
- loading = false
73
- }) {
74
- return /* @__PURE__ */ jsxs(Modal, { opened, onClose, title, centered: true, trapFocus: true, children: [
75
- /* @__PURE__ */ jsx2(Text, { size: "sm", mb: "xl", children }),
76
- /* @__PURE__ */ jsxs(Group, { justify: "flex-end", children: [
77
- /* @__PURE__ */ jsx2(SemanticButton, { action: cancelAction, variant: "default", onClick: onClose, disabled: loading }),
78
- /* @__PURE__ */ jsx2(SemanticButton, { action: confirmAction, color: isDanger ? "red" : "violet", onClick: onConfirm, loading })
79
- ] })
80
- ] });
81
- }
82
-
83
- // src/ThemeToggle.tsx
84
- import { ActionIcon, useMantineColorScheme, useComputedColorScheme } from "@mantine/core";
85
- import { useGdsTranslation as useGdsTranslation2 } from "@doneisbetter/gds-theme";
86
- import { jsx as jsx3 } from "react/jsx-runtime";
87
- function ThemeToggle({ size = "md" }) {
88
- const { setColorScheme } = useMantineColorScheme();
89
- const computedColorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
90
- const { t } = useGdsTranslation2();
91
- const toggleColorScheme = () => {
92
- setColorScheme(computedColorScheme === "dark" ? "light" : "dark");
93
- };
94
- const isDark = computedColorScheme === "dark";
95
- return /* @__PURE__ */ jsx3(
96
- ActionIcon,
97
- {
98
- onClick: toggleColorScheme,
99
- variant: "default",
100
- size,
101
- "aria-label": t("gds.aria.themeToggle", "Toggle color scheme"),
102
- children: isDark ? /* @__PURE__ */ jsx3(GdsIcons.Sun, { size: "1.2rem" }) : /* @__PURE__ */ jsx3(GdsIcons.Moon, { size: "1.2rem" })
103
- }
104
- );
105
- }
106
-
107
- // src/GameBoardTile.tsx
108
- import { Center, Paper, Text as Text2, UnstyledButton, useMantineTheme } from "@mantine/core";
109
- import { useMediaQuery } from "@mantine/hooks";
110
- import { jsx as jsx4 } from "react/jsx-runtime";
111
- function GameBoardTile({
112
- face,
113
- revealed,
114
- matched,
115
- disabled,
116
- onPress,
117
- highlightColor
118
- }) {
119
- const theme = useMantineTheme();
120
- const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
121
- const highlighted = revealed && !matched;
122
- const revealBg = highlightColor ?? (typeof theme.primaryColor === "string" ? `${theme.primaryColor}.5` : "violet.5");
123
- return /* @__PURE__ */ jsx4(UnstyledButton, { w: "100%", disabled, onClick: onPress, "aria-pressed": revealed, children: /* @__PURE__ */ jsx4(
124
- Paper,
125
- {
126
- withBorder: true,
127
- radius: "md",
128
- p: "md",
129
- bg: revealed ? revealBg : "dark.6",
130
- styles: {
131
- root: {
132
- aspectRatio: "1",
133
- opacity: matched ? 0.55 : 1,
134
- cursor: disabled ? "not-allowed" : "pointer",
135
- transition: reduceMotion ? "opacity 0.2s ease" : "transform 0.25s ease, background-color 0.25s ease, opacity 0.25s ease",
136
- transform: reduceMotion || !highlighted ? "scale(1)" : "scale(1.02)"
137
- }
138
- },
139
- children: /* @__PURE__ */ jsx4(Center, { h: "100%", children: /* @__PURE__ */ jsx4(Text2, { size: "xl", fw: 700, children: face }) })
140
- }
141
- ) });
142
- }
143
-
144
- // src/DocsCodeBlock.tsx
145
- import { useState as useState2 } from "react";
146
- import { ActionIcon as ActionIcon2, Code, Group as Group2, Paper as Paper2, Stack, Text as Text3 } from "@mantine/core";
147
- import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
148
- function DocsCodeBlock({ code, language, title, withCopy = true }) {
149
- const [copied, setCopied] = useState2(false);
150
- const handleCopy = async () => {
151
- if (!navigator?.clipboard) {
152
- return;
153
- }
154
- await navigator.clipboard.writeText(code);
155
- setCopied(true);
156
- window.setTimeout(() => setCopied(false), 1200);
157
- };
158
- return /* @__PURE__ */ jsx5(Paper2, { withBorder: true, radius: "lg", p: "md", children: /* @__PURE__ */ jsxs2(Stack, { gap: "sm", children: [
159
- title || withCopy ? /* @__PURE__ */ jsxs2(Group2, { justify: "space-between", align: "center", children: [
160
- /* @__PURE__ */ jsxs2(Stack, { gap: 0, children: [
161
- title ? /* @__PURE__ */ jsx5(Text3, { fw: 600, children: title }) : null,
162
- language ? /* @__PURE__ */ jsx5(Text3, { size: "xs", c: "dimmed", children: language }) : null
163
- ] }),
164
- withCopy ? /* @__PURE__ */ jsx5(
165
- ActionIcon2,
166
- {
167
- variant: "subtle",
168
- "aria-label": copied ? "Copied code block" : "Copy code block",
169
- onClick: () => {
170
- void handleCopy();
171
- },
172
- children: /* @__PURE__ */ jsx5(GdsIcons.Copy, { size: "1rem" })
173
- }
174
- ) : null
175
- ] }) : null,
176
- /* @__PURE__ */ jsx5(Code, { block: true, children: code })
177
- ] }) });
178
- }
179
-
180
- // src/UploadDropzone.tsx
181
- import { useRef, useState as useState3 } from "react";
182
- import { Box, Button as Button2, Group as Group3, Stack as Stack2, Text as Text4 } from "@mantine/core";
183
- import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
184
- function UploadDropzone({
185
- title,
186
- description,
187
- onFilesSelected,
188
- accept,
189
- multiple = true,
190
- actionLabel = "Choose files",
191
- mode = "panel"
192
- }) {
193
- const inputRef = useRef(null);
194
- const [dragging, setDragging] = useState3(false);
195
- const UploadIcon = GdsIcons.Upload;
196
- const forwardFiles = (files) => {
197
- if (!files?.length || !onFilesSelected) {
198
- return;
199
- }
200
- onFilesSelected(Array.from(files));
201
- };
202
- return /* @__PURE__ */ jsxs3(
203
- Box,
204
- {
205
- onDragOver: (event) => {
206
- event.preventDefault();
207
- setDragging(true);
208
- },
209
- onDragLeave: () => setDragging(false),
210
- onDrop: (event) => {
211
- event.preventDefault();
212
- setDragging(false);
213
- forwardFiles(event.dataTransfer.files);
214
- },
215
- p: mode === "inline" ? "md" : "xl",
216
- style: {
217
- border: `1px dashed var(${dragging ? "--mantine-color-violet-6" : "--mantine-color-default-border"})`,
218
- borderRadius: "var(--mantine-radius-lg)",
219
- background: dragging ? "var(--mantine-color-violet-light)" : "transparent"
220
- },
221
- children: [
222
- /* @__PURE__ */ jsx6(
223
- "input",
224
- {
225
- ref: inputRef,
226
- type: "file",
227
- hidden: true,
228
- accept,
229
- multiple,
230
- onChange: (event) => forwardFiles(event.currentTarget.files)
231
- }
232
- ),
233
- /* @__PURE__ */ jsxs3(Stack2, { align: mode === "inline" ? "flex-start" : "center", ta: mode === "inline" ? "left" : "center", gap: "sm", children: [
234
- /* @__PURE__ */ jsx6(UploadIcon, { size: "1.5rem" }),
235
- /* @__PURE__ */ jsx6(Text4, { fw: 600, children: title }),
236
- description ? /* @__PURE__ */ jsx6(Text4, { size: "sm", c: "dimmed", children: description }) : null,
237
- /* @__PURE__ */ jsx6(Group3, { children: /* @__PURE__ */ jsx6(Button2, { variant: "light", onClick: () => inputRef.current?.click(), children: actionLabel }) })
238
- ] })
239
- ]
240
- }
241
- );
242
- }
243
-
244
- // src/AccessRecoveryPanel.tsx
245
- import { Group as Group4 } from "@mantine/core";
246
- import { useGdsTranslation as useGdsTranslation3 } from "@doneisbetter/gds-theme";
247
- import { jsx as jsx7 } from "react/jsx-runtime";
248
- var stateBlockVariantByState = {
249
- unauthenticated: "permission",
250
- "expired-session": "info",
251
- forbidden: "permission",
252
- missing: "error",
253
- unavailable: "error"
254
- };
255
- var defaultCopyByState = {
256
- unauthenticated: {
257
- title: "Sign in required",
258
- description: "Please sign in to continue to this content."
259
- },
260
- "expired-session": {
261
- title: "Session expired",
262
- description: "Sign in again or retry to continue where you left off."
263
- },
264
- forbidden: {
265
- title: "You do not have access",
266
- description: "This content is outside your current permissions or scope."
267
- },
268
- missing: {
269
- title: "Content not found",
270
- description: "The resource may have moved, been deleted, or never existed in this scope."
271
- },
272
- unavailable: {
273
- title: "Content is temporarily unavailable",
274
- description: "Try again in a moment or return to a safe destination."
275
- }
276
- };
277
- function defaultActionsForState(state, {
278
- onRetry,
279
- onSignIn,
280
- onBack,
281
- supportAction
282
- }) {
283
- const signInAction = onSignIn ? { action: "login", onClick: onSignIn } : null;
284
- const retryAction = onRetry ? { action: "refresh", onClick: onRetry, variant: "light" } : null;
285
- const backAction = onBack ? { action: "back", onClick: onBack, variant: "default" } : null;
286
- switch (state) {
287
- case "unauthenticated":
288
- return { primary: signInAction, secondary: backAction, tertiary: supportAction ?? null };
289
- case "expired-session":
290
- return {
291
- primary: signInAction ?? retryAction,
292
- secondary: retryAction && signInAction ? retryAction : backAction,
293
- tertiary: supportAction ?? null
294
- };
295
- case "forbidden":
296
- return { primary: backAction, secondary: supportAction ?? null, tertiary: null };
297
- case "missing":
298
- return { primary: backAction, secondary: supportAction ?? null, tertiary: null };
299
- case "unavailable":
300
- return {
301
- primary: retryAction ?? backAction,
302
- secondary: retryAction && backAction ? backAction : supportAction ?? null,
303
- tertiary: retryAction && backAction ? supportAction ?? null : null
304
- };
305
- }
306
- }
307
- function ActionGroup({
308
- primaryAction,
309
- secondaryAction,
310
- tertiaryAction
311
- }) {
312
- const actions = [primaryAction, secondaryAction, tertiaryAction].filter(Boolean);
313
- if (actions.length === 0) {
314
- return null;
315
- }
316
- return /* @__PURE__ */ jsx7(Group4, { gap: "sm", justify: "center", wrap: "wrap", children: actions.map((actionConfig, index) => /* @__PURE__ */ jsx7(
317
- SemanticButton,
318
- {
319
- action: actionConfig.action,
320
- onClick: actionConfig.onClick,
321
- loading: actionConfig.loading,
322
- disabled: actionConfig.disabled,
323
- color: actionConfig.color,
324
- variant: actionConfig.variant ?? (index === 0 ? "filled" : "default")
325
- },
326
- `${actionConfig.action}-${index}`
327
- )) });
328
- }
329
- function AccessRecoveryPanel({
330
- state,
331
- title,
332
- description,
333
- primaryAction,
334
- secondaryAction,
335
- tertiaryAction,
336
- onRetry,
337
- onSignIn,
338
- onBack,
339
- supportAction,
340
- compact = false
341
- }) {
342
- const { t } = useGdsTranslation3();
343
- const defaultCopy = defaultCopyByState[state];
344
- const defaults = defaultActionsForState(state, {
345
- onRetry,
346
- onSignIn,
347
- onBack,
348
- supportAction
349
- });
350
- return /* @__PURE__ */ jsx7(
351
- StateBlock,
352
- {
353
- variant: stateBlockVariantByState[state],
354
- compact,
355
- title: title ?? t(`gds.accessRecovery.${state}.title`, defaultCopy.title),
356
- description: description ?? t(`gds.accessRecovery.${state}.description`, defaultCopy.description),
357
- action: /* @__PURE__ */ jsx7(
358
- ActionGroup,
359
- {
360
- primaryAction: primaryAction ?? defaults.primary,
361
- secondaryAction: secondaryAction ?? defaults.secondary,
362
- tertiaryAction: tertiaryAction ?? defaults.tertiary
363
- }
364
- )
365
- }
366
- );
367
- }
368
-
369
- export {
370
- SemanticButton,
371
- ConfirmDialog,
372
- ThemeToggle,
373
- GameBoardTile,
374
- DocsCodeBlock,
375
- UploadDropzone,
376
- AccessRecoveryPanel
377
- };