@cerberus-design/react 0.12.0-next-635644c → 0.12.0-next-d7d547a

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 (34) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.cts +81 -0
  2. package/build/legacy/context/notification-center.cjs +1 -1
  3. package/build/legacy/context/notification-center.cjs.map +1 -1
  4. package/build/legacy/hooks/useDate.cjs +122 -0
  5. package/build/legacy/hooks/useDate.cjs.map +1 -0
  6. package/build/legacy/index.cjs +100 -5
  7. package/build/legacy/index.cjs.map +1 -1
  8. package/build/modern/_tsup-dts-rollup.d.ts +81 -0
  9. package/build/modern/{chunk-ZBMA5G54.js → chunk-7MM5KYEX.js} +4 -4
  10. package/build/modern/chunk-CZND26FC.js +98 -0
  11. package/build/modern/chunk-CZND26FC.js.map +1 -0
  12. package/build/modern/{chunk-3FCUTX4S.js → chunk-J4LOSTEP.js} +13 -13
  13. package/build/modern/{chunk-ON64MA6L.js → chunk-KFGI37CO.js} +12 -12
  14. package/build/modern/{chunk-PNR7ZUAR.js → chunk-KUT2YEEQ.js} +7 -7
  15. package/build/modern/chunk-KUT2YEEQ.js.map +1 -0
  16. package/build/modern/{chunk-IFD2BUUW.js → chunk-NCUHRVW2.js} +15 -15
  17. package/build/modern/components/FileStatus.js +2 -2
  18. package/build/modern/context/confirm-modal.js +5 -5
  19. package/build/modern/context/cta-modal.js +5 -5
  20. package/build/modern/context/notification-center.js +3 -3
  21. package/build/modern/context/prompt-modal.js +6 -6
  22. package/build/modern/hooks/useDate.js +14 -0
  23. package/build/modern/hooks/useDate.js.map +1 -0
  24. package/build/modern/index.js +39 -29
  25. package/build/modern/index.js.map +1 -1
  26. package/package.json +3 -3
  27. package/src/context/notification-center.tsx +1 -1
  28. package/src/hooks/useDate.ts +164 -0
  29. package/src/index.ts +1 -0
  30. package/build/modern/chunk-PNR7ZUAR.js.map +0 -1
  31. /package/build/modern/{chunk-ZBMA5G54.js.map → chunk-7MM5KYEX.js.map} +0 -0
  32. /package/build/modern/{chunk-3FCUTX4S.js.map → chunk-J4LOSTEP.js.map} +0 -0
  33. /package/build/modern/{chunk-ON64MA6L.js.map → chunk-KFGI37CO.js.map} +0 -0
  34. /package/build/modern/{chunk-IFD2BUUW.js.map → chunk-NCUHRVW2.js.map} +0 -0
@@ -1,26 +1,32 @@
1
+ import {
2
+ PromptModal,
3
+ usePromptModal
4
+ } from "./chunk-NCUHRVW2.js";
1
5
  import {
2
6
  ThemeProvider,
3
7
  useThemeContext
4
8
  } from "./chunk-EB37HRCN.js";
9
+ import {
10
+ Toggle
11
+ } from "./chunk-NMNONSHU.js";
5
12
  import {
6
13
  Tooltip
7
14
  } from "./chunk-KML4CTMK.js";
8
15
  import {
9
16
  ConfirmModal,
10
17
  useConfirmModal
11
- } from "./chunk-ON64MA6L.js";
18
+ } from "./chunk-KFGI37CO.js";
12
19
  import {
13
20
  CTAModal,
14
21
  useCTAModal
15
- } from "./chunk-3FCUTX4S.js";
22
+ } from "./chunk-J4LOSTEP.js";
16
23
  import {
17
24
  NotificationCenter,
18
25
  useNotificationCenter
19
- } from "./chunk-PNR7ZUAR.js";
26
+ } from "./chunk-KUT2YEEQ.js";
20
27
  import {
21
- PromptModal,
22
- usePromptModal
23
- } from "./chunk-IFD2BUUW.js";
28
+ TabPanel
29
+ } from "./chunk-AYIRV5CL.js";
24
30
  import {
25
31
  Table,
26
32
  Tr
@@ -44,8 +50,8 @@ import {
44
50
  Thead
45
51
  } from "./chunk-Y6QQCRQV.js";
46
52
  import {
47
- Toggle
48
- } from "./chunk-NMNONSHU.js";
53
+ Portal
54
+ } from "./chunk-K2PSHGS7.js";
49
55
  import {
50
56
  Radio
51
57
  } from "./chunk-FTPZHG6J.js";
