@cerberus-design/react 0.13.2-next-4bdc7c3 → 0.13.2-next-46f23d2

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 (114) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.cts +49 -22
  2. package/build/legacy/components/Admonition.cjs.map +1 -1
  3. package/build/legacy/components/Avatar.cjs.map +1 -1
  4. package/build/legacy/components/Checkbox.cjs.map +1 -1
  5. package/build/legacy/components/FileStatus.cjs.map +1 -1
  6. package/build/legacy/components/FileUploader.cjs.map +1 -1
  7. package/build/legacy/components/Input.cjs.map +1 -1
  8. package/build/legacy/components/Notification.cjs.map +1 -1
  9. package/build/legacy/components/NotificationDescription.cjs.map +1 -1
  10. package/build/legacy/components/NotificationHeading.cjs.map +1 -1
  11. package/build/legacy/components/ProgressBar.cjs.map +1 -1
  12. package/build/legacy/components/Select.cjs.map +1 -1
  13. package/build/legacy/components/Tag.cjs.map +1 -1
  14. package/build/legacy/components/Text.cjs +59 -0
  15. package/build/legacy/components/Text.cjs.map +1 -0
  16. package/build/legacy/components/Toggle.cjs.map +1 -1
  17. package/build/legacy/config/cerbIcons.cjs.map +1 -1
  18. package/build/legacy/config/defineIcons.cjs.map +1 -1
  19. package/build/legacy/config/icons/checkbox.icons.cjs.map +1 -1
  20. package/build/legacy/context/confirm-modal.cjs.map +1 -1
  21. package/build/legacy/context/cta-modal.cjs +2 -3
  22. package/build/legacy/context/cta-modal.cjs.map +1 -1
  23. package/build/legacy/context/notification-center.cjs.map +1 -1
  24. package/build/legacy/context/prompt-modal.cjs.map +1 -1
  25. package/build/legacy/index.cjs +118 -86
  26. package/build/legacy/index.cjs.map +1 -1
  27. package/build/modern/_tsup-dts-rollup.d.ts +49 -22
  28. package/build/modern/chunk-2ZNIYPDV.js +47 -0
  29. package/build/modern/chunk-2ZNIYPDV.js.map +1 -0
  30. package/build/modern/{chunk-7SGPJM66.js → chunk-35L6DOHE.js} +2 -2
  31. package/build/modern/chunk-35L6DOHE.js.map +1 -0
  32. package/build/modern/{chunk-XL4JREDT.js → chunk-3DGV4ESI.js} +2 -2
  33. package/build/modern/{chunk-4QBPJVEN.js → chunk-42RVVWGM.js} +4 -4
  34. package/build/modern/chunk-42RVVWGM.js.map +1 -0
  35. package/build/modern/{chunk-N4QTLDVM.js → chunk-67KLFLNR.js} +3 -3
  36. package/build/modern/{chunk-SPZYPRZ6.js → chunk-C3HYHH3H.js} +2 -2
  37. package/build/modern/{chunk-TM5AS6M6.js → chunk-CMDPTXHB.js} +3 -3
  38. package/build/modern/chunk-CMDPTXHB.js.map +1 -0
  39. package/build/modern/{chunk-CP7OUC2Q.js → chunk-E3PAEB7Y.js} +1 -1
  40. package/build/modern/chunk-E3PAEB7Y.js.map +1 -0
  41. package/build/modern/{chunk-NMNONSHU.js → chunk-MRH2EO3L.js} +2 -2
  42. package/build/modern/{chunk-622N7YRT.js → chunk-NF5WV3OW.js} +5 -6
  43. package/build/modern/chunk-NF5WV3OW.js.map +1 -0
  44. package/build/modern/{chunk-W4DXACNV.js → chunk-OFAATLPF.js} +3 -3
  45. package/build/modern/{chunk-NB6DV4VA.js → chunk-PGXJJDPH.js} +2 -2
  46. package/build/modern/{chunk-7MM5KYEX.js → chunk-RET4YOBV.js} +4 -4
  47. package/build/modern/{chunk-C3CDRCHS.js → chunk-RHHFH6JJ.js} +4 -4
  48. package/build/modern/chunk-RHHFH6JJ.js.map +1 -0
  49. package/build/modern/{chunk-SXIXDXG3.js → chunk-SLHYBPJ5.js} +1 -1
  50. package/build/modern/chunk-SLHYBPJ5.js.map +1 -0
  51. package/build/modern/{chunk-NKM6PISB.js → chunk-SVFZJYLV.js} +2 -2
  52. package/build/modern/{chunk-VERRHMW4.js → chunk-UBN2CZLV.js} +2 -2
  53. package/build/modern/{chunk-XEW6TJJ4.js → chunk-UXY3KCC3.js} +1 -1
  54. package/build/modern/chunk-UXY3KCC3.js.map +1 -0
  55. package/build/modern/{chunk-F72ZABKX.js → chunk-W3YI64C5.js} +2 -2
  56. package/build/modern/{chunk-KCANMM64.js → chunk-WZJ5UQNM.js} +1 -1
  57. package/build/modern/chunk-WZJ5UQNM.js.map +1 -0
  58. package/build/modern/{chunk-F27AAKQ3.js → chunk-XNX3OTJK.js} +2 -2
  59. package/build/modern/components/Admonition.js +5 -5
  60. package/build/modern/components/Avatar.js +4 -4
  61. package/build/modern/components/Checkbox.js +4 -4
  62. package/build/modern/components/FileStatus.js +6 -6
  63. package/build/modern/components/FileUploader.js +5 -5
  64. package/build/modern/components/Input.js +4 -4
  65. package/build/modern/components/Notification.js +4 -4
  66. package/build/modern/components/NotificationDescription.js +1 -1
  67. package/build/modern/components/NotificationHeading.js +1 -1
  68. package/build/modern/components/ProgressBar.js +1 -1
  69. package/build/modern/components/Select.js +4 -4
  70. package/build/modern/components/Tag.js +4 -4
  71. package/build/modern/components/Text.js +7 -0
  72. package/build/modern/components/Text.js.map +1 -0
  73. package/build/modern/components/Toggle.js +4 -4
  74. package/build/modern/config/cerbIcons.js +2 -2
  75. package/build/modern/config/defineIcons.js +3 -3
  76. package/build/modern/config/icons/checkbox.icons.js +1 -1
  77. package/build/modern/context/confirm-modal.js +5 -5
  78. package/build/modern/context/cta-modal.js +5 -5
  79. package/build/modern/context/notification-center.js +7 -7
  80. package/build/modern/context/prompt-modal.js +6 -6
  81. package/build/modern/index.js +24 -20
  82. package/build/modern/index.js.map +1 -1
  83. package/package.json +3 -3
  84. package/src/components/Notification.tsx +6 -3
  85. package/src/components/NotificationDescription.tsx +2 -2
  86. package/src/components/NotificationHeading.tsx +1 -2
  87. package/src/components/ProgressBar.tsx +1 -1
  88. package/src/components/Text.tsx +70 -0
  89. package/src/config/icons/checkbox.icons.tsx +2 -2
  90. package/src/context/confirm-modal.tsx +1 -1
  91. package/src/context/cta-modal.tsx +6 -7
  92. package/src/context/notification-center.tsx +1 -1
  93. package/src/context/prompt-modal.tsx +1 -1
  94. package/src/index.ts +1 -0
  95. package/build/modern/chunk-4QBPJVEN.js.map +0 -1
  96. package/build/modern/chunk-622N7YRT.js.map +0 -1
  97. package/build/modern/chunk-7SGPJM66.js.map +0 -1
  98. package/build/modern/chunk-C3CDRCHS.js.map +0 -1
  99. package/build/modern/chunk-CP7OUC2Q.js.map +0 -1
  100. package/build/modern/chunk-KCANMM64.js.map +0 -1
  101. package/build/modern/chunk-SXIXDXG3.js.map +0 -1
  102. package/build/modern/chunk-TM5AS6M6.js.map +0 -1
  103. package/build/modern/chunk-XEW6TJJ4.js.map +0 -1
  104. /package/build/modern/{chunk-XL4JREDT.js.map → chunk-3DGV4ESI.js.map} +0 -0
  105. /package/build/modern/{chunk-N4QTLDVM.js.map → chunk-67KLFLNR.js.map} +0 -0
  106. /package/build/modern/{chunk-SPZYPRZ6.js.map → chunk-C3HYHH3H.js.map} +0 -0
  107. /package/build/modern/{chunk-NMNONSHU.js.map → chunk-MRH2EO3L.js.map} +0 -0
  108. /package/build/modern/{chunk-W4DXACNV.js.map → chunk-OFAATLPF.js.map} +0 -0
  109. /package/build/modern/{chunk-NB6DV4VA.js.map → chunk-PGXJJDPH.js.map} +0 -0
  110. /package/build/modern/{chunk-7MM5KYEX.js.map → chunk-RET4YOBV.js.map} +0 -0
  111. /package/build/modern/{chunk-NKM6PISB.js.map → chunk-SVFZJYLV.js.map} +0 -0
  112. /package/build/modern/{chunk-VERRHMW4.js.map → chunk-UBN2CZLV.js.map} +0 -0
  113. /package/build/modern/{chunk-F72ZABKX.js.map → chunk-W3YI64C5.js.map} +0 -0
  114. /package/build/modern/{chunk-F27AAKQ3.js.map → chunk-XNX3OTJK.js.map} +0 -0
