@cerberus-design/react 0.18.3 → 0.18.4

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 (160) hide show
  1. package/build/legacy/_tsup-dts-rollup.d.cts +87 -25
  2. package/build/legacy/components/FileStatus.cjs +34 -26
  3. package/build/legacy/components/FileStatus.cjs.map +1 -1
  4. package/build/legacy/components/Text.cjs +17 -23
  5. package/build/legacy/components/Text.cjs.map +1 -1
  6. package/build/legacy/components/checkbox/checkbox.cjs +17 -23
  7. package/build/legacy/components/checkbox/checkbox.cjs.map +1 -1
  8. package/build/legacy/components/checkbox/index.cjs +17 -23
  9. package/build/legacy/components/checkbox/index.cjs.map +1 -1
  10. package/build/legacy/components/cta-dialog/index.cjs +44 -35
  11. package/build/legacy/components/cta-dialog/index.cjs.map +1 -1
  12. package/build/legacy/components/cta-dialog/provider.cjs +44 -35
  13. package/build/legacy/components/cta-dialog/provider.cjs.map +1 -1
  14. package/build/legacy/components/date-picker/date-picker.cjs.map +1 -1
  15. package/build/legacy/components/date-picker/day-view.d.cts +1 -1
  16. package/build/legacy/components/date-picker/index.cjs +29 -21
  17. package/build/legacy/components/date-picker/index.cjs.map +1 -1
  18. package/build/legacy/components/date-picker/index.d.cts +6 -0
  19. package/build/legacy/components/date-picker/input.cjs +2 -2
  20. package/build/legacy/components/date-picker/input.cjs.map +1 -1
  21. package/build/legacy/components/date-picker/range-input.cjs +2 -9
  22. package/build/legacy/components/date-picker/range-input.cjs.map +1 -1
  23. package/build/legacy/components/deprecated/Label.cjs.map +1 -1
  24. package/build/legacy/components/dialog/close-icon-trigger.cjs.map +1 -1
  25. package/build/legacy/components/dialog/dialog.cjs +2 -2
  26. package/build/legacy/components/dialog/dialog.cjs.map +1 -1
  27. package/build/legacy/components/dialog/index.cjs +2 -2
  28. package/build/legacy/components/dialog/index.cjs.map +1 -1
  29. package/build/legacy/components/dialog/index.d.cts +1 -0
  30. package/build/legacy/components/dialog/parts.cjs +2 -2
  31. package/build/legacy/components/dialog/parts.cjs.map +1 -1
  32. package/build/legacy/components/dialog/primitives.cjs +2 -2
  33. package/build/legacy/components/dialog/primitives.cjs.map +1 -1
  34. package/build/legacy/components/field/field.cjs +15 -9
  35. package/build/legacy/components/field/field.cjs.map +1 -1
  36. package/build/legacy/components/field/helper-text.cjs +53 -0
  37. package/build/legacy/components/field/helper-text.cjs.map +1 -0
  38. package/build/legacy/components/field/helper-text.d.cts +1 -0
  39. package/build/legacy/components/field/index.cjs +15 -9
  40. package/build/legacy/components/field/index.cjs.map +1 -1
  41. package/build/legacy/components/field/parts.cjs +0 -1
  42. package/build/legacy/components/field/parts.cjs.map +1 -1
  43. package/build/legacy/components/field/primitives.cjs +0 -1
  44. package/build/legacy/components/field/primitives.cjs.map +1 -1
  45. package/build/legacy/context/confirm-modal.cjs +85 -58
  46. package/build/legacy/context/confirm-modal.cjs.map +1 -1
  47. package/build/legacy/context/field.cjs.map +1 -1
  48. package/build/legacy/context/prompt-modal.cjs +120 -118
  49. package/build/legacy/context/prompt-modal.cjs.map +1 -1
  50. package/build/legacy/index.cjs +767 -715
  51. package/build/legacy/index.cjs.map +1 -1
  52. package/build/legacy/index.d.cts +11 -0
  53. package/build/legacy/types.cjs.map +1 -1
  54. package/build/legacy/types.d.cts +1 -0
  55. package/build/modern/_tsup-dts-rollup.d.ts +87 -25
  56. package/build/modern/chunk-2U2JYN3D.js +15 -0
  57. package/build/modern/chunk-2U2JYN3D.js.map +1 -0
  58. package/build/modern/chunk-ADI4DOEW.js +17 -0
  59. package/build/modern/chunk-ADI4DOEW.js.map +1 -0
  60. package/build/modern/{chunk-GBCF6DOS.js → chunk-AN65HXHS.js} +2 -2
  61. package/build/modern/{chunk-Z2KBUTCO.js → chunk-BMDNCJUB.js} +2 -2
  62. package/build/modern/chunk-BMDNCJUB.js.map +1 -0
  63. package/build/modern/{chunk-F3XFJHGR.js → chunk-D7PY357P.js} +2 -2
  64. package/build/modern/{chunk-ILROS7ST.js → chunk-DVCTN3GN.js} +2 -2
  65. package/build/modern/{chunk-NP73HOHI.js → chunk-GJBUGESH.js} +3 -3
  66. package/build/modern/{chunk-NP73HOHI.js.map → chunk-GJBUGESH.js.map} +1 -1
  67. package/build/modern/{chunk-KABRV6TB.js → chunk-JXWNDJJW.js} +3 -3
  68. package/build/modern/{chunk-SSR3CWJZ.js → chunk-LUGOJGMO.js} +4 -4
  69. package/build/modern/chunk-LUGOJGMO.js.map +1 -0
  70. package/build/modern/{chunk-3IT3V3YA.js → chunk-M3TZCQ7J.js} +4 -4
  71. package/build/modern/{chunk-WEL43I6Y.js → chunk-OK3VJFQL.js} +1 -2
  72. package/build/modern/{chunk-WEL43I6Y.js.map → chunk-OK3VJFQL.js.map} +1 -1
  73. package/build/modern/{chunk-ADZRQNW3.js → chunk-P7FPAUWN.js} +3 -9
  74. package/build/modern/chunk-P7FPAUWN.js.map +1 -0
  75. package/build/modern/{chunk-OY7BOKWW.js → chunk-QBA6KLL7.js} +2 -2
  76. package/build/modern/chunk-RMSM3XPV.js +218 -0
  77. package/build/modern/chunk-RMSM3XPV.js.map +1 -0
  78. package/build/modern/{chunk-LEBDLXJE.js → chunk-RTLS6K4E.js} +9 -6
  79. package/build/modern/chunk-RTLS6K4E.js.map +1 -0
  80. package/build/modern/{chunk-A5UXCB4L.js → chunk-SHBKM6EW.js} +43 -34
  81. package/build/modern/chunk-SHBKM6EW.js.map +1 -0
  82. package/build/modern/{chunk-CEJIKL6N.js → chunk-T44C3KQO.js} +1 -1
  83. package/build/modern/chunk-T44C3KQO.js.map +1 -0
  84. package/build/modern/{chunk-V6EAWUCQ.js → chunk-TRT6OCHJ.js} +2 -2
  85. package/build/modern/chunk-WSOITM7D.js +182 -0
  86. package/build/modern/chunk-WSOITM7D.js.map +1 -0
  87. package/build/modern/chunk-ZPHPCKAG.js +41 -0
  88. package/build/modern/chunk-ZPHPCKAG.js.map +1 -0
  89. package/build/modern/components/FileStatus.js +5 -4
  90. package/build/modern/components/Text.js +1 -1
  91. package/build/modern/components/admonition/admonition.js +2 -2
  92. package/build/modern/components/admonition/index.js +2 -2
  93. package/build/modern/components/checkbox/checkbox.js +2 -2
  94. package/build/modern/components/checkbox/index.js +2 -2
  95. package/build/modern/components/cta-dialog/index.js +5 -5
  96. package/build/modern/components/cta-dialog/provider.js +5 -5
  97. package/build/modern/components/date-picker/date-picker.js +1 -1
  98. package/build/modern/components/date-picker/day-view.d.ts +1 -1
  99. package/build/modern/components/date-picker/index.d.ts +6 -0
  100. package/build/modern/components/date-picker/index.js +16 -5
  101. package/build/modern/components/date-picker/input.js +1 -1
  102. package/build/modern/components/date-picker/range-input.js +1 -2
  103. package/build/modern/components/deprecated/Label.js +5 -4
  104. package/build/modern/components/dialog/close-icon-trigger.js +2 -2
  105. package/build/modern/components/dialog/dialog.js +2 -2
  106. package/build/modern/components/dialog/index.d.ts +1 -0
  107. package/build/modern/components/dialog/index.js +4 -4
  108. package/build/modern/components/dialog/parts.js +2 -2
  109. package/build/modern/components/dialog/primitives.js +1 -1
  110. package/build/modern/components/field/field.js +3 -2
  111. package/build/modern/components/field/helper-text.d.ts +1 -0
  112. package/build/modern/components/field/helper-text.js +11 -0
  113. package/build/modern/components/field/index.js +4 -3
  114. package/build/modern/components/field/parts.js +2 -2
  115. package/build/modern/components/field/primitives.js +1 -1
  116. package/build/modern/components/notifications/index.js +1 -1
  117. package/build/modern/context/confirm-modal.js +5 -5
  118. package/build/modern/context/field.js +1 -1
  119. package/build/modern/context/prompt-modal.js +10 -9
  120. package/build/modern/index.d.ts +11 -0
  121. package/build/modern/index.js +52 -40
  122. package/build/modern/index.js.map +1 -1
  123. package/build/modern/types.d.ts +1 -0
  124. package/package.json +10 -9
  125. package/src/components/Text.tsx +20 -23
  126. package/src/components/cta-dialog/provider.tsx +6 -1
  127. package/src/components/date-picker/date-picker.tsx +8 -5
  128. package/src/components/date-picker/index.ts +10 -0
  129. package/src/components/date-picker/input.tsx +1 -1
  130. package/src/components/date-picker/range-input.tsx +9 -24
  131. package/src/components/dialog/dialog.tsx +4 -2
  132. package/src/components/dialog/index.ts +4 -0
  133. package/src/components/dialog/primitives.tsx +7 -4
  134. package/src/components/field/field.tsx +11 -9
  135. package/src/components/field/helper-text.tsx +20 -0
  136. package/src/components/field/primitives.tsx +0 -3
  137. package/src/context/confirm-modal.tsx +52 -30
  138. package/src/context/prompt-modal.tsx +36 -31
  139. package/src/types.ts +21 -0
  140. package/build/modern/chunk-A5UXCB4L.js.map +0 -1
  141. package/build/modern/chunk-ADZRQNW3.js.map +0 -1
  142. package/build/modern/chunk-CEJIKL6N.js.map +0 -1
  143. package/build/modern/chunk-DHKSNGQX.js +0 -156
  144. package/build/modern/chunk-DHKSNGQX.js.map +0 -1
  145. package/build/modern/chunk-L64HQGLQ.js +0 -47
  146. package/build/modern/chunk-L64HQGLQ.js.map +0 -1
  147. package/build/modern/chunk-LEBDLXJE.js.map +0 -1
  148. package/build/modern/chunk-P7DWMM56.js +0 -210
  149. package/build/modern/chunk-P7DWMM56.js.map +0 -1
  150. package/build/modern/chunk-SSR3CWJZ.js.map +0 -1
  151. package/build/modern/chunk-U3ISYEUF.js +0 -1
  152. package/build/modern/chunk-Z2KBUTCO.js.map +0 -1
  153. /package/build/modern/{chunk-GBCF6DOS.js.map → chunk-AN65HXHS.js.map} +0 -0
  154. /package/build/modern/{chunk-F3XFJHGR.js.map → chunk-D7PY357P.js.map} +0 -0
  155. /package/build/modern/{chunk-ILROS7ST.js.map → chunk-DVCTN3GN.js.map} +0 -0
  156. /package/build/modern/{chunk-KABRV6TB.js.map → chunk-JXWNDJJW.js.map} +0 -0
  157. /package/build/modern/{chunk-3IT3V3YA.js.map → chunk-M3TZCQ7J.js.map} +0 -0
  158. /package/build/modern/{chunk-OY7BOKWW.js.map → chunk-QBA6KLL7.js.map} +0 -0
  159. /package/build/modern/{chunk-V6EAWUCQ.js.map → chunk-TRT6OCHJ.js.map} +0 -0
  160. /package/build/modern/{chunk-U3ISYEUF.js.map → components/field/helper-text.js.map} +0 -0
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/checkbox/index.ts","../../../../src/components/Show.tsx","../../../../src/components/Text.tsx","../../../../src/components/checkbox/primitives.tsx","../../../../src/components/checkbox/parts.ts","../../../../src/context/cerberus.tsx","../../../../src/components/checkbox/checkbox-icon.tsx","../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["export * from './checkbox'\nexport * from './parts'\nexport * from './primitives'\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: T | boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n const { when, children, fallback } = props\n\n if (when) {\n return <>{children}</>\n }\n\n if (fallback) {\n return <>{fallback}</>\n }\n\n return null\n}\n","import {\n Em,\n H1,\n H2,\n H3,\n H4,\n H5,\n H6,\n P,\n Small,\n Span,\n Strong,\n type PProps,\n} from 'styled-system/jsx'\n\n/**\n * This module exports a component for rendering text utilizing the styled-system JSX utility.\n * @module @cerberus/react/Text\n */\n\nexport type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'\n\n// For some reason we have to use the HTMLParagraphElement type here\n// or else TS will fail for non-style props like 'id' or 'className'\nexport interface TextProps extends PProps {\n /**\n * The element to render as. Defaults to 'p'.\n */\n as?: TextElements | Headings\n}\n\n/**\n * A component for rendering text utilizing the styled-system JSX utility.\n * @definition [Text docs](https://cerberus.digitalu.design/react/text)\n * @example\n * ```tsx\n * <Text as=\"h1\" color=\"page.text.100\" textStyle={{\n * base: 'heading-md',\n * md: 'heading-lg',\n * }}>\n * Hello, world!\n * </Text>\n */\nexport function Text(props: TextProps) {\n const { as = 'p', ...pandaJSXProps } = props\n switch (as) {\n case 'h1':\n return <H1 {...pandaJSXProps} />\n case 'h2':\n return <H2 {...pandaJSXProps} />\n case 'h3':\n return <H3 {...pandaJSXProps} />\n case 'h4':\n return <H4 {...pandaJSXProps} />\n case 'h5':\n return <H5 {...pandaJSXProps} />\n case 'h6':\n return <H6 {...pandaJSXProps} />\n case 'strong':\n return <Strong {...pandaJSXProps} />\n case 'em':\n return <Em {...pandaJSXProps} />\n case 'small':\n return <Small {...pandaJSXProps} />\n case 'span':\n return <Span {...pandaJSXProps} />\n default:\n return <P {...pandaJSXProps} />\n }\n}\n","import {\n Checkbox,\n type CheckboxControlProps,\n type CheckboxGroupProps,\n type CheckboxIndicatorProps,\n type CheckboxLabelProps,\n type CheckboxRootProps,\n} from '@ark-ui/react'\nimport { cx } from 'styled-system/css'\nimport { checkbox, type CheckboxVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the Checkbox primitives.\n * @module 'react/checkbox'\n */\n\n/**\n * Checkbox Root component used to provide the context to all other checkbox\n * primitives.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxRoot(props: CheckboxRootProps) {\n const styles = checkbox()\n return (\n <Checkbox.Root {...props} className={cx(styles.root, props.className)} />\n )\n}\n\n/**\n * Checkbox Label component used to display the label of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxLabel(\n props: CheckboxLabelProps & CheckboxVariantProps,\n) {\n const { size, ...labelProps } = props\n const styles = checkbox({ size })\n return (\n <Checkbox.Label\n {...labelProps}\n className={cx(styles.label, labelProps.className)}\n />\n )\n}\n\n/**\n * Checkbox Control component used to display the control of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxControl(\n props: CheckboxControlProps & CheckboxVariantProps,\n) {\n const { size, ...controlProps } = props\n const styles = checkbox({ size })\n return (\n <Checkbox.Control\n {...controlProps}\n className={cx(styles.control, controlProps.className)}\n />\n )\n}\n\n/**\n * Checkbox Indicator component used to display the indicator of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxIndicator(props: CheckboxIndicatorProps) {\n const styles = checkbox()\n return (\n <Checkbox.Indicator\n {...props}\n className={cx(styles.indicator, props.className)}\n />\n )\n}\n\n/**\n * Checkbox HiddenInput component used to provide the native checkbox input.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxHiddenInput(props: CheckboxControlProps) {\n return <Checkbox.HiddenInput {...props} />\n}\n\n/**\n * Checkbox Group is used to group checkboxes together in a consistently styled\n * way.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxGroup(props: CheckboxGroupProps) {\n const styles = checkbox()\n return (\n <Checkbox.Group {...props} className={cx(styles.group, props.className)} />\n )\n}\n","import type { ElementType } from 'react'\nimport {\n CheckboxRoot,\n CheckboxLabel,\n CheckboxControl,\n CheckboxIndicator,\n CheckboxHiddenInput,\n CheckboxGroup,\n} from './primitives'\n\n/**\n * This module contains the parts of the Field component.\n * @module 'field/parts'\n */\n\ninterface CheckboxPartsValue {\n /**\n * The container of the field.\n */\n Root: ElementType\n /**\n * The label of the field.\n */\n Label: ElementType\n /**\n * The control of the field.\n */\n Control: ElementType\n /**\n * The indicator of the field.\n */\n Indicator: ElementType\n /**\n * The hidden input of the field.\n */\n HiddenInput: ElementType\n /**\n * The checkbox group component.\n */\n Group: ElementType\n}\n\n/**\n * An Object containing the parts of the Checkbox component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the CheckboxParts object and\n * the entire family of components vs. only what you use.\n */\nexport const CheckboxParts: CheckboxPartsValue = {\n Root: CheckboxRoot,\n Label: CheckboxLabel,\n Control: CheckboxControl,\n Indicator: CheckboxIndicator,\n HiddenInput: CheckboxHiddenInput,\n Group: CheckboxGroup,\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n","'use client'\n\nimport { useCerberusContext } from '../../context/cerberus'\nimport { CheckboxParts } from './parts'\nimport { Show } from '../Show'\n\n/**\n * This module contains the Checkbox Icon component.\n * @module\n */\n\ninterface CheckboxIconProps {\n indeterminate?: boolean\n}\n\n/**\n * Checkbox component\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/checkbox\n * @example\n * ```tsx\n * <Field>\n * <Checkbox id=\"legal\" checked={checked.legal} onChange={handleChange} />\n * </Field>\n * ```\n */\nexport function CheckboxIcon(props: CheckboxIconProps) {\n const { icons } = useCerberusContext()\n const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons\n\n return (\n <CheckboxParts.Indicator indeterminate={props.indeterminate}>\n <Show when={props.indeterminate} fallback={<CheckIcon />}>\n <IndeterminateIcon />\n </Show>\n </CheckboxParts.Indicator>\n )\n}\n","import type { CheckboxRootProps } from '@ark-ui/react'\nimport { type CheckboxVariantProps } from 'styled-system/recipes'\nimport { Show } from '../Show'\nimport { Text } from '../Text'\nimport { CheckboxParts } from './parts'\nimport { CheckboxIcon } from './checkbox-icon'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps & CheckboxRootProps\n\n/**\n * Checkbox component is an abstraction of the primitives that displays a\n * controlled checkbox with a label.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @description [Ark Docs](https://ark-ui.com/docs/components/checkbox)\n */\nexport function Checkbox(props: CheckboxProps) {\n const { size, children, ...rootProps } = props\n\n return (\n <CheckboxParts.Root {...rootProps}>\n <CheckboxParts.Control size={size}>\n <CheckboxIcon indeterminate={rootProps.checked === 'indeterminate'} />\n </CheckboxParts.Control>\n\n <CheckboxParts.Label size={size}>\n {children}\n <Show when={props.required}>\n <Text as=\"span\" data-part=\"required-indicator\">\n (required)\n </Text>\n </Show>\n </CheckboxParts.Label>\n\n <CheckboxParts.HiddenInput />\n </CheckboxParts.Root>\n )\n}\n"],"mappings":"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","names":["Checkbox","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","Checkbox"]}
1
+ {"version":3,"sources":["../../../../src/components/checkbox/index.ts","../../../../src/components/Show.tsx","../../../../src/components/Text.tsx","../../../../src/components/checkbox/primitives.tsx","../../../../src/components/checkbox/parts.ts","../../../../src/context/cerberus.tsx","../../../../src/components/checkbox/checkbox-icon.tsx","../../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["export * from './checkbox'\nexport * from './parts'\nexport * from './primitives'\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: T | boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n const { when, children, fallback } = props\n\n if (when) {\n return <>{children}</>\n }\n\n if (fallback) {\n return <>{fallback}</>\n }\n\n return null\n}\n","import {\n Em,\n H1,\n H2,\n H3,\n H4,\n H5,\n H6,\n P,\n Small,\n Span,\n Strong,\n type PProps,\n} from 'styled-system/jsx'\n\n/**\n * This module exports a component for rendering text utilizing the styled-system JSX utility.\n * @module @cerberus/react/Text\n */\n\nexport type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'\n\n// For some reason we have to use the HTMLParagraphElement type here\n// or else TS will fail for non-style props like 'id' or 'className'\nexport interface TextProps extends PProps {\n /**\n * The element to render as. Defaults to 'p'.\n */\n as?: TextElements | Headings\n}\n\n/**\n * A component for rendering text utilizing the styled-system JSX utility.\n * @definition [Text docs](https://cerberus.digitalu.design/react/text)\n * @example\n * ```tsx\n * <Text as=\"h1\" color=\"page.text.100\" textStyle={{\n * base: 'heading-md',\n * md: 'heading-lg',\n * }}>\n * Hello, world!\n * </Text>\n */\nexport function Text(props: TextProps) {\n const { as = 'p', ...pandaJSXProps } = props\n\n const cache = {\n h1: H1,\n h2: H2,\n h3: H3,\n h4: H4,\n h5: H5,\n h6: H6,\n strong: Strong,\n em: Em,\n small: Small,\n span: Span,\n p: P,\n }\n\n if (as in cache) {\n const Component = cache[as as keyof typeof cache]\n return <Component {...pandaJSXProps} />\n }\n\n return <P {...pandaJSXProps} />\n}\n","import {\n Checkbox,\n type CheckboxControlProps,\n type CheckboxGroupProps,\n type CheckboxIndicatorProps,\n type CheckboxLabelProps,\n type CheckboxRootProps,\n} from '@ark-ui/react'\nimport { cx } from 'styled-system/css'\nimport { checkbox, type CheckboxVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the Checkbox primitives.\n * @module 'react/checkbox'\n */\n\n/**\n * Checkbox Root component used to provide the context to all other checkbox\n * primitives.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxRoot(props: CheckboxRootProps) {\n const styles = checkbox()\n return (\n <Checkbox.Root {...props} className={cx(styles.root, props.className)} />\n )\n}\n\n/**\n * Checkbox Label component used to display the label of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxLabel(\n props: CheckboxLabelProps & CheckboxVariantProps,\n) {\n const { size, ...labelProps } = props\n const styles = checkbox({ size })\n return (\n <Checkbox.Label\n {...labelProps}\n className={cx(styles.label, labelProps.className)}\n />\n )\n}\n\n/**\n * Checkbox Control component used to display the control of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxControl(\n props: CheckboxControlProps & CheckboxVariantProps,\n) {\n const { size, ...controlProps } = props\n const styles = checkbox({ size })\n return (\n <Checkbox.Control\n {...controlProps}\n className={cx(styles.control, controlProps.className)}\n />\n )\n}\n\n/**\n * Checkbox Indicator component used to display the indicator of the checkbox.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxIndicator(props: CheckboxIndicatorProps) {\n const styles = checkbox()\n return (\n <Checkbox.Indicator\n {...props}\n className={cx(styles.indicator, props.className)}\n />\n )\n}\n\n/**\n * Checkbox HiddenInput component used to provide the native checkbox input.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxHiddenInput(props: CheckboxControlProps) {\n return <Checkbox.HiddenInput {...props} />\n}\n\n/**\n * Checkbox Group is used to group checkboxes together in a consistently styled\n * way.\n * @definition [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @definition [Primitive Docs](https://ark-ui.com/react/docs/components/checkbox)\n */\nexport function CheckboxGroup(props: CheckboxGroupProps) {\n const styles = checkbox()\n return (\n <Checkbox.Group {...props} className={cx(styles.group, props.className)} />\n )\n}\n","import type { ElementType } from 'react'\nimport {\n CheckboxRoot,\n CheckboxLabel,\n CheckboxControl,\n CheckboxIndicator,\n CheckboxHiddenInput,\n CheckboxGroup,\n} from './primitives'\n\n/**\n * This module contains the parts of the Field component.\n * @module 'field/parts'\n */\n\ninterface CheckboxPartsValue {\n /**\n * The container of the field.\n */\n Root: ElementType\n /**\n * The label of the field.\n */\n Label: ElementType\n /**\n * The control of the field.\n */\n Control: ElementType\n /**\n * The indicator of the field.\n */\n Indicator: ElementType\n /**\n * The hidden input of the field.\n */\n HiddenInput: ElementType\n /**\n * The checkbox group component.\n */\n Group: ElementType\n}\n\n/**\n * An Object containing the parts of the Checkbox component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the CheckboxParts object and\n * the entire family of components vs. only what you use.\n */\nexport const CheckboxParts: CheckboxPartsValue = {\n Root: CheckboxRoot,\n Label: CheckboxLabel,\n Control: CheckboxControl,\n Indicator: CheckboxIndicator,\n HiddenInput: CheckboxHiddenInput,\n Group: CheckboxGroup,\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n","'use client'\n\nimport { useCerberusContext } from '../../context/cerberus'\nimport { CheckboxParts } from './parts'\nimport { Show } from '../Show'\n\n/**\n * This module contains the Checkbox Icon component.\n * @module\n */\n\ninterface CheckboxIconProps {\n indeterminate?: boolean\n}\n\n/**\n * Checkbox component\n * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/checkbox\n * @example\n * ```tsx\n * <Field>\n * <Checkbox id=\"legal\" checked={checked.legal} onChange={handleChange} />\n * </Field>\n * ```\n */\nexport function CheckboxIcon(props: CheckboxIconProps) {\n const { icons } = useCerberusContext()\n const { checkbox: CheckIcon, indeterminate: IndeterminateIcon } = icons\n\n return (\n <CheckboxParts.Indicator indeterminate={props.indeterminate}>\n <Show when={props.indeterminate} fallback={<CheckIcon />}>\n <IndeterminateIcon />\n </Show>\n </CheckboxParts.Indicator>\n )\n}\n","import type { CheckboxRootProps } from '@ark-ui/react'\nimport { type CheckboxVariantProps } from 'styled-system/recipes'\nimport { Show } from '../Show'\nimport { Text } from '../Text'\nimport { CheckboxParts } from './parts'\nimport { CheckboxIcon } from './checkbox-icon'\n\n/**\n * This module contains the Checkbox component.\n * @module\n */\n\nexport type CheckboxProps = CheckboxVariantProps & CheckboxRootProps\n\n/**\n * Checkbox component is an abstraction of the primitives that displays a\n * controlled checkbox with a label.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/checkbox)\n * @description [Ark Docs](https://ark-ui.com/docs/components/checkbox)\n */\nexport function Checkbox(props: CheckboxProps) {\n const { size, children, ...rootProps } = props\n\n return (\n <CheckboxParts.Root {...rootProps}>\n <CheckboxParts.Control size={size}>\n <CheckboxIcon indeterminate={rootProps.checked === 'indeterminate'} />\n </CheckboxParts.Control>\n\n <CheckboxParts.Label size={size}>\n {children}\n <Show when={props.required}>\n <Text as=\"span\" data-part=\"required-indicator\">\n (required)\n </Text>\n </Show>\n </CheckboxParts.Label>\n\n <CheckboxParts.HiddenInput />\n </CheckboxParts.Root>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,kBAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACgCW;AAJJ,SAAS,KAAQ,OAAwC;AAC9D,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AAErC,MAAI,MAAM;AACR,WAAO,2EAAG,UAAS;AAAA,EACrB;AAEA,MAAI,UAAU;AACZ,WAAO,2EAAG,oBAAS;AAAA,EACrB;AAEA,SAAO;AACT;;;ACxCA,iBAaO;AAkDI,IAAAC,sBAAA;AAnBJ,SAAS,KAAK,OAAkB;AACrC,QAAM,EAAE,KAAK,KAAK,GAAG,cAAc,IAAI;AAEvC,QAAM,QAAQ;AAAA,IACZ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,IAAI;AAAA,IACJ,OAAO;AAAA,IACP,MAAM;AAAA,IACN,GAAG;AAAA,EACL;AAEA,MAAI,MAAM,OAAO;AACf,UAAM,YAAY,MAAM,EAAwB;AAChD,WAAO,6CAAC,aAAW,GAAG,eAAe;AAAA,EACvC;AAEA,SAAO,6CAAC,gBAAG,GAAG,eAAe;AAC/B;;;ACnEA,mBAOO;AACP,iBAAmB;AACnB,qBAAoD;AAgBhD,IAAAC,sBAAA;AAHG,SAAS,aAAa,OAA0B;AACrD,QAAM,aAAS,yBAAS;AACxB,SACE,6CAAC,sBAAS,MAAT,EAAe,GAAG,OAAO,eAAW,eAAG,OAAO,MAAM,MAAM,SAAS,GAAG;AAE3E;AAOO,SAAS,cACd,OACA;AACA,QAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAChC,QAAM,aAAS,yBAAS,EAAE,KAAK,CAAC;AAChC,SACE;AAAA,IAAC,sBAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,OAAO,WAAW,SAAS;AAAA;AAAA,EAClD;AAEJ;AAOO,SAAS,gBACd,OACA;AACA,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,aAAS,yBAAS,EAAE,KAAK,CAAC;AAChC,SACE;AAAA,IAAC,sBAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,SAAS,aAAa,SAAS;AAAA;AAAA,EACtD;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,aAAS,yBAAS;AACxB,SACE;AAAA,IAAC,sBAAS;AAAA,IAAT;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,OAAO,WAAW,MAAM,SAAS;AAAA;AAAA,EACjD;AAEJ;AAOO,SAAS,oBAAoB,OAA6B;AAC/D,SAAO,6CAAC,sBAAS,aAAT,EAAsB,GAAG,OAAO;AAC1C;AAQO,SAAS,cAAc,OAA2B;AACvD,QAAM,aAAS,yBAAS;AACxB,SACE,6CAAC,sBAAS,OAAT,EAAgB,GAAG,OAAO,eAAW,eAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE7E;;;ACjDO,IAAM,gBAAoC;AAAA,EAC/C,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,OAAO;AACT;;;ACxDA,IAAAC,gBAAkE;AAyB9D,IAAAC,sBAAA;AAfJ,IAAM,sBAAkB,6BAA2C,IAAI;AAyBhE,SAAS,qBAAqB;AACnC,QAAM,cAAU,0BAAW,eAAe;AAC1C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,oDAAoD;AAAA,EACtE;AACA,SAAO;AACT;;;ACViD,IAAAC,sBAAA;AAN1C,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,UAAU,WAAW,eAAe,kBAAkB,IAAI;AAElE,SACE,6CAAC,cAAc,WAAd,EAAwB,eAAe,MAAM,eAC5C,uDAAC,QAAK,MAAM,MAAM,eAAe,UAAU,6CAAC,aAAU,GACpD,uDAAC,qBAAkB,GACrB,GACF;AAEJ;;;ACZQ,IAAAC,sBAAA;AAND,SAASC,UAAS,OAAsB;AAC7C,QAAM,EAAE,MAAM,UAAU,GAAG,UAAU,IAAI;AAEzC,SACE,8CAAC,cAAc,MAAd,EAAoB,GAAG,WACtB;AAAA,iDAAC,cAAc,SAAd,EAAsB,MACrB,uDAAC,gBAAa,eAAe,UAAU,YAAY,iBAAiB,GACtE;AAAA,IAEA,8CAAC,cAAc,OAAd,EAAoB,MAClB;AAAA;AAAA,MACD,6CAAC,QAAK,MAAM,MAAM,UAChB,uDAAC,QAAK,IAAG,QAAO,aAAU,sBAAqB,wBAE/C,GACF;AAAA,OACF;AAAA,IAEA,6CAAC,cAAc,aAAd,EAA0B;AAAA,KAC7B;AAEJ;","names":["Checkbox","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","Checkbox"]}
@@ -173,13 +173,13 @@ function DialogPositioner(props) {
173
173
  );
174
174
  }