@@ -63,8 +69,8 @@ import {
63
69
  TabList
64
70
  } from "./chunk-UKPF7JOB.js";
65
71
  import {
66
- TabPanel
67
- } from "./chunk-AYIRV5CL.js";
72
+ ModalHeader
73
+ } from "./chunk-ZFAIE47A.js";
68
74
  import {
69
75
  ModalHeading
70
76
  } from "./chunk-2UXE5PDG.js";
@@ -92,8 +98,8 @@ import {
92
98
  NotificationHeading
93
99
  } from "./chunk-SXIXDXG3.js";
94
100
  import {
95
- Portal
96
- } from "./chunk-K2PSHGS7.js";
101
+ FileUploader
102
+ } from "./chunk-W4DXACNV.js";
97
103
  import {
98
104
  Input
99
105
  } from "./chunk-NKM6PISB.js";
@@ -119,8 +125,8 @@ import {
119
125
  ModalDescription
120
126
  } from "./chunk-Q7BRMIBR.js";
121
127
  import {
122
- ModalHeader
123
- } from "./chunk-ZFAIE47A.js";
128
+ Checkbox
129
+ } from "./chunk-NB6DV4VA.js";
124
130
  import {
125
131
  CircularProgress
126
132
  } from "./chunk-6QHOKCV3.js";
@@ -143,7 +149,7 @@ import {
143
149
  import {
144
150
  FileStatus,
145
151
  processStatus
146
- } from "./chunk-ZBMA5G54.js";
152
+ } from "./chunk-7MM5KYEX.js";
147
153
  import {
148
154
  ProgressBar
149
155
  } from "./chunk-KCANMM64.js";
@@ -154,8 +160,12 @@ import {
154
160
  FieldMessage
155
161
  } from "./chunk-JWIJHSI6.js";