@@ -13,7 +13,6 @@ import {
13
13
  type MouseEvent,
14
14
  } from 'react'
15
15
  import { $cerberusIcons } from '../config/defineIcons'
16
- import type { IconType } from '../config/cerbIcons'
17
16
  import { trapFocus } from '../aria-helpers/trap-focus.aria'
18
17
 
19
18
  /**
@@ -22,9 +21,13 @@ import { trapFocus } from '../aria-helpers/trap-focus.aria'
22
21
  */
23
22
 
24
23
  function MatchNotificationIcon(props: NotificationVariantProps) {
25
- const palette = props.palette || 'info'
24
+ const palette = (props.palette || 'info') as
25
+ | 'info'
26
+ | 'success'
27
+ | 'warning'
28
+ | 'danger'
26
29
  const key = `${palette}Notification` as keyof typeof $cerberusIcons
27
- const Icon = $cerberusIcons[key] as IconType
30
+ const Icon = $cerberusIcons[key]
28
31
  return <Icon />
29
32
  }
30
33
 
@@ -10,8 +10,8 @@ import type { HTMLAttributes } from 'react'
10
10
  * @module
11
11
  */
12
12
 
13
- export interface BaseNotificationDescriptionProps
14
- extends HTMLAttributes<HTMLParagraphElement> {}
13
+ export type BaseNotificationDescriptionProps =
14
+ HTMLAttributes<HTMLParagraphElement>
15
15
  export type NotificationDescriptionProps = BaseNotificationDescriptionProps &