175
175
  function DialogContent(props) {
176
- const { size, ...contentProps } = props;
176
+ const { size, css: customStyles, ...contentProps } = props;
177
177
  const styles = (0, import_recipes2.dialog)({ size });
178
178
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
179
179
  import_dialog.Dialog.Content,
180
180
  {
181
181
  ...contentProps,
182
- className: (0, import_css2.cx)(styles.content, contentProps.className)
182
+ className: (0, import_css2.cx)(styles.content, (0, import_css2.css)(customStyles), contentProps.className)
183
183
  }
184
184
  );
185
185
  }
@@ -380,41 +380,50 @@ function CTAModal(props) {
380
380
  );
381
381
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CTAModalContext.Provider, { value, children: [
382
382
  props.children,
383
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Dialog2, { size: "sm", children: [
384
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogCloseIconTrigger, {}),
385
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
386
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
387
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
388
- Avatar2,
389
- {
390
- gradient: "charon-light",
391
- fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
392
- Show,
383
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
384
+ Dialog2,
385
+ {
386
+ size: "sm",
387
+ style: {
388
+ "--dialog-content-min-h": "auto"
389
+ },
390
+ children: [
391
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogCloseIconTrigger, {}),
392
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
393
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
394
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
395
+ Avatar2,
393
396
  {
394
- when: confirmIcon,
395
- fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FallbackIcon, { size: 24 }),
396
- children: confirmIcon
397
+ gradient: "charon-light",
398
+ fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
399
+ Show,
400
+ {
401
+ when: confirmIcon,
402
+ fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FallbackIcon, { size: 24 }),
403
+ children: confirmIcon
404
+ }
405
+ )
397
406
  }
398
- )
399
- }
400
- ),
401
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
402
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
403
- ] }) }),
404
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
405
- var _a;
406
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
407
- Show,
408
- {
409
- when: ((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.type) === "btnAction",
410
- fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TriggerItem, { asChild: true, children: action }),
411
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
412
- },
413
- index
414
- );
415
- } }) })
416
- ] })
417
- ] }) })
407
+ ),
408
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
409
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
410
+ ] }) }),
411
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
412
+ var _a;
413
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
414
+ Show,
415
+ {
416
+ when: ((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.type) === "btnAction",
417
+ fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TriggerItem, { asChild: true, children: action }),
418
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
419
+ },
420
+ index
421
+ );
422
+ } }) })
423
+ ] })
424
+ ]
425
+ }
426
+ ) })
418
427
  ] });
