@cerberus-design/react 0.16.0-next-4f6c716 → 0.16.0-next-feeb186

package/build/modern/context/prompt-modal.js

@@ -2,11 +2,11 @@
 import {
   PromptModal,
   usePromptModal
-} from "../chunk-CMYD5KWA.js";
+} from "../chunk-O542MPR7.js";
+import "../chunk-RU5LOXWI.js";
 import "../chunk-TFL56AYR.js";
 import "../chunk-SXLPDPOZ.js";
 import "../chunk-IQJDVFPP.js";
-import "../chunk-RU5LOXWI.js";
 import "../chunk-TYPULJMJ.js";
 import "../chunk-FBS7AX76.js";
 import "../chunk-6I2FW4WI.js";

package/build/modern/index.js

@@ -1,3 +1,15 @@
+import {
+  Label
+} from "./chunk-LT62577B.js";
+import {
+  Modal
+} from "./chunk-Q3I4H6EC.js";
+import {
+  ModalDescription
+} from "./chunk-WECB67DC.js";
+import {
+  ModalHeader
+} from "./chunk-AUALRL3U.js";
 import {
   ModalHeading
 } from "./chunk-SWX5JWZR.js";
@@ -17,18 +29,6 @@ import {
 import {
   FieldsetLabel
 } from "./chunk-DRDNNRU3.js";
-import {
-  Label
-} from "./chunk-LT62577B.js";
-import {
-  Modal
-} from "./chunk-Q3I4H6EC.js";
-import {
-  ModalDescription
-} from "./chunk-WECB67DC.js";
-import {
-  ModalHeader
-} from "./chunk-AUALRL3U.js";
 import {
   NavMenu,
   useNavMenuContext
@@ -36,15 +36,18 @@ import {
 import {
   NotificationCenter,
   useNotificationCenter
-} from "./chunk-FMRWRVUS.js";
+} from "./chunk-Z4342DRO.js";
 import {
   PromptModal,
   usePromptModal
-} from "./chunk-CMYD5KWA.js";
+} from "./chunk-O542MPR7.js";
 import {
   ThemeProvider,
   useThemeContext
 } from "./chunk-EB37HRCN.js";
+import {
+  Td
+} from "./chunk-3R4TIF2X.js";
 import {
   Th
 } from "./chunk-SGKHA4EB.js";
@@ -54,17 +57,10 @@ import {
 import {
   Tooltip
 } from "./chunk-LPALHB6R.js";
-import {
-  For
-} from "./chunk-IIH363FO.js";
 import {
   ConfirmModal,
   useConfirmModal
 } from "./chunk-H54FR7IP.js";
-import {
-  CTAModal,
-  useCTAModal
-} from "./chunk-ZDANBCM3.js";
 import {
   Table,
   Tr
@@ -88,8 +84,15 @@ import {
   Tbody
 } from "./chunk-ZR37P4NZ.js";
 import {
-  Td
-} from "./chunk-3R4TIF2X.js";
+  FileStatus,
+  processStatus
+} from "./chunk-ZFFW5ELD.js";
+import {
+  ProgressBar
+} from "./chunk-WZJ5UQNM.js";
+import {
+  FileUploader
+} from "./chunk-7SU6FCTJ.js";
 import {
   Legend
 } from "./chunk-RBNOEAWJ.js";
@@ -111,6 +114,9 @@ import {
 import {
   NotificationHeading
 } from "./chunk-SLHYBPJ5.js";
+import {
+  CircularProgress
+} from "./chunk-6QHOKCV3.js";
 import {
   DatePicker,
   DatePickerCalendar,
@@ -133,20 +139,6 @@ import {
   DatePickerView,
   DatePickerViewControl
 } from "./chunk-5EWCH7AI.js";
-import {
-  DialogCloseIconTrigger
-} from "./chunk-6BN3XKQF.js";
-import {
-  Dialog,
-  DialogBackdrop,
-  DialogCloseTrigger,
-  DialogContent,
-  DialogDescription,
-  DialogHeading,
-  DialogPositioner,
-  DialogProvider,
-  DialogTrigger
-} from "./chunk-TFL56AYR.js";
 import {
   Droppable
 } from "./chunk-TKI2CKHH.js";
@@ -157,19 +149,7 @@ import {
   FeatureFlags,
   useFeatureFlags
 } from "./chunk-CJFW36DZ.js";
-import {
-  FileStatus,
-  processStatus
-} from "./chunk-ZFFW5ELD.js";
-import {
-  ProgressBar
-} from "./chunk-WZJ5UQNM.js";
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
-import {
-  FileUploader
-} from "./chunk-7SU6FCTJ.js";
+import "./chunk-V3M3ZOQI.js";
 import {
   AccordionItemGroup
 } from "./chunk-WN7TJX6J.js";
@@ -188,12 +168,23 @@ import {
   AdmonitionHeading
 } from "./chunk-DXBZ3HMY.js";
 import "./chunk-2HOUQ2DX.js";
+import "./chunk-OGYMMATX.js";
 import {
-  Avatar
-} from "./chunk-SXLPDPOZ.js";
+  Radio
+} from "./chunk-STLN7BMJ.js";
 import {
-  CircularProgress
-} from "./chunk-6QHOKCV3.js";
+  RadioParts
+} from "./chunk-FUL2VRDU.js";
+import {
+  RadioGroup,
+  RadioGroupIndicator,
+  RadioGroupItem,
+  RadioGroupItemControl,
+  RadioGroupItemHiddenInput,
+  RadioGroupItemText,
+  RadioGroupLabel,
+  RadioGroupRoot
+} from "./chunk-5RTNSVYU.js";
 import "./chunk-2LF3HPNA.js";
 import {
   OptionGroup,
@@ -202,10 +193,7 @@ import {
 import {
   Option,
   Select
-} from "./chunk-P3SF56LT.js";
-import {
-  Portal
-} from "./chunk-IQJDVFPP.js";
+} from "./chunk-6ICNCCPD.js";
 import {
   SelectParts
 } from "./chunk-XTNGF4D6.js";
@@ -250,7 +238,6 @@ import {
   ToggleIndicator,
   ToggleRoot
 } from "./chunk-CIMY2U22.js";
-import "./chunk-V3M3ZOQI.js";
 import "./chunk-TIJAFPHQ.js";
 import {
   Checkbox
@@ -270,6 +257,42 @@ import {
   CheckboxLabel,
   CheckboxRoot
 } from "./chunk-BPRF34DU.js";
+import "./chunk-IKDXADLX.js";
+import {
+  CTAModal,
+  useCTAModal
+} from "./chunk-QEM3M4N3.js";
+import "./chunk-4LSTU6WU.js";
+import "./chunk-MVO2GNUA.js";
+import {
+  For
+} from "./chunk-DXOKSZVQ.js";
+import {
+  DialogCloseIconTrigger
+} from "./chunk-6BN3XKQF.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogProvider,
+  DialogTrigger
+} from "./chunk-TFL56AYR.js";
+import {
+  Avatar
+} from "./chunk-SXLPDPOZ.js";
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
+import {
+  createCTAModalActions
+} from "./chunk-PLHYOCY3.js";
 import "./chunk-TYPULJMJ.js";
 import {
   Field
@@ -311,23 +334,6 @@ import {
   FieldsetLegend,
   FieldsetRoot
 } from "./chunk-Z3FDG263.js";
-import "./chunk-OGYMMATX.js";
-import {
-  Radio
-} from "./chunk-STLN7BMJ.js";
-import {
-  RadioParts
-} from "./chunk-FUL2VRDU.js";
-import {
-  RadioGroup,
-  RadioGroupIndicator,
-  RadioGroupItem,
-  RadioGroupItemControl,
-  RadioGroupItemHiddenInput,
-  RadioGroupItemText,
-  RadioGroupLabel,
-  RadioGroupRoot
-} from "./chunk-5RTNSVYU.js";
 import {
   useModal
 } from "./chunk-KGQG5JGW.js";
@@ -558,6 +564,7 @@ export {
   ToggleRoot,
   Tooltip,
   Tr,
+  createCTAModalActions,
   createNavTriggerProps,
   createSelectCollection,
   defineIcons,

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Dialog'\nexport * from './components/Dialog.client'\nexport * from './components/Droppable'\nexport * from './components/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/radio/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\nexport * from './components/Tabs.client'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/cta-modal'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,cAAc;","names":[]}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["/**\n * This module is the entry point for the Cerberus React package.\n * @module\n */\n\n// deprecated\n\nexport * from './components/deprecated/FieldMessage'\nexport * from './components/deprecated/FieldsetLabel'\nexport * from './components/deprecated/Label'\nexport * from './components/deprecated/Modal'\nexport * from './components/deprecated/ModalHeader'\nexport * from './components/deprecated/ModalHeading'\nexport * from './components/deprecated/ModalDescription'\nexport * from './components/deprecated/NavMenuTrigger'\nexport * from './components/deprecated/NavMenuList'\nexport * from './components/deprecated/NavMenuLink'\nexport * from './hooks/useDate'\nexport * from './hooks/useModal'\nexport * from './hooks/useToggle'\n\n// components\n\nexport * from './components/Accordion'\nexport * from './components/Accordion.client'\nexport * from './components/AccordionItemGroup'\nexport * from './components/Admonition'\nexport * from './components/Avatar'\nexport * from './components/button/index'\nexport * from './components/checkbox/index'\nexport * from './components/CircularProgress'\nexport * from './components/cta-dialog/index'\nexport * from './components/DatePicker.client'\nexport * from './components/DatePicker.server'\nexport * from './components/Dialog'\nexport * from './components/Dialog.client'\nexport * from './components/Droppable'\nexport * from './components/FeatureFlag'\nexport * from './components/field/index'\nexport * from './components/fieldset/index'\nexport * from './components/FileStatus'\nexport * from './components/FileUploader'\nexport * from './components/for'\nexport * from './components/IconButton'\nexport * from './components/Legend'\nexport * from './components/Menu'\nexport * from './components/Notification'\nexport * from './components/NotificationHeading'\nexport * from './components/NotificationDescription'\nexport * from './components/Portal'\nexport * from './components/ProgressBar'\nexport * from './components/radio/index'\nexport * from './components/select/index'\nexport * from './components/Show'\nexport * from './components/Spinner'\nexport * from './components/switch/index'\nexport * from './components/Tabs.client'\nexport * from './components/Table'\nexport * from './components/Thead'\nexport * from './components/Th'\nexport * from './components/Td'\nexport * from './components/Tbody'\nexport * from './components/Tag'\nexport * from './components/Text'\nexport * from './components/toggle/index'\nexport * from './components/Tooltip'\n\n// context\n\nexport * from './context/cerberus'\nexport * from './context/confirm-modal'\nexport * from './context/feature-flags'\nexport * from './context/navMenu'\nexport * from './context/notification-center'\nexport * from './context/prompt-modal'\nexport * from './context/tabs'\nexport * from './context/theme'\n\n// hooks\n\nexport * from './hooks/useTheme'\nexport * from './hooks/useRootColors'\n\n// aria-helpers\n\nexport * from './aria-helpers/nav-menu.aria'\nexport * from './aria-helpers/trap-focus.aria'\n\n// utils\n\nexport * from './config/index'\nexport * from './utils/index'\n\n// shared types\n\nexport * from './types'\n\n// 3rd party\n\nexport * from '@dnd-kit/core'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGA,cAAc;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerberus-design/react",
-  "version": "0.16.0-next-4f6c716",
+  "version": "0.16.0-next-feeb186",
   "description": "The Cerberus Design React component library.",
   "browserslist": "> 0.25%, not dead",
   "sideEffects": false,
@@ -26,7 +26,7 @@
     "react-dom": "^18",
     "tsup": "^8.1.0",
     "@cerberus-design/configs": "0.0.0",
-    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0-next-4f6c716"
+    "@cerberus/styled-system": "npm:@cerberus-design/styled-system@0.16.0-next-feeb186"
   },
   "publishConfig": {
     "access": "public"

package/src/components/cta-dialog/context.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { createContext, type ReactNode } from 'react'
+import type { CTAModalActionReturn } from './utils'
+
+/**
+ * This module provides the context for the cta modal.
+ * @module
+ */
+
+export interface ShowCTAModalOptions {
+  /**
+   * The heading of the cta modal.
+   */
+  heading: string
+  /**
+   * The description of the cta modal.
+   */
+  description?: string
+  /**
+   * The icon used for the modal Avatar.
+   */
+  icon?: ReactNode
+  /**
+   * The actions for the cta modal. Requires 2 actions.
+   */
+  actions: CTAModalActionReturn
+}
+
+export interface CTAModalValue {
+  show: (options: ShowCTAModalOptions) => void
+}
+
+export const CTAModalContext = createContext<CTAModalValue | null>(null)

package/src/components/cta-dialog/index.ts

@@ -0,0 +1,2 @@
+export * from './provider'
+export * from './utils'

package/src/{context/cta-modal.tsx → components/cta-dialog/provider.tsx}

@@ -1,66 +1,39 @@
 'use client'
 
 import {
-  createContext,
   useCallback,
   useContext,
   useMemo,
   useState,
   type MouseEvent,
-  type MouseEventHandler,
   type PropsWithChildren,
   type ReactNode,
 } from 'react'
-import { Button } from '../components/button/button'
-import { Show } from '../components/Show'
-import { Avatar } from '../components/Avatar'
-import { useCerberusContext } from './cerberus'
-import { HStack } from '@cerberus/styled-system/jsx'
-import { css } from '@cerberus/styled-system/css'
-import { VStack } from '@cerberus/styled-system/jsx'
+import { HStack, VStack } from '@cerberus/styled-system/jsx'
+import { useCerberusContext } from '../../context/cerberus'
+import { Show } from '../Show'
+import { For } from '../for'
+import { Avatar } from '../Avatar'
 import {
   Dialog,
   DialogDescription,
   DialogHeading,
   DialogProvider,
-} from '../components/Dialog'
-import { DialogCloseIconTrigger } from '../components/Dialog.client'
+} from '../Dialog'
+import { DialogCloseIconTrigger } from '../Dialog.client'
+import type { CTAButtonAction, CTAModalActionReturn } from './utils'
+import {
+  CTAModalContext,
+  type CTAModalValue,
+  type ShowCTAModalOptions,
+} from './context'
+import { TriggerItem } from './trigger-item'
 
 /**
- * This module provides a context and hook for the cta modal.
- * @module
+ * This module provides the provider and hook for the cta modal.
+ * @module 'react/cta-modal/provider'
  */
 
-export interface ShowCTAModalOptions {
-  /**
-   * The heading of the cta modal.
-   */
-  heading: string
-  /**
-   * The description of the cta modal.
-   */
-  description?: string
-  /**
-   * The icon used for the modal Avatar.
-   */
-  icon?: ReactNode
-  /**
-   * The actions for the cta modal. Max of 2 actions.
-   */
-  actions: {
-    text: string
-    onClick: MouseEventHandler<HTMLButtonElement>
-  }[]
-}
-
-export interface CTAModalValue {
-  show: (options: ShowCTAModalOptions) => void
-}
-
-const CTAModalContext = createContext<CTAModalValue | null>(null)
-
-export type CTAModalProviderProps = PropsWithChildren<unknown>
-
 /**
  * Provides a CTA modal to the app.
  * @see https://cerberus.digitalu.design/react/cta-modal
@@ -93,7 +66,7 @@ export type CTAModalProviderProps = PropsWithChildren<unknown>
  * }, [cta])
  * ```
  */
-export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
+export function CTAModal(props: PropsWithChildren<object>) {
   const [open, setOpen] = useState<boolean>(false)
   const [content, setContent] = useState<ShowCTAModalOptions | null>(null)
   const confirmIcon = content?.icon
@@ -103,12 +76,6 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
 
   const handleShow = useCallback(
     (options: ShowCTAModalOptions) => {
-      const maxActions = 2
-      if (options.actions.length > maxActions) {
-        throw new Error(
-          `CTA Modal only supports a maximum of ${maxActions} actions.`,
-        )
-      }
       setContent({ ...options })
       setOpen(true)
     },
@@ -117,10 +84,10 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
 
   const handleActionClick = useCallback(
     (event: MouseEvent<HTMLButtonElement>) => {
-      const index = event.currentTarget.getAttribute('data-index')
-      const action = content?.actions[Number(index)]
-      const { onClick } = action || {}
-      onClick?.(event)
+      const index = Number(event.currentTarget.getAttribute('data-index'))
+      const contentActions = content?.actions as CTAModalActionReturn
+      const action = contentActions._actions[index] as CTAButtonAction
+      action?.handleClick?.(event)
       setOpen(false)
     },
     [content, setOpen],
@@ -163,22 +130,21 @@ export function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {
             </VStack>
 
             <HStack gap="md" w="full">
-              <Show when={Boolean(content?.actions?.length)}>
-                {content?.actions?.map((action, index) => (
-                  <Button
-                    data-index={index}
-                    className={css({
-                      w: '1/2',
-                    })}
+              <For each={content?.actions._actions}>
+                {(action, index) => (
+                  <Show
                     key={index}
-                    onClick={handleActionClick}
-                    shape="rounded"
-                    usage="outlined"
+                    when={content?.actions?.type === 'btnAction'}
+                    fallback={
+                      <TriggerItem asChild>{action as ReactNode}</TriggerItem>
+                    }
                   >
-                    {action.text}
-                  </Button>
-                ))}
-              </Show>
+                    <TriggerItem data-index={index} onClick={handleActionClick}>
+                      {(action as CTAButtonAction)?.text}
+                    </TriggerItem>
+                  </Show>
+                )}
+              </For>
             </HStack>
           </VStack>
         </Dialog>

package/src/components/cta-dialog/trigger-item.tsx

@@ -0,0 +1,53 @@
+import { css, cx } from '@cerberus/styled-system/css'
+import { Button, type ButtonProps } from '../button/button'
+import { ark } from '@ark-ui/react/factory'
+import { button } from '@cerberus/styled-system/recipes'
+
+/**
+ * This module provides the trigger item for the cta modal.
+ * @module 'react/cta-modal/trigger-item'
+ */
+
+export interface TriggerItemProps extends ButtonProps {
+  asChild?: boolean
+}
+
+/**
+ * Trigger item for the cta modal which renders content based on the actions.
+ * type.
+ */
+export function TriggerItem(props: TriggerItemProps) {
+  const { asChild, children, ...buttonProps } = props
+
+  if (asChild) {
+    return (
+      <ark.div
+        className={cx(
+          button({
+            shape: 'rounded',
+            usage: 'ghost',
+          }),
+          css({
+            w: '1/2',
+          }),
+        )}
+        asChild
+      >
+        {children}
+      </ark.div>
+    )
+  }
+
+  return (
+    <Button
+      {...buttonProps}
+      className={css({
+        w: '1/2',
+      })}
+      shape="rounded"
+      usage="outlined"
+    >
+      {children}
+    </Button>
+  )
+}

package/src/components/cta-dialog/utils.ts

@@ -0,0 +1,57 @@
+import type { MouseEventHandler, ReactNode } from 'react'
+
+/**
+ * This module provide utility functions for the cta modal.
+ * @module 'react/cta-modal/utils'
+ */
+
+export type CTAButtonAction = {
+  /**
+   * The text of the button.
+   */
+  text: string
+  /**
+   * The onClick handler for the button.
+   */
+  handleClick: MouseEventHandler<HTMLButtonElement>
+}
+
+export type CTAModalAction = (CTAButtonAction | ReactNode)[]
+
+export interface CTAModalActionReturn {
+  /**
+   * The type of the action content.
+   */
+  type: 'reactNode' | 'btnAction'
+  /**
+   * The actions for the cta modal. Max of 2 actions.
+   */
+  _actions: CTAModalAction
+}
+
+/**
+ * Creates the action data to pass to the cta modal `show` method.
+ */
+export function createCTAModalActions(
+  providedActions: CTAModalAction,
+): CTAModalActionReturn {
+  if (providedActions.length !== 2) {
+    throw new Error('CTAModal must include 2 actions')
+  }
+
+  if (
+    providedActions.every(
+      (action) => (action as unknown as CTAButtonAction)?.handleClick,
+    )
+  ) {
+    return {
+      type: 'btnAction',
+      _actions: providedActions as CTAButtonAction[],
+    }
+  }
+
+  return {
+    type: 'reactNode',
+    _actions: providedActions as ReactNode[],
+  }
+}

package/src/components/for.tsx

@@ -1,18 +1,18 @@
-import type { ReactNode } from 'react'
+import type { ReactNode, JSX } from 'react'
 
-export interface ForProps<T> {
+export interface ForProps<T extends readonly unknown[], U extends JSX.Element> {
   /**
-   * The array to iterate over
+   * The array to iterate over.
    */
-  each: T[]
+  each: T | undefined | null | false
   /**
-   * The fallback content to render when the array is empty
+   * The fallback to render when the array is empty.
    */
-  fallback?: ReactNode
+  fallback?: JSX.Element
   /**
-   * The render function to render each item in the array
+   * The children to render for each item in the array.
    */
-  children: (item: Exclude<T, undefined>, index: number) => ReactNode
+  children: (item: T[number], index: number) => U
 }
 
 /**
@@ -27,17 +27,12 @@ export interface ForProps<T> {
  * </For>
  * ```
  */
-export function For<
-  T extends string | number | Record<string, unknown> | object | undefined,
->(props: ForProps<T>) {
-  const mappableChildren = props.children as unknown as (
-    item: T,
-    index: number,
-  ) => ReactNode
-
-  if (props.each?.length === 0) {
+export function For<T extends readonly unknown[], U extends JSX.Element>(
+  props: ForProps<T, U>,
+) {
+  if (!props.each || !props.each.length) {
     return props.fallback || null
   }
 
-  return props.each?.map(mappableChildren) as ReactNode
+  return props.each?.map(props.children) as ReactNode
 }

package/src/index.ts

@@ -29,6 +29,7 @@ export * from './components/Avatar'
 export * from './components/button/index'
 export * from './components/checkbox/index'
 export * from './components/CircularProgress'
+export * from './components/cta-dialog/index'
 export * from './components/DatePicker.client'
 export * from './components/DatePicker.server'
 export * from './components/Dialog'
@@ -68,7 +69,6 @@ export * from './components/Tooltip'
 
 export * from './context/cerberus'
 export * from './context/confirm-modal'
-export * from './context/cta-modal'
 export * from './context/feature-flags'
 export * from './context/navMenu'
 export * from './context/notification-center'