16
16
  NotificationVariantProps
17
17
 
@@ -10,8 +10,7 @@ import type { HTMLAttributes } from 'react'
10
10
  * @module
11
11
  */
12
12
 
13
- export interface BaseNotificationHeadingProps
14
- extends HTMLAttributes<HTMLParagraphElement> {}
13
+ export type BaseNotificationHeadingProps = HTMLAttributes<HTMLParagraphElement>
15
14
  export type NotificationHeadingProps = BaseNotificationHeadingProps &
16
15
  NotificationVariantProps
17
16
 
@@ -10,7 +10,7 @@ import type { HTMLAttributes } from 'react'
10
10
  * @module
11
11
  */
12
12
 
13
- export interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}
13
+ export type ProgressBarBaseProps = HTMLAttributes<HTMLDivElement>
14
14
  export type NonIndeterminateProgressBarProps = {
15
15
  /**
16
16
  * A unique identifier for the progress bar. Required for accessibility.
@@ -0,0 +1,70 @@
1
+ import {
2
+ Em,
3
+ H1,
4
+ H2,
5
+ H3,
6
+ H4,
7
+ H5,
8
+ H6,
9
+ P,
10
+ Small,
11
+ Span,
12
+ Strong,
13
+ type BoxProps,
14
+ } from '@cerberus-design/styled-system/jsx'
15
+ import { type PropsWithChildren } from 'react'
16
+
17
+ /**
18
+ * This module exports a component for rendering text utilizing the styled-system JSX utility.
19
+ * @module @cerberus-design/react/Text
20
+ */
21
+
22
+ export type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
23
+ export type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'
24
+
25
+ export interface TextProps extends BoxProps {
26
+ /**
27
+ * The element to render as. Defaults to 'p'.
28
+ */
29
+ as?: TextElements | Headings
30
+ }
31
+
32
+ /**
33
+ * A component for rendering text utilizing the styled-system JSX utility.
34
+ * @definition [Text docs](https://cerberus.digitalu.design/react/text)
35
+ * @example
36
+ * ```tsx
37
+ * <Text as="h1" color="page.text.100" textStyle={{
38
+ * base: 'heading-md',
39
+ * md: 'heading-lg',
40
+ * }}>
41
+ * Hello, world!
42
+ * </Text>
43
+ */
44
+ export function Text(props: PropsWithChildren<TextProps>) {
45
+ const { as = 'p', ...pandaJSXProps } = props
46
+ switch (as) {
47
+ case 'h1':
48
+ return <H1 {...pandaJSXProps} />
49
+ case 'h2':
50
+ return <H2 {...pandaJSXProps} />
51
+ case 'h3':
52
+ return <H3 {...pandaJSXProps} />
53
+ case 'h4':
54
+ return <H4 {...pandaJSXProps} />
55
+ case 'h5':
56
+ return <H5 {...pandaJSXProps} />
57
+ case 'h6':
58
+ return <H6 {...pandaJSXProps} />
59
+ case 'strong':
60
+ return <Strong {...pandaJSXProps} />
61
+ case 'em':
62
+ return <Em {...pandaJSXProps} />
63
+ case 'small':
64
+ return <Small {...pandaJSXProps} />
65
+ case 'span':
66
+ return <Span {...pandaJSXProps} />
67
+ default:
68
+ return <P {...pandaJSXProps} />
69
+ }
70
+ }
@@ -5,7 +5,7 @@ import type { SVGProps } from 'react'
5
5
  * @module
6
6
  */
7
7
 
8
- interface CheckboxIconProps extends SVGProps<SVGSVGElement> {}
8
+ export type CheckboxIconProps = SVGProps<SVGSVGElement>
9
9
 
10
10
  /**
11
11
  * Checkmark icon for Checkbox component
@@ -28,7 +28,7 @@ export function CheckmarkIcon(props: CheckboxIconProps) {
28
28
  )
29
29
  }
30
30
 
31
- interface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}
31
+ export type IndeterminateIconProps = SVGProps<SVGSVGElement>
32
32
 
33
33
  /**
34
34
  * Indeterminate icon for Checkbox component
@@ -86,7 +86,7 @@ export interface ConfirmModalValue {
86
86
 
87
87
  const ConfirmModalContext = createContext<ConfirmModalValue | null>(null)
88
88
 
89
- export interface ConfirmModalProviderProps {}
89
+ export type ConfirmModalProviderProps = PropsWithChildren<unknown>
90
90
 
91
91
  /**
92
92
  * Provides a confirm modal to the app.
@@ -6,8 +6,8 @@ import {
6
6
  useContext,
7
7
  useMemo,
8
8
  useState,
9
- type ButtonHTMLAttributes,
10
9
  type MouseEvent,
10
+ type MouseEventHandler,
11
11
  type PropsWithChildren,
12
12
  type ReactNode,
13
13
  } from 'react'
@@ -50,7 +50,7 @@ export interface ShowCTAModalOptions {
50
50
  */
51
51
  actions: {
52
52
  text: string
53
- onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>
53
+ onClick: MouseEventHandler<HTMLButtonElement>
54
54
  }[]
55
55
  }