419
428
  }
420
429
  function useCTAModal() {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/cta-dialog/index.ts","../../../../src/components/cta-dialog/provider.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/Show.tsx","../../../../src/components/for.tsx","../../../../src/utils/index.ts","../../../../src/components/avatar/primitives.tsx","../../../../src/components/avatar/parts.ts","../../../../src/components/avatar/avatar.tsx","../../../../src/components/dialog/primitives.tsx","../../../../src/components/IconButton.tsx","../../../../src/components/dialog/close-icon-trigger.tsx","../../../../src/components/Portal.tsx","../../../../src/components/dialog/dialog.tsx","../../../../src/components/cta-dialog/context.tsx","../../../../src/components/cta-dialog/trigger-item.tsx","../../../../src/components/button/button.tsx","../../../../src/components/cta-dialog/utils.ts"],"sourcesContent":["export * from './provider'\nexport * from './utils'\n","'use client'\n\nimport {\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { HStack, VStack } from 'styled-system/jsx'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Show } from '../Show'\nimport { For } from '../for'\nimport { Avatar } from '../avatar/avatar'\nimport {\n Dialog,\n DialogDescription,\n DialogHeading,\n DialogProvider,\n} from '../dialog'\nimport { DialogCloseIconTrigger } from '../dialog/close-icon-trigger'\nimport type { CTAButtonAction, CTAModalActionReturn } from './utils'\nimport {\n CTAModalContext,\n type CTAModalValue,\n type ShowCTAModalOptions,\n} from './context'\nimport { TriggerItem } from './trigger-item'\n\n/**\n * This module provides the provider and hook for the cta modal.\n * @module 'react/cta-modal/provider'\n */\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<object>) {\n const [open, setOpen] = useState<boolean>(false)\n const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n const confirmIcon = content?.icon\n\n const { icons } = useCerberusContext()\n const { confirmModal: FallbackIcon } = icons\n\n const handleShow = useCallback(\n (options: ShowCTAModalOptions) => {\n setContent({ ...options })\n setOpen(true)\n },\n [setOpen],\n )\n\n const handleActionClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n const index = Number(event.currentTarget.getAttribute('data-index'))\n const contentActions = content?.actions as CTAModalActionReturn\n const action = contentActions._actions[index] as CTAButtonAction\n action?.handleClick?.(event)\n setOpen(false)\n },\n [content, setOpen],\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 <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n <Dialog size=\"sm\">\n <DialogCloseIconTrigger />\n\n <VStack gap=\"xl\" w=\"full\">\n <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n <VStack gap=\"lg\" w=\"full\">\n <Avatar\n gradient=\"charon-light\"\n fallback={\n <Show\n when={confirmIcon}\n fallback={<FallbackIcon size={24} />}\n >\n {confirmIcon}\n </Show>\n }\n />\n <DialogHeading>{content?.heading}</DialogHeading>\n <DialogDescription>{content?.description}</DialogDescription>\n </VStack>\n </VStack>\n\n <HStack gap=\"md\" w=\"full\">\n <For each={content?.actions._actions}>\n {(action, index) => (\n <Show\n key={index}\n when={content?.actions?.type === 'btnAction'}\n fallback={\n <TriggerItem asChild>{action as ReactNode}</TriggerItem>\n }\n >\n <TriggerItem data-index={index} onClick={handleActionClick}>\n {(action as CTAButtonAction)?.text}\n </TriggerItem>\n </Show>\n )}\n </For>\n </HStack>\n </VStack>\n </Dialog>\n </DialogProvider>\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","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: T | boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n const { when, children, fallback } = props\n\n if (when) {\n return <>{children}</>\n }\n\n if (fallback) {\n return <>{fallback}</>\n }\n\n return null\n}\n","import type { ReactNode, JSX } from 'react'\n\nexport interface ForProps<T extends readonly unknown[], U extends JSX.Element> {\n /**\n * The array to iterate over.\n */\n each: T | undefined | null | false\n /**\n * The fallback to render when the array is empty.\n */\n fallback?: JSX.Element\n /**\n * The children to render for each item in the array.\n */\n children: (item: T[number], index: number) => U\n}\n\n/**\n * The For component is used to iterate over an array and render a list of\n * components or display a fallback when the array is empty.\n * Inspired by the `<For>` component from SolidJS.\n *\n * @example\n * ```tsx\n * <For each={['a', 'b', 'c']}>\n * {(item, index) => <div key={index}>{item}</div>}\n * </For>\n * ```\n */\nexport function For<T extends readonly unknown[], U extends JSX.Element>(\n props: ForProps<T, U>,\n) {\n if (!props.each || !props.each.length) {\n return props.fallback || null\n }\n\n return <>{props.each?.map(props.children) as ReactNode}</>\n}\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n if (count > 99) return '99+'\n return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n props: T,\n ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n const rest = {} as { [K in keyof T]?: T[K] }\n\n for (const key in props) {\n let assigned = false\n for (let i = 0; i < keyGroups.length; i++) {\n if (keyGroups[i].includes(key as keyof T)) {\n result[i][key as keyof T] = props[key]\n assigned = true\n break\n }\n }\n if (!assigned) {\n rest[key as keyof T] = props[key]\n }\n }\n\n return [...result, rest]\n}\n\nexport * from './localStorage'\n","import {\n Avatar,\n type AvatarFallbackProps,\n type AvatarImageProps,\n type AvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport { avatar, type AvatarVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\n/**\n * The root component of the Avatar.\n */\nexport function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {\n const { gradient, shape, size, ...rootProps } = props\n const styles = avatar({ gradient, shape, size })\n return (\n <Avatar.Root\n {...rootProps}\n className={cx(styles.root, rootProps.className)}\n />\n )\n}\n\n/**\n * The image component of the Avatar.\n */\nexport function AvatarImage(props: AvatarImageProps) {\n const styles = avatar()\n return (\n <Avatar.Image {...props} className={cx(styles.image, props.className)} />\n )\n}\n\n/**\n * The fallback component of the Avatar.\n */\nexport function AvatarFallback(props: AvatarFallbackProps) {\n const styles = avatar()\n return (\n <Avatar.Fallback\n {...props}\n className={cx(styles.fallback, props.className)}\n />\n )\n}\n","import type { ElementType } from 'react'\nimport { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'\n\n/**\n * This module contains the parts of the Avatar component.\n * @module 'avatar/parts'\n */\n\ninterface AvatarPartsValue {\n /**\n * The context provider of the Avatar.\n */\n Root: ElementType\n /**\n * The image of the Avatar.\n */\n Image: ElementType\n /**\n * The fallback content to display when the image fails to load.\n */\n Fallback: ElementType\n}\n\n/**\n * An Object containing the parts of the Accordion component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the AvatarParts object and\n * the entire family of components vs. only what you use.\n */\nexport const AvatarParts: AvatarPartsValue = {\n Root: AvatarRoot,\n Image: AvatarImage,\n Fallback: AvatarFallback,\n}\n","import type { AvatarRootProps } from '@ark-ui/react/avatar'\nimport type { AvatarVariantProps } from 'styled-system/recipes'\nimport type { ReactNode } from 'react'\nimport { splitProps } from '../../utils'\nimport { Show } from '../Show'\nimport { AvatarParts } from './parts'\n\n/**\n * This module provides an abstraction of the Avatar primitives.\n * @module 'avatar'\n */\n\nexport interface AvatarWithoutImage\n extends AvatarRootProps,\n AvatarVariantProps {\n alt?: never\n src?: never\n fallback?: ReactNode\n}\n\nexport interface AvatarWithImage extends AvatarRootProps, AvatarVariantProps {\n alt: string\n src: string\n fallback?: ReactNode\n}\n\n/**\n * Avatar component is an abstraction of the primitives that displays a\n * avatar or it's fallback when the image fails to load.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/avatar/overview)\n * @description [Ark Docs](https://ark-ui.com/react/docs/components/avatar#api-reference)\n */\nexport function Avatar(props: AvatarWithoutImage | AvatarWithImage) {\n const [imgProps, { fallback, children }, rootProps] = splitProps(\n props,\n ['alt', 'src'],\n ['fallback', 'children'],\n )\n\n return (\n <AvatarParts.Root {...rootProps}>\n <Show\n when={children}\n fallback={\n <>\n <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>\n <AvatarParts.Image {...imgProps} />\n </>\n }\n >\n {children}\n </Show>\n </AvatarParts.Root>\n )\n}\n","import {\n Dialog,\n type DialogBackdropProps,\n type DialogContentProps,\n type DialogDescriptionProps,\n type DialogPositionerProps,\n type DialogRootProps,\n type DialogTitleProps,\n type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n const styles = dialog()\n return (\n <Dialog.Trigger\n {...props}\n className={cx(styles.trigger, props.className)}\n />\n )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n const styles = dialog()\n return (\n <Dialog.Backdrop\n {...props}\n className={cx(styles.backdrop, props.className)}\n />\n )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n const styles = dialog()\n return (\n <Dialog.Positioner\n {...props}\n className={cx(styles.positioner, props.className)}\n />\n )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(props: DialogContentProps & DialogVariantProps) {\n const { size, ...contentProps } = props\n const styles = dialog({ size })\n return (\n <Dialog.Content\n {...contentProps}\n className={cx(styles.content, contentProps.className)}\n />\n )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n const styles = dialog()\n return (\n <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n const styles = dialog()\n return (\n <Dialog.Description\n {...props}\n className={cx(styles.description, props.className)}\n />\n )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n","import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { cx } from 'styled-system/css'\nimport { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps extends HTMLArkProps<'button'> {\n /**\n * The aria-label attribute for the icon button.\n */\n ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps) {\n const { ariaLabel, palette, usage, size, ...nativeProps } = props\n return (\n <ark.button\n {...nativeProps}\n aria-label={ariaLabel ?? 'Icon Button'}\n className={cx(\n nativeProps.className,\n iconButton({\n palette,\n usage,\n size,\n }),\n )}\n />\n )\n}\n","'use client'\n\nimport { type DialogCloseTriggerProps } from '@ark-ui/react/dialog'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../IconButton'\nimport { DialogCloseTrigger } from './primitives'\nimport { dialog } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module contains the close trigger for the dialog.\n * @module react/dialog\n */\n\nexport function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {\n const styles = dialog()\n\n const { icons } = useCerberusContext()\n const { close: CloseIcon } = icons\n\n return (\n <DialogCloseTrigger\n {...props}\n className={cx(styles.closeTrigger, props.className)}\n asChild\n >\n <IconButton\n ariaLabel=\"Close dialog\"\n palette=\"action\"\n size=\"lg\"\n usage=\"ghost\"\n >\n <CloseIcon />\n </IconButton>\n </DialogCloseTrigger>\n )\n}\n","import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'\nimport type { PropsWithChildren } from 'react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type { PortalProps }\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n * return (\n * <Portal>\n * <div>Portal Content outside of the React VDom tree</div>\n * </Portal>\n * )\n * }\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n return <ArkPortal {...props} />\n}\n","import type { DialogContentProps } from '@ark-ui/react/dialog'\nimport type { DialogVariantProps } from 'styled-system/recipes'\nimport { Portal } from '../Portal'\nimport { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'\n\n/**\n * This module contains and abstraction of the Dialog primitives.\n * @module 'dialog'\n */\n\nexport interface DialogProps\n extends Omit<DialogContentProps, 'size'>,\n DialogVariantProps {}\n\n/**\n * An abstraction of the Dialog primitives that controls the content of the\n * dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n * <DialogTrigger asChild>\n * <Button>Open Dialog</Button>\n * </DialogTrigger>\n * <Dialog>\n * <Text>Dialog Content</Text>\n * </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n return (\n <Portal>\n <DialogBackdrop />\n <DialogPositioner>\n <DialogContent {...props} />\n </DialogPositioner>\n </Portal>\n )\n}\n","'use client'\n\nimport { createContext, type ReactNode } from 'react'\nimport type { CTAModalActionReturn } from './utils'\n\n/**\n * This module provides the context 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. Requires 2 actions.\n */\n actions: CTAModalActionReturn\n}\n\nexport interface CTAModalValue {\n show: (options: ShowCTAModalOptions) => void\n}\n\nexport const CTAModalContext = createContext<CTAModalValue | null>(null)\n","import { css, cx } from 'styled-system/css'\nimport { Button, type ButtonProps } from '../button/button'\nimport { ark } from '@ark-ui/react/factory'\nimport { button } from 'styled-system/recipes'\n\n/**\n * This module provides the trigger item for the cta modal.\n * @module 'react/cta-modal/trigger-item'\n */\n\nexport interface TriggerItemProps extends ButtonProps {\n asChild?: boolean\n}\n\n/**\n * Trigger item for the cta modal which renders content based on the actions.\n * type.\n */\nexport function TriggerItem(props: TriggerItemProps) {\n const { asChild, children, ...buttonProps } = props\n\n if (asChild) {\n return (\n <ark.div\n className={cx(\n button({\n shape: 'rounded',\n usage: 'ghost',\n }),\n css({\n w: '1/2',\n }),\n )}\n asChild\n >\n {children}\n </ark.div>\n )\n }\n\n return (\n <Button\n {...buttonProps}\n className={css({\n w: '1/2',\n })}\n shape=\"rounded\"\n usage=\"outlined\"\n >\n {children}\n </Button>\n )\n}\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n type PropsWithChildren,\n createContext,\n useContext,\n useMemo,\n} from 'react'\nimport { cx } from 'styled-system/css'\nimport { button, type ButtonVariantProps } from 'styled-system/recipes'\nimport { Box } from 'styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n ButtonVariantProps & {\n pending?: boolean\n }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n const value = useMemo(() => ({ pending }), [pending])\n\n return (\n <ButtonContext.Provider value={value}>\n <ark.button\n {...nativeProps}\n disabled={pending || nativeProps.disabled}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n size,\n }),\n )}\n />\n </ButtonContext.Provider>\n )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n const { pending } = useContext(ButtonContext)\n return (\n <Show when={pending} fallback={<>{props.children}</>}>\n <Box w=\"4\">\n <Spinner />\n </Box>\n </Show>\n )\n}\n","import type { MouseEventHandler, ReactNode } from 'react'\n\n/**\n * This module provide utility functions for the cta modal.\n * @module 'react/cta-modal/utils'\n */\n\nexport type CTAButtonAction = {\n /**\n * The text of the button.\n */\n text: string\n /**\n * The onClick handler for the button.\n */\n handleClick: MouseEventHandler<HTMLButtonElement>\n}\n\nexport type CTAModalAction = (CTAButtonAction | ReactNode)[]\n\nexport interface CTAModalActionReturn {\n /**\n * The type of the action content.\n */\n type: 'reactNode' | 'btnAction'\n /**\n * The actions for the cta modal. Max of 2 actions.\n */\n _actions: CTAModalAction\n}\n\n/**\n * Creates the action data to pass to the cta modal `show` method.\n */\nexport function createCTAModalActions(\n providedActions: CTAModalAction,\n): CTAModalActionReturn {\n if (providedActions.length !== 2) {\n throw new Error('CTAModal must include 2 actions')\n }\n\n if (\n providedActions.every(\n (action) => (action as unknown as CTAButtonAction)?.handleClick,\n )\n ) {\n return {\n type: 'btnAction',\n _actions: providedActions as CTAButtonAction[],\n }\n }\n\n return {\n type: 'reactNode',\n _actions: providedActions as ReactNode[],\n }\n}\n"],"mappings":"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","names":["import_react","import_jsx","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","Avatar","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_recipes","import_css","import_jsx_runtime","import_react","import_jsx_runtime","ArkPortal","import_jsx_runtime","Dialog","import_react","import_css","import_factory","import_react","import_css","import_recipes","import_jsx_runtime","import_factory","import_recipes","import_jsx_runtime","import_jsx_runtime","Dialog","Avatar"]}