156
162
  import {
157
- FileUploader
158
- } from "./chunk-W4DXACNV.js";
163
+ Field,
164
+ useFieldContext
165
+ } from "./chunk-UZDVOIW5.js";
166
+ import {
167
+ useModal
168
+ } from "./chunk-KGQG5JGW.js";
159
169
  import {
160
170
  MODE_KEY,
161
171
  THEME_KEY,
@@ -175,19 +185,12 @@ import {
175
185
  import {
176
186
  Avatar
177
187
  } from "./chunk-SPZYPRZ6.js";
178
- import {
179
- Button
180
- } from "./chunk-EXGKZGML.js";
181
- import {
182
- Checkbox
183
- } from "./chunk-NB6DV4VA.js";
184
- import {
185
- Field,
186
- useFieldContext
187
- } from "./chunk-UZDVOIW5.js";
188
188
  import {
189
189
  Show
190
190
  } from "./chunk-BUVVRQLZ.js";
191
+ import {
192
+ Button
193
+ } from "./chunk-EXGKZGML.js";
191
194
  import "./chunk-55J6XMHW.js";
192
195
  import {
193
196
  createNavTriggerProps
@@ -211,8 +214,11 @@ import "./chunk-F27AAKQ3.js";
211
214
  import "./chunk-CP7OUC2Q.js";
212
215
  import "./chunk-HVKM54BA.js";
213
216
  import {
214
- useModal
215
- } from "./chunk-KGQG5JGW.js";
217
+ DateFormats,
218
+ formatMilitaryDate,
219
+ formatMilitaryToISO,
220
+ useDate
221
+ } from "./chunk-CZND26FC.js";
216
222
 
217
223
  // src/index.ts
218
224
  export * from "@dnd-kit/core";
@@ -227,6 +233,7 @@ export {
227
233
  Checkbox,
228
234
  CircularProgress,
229
235
  ConfirmModal,
236
+ DateFormats,
230
237
  Droppable,
231
238
  FeatureFlag,
232
239
  FeatureFlags,
@@ -287,12 +294,15 @@ export {
287
294
  Tr,
288
295
  createNavTriggerProps,
289
296
  defineIcons,
297
+ formatMilitaryDate,
298
+ formatMilitaryToISO,
290
299
  formatNotifyCount,
291
300
  getPosition,
292
301
  processStatus,
293
302
  trapFocus,
294
303
  useCTAModal,
295
304
  useConfirmModal,
305
+ useDate,
296
306
  useFeatureFlags,
297
307
  useFieldContext,
298
308
  useModal,
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,cAAc;","names":[]}
1
+ {"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// components\n\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/Button'\nexport * from './components/Checkbox'\nexport * from './components/CircularProgress'\nexport * from './components/Droppable'\nexport * from './components/FieldMessage'\nexport * from './components/FeatureFlag'\nexport * from './components/Fieldset'\nexport * from './components/FieldsetLabel'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/IconButton'\nexport * from './components/Input'\nexport * from './components/Label'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Modal'\nexport * from './components/ModalHeader'\nexport * from './components/ModalHeading'\nexport * from './components/ModalDescription'\nexport * from './components/NavMenuTrigger'\nexport * from './components/NavMenuList'\nexport * from './components/NavMenuLink'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/Radio'\nexport * from './components/Select'\nexport * from './components/Spinner'\nexport * from './components/Tab'\nexport * from './components/TabList'\nexport * from './components/TabPanel'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Textarea'\nexport * from './components/Toggle'\nexport * from './components/Tooltip'\nexport * from './components/Show'\n\n// context\n\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/field'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useTheme'\nexport * from './hooks/useToggle'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/tabs.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/defineIcons'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFA,cAAc;","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cerberus-design/react",
3
- "version": "0.12.0-next-635644c",
3
+ "version": "0.12.0-next-d7d547a",
4
4
  "description": "The Cerberus Design React component library.",
5
5
  "browserslist": "> 0.25%, not dead",
6
6
  "sideEffects": false,
@@ -26,8 +26,8 @@
26
26
  "react": "^18",
27
27
  "react-dom": "^18",
28
28
  "tsup": "^8.1.0",
29
- "@cerberus-design/styled-system": "0.12.0-next-635644c",
30
- "@cerberus-design/configs": "0.0.0"
29
+ "@cerberus-design/configs": "0.0.0",
30
+ "@cerberus-design/styled-system": "0.12.0-next-d7d547a"
31
31
  },
32
32
  "publishConfig": {
33
33
  "access": "public"
@@ -136,7 +136,7 @@ export function NotificationCenter(
136
136
  palette="action"
137
137
  shape="rounded"
138
138
  size="sm"
139
- usage="text"
139
+ usage="ghost"
140
140
  >
141
141
  Close all
142
142
  </Button>
@@ -0,0 +1,164 @@
1
+ 'use client'
2
+
3
+ import {
4
+ useState,
5
+ useCallback,
6
+ ChangeEvent,
7
+ useMemo,
8
+ type InputHTMLAttributes,
9
+ } from 'react'
10
+
11
+ export interface UseDateBase {
12
+ /**
13
+ * The format of the date input
14
+ */
15
+ format?: string
16
+ /**
17
+ * The callback to run when the date input changes
18
+ */
19
+ onChange?: InputHTMLAttributes<HTMLInputElement>['onChange']
20
+ }
21
+
22
+ export interface UseDateOptions extends UseDateBase {
23
+ /**
24
+ * The initial value of the date input
25
+ */
26
+ initialValue?: string
27
+ }
28
+
29
+ export interface UseDateReturn extends UseDateBase {
30
+ /**
31
+ * The ISO formatted date string
32
+ */
33
+ ISO: string
34
+ /**
35
+ * The value of the date input
36
+ */
37
+ value: string
38
+ }
39
+
40
+ /**
41
+ * A hook for formatting and validating date inputs. The date format defaults to US Military format.
42
+ * @example
43
+ * ```tsx
44
+ * const MyComponent = () => {
45
+ * const date = useDate({ initialValue: '01 JAN 2024' })
46
+ * return <input onChange={date.onChange} type="text" value={date.value} />
47
+ * }
48
+ */
49
+ export function useDate(options?: UseDateOptions): UseDateReturn {
50
+ const initialValue = options?.initialValue ?? ''
51
+ const format = options?.format ?? DateFormats.USMilitary
52
+ const onChange = options?.onChange
53
+ const [value, setValue] = useState(initialValue)
54
+
55
+ const handleChange = useCallback(
56
+ (e: ChangeEvent<HTMLInputElement>) => {
57
+ const newValue = formatMilitaryDate(e.currentTarget.value)
58
+ if (onChange) onChange(e)
59
+ setValue(newValue)
60
+ },
61
+ [onChange],
62
+ )
63
+
64
+ return useMemo(
65
+ () => ({
66
+ format,
67
+ value,
68
+ ISO: formatMilitaryToISO(value),
69
+ onChange: handleChange,
70
+ }),
71
+ [format, value, handleChange],
72
+ )
73
+ }
74
+
75
+ // helpers
76
+
77
+ /**
78
+ * Converts a string in US Military format to ISO format. Used within the `useDate` hook.
79
+ * @param input The string to format
80
+ * @returns The formatted string in ISO format (YYYY-MM-DD)
81
+ */
82
+ export function formatMilitaryToISO(input: string) {
83
+ const [day, month, year] = input.split(' ')
84
+ const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))
85
+ const monthNum = monthIndex + 1
86
+ return `${year ?? '0000'}-${monthNum.toString().padStart(2, '0')}-${day.padStart(
87
+ 2,
88
+ '0',
89
+ )}`
90
+ }
91
+
92
+ /**
93
+ * Converts a string to US Military format. Used within the `useDate` hook.
94
+ * @param input The string to format
95
+ * @returns The formatted string in US Military format (DD MMM YYYY)
96
+ */
97
+ export function formatMilitaryDate(input: string): string {
98
+ let formatted = input.toUpperCase().replace(/[^0-9A-Z]/g, '')
99
+ let day = ''
100
+ let month = ''
101
+ let year = ''
102
+
103
+ // Format day
104
+ if (formatted.length >= 2) {
105
+ day = formatted.replace(/[^0-9]/g, '').slice(0, 2)
106
+ const dayNum = parseInt(day, 10)
107
+ if (dayNum > 31) day = '31'
108
+ else if (dayNum === 0) day = '01'
109
+ formatted = formatted.slice(2)
110
+ }
111
+
112
+ // Format month
113
+ if (formatted.length >= 3) {
114
+ month = formatted.slice(0, 3)
115
+ const monthIndex = MONTHS.findIndex((m) => m.startsWith(month))
116
+ if (monthIndex !== -1) {
117
+ month = MONTHS[monthIndex]
118
+ } else {
119
+ month = month.replace(/[^A-Z]/g, '')
120
+ }
121
+ formatted = formatted.slice(3)
122
+ }
123
+
124
+ // Format year
125
+ if (formatted.length > 0) {
126
+ year = formatted.slice(0, 4)
127
+ }
128
+
129
+ return [day, month, year].filter(Boolean).join(' ')
130
+ }
131
+
132
+ /**
133
+ * Date formatting options
134
+ * @example
135
+ * ```tsx
136
+ * const date = new Date()
137
+ * const formatted = date.format(DateFormats.USMilitary)
138
+ */
139
+ export const DateFormats = {
140
+ get ISO() {
141
+ return 'YYYY-MM-DD'
142
+ },
143
+ get USMilitary() {
144
+ return 'DD MMM YYYY'
145
+ },
146
+ get Months() {
147
+ return MONTHS
148
+ },
149
+ }
150
+
151
+ const MONTHS = [
152
+ 'JAN',
153
+ 'FEB',
154
+ 'MAR',
155
+ 'APR',
156
+ 'MAY',
157
+ 'JUN',
158
+ 'JUL',
159
+ 'AUG',
160
+ 'SEP',
161
+ 'OCT',
162
+ 'NOV',
163
+ 'DEC',
164
+ ]
package/src/index.ts CHANGED
@@ -65,6 +65,7 @@ export * from './context/theme'
65
65
 
66
66
  // hooks
67
67
 
68
+ export * from './hooks/useDate'
68
69
  export * from './hooks/useModal'
69
70
  export * from './hooks/useTheme'
70
71
  export * from './hooks/useToggle'
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n /**\n * The palette of the notification.\n * @default 'info'\n */\n palette: 'info' | 'success' | 'warning' | 'danger'\n /**\n * The heading of the notification.\n */\n heading: string\n /**\n * The unique id of the notification.\n */\n id?: string\n /**\n * The description of the notification.\n */\n description?: ReactNode\n /**\n * The action to take when the notification is closed\n */\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n const styles = notification()\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const handleCloseAll = useCallback(() => {\n setActiveNotifications((prev) => {\n prev.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n return []\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={activeNotifications.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"text\"\n >\n Close all\n </Button>\n </Show>\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <MatchNotification\n key={option.id}\n {...option}\n onClose={handleClose}\n />\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n onClose: (e: MouseEvent<HTMLButtonElement>) => void\n key: string | undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n const { palette, id, onClose, heading, description } = props\n\n switch (palette) {\n case 'success':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"success\"\n >\n <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"success\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'warning':\n return (\n <Notification\n id={id!}\n key={id}\n onClose={onClose}\n open\n palette=\"warning\"\n >\n <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"warning\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'danger':\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"danger\">\n <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"danger\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'info':\n default:\n return (\n <Notification id={id!} key={id} onClose={onClose} open palette=\"info\">\n <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"info\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n }\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n"],"mappings":"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","names":[]}