56
56
 
@@ -60,7 +60,7 @@ export interface CTAModalValue {
60
60
 
61
61
  const CTAModalContext = createContext<CTAModalValue | null>(null)
62
62
 
63
- export interface CTAModalProviderProps {}
63
+ export type CTAModalProviderProps = PropsWithChildren<unknown>
64
64
 
65
65
  /**
66
66
  * Provides a CTA modal to the app.
@@ -99,7 +99,7 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
99
99
  const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
100
100
  const focusTrap = trapFocus(modalRef)
101
101
  const FallbackIcon = $cerberusIcons.confirmModal
102
- const confirmIcon = content?.icon as ReactNode
102
+ const confirmIcon = content?.icon
103
103
  const { close: CloseIcon } = $cerberusIcons
104
104
 
105
105
  const handleShow = useCallback(
@@ -120,9 +120,8 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
120
120
  (event: MouseEvent<HTMLButtonElement>) => {
121
121
  const index = event.currentTarget.getAttribute('data-index')
122
122
  const action = content?.actions[Number(index)]
123
- if (typeof action?.onClick === 'function') {
124
- action.onClick(event)
125
- }
123
+ const { onClick } = action || {}
124
+ onClick?.(event)
126
125
  close()
127
126
  },
128
127
  [content, close],
@@ -55,7 +55,7 @@ export interface NotificationsValue {
55
55
 
56
56
  const NotificationsContext = createContext<NotificationsValue | null>(null)
57
57
 
58
- export interface NotificationsProviderProps extends PortalProps {}
58
+ export type NotificationsProviderProps = PortalProps
59
59
 
60
60
  /**
61
61
  * Provides a notification center to the app.
@@ -85,7 +85,7 @@ export interface PromptModalValue {
85
85
 
86
86
  const PromptModalContext = createContext<PromptModalValue | null>(null)
87
87
 
88
- export interface PromptModalProviderProps {}
88
+ export type PromptModalProviderProps = PropsWithChildren<unknown>
89
89
 
90
90
  /**
91
91
  * Provides a prompt modal to the app.
package/src/index.ts CHANGED
@@ -48,6 +48,7 @@ export * from './components/Th'
48
48
  export * from './components/Td'
49
49
  export * from './components/Tbody'
50
50
  export * from './components/Tag'
51
+ export * from './components/Text'
51
52
  export * from './components/Textarea'
52
53
  export * from './components/Toggle'
53
54
  export * from './components/Tooltip'
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/context/prompt-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type ChangeEvent,\n type MouseEvent,\n type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from '../components/Show'\nimport { useModal } from '../hooks/useModal'\nimport { Modal } from '../components/Modal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module PromptModal\n */\n\nexport interface ShowPromptModalOptions {\n /**\n * The kind of prompt modal to show.\n * @default 'non-destructive'\n */\n kind?: 'destructive' | 'non-destructive'\n /**\n * The heading of the prompt modal.\n */\n heading: string\n /**\n * The description of the prompt modal.\n */\n description?: string\n /**\n * The key to confirm the action.\n */\n key: string\n /**\n * The text for the action button.\n */\n actionText: string\n /**\n * The text for the cancel button.\n */\n cancelText: string\n}\nexport type PromptShowResult =\n | ((value: string | PromiseLike<string>) => void)\n | null\n\nexport interface PromptModalValue {\n /**\n * The method to trigger the prompt modal.\n * @returns the value of the key if the action is confirmed.\n * @example\n * ```tsx\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n */\n show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport interface PromptModalProviderProps {}\n\n/**\n * Provides a prompt modal to the app.\n * @see https://cerberus.digitalu.design/react/prompt-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n * <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n props: PropsWithChildren<PromptModalProviderProps>,\n) {\n const { modalRef, show, close } = useModal()\n const resolveRef = useRef<PromptShowResult>(null)\n const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n const [inputValue, setInputValue] = useState<string>('')\n const focusTrap = trapFocus(modalRef)\n const PromptIcon = $cerberusIcons.promptModal\n\n const isValid = useMemo(\n () => inputValue === content?.key,\n [inputValue, content],\n )\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.currentTarget.value)\n },\n [content],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(inputValue)\n }\n close()\n },\n [inputValue, close],\n )\n\n const handleShow = useCallback(\n (options: ShowPromptModalOptions) => {\n return new Promise<string>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n show()\n resolveRef.current = resolve\n })\n },\n [show],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <PromptModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <ModalHeader>\n <div\n className={hstack({\n justify: 'center',\n w: 'full',\n })}\n >\n <Show\n when={palette === 'danger'}\n fallback={\n <Avatar\n ariaLabel=\"\"\n gradient=\"charon-light\"\n icon={<PromptIcon size={24} />}\n src=\"\"\n />\n }\n >\n <Avatar\n ariaLabel=\"\"\n gradient=\"hades-dark\"\n icon={<PromptIcon size={24} />}\n src=\"\"\n />\n </Show>\n </div>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n mt: '4',\n mb: '8',\n })}\n >\n <Field invalid={!isValid}>\n <Label\n className={css({\n gap: 1,\n justifyContent: 'flex-start',\n })}\n htmlFor=\"confirm\"\n size=\"md\"\n >\n Type\n <strong\n className={css({\n textTransform: 'uppercase',\n })}\n >\n {content?.key}\n </strong>\n to confirm\n </Label>\n <Input\n id=\"confirm\"\n name=\"confirm\"\n onChange={handleChange}\n type=\"text\"\n />\n </Field>\n </div>\n\n <div\n className={hstack({\n justifyContent: 'stretch',\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n disabled={!isValid}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </div>\n </Modal>\n </Portal>\n </PromptModalContext.Provider>\n )\n}\n\n/**\n * Used to retrieve the context of the PromptModal provider.\n */\nexport function usePromptModal(): PromptModalValue {\n const context = useContext(PromptModalContext)\n if (context === null) {\n throw new Error('usePromptModal must be used within a PromptModal Provider')\n }\n return context\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/context/cta-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type ButtonHTMLAttributes,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { IconButton } from '../components/IconButton'\nimport { css } from '@cerberus/styled-system/css'\nimport { VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n /**\n * The heading of the cta modal.\n */\n heading: string\n /**\n * The description of the cta modal.\n */\n description?: string\n /**\n * The icon used for the modal Avatar.\n */\n icon?: ReactNode\n /**\n * The actions for the cta modal. Max of 2 actions.\n */\n actions: {\n text: string\n onClick: Required<ButtonHTMLAttributes<HTMLButtonElement>['onClick']>\n }[]\n}\n\nexport interface CTAModalValue {\n show: (options: ShowCTAModalOptions) => void\n}\n\nconst CTAModalContext = createContext<CTAModalValue | null>(null)\n\nexport interface CTAModalProviderProps {}\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n * <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n * const userConsent = await cta.show({\n * heading: 'Create or copy a Cohort',\n * description:\n * 'Create a new cohort or copy and existing one.',\n * icon: <Copy size={24} />,\n * actions: [\n * {\n * text: 'Create Cohort',\n * onClick: () => {},\n * {\n * text: 'Copy Cohort',\n * onClick: () => {}\n * }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {\n const { modalRef, show, close } = useModal()\n const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n const focusTrap = trapFocus(modalRef)\n const FallbackIcon = $cerberusIcons.confirmModal\n const confirmIcon = content?.icon as ReactNode\n const { close: CloseIcon } = $cerberusIcons\n\n const handleShow = useCallback(\n (options: ShowCTAModalOptions) => {\n const maxActions = 2\n if (options.actions.length > maxActions) {\n throw new Error(\n `CTA Modal only supports a maximum of ${maxActions} actions.`,\n )\n }\n setContent({ ...options })\n show()\n },\n [show],\n )\n\n const handleActionClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n const index = event.currentTarget.getAttribute('data-index')\n const action = content?.actions[Number(index)]\n if (typeof action?.onClick === 'function') {\n action.onClick(event)\n }\n close()\n },\n [content, close],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <CTAModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <span\n className={css({\n padding: 'md',\n position: 'absolute',\n right: 0,\n top: 0,\n zIndex: 'decorator',\n })}\n >\n <IconButton ariaLabel=\"Close modal\" onClick={close}>\n <CloseIcon />\n </IconButton>\n </span>\n\n <VStack gap=\"xl\" w=\"full\">\n <ModalHeader>\n <VStack gap=\"lg\" w=\"full\">\n <Avatar\n ariaLabel=\"\"\n gradient=\"charon-light\"\n icon={\n <Show\n when={Boolean(confirmIcon)}\n fallback={<FallbackIcon size={24} />}\n >\n {confirmIcon}\n </Show>\n }\n src=\"\"\n />\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </VStack>\n </ModalHeader>\n\n <HStack gap=\"md\" w=\"full\">\n <Show when={Boolean(content?.actions?.length)}>\n {content?.actions?.map((action, index) => (\n <Button\n data-index={index}\n className={css({\n w: '1/2',\n })}\n key={index}\n onClick={handleActionClick}\n shape=\"rounded\"\n usage=\"outlined\"\n >\n {action.text}\n </Button>\n ))}\n </Show>\n </HStack>\n </VStack>\n </Modal>\n </Portal>\n </CTAModalContext.Provider>\n )\n}\n\nexport function useCTAModal(): CTAModalValue {\n const context = useContext(CTAModalContext)\n if (context === null) {\n throw new Error('useCTAModal must be used within a CTAModal Provider')\n }\n return context\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n const palette = props.palette || 'info'\n const key = `${palette}Notification` as keyof typeof $cerberusIcons\n const Icon = $cerberusIcons[key] as IconType\n return <Icon />\n}\n\nexport interface NotificationBaseProps\n extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n /**\n * The unique id of the notification. Required for the onClose callback.\n */\n id: string\n /**\n * Called when the close button is clicked.\n */\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n * <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n * This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n const { children, palette, onClose, ...nativeProps } = props\n const ref = useRef<HTMLDialogElement>(null)\n const onKeyDown = trapFocus(ref)\n const styles = notification({ palette })\n const { close: CloseIcon } = $cerberusIcons\n\n return (\n <dialog\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n position: 'relative',\n gap: '4',\n }),\n styles.dialog,\n )}\n onKeyDown={onKeyDown}\n ref={ref}\n >\n <span className={styles.icon}>\n <MatchNotificationIcon palette={palette} />\n </span>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0',\n py: '2',\n })}\n >\n {children}\n </div>\n\n <button\n aria-label=\"Close\"\n className={styles.close}\n onClick={onClose}\n value={props.id}\n >\n <CloseIcon />\n </button>\n </dialog>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AAcE,cAuCL,YAvCK;AAJT,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAU,MAAM,WAAW;AACjC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AA8BO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,QAAM,EAAE,OAAO,UAAU,IAAI;AAE7B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,YAEb,8BAAC,aAAU;AAAA;AAAA,QACb;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -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=\"ghost\"\n >\n Close all\n </Button>\n </Show>\n\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":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/config/icons/checkbox.icons.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n"],"mappings":";AAsBM;AAVC,SAAS,cAAc,OAA0B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,8BAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/ProgressBar.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n progressBar,\n type ProgressBarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ProgressBar component.\n * @module\n */\n\nexport interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}\nexport type NonIndeterminateProgressBarProps = {\n /**\n * A unique identifier for the progress bar. Required for accessibility.\n */\n id: string\n /**\n * A description label for the progress bar. Required for accessibility.\n */\n label: string\n /**\n * The state of the progress bar.\n */\n indeterminate?: never\n /**\n * The current value of the progress bar.\n */\n now: number\n}\nexport type IndeterminateProgressBarProps = {\n /**\n * A unique identifier for the progress bar. Required for accessibility.\n */\n id: string\n /**\n * A description label for the progress bar. Required for accessibility.\n */\n label: string\n /**\n * The state of the progress bar.\n */\n indeterminate?: true\n /**\n * The current value of the progress bar.\n */\n now?: never\n}\nexport type ProgressBarProps = ProgressBarBaseProps &\n ProgressBarVariantProps &\n (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)\n\n/**\n * The ProgressBar component is used to display the progress of a task.\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n const { indeterminate, size, usage, now, label, ...nativeProps } = props\n const styles = progressBar({ size, usage })\n const nowClamped = Math.min(100, Math.max(0, now || 0))\n const width = {\n width: indeterminate ? '50%' : `${nowClamped}%`,\n }\n\n return (\n <div\n {...nativeProps}\n aria-label={label}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={indeterminate ? 0 : nowClamped}\n className={cx(nativeProps.className, styles.root)}\n role=\"progressbar\"\n >\n <div\n {...(indeterminate && { 'data-indeterminate': true })}\n data-complete={nowClamped === 100}\n className={styles.bar}\n style={width}\n />\n </div>\n )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AA2ED;AAlBC,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,eAAe,MAAM,OAAO,KAAK,OAAO,GAAG,YAAY,IAAI;AACnE,QAAM,SAAS,YAAY,EAAE,MAAM,MAAM,CAAC;AAC1C,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACtD,QAAM,QAAQ;AAAA,IACZ,OAAO,gBAAgB,QAAQ,GAAG,UAAU;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY;AAAA,MACZ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,IAAI;AAAA,MACnC,WAAW,GAAG,YAAY,WAAW,OAAO,IAAI;AAAA,MAChD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,iBAAiB,EAAE,sBAAsB,KAAK;AAAA,UACnD,iBAAe,eAAe;AAAA,UAC9B,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/NotificationHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nexport interface BaseNotificationHeadingProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n NotificationVariantProps\n\n/**\n * Used to render the heading of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAuBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE,oBAAC,OAAE,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface BaseConfirmOptions {\n /**\n * The heading of the confirm modal.\n */\n heading: string\n /**\n * The text for the action button.\n */\n actionText: string\n /**\n * The text for the cancel button.\n */\n cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n /**\n * The kind of confirm modal to show.\n */\n kind?: 'destructive'\n /**\n * The description of the confirm modal. Can only be a string for destructive confirm modals.\n */\n description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n /**\n * The kind of confirm modal to show.\n * @default 'non-destructive'\n */\n kind?: 'non-destructive'\n /**\n * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n * @example\n * ```tsx\n * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n */\n description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n | NonDestructiveConfirmModalOptions\n | DestructiveConfirmOptions\n\nexport type ShowResult =\n | ((value: boolean | PromiseLike<boolean>) => void)\n | null\n\nexport interface ConfirmModalValue {\n show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport interface ConfirmModalProviderProps {}\n\n/**\n * Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n * <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n * const userConsent = await confirm.show({\n * heading: 'Add new payment method?',\n * description:\n * 'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n const { modalRef, show, close } = useModal()\n const resolveRef = useRef<ShowResult>(null)\n const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n const focusTrap = trapFocus(modalRef)\n const ConfirmIcon = $cerberusIcons.confirmModal\n const kind = content?.kind ?? 'non-destructive'\n\n const palette = useMemo(\n () => (kind === 'destructive' ? 'danger' : 'action'),\n [kind],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(true)\n }\n resolveRef.current?.(false)\n close()\n },\n [close],\n )\n\n const handleShow = useCallback(\n (options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options })\n show()\n resolveRef.current = resolve\n })\n },\n [show],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <ConfirmModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <VStack gap=\"xl\" w=\"full\">\n <ModalHeader>\n <div\n className={hstack({\n justify: 'center',\n w: 'full',\n })}\n >\n <Show\n when={palette === 'danger'}\n fallback={\n <Avatar\n ariaLabel=\"\"\n gradient=\"charon-light\"\n icon={<ConfirmIcon size={24} />}\n src=\"\"\n />\n }\n >\n <Avatar\n ariaLabel=\"\"\n gradient=\"hades-dark\"\n icon={<ConfirmIcon size={24} />}\n src=\"\"\n />\n </Show>\n </div>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\n\n <HStack gap=\"4\" w=\"full\">\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </HStack>\n </VStack>\n </Modal>\n </Portal>\n </ConfirmModalContext.Provider>\n )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n const context = useContext(ConfirmModalContext)\n if (context === null) {\n throw new Error(\n 'useConfirmModal must be used within a ConfirmModal Provider',\n )\n }\n return context\n}\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/NotificationDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nexport interface BaseNotificationDescriptionProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n NotificationVariantProps\n\n/**\n * Used to render the description of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p\n className={cx(nativeProps.className, styles.description)}\n {...nativeProps}\n />\n )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAuBH;AAJG,SAAS,wBAAwB,OAAqC;AAC3E,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,YAAY,WAAW,OAAO,WAAW;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}