1
+ {"version":3,"sources":["../../../../src/components/cta-dialog/index.ts","../../../../src/components/cta-dialog/provider.tsx","../../../../src/context/cerberus.tsx","../../../../src/components/Show.tsx","../../../../src/components/for.tsx","../../../../src/utils/index.ts","../../../../src/components/avatar/primitives.tsx","../../../../src/components/avatar/parts.ts","../../../../src/components/avatar/avatar.tsx","../../../../src/components/dialog/primitives.tsx","../../../../src/components/IconButton.tsx","../../../../src/components/dialog/close-icon-trigger.tsx","../../../../src/components/Portal.tsx","../../../../src/components/dialog/dialog.tsx","../../../../src/components/cta-dialog/context.tsx","../../../../src/components/cta-dialog/trigger-item.tsx","../../../../src/components/button/button.tsx","../../../../src/components/cta-dialog/utils.ts"],"sourcesContent":["export * from './provider'\nexport * from './utils'\n","'use client'\n\nimport {\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { HStack, VStack } from 'styled-system/jsx'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Show } from '../Show'\nimport { For } from '../for'\nimport { Avatar } from '../avatar/avatar'\nimport {\n Dialog,\n DialogDescription,\n DialogHeading,\n DialogProvider,\n} from '../dialog'\nimport { DialogCloseIconTrigger } from '../dialog/close-icon-trigger'\nimport type { CTAButtonAction, CTAModalActionReturn } from './utils'\nimport {\n CTAModalContext,\n type CTAModalValue,\n type ShowCTAModalOptions,\n} from './context'\nimport { TriggerItem } from './trigger-item'\n\n/**\n * This module provides the provider and hook for the cta modal.\n * @module 'react/cta-modal/provider'\n */\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<object>) {\n const [open, setOpen] = useState<boolean>(false)\n const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n const confirmIcon = content?.icon\n\n const { icons } = useCerberusContext()\n const { confirmModal: FallbackIcon } = icons\n\n const handleShow = useCallback(\n (options: ShowCTAModalOptions) => {\n setContent({ ...options })\n setOpen(true)\n },\n [setOpen],\n )\n\n const handleActionClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n const index = Number(event.currentTarget.getAttribute('data-index'))\n const contentActions = content?.actions as CTAModalActionReturn\n const action = contentActions._actions[index] as CTAButtonAction\n action?.handleClick?.(event)\n setOpen(false)\n },\n [content, setOpen],\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 <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n <Dialog\n size=\"sm\"\n style={{\n '--dialog-content-min-h': 'auto',\n }}\n >\n <DialogCloseIconTrigger />\n\n <VStack gap=\"xl\" w=\"full\">\n <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n <VStack gap=\"lg\" w=\"full\">\n <Avatar\n gradient=\"charon-light\"\n fallback={\n <Show\n when={confirmIcon}\n fallback={<FallbackIcon size={24} />}\n >\n {confirmIcon}\n </Show>\n }\n />\n <DialogHeading>{content?.heading}</DialogHeading>\n <DialogDescription>{content?.description}</DialogDescription>\n </VStack>\n </VStack>\n\n <HStack gap=\"md\" w=\"full\">\n <For each={content?.actions._actions}>\n {(action, index) => (\n <Show\n key={index}\n when={content?.actions?.type === 'btnAction'}\n fallback={\n <TriggerItem asChild>{action as ReactNode}</TriggerItem>\n }\n >\n <TriggerItem data-index={index} onClick={handleActionClick}>\n {(action as CTAButtonAction)?.text}\n </TriggerItem>\n </Show>\n )}\n </For>\n </HStack>\n </VStack>\n </Dialog>\n </DialogProvider>\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","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport type { SystemConfig } from '../config'\n\n/**\n * This module contains the Cerberus configuration context and helpers.\n * @module context/cerberus\n */\n\ntype CerberusContextValue = SystemConfig\n\nconst CerberusContext = createContext<CerberusContextValue | null>(null)\n\ninterface CerberusProviderProps {\n config: SystemConfig\n}\n\n/**\n * Cerberus configuration provider.\n * @param props.config The Cerberus configuration created with\n * `makeSystemConfig` helper.\n */\nexport function CerberusProvider(\n props: PropsWithChildren<CerberusProviderProps>,\n) {\n return (\n <CerberusContext.Provider value={props.config}>\n {props.children}\n </CerberusContext.Provider>\n )\n}\n\n/**\n * Returns the Cerberus configuration context.\n * @returns The Cerberus configuration context.\n */\nexport function useCerberusContext() {\n const context = useContext(CerberusContext)\n if (!context) {\n throw new Error('useCerberus must be used within a CerberusProvider')\n }\n return context\n}\n","import { type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps<T> {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: T | boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show<T>(props: PropsWithChildren<ShowProps<T>>) {\n const { when, children, fallback } = props\n\n if (when) {\n return <>{children}</>\n }\n\n if (fallback) {\n return <>{fallback}</>\n }\n\n return null\n}\n","import type { ReactNode, JSX } from 'react'\n\nexport interface ForProps<T extends readonly unknown[], U extends JSX.Element> {\n /**\n * The array to iterate over.\n */\n each: T | undefined | null | false\n /**\n * The fallback to render when the array is empty.\n */\n fallback?: JSX.Element\n /**\n * The children to render for each item in the array.\n */\n children: (item: T[number], index: number) => U\n}\n\n/**\n * The For component is used to iterate over an array and render a list of\n * components or display a fallback when the array is empty.\n * Inspired by the `<For>` component from SolidJS.\n *\n * @example\n * ```tsx\n * <For each={['a', 'b', 'c']}>\n * {(item, index) => <div key={index}>{item}</div>}\n * </For>\n * ```\n */\nexport function For<T extends readonly unknown[], U extends JSX.Element>(\n props: ForProps<T, U>,\n) {\n if (!props.each || !props.each.length) {\n return props.fallback || null\n }\n\n return <>{props.each?.map(props.children) as ReactNode}</>\n}\n","/**\n * This module contains utility functions that are used across your app.\n * @module Utils\n */\n\n/**\n * Formats the count of notifications to be displayed in the notification badge.\n * @param count - The number of notifications.\n * @returns The formatted count of notifications.\n * @example\n * ```tsx\n * const count = formatNotifyCount(100)\n * console.log(count) // '99+'\n * ```\n */\nexport function formatNotifyCount(count: number): string {\n if (count > 99) return '99+'\n return count.toString()\n}\n\n/**\n * Splits the properties of an object into multiple groups based on lists of keys.\n * @param props - The object to split.\n * @param keyGroups - The lists of keys to include in each group.\n * @returns An array of objects: each containing the properties specified in the corresponding key group, and the last object containing the remaining keys.\n */\nexport function splitProps<T extends object>(\n props: T,\n ...keyGroups: (keyof T)[][]\n): { [K in keyof T]?: T[K] }[] {\n const result = keyGroups.map(() => ({}) as { [K in keyof T]?: T[K] })\n const rest = {} as { [K in keyof T]?: T[K] }\n\n for (const key in props) {\n let assigned = false\n for (let i = 0; i < keyGroups.length; i++) {\n if (keyGroups[i].includes(key as keyof T)) {\n result[i][key as keyof T] = props[key]\n assigned = true\n break\n }\n }\n if (!assigned) {\n rest[key as keyof T] = props[key]\n }\n }\n\n return [...result, rest]\n}\n\nexport * from './localStorage'\n","import {\n Avatar,\n type AvatarFallbackProps,\n type AvatarImageProps,\n type AvatarRootProps,\n} from '@ark-ui/react/avatar'\nimport { avatar, type AvatarVariantProps } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module provides the primitive components for the Avatar component.\n * @module 'avatar/primitives'\n */\n\n/**\n * The root component of the Avatar.\n */\nexport function AvatarRoot(props: AvatarRootProps & AvatarVariantProps) {\n const { gradient, shape, size, ...rootProps } = props\n const styles = avatar({ gradient, shape, size })\n return (\n <Avatar.Root\n {...rootProps}\n className={cx(styles.root, rootProps.className)}\n />\n )\n}\n\n/**\n * The image component of the Avatar.\n */\nexport function AvatarImage(props: AvatarImageProps) {\n const styles = avatar()\n return (\n <Avatar.Image {...props} className={cx(styles.image, props.className)} />\n )\n}\n\n/**\n * The fallback component of the Avatar.\n */\nexport function AvatarFallback(props: AvatarFallbackProps) {\n const styles = avatar()\n return (\n <Avatar.Fallback\n {...props}\n className={cx(styles.fallback, props.className)}\n />\n )\n}\n","import type { ElementType } from 'react'\nimport { AvatarFallback, AvatarImage, AvatarRoot } from './primitives'\n\n/**\n * This module contains the parts of the Avatar component.\n * @module 'avatar/parts'\n */\n\ninterface AvatarPartsValue {\n /**\n * The context provider of the Avatar.\n */\n Root: ElementType\n /**\n * The image of the Avatar.\n */\n Image: ElementType\n /**\n * The fallback content to display when the image fails to load.\n */\n Fallback: ElementType\n}\n\n/**\n * An Object containing the parts of the Accordion component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the AvatarParts object and\n * the entire family of components vs. only what you use.\n */\nexport const AvatarParts: AvatarPartsValue = {\n Root: AvatarRoot,\n Image: AvatarImage,\n Fallback: AvatarFallback,\n}\n","import type { AvatarRootProps } from '@ark-ui/react/avatar'\nimport type { AvatarVariantProps } from 'styled-system/recipes'\nimport type { ReactNode } from 'react'\nimport { splitProps } from '../../utils'\nimport { Show } from '../Show'\nimport { AvatarParts } from './parts'\n\n/**\n * This module provides an abstraction of the Avatar primitives.\n * @module 'avatar'\n */\n\nexport interface AvatarWithoutImage\n extends AvatarRootProps,\n AvatarVariantProps {\n alt?: never\n src?: never\n fallback?: ReactNode\n}\n\nexport interface AvatarWithImage extends AvatarRootProps, AvatarVariantProps {\n alt: string\n src: string\n fallback?: ReactNode\n}\n\n/**\n * Avatar component is an abstraction of the primitives that displays a\n * avatar or it's fallback when the image fails to load.\n * @description [Cerberus Docs](https://cerberus.digitalu.design/react/avatar/overview)\n * @description [Ark Docs](https://ark-ui.com/react/docs/components/avatar#api-reference)\n */\nexport function Avatar(props: AvatarWithoutImage | AvatarWithImage) {\n const [imgProps, { fallback, children }, rootProps] = splitProps(\n props,\n ['alt', 'src'],\n ['fallback', 'children'],\n )\n\n return (\n <AvatarParts.Root {...rootProps}>\n <Show\n when={children}\n fallback={\n <>\n <AvatarParts.Fallback>{fallback}</AvatarParts.Fallback>\n <AvatarParts.Image {...imgProps} />\n </>\n }\n >\n {children}\n </Show>\n </AvatarParts.Root>\n )\n}\n","import {\n Dialog,\n type DialogBackdropProps,\n type DialogContentProps,\n type DialogDescriptionProps,\n type DialogPositionerProps,\n type DialogRootProps,\n type DialogTitleProps,\n type DialogTriggerProps,\n} from '@ark-ui/react/dialog'\nimport { css, cx } from 'styled-system/css'\nimport { dialog, type DialogVariantProps } from 'styled-system/recipes'\nimport type { WithCss } from '../../types'\n\n/**\n * This module contains the primitives of the Dialog component.\n * @module 'dialog/primitives'\n */\n\n/**\n * The provider that controls the dialog components.\n */\nexport function DialogRoot(props: DialogRootProps) {\n return <Dialog.Root {...props} />\n}\n\n/**\n * The trigger that opens the dialog.\n */\nexport function DialogTrigger(props: DialogTriggerProps) {\n const styles = dialog()\n return (\n <Dialog.Trigger\n {...props}\n className={cx(styles.trigger, props.className)}\n />\n )\n}\n\n/**\n * The overlay of the dialog.\n */\nexport function DialogBackdrop(props: DialogBackdropProps) {\n const styles = dialog()\n return (\n <Dialog.Backdrop\n {...props}\n className={cx(styles.backdrop, props.className)}\n />\n )\n}\n\n/**\n * The container that positions the dialog.\n */\nexport function DialogPositioner(props: DialogPositionerProps) {\n const styles = dialog()\n return (\n <Dialog.Positioner\n {...props}\n className={cx(styles.positioner, props.className)}\n />\n )\n}\n\n/**\n * The visible content of the dialog.\n */\nexport function DialogContent(\n props: DialogContentProps & DialogVariantProps & WithCss,\n) {\n const { size, css: customStyles, ...contentProps } = props\n const styles = dialog({ size })\n return (\n <Dialog.Content\n {...contentProps}\n className={cx(styles.content, css(customStyles), contentProps.className)}\n />\n )\n}\n\n/**\n * The heading of the dialog.\n */\nexport function DialogHeading(props: DialogTitleProps) {\n const styles = dialog()\n return (\n <Dialog.Title {...props} className={cx(styles.title, props.className)} />\n )\n}\n\n/**\n * The description of the dialog.\n */\nexport function DialogDescription(props: DialogDescriptionProps) {\n const styles = dialog()\n return (\n <Dialog.Description\n {...props}\n className={cx(styles.description, props.className)}\n />\n )\n}\n\n/**\n * The trigger that closes the dialog.\n */\nexport function DialogCloseTrigger(props: DialogTriggerProps) {\n return <Dialog.CloseTrigger {...props} />\n}\n\n/**\n * The provider that controls the dialog components. This is a named export of\n * the DialogRoot primitive.\n */\nexport const DialogProvider = DialogRoot\n","import { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport { cx } from 'styled-system/css'\nimport { iconButton, type IconButtonVariantProps } from 'styled-system/recipes'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps extends HTMLArkProps<'button'> {\n /**\n * The aria-label attribute for the icon button.\n */\n ariaLabel: string\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps) {\n const { ariaLabel, palette, usage, size, ...nativeProps } = props\n return (\n <ark.button\n {...nativeProps}\n aria-label={ariaLabel ?? 'Icon Button'}\n className={cx(\n nativeProps.className,\n iconButton({\n palette,\n usage,\n size,\n }),\n )}\n />\n )\n}\n","'use client'\n\nimport { type DialogCloseTriggerProps } from '@ark-ui/react/dialog'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { IconButton } from '../IconButton'\nimport { DialogCloseTrigger } from './primitives'\nimport { dialog } from 'styled-system/recipes'\nimport { cx } from 'styled-system/css'\n\n/**\n * This module contains the close trigger for the dialog.\n * @module react/dialog\n */\n\nexport function DialogCloseIconTrigger(props: DialogCloseTriggerProps) {\n const styles = dialog()\n\n const { icons } = useCerberusContext()\n const { close: CloseIcon } = icons\n\n return (\n <DialogCloseTrigger\n {...props}\n className={cx(styles.closeTrigger, props.className)}\n asChild\n >\n <IconButton\n ariaLabel=\"Close dialog\"\n palette=\"action\"\n size=\"lg\"\n usage=\"ghost\"\n >\n <CloseIcon />\n </IconButton>\n </DialogCloseTrigger>\n )\n}\n","import { Portal as ArkPortal, type PortalProps } from '@ark-ui/react'\nimport type { PropsWithChildren } from 'react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type { PortalProps }\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n * return (\n * <Portal>\n * <div>Portal Content outside of the React VDom tree</div>\n * </Portal>\n * )\n * }\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n return <ArkPortal {...props} />\n}\n","import type { DialogContentProps } from '@ark-ui/react/dialog'\nimport type { DialogVariantProps } from 'styled-system/recipes'\nimport type { WithCss } from '../../types'\nimport { Portal } from '../Portal'\nimport { DialogBackdrop, DialogContent, DialogPositioner } from './primitives'\n\n/**\n * This module contains and abstraction of the Dialog primitives.\n * @module 'dialog'\n */\n\nexport interface DialogProps\n extends Omit<DialogContentProps, 'size' | 'style'>,\n DialogVariantProps,\n WithCss {}\n\n/**\n * An abstraction of the Dialog primitives that controls the content of the\n * dialog. Must be used within the `DialogProvider` component.\n * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)\n * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)\n * @example\n * ```tsx\n * <DialogProvider>\n * <DialogTrigger asChild>\n * <Button>Open Dialog</Button>\n * </DialogTrigger>\n * <Dialog>\n * <Text>Dialog Content</Text>\n * </Dialog>\n * </DialogProvider>\n * ```\n */\nexport function Dialog(props: DialogProps) {\n return (\n <Portal>\n <DialogBackdrop />\n <DialogPositioner>\n <DialogContent {...props} />\n </DialogPositioner>\n </Portal>\n )\n}\n","'use client'\n\nimport { createContext, type ReactNode } from 'react'\nimport type { CTAModalActionReturn } from './utils'\n\n/**\n * This module provides the context 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. Requires 2 actions.\n */\n actions: CTAModalActionReturn\n}\n\nexport interface CTAModalValue {\n show: (options: ShowCTAModalOptions) => void\n}\n\nexport const CTAModalContext = createContext<CTAModalValue | null>(null)\n","import { css, cx } from 'styled-system/css'\nimport { Button, type ButtonProps } from '../button/button'\nimport { ark } from '@ark-ui/react/factory'\nimport { button } from 'styled-system/recipes'\n\n/**\n * This module provides the trigger item for the cta modal.\n * @module 'react/cta-modal/trigger-item'\n */\n\nexport interface TriggerItemProps extends ButtonProps {\n asChild?: boolean\n}\n\n/**\n * Trigger item for the cta modal which renders content based on the actions.\n * type.\n */\nexport function TriggerItem(props: TriggerItemProps) {\n const { asChild, children, ...buttonProps } = props\n\n if (asChild) {\n return (\n <ark.div\n className={cx(\n button({\n shape: 'rounded',\n usage: 'ghost',\n }),\n css({\n w: '1/2',\n }),\n )}\n asChild\n >\n {children}\n </ark.div>\n )\n }\n\n return (\n <Button\n {...buttonProps}\n className={css({\n w: '1/2',\n })}\n shape=\"rounded\"\n usage=\"outlined\"\n >\n {children}\n </Button>\n )\n}\n","'use client'\n\nimport { ark, type HTMLArkProps } from '@ark-ui/react/factory'\nimport {\n type PropsWithChildren,\n createContext,\n useContext,\n useMemo,\n} from 'react'\nimport { cx } from 'styled-system/css'\nimport { button, type ButtonVariantProps } from 'styled-system/recipes'\nimport { Box } from 'styled-system/jsx'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n pending: false,\n})\n\nexport type ButtonProps = HTMLArkProps<'button'> &\n ButtonVariantProps & {\n pending?: boolean\n }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps) {\n const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n const value = useMemo(() => ({ pending }), [pending])\n\n return (\n <ButtonContext.Provider value={value}>\n <ark.button\n {...nativeProps}\n disabled={pending || nativeProps.disabled}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n size,\n }),\n )}\n />\n </ButtonContext.Provider>\n )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n const { pending } = useContext(ButtonContext)\n return (\n <Show when={pending} fallback={<>{props.children}</>}>\n <Box w=\"4\">\n <Spinner />\n </Box>\n </Show>\n )\n}\n","import type { MouseEventHandler, ReactNode } from 'react'\n\n/**\n * This module provide utility functions for the cta modal.\n * @module 'react/cta-modal/utils'\n */\n\nexport type CTAButtonAction = {\n /**\n * The text of the button.\n */\n text: string\n /**\n * The onClick handler for the button.\n */\n handleClick: MouseEventHandler<HTMLButtonElement>\n}\n\nexport type CTAModalAction = (CTAButtonAction | ReactNode)[]\n\nexport interface CTAModalActionReturn {\n /**\n * The type of the action content.\n */\n type: 'reactNode' | 'btnAction'\n /**\n * The actions for the cta modal. Max of 2 actions.\n */\n _actions: CTAModalAction\n}\n\n/**\n * Creates the action data to pass to the cta modal `show` method.\n */\nexport function createCTAModalActions(\n providedActions: CTAModalAction,\n): CTAModalActionReturn {\n if (providedActions.length !== 2) {\n throw new Error('CTAModal must include 2 actions')\n }\n\n if (\n providedActions.every(\n (action) => (action as unknown as CTAButtonAction)?.handleClick,\n )\n ) {\n return {\n type: 'btnAction',\n _actions: providedActions as CTAButtonAction[],\n }\n }\n\n return {\n type: 'reactNode',\n _actions: providedActions as ReactNode[],\n }\n}\n"],"mappings":"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","names":["import_react","import_jsx","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","import_jsx_runtime","Avatar","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_recipes","import_css","import_jsx_runtime","import_react","import_jsx_runtime","ArkPortal","import_jsx_runtime","Dialog","import_react","import_css","import_factory","import_react","import_css","import_recipes","import_jsx_runtime","import_factory","import_recipes","import_jsx_runtime","import_jsx_runtime","Dialog","Avatar"]}
@@ -171,13 +171,13 @@ function DialogPositioner(props) {
171
171
  );
172
172
  }
173
173
  function DialogContent(props) {
174
- const { size, ...contentProps } = props;
174
+ const { size, css: customStyles, ...contentProps } = props;
175
175
  const styles = (0, import_recipes2.dialog)({ size });
176
176
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
177
177
  import_dialog.Dialog.Content,
178
178
  {
179
179
  ...contentProps,
180
- className: (0, import_css2.cx)(styles.content, contentProps.className)
180
+ className: (0, import_css2.cx)(styles.content, (0, import_css2.css)(customStyles), contentProps.className)
181
181
  }
182
182
  );
183
183
  }
@@ -378,41 +378,50 @@ function CTAModal(props) {
378
378
  );
379
379
  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(CTAModalContext.Provider, { value, children: [
380
380
  props.children,
381
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(Dialog2, { size: "sm", children: [
382
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogCloseIconTrigger, {}),
383
- /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
384
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
385
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
386
- Avatar2,
387
- {
388
- gradient: "charon-light",
389
- fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
390
- Show,
381
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogProvider, { open, onOpenChange: (e) => setOpen(e.open), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
382
+ Dialog2,
383
+ {
384
+ size: "sm",
385
+ style: {
386
+ "--dialog-content-min-h": "auto"
387
+ },
388
+ children: [
389
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogCloseIconTrigger, {}),
390
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx2.VStack, { gap: "xl", w: "full", children: [
391
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx2.VStack, { alignItems: "flex-start", gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx2.VStack, { gap: "lg", w: "full", children: [
392
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
393
+ Avatar2,
391
394
  {
392
- when: confirmIcon,
393
- fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FallbackIcon, { size: 24 }),
394
- children: confirmIcon
395
+ gradient: "charon-light",
396
+ fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
397
+ Show,
398
+ {
399
+ when: confirmIcon,
400
+ fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FallbackIcon, { size: 24 }),
401
+ children: confirmIcon
402
+ }
403
+ )
395
404
  }
396
- )
397
- }
398
- ),
399
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
400
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
401
- ] }) }),
402
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
403
- var _a;
404
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
405
- Show,
406
- {
407
- when: ((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.type) === "btnAction",
408
- fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TriggerItem, { asChild: true, children: action }),
409
- children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
410
- },
411
- index
412
- );
413
- } }) })
414
- ] })
415
- ] }) })
405
+ ),
406
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogHeading, { children: content == null ? void 0 : content.heading }),
407
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogDescription, { children: content == null ? void 0 : content.description })
408
+ ] }) }),
409
+ /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_jsx2.HStack, { gap: "md", w: "full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(For, { each: content == null ? void 0 : content.actions._actions, children: (action, index) => {
410
+ var _a;
411
+ return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
412
+ Show,
413
+ {
414
+ when: ((_a = content == null ? void 0 : content.actions) == null ? void 0 : _a.type) === "btnAction",
415
+ fallback: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TriggerItem, { asChild: true, children: action }),
416
+ children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(TriggerItem, { "data-index": index, onClick: handleActionClick, children: action == null ? void 0 : action.text })
417
+ },
418
+ index
419
+ );
420
+ } }) })
421
+ ] })
422
+ ]
423
+ }
424
+ ) })
416
425
  ] });
417
426
  }
418
427
  function useCTAModal() {