@cerberus-design/react 0.0.0-next-bd980a6d9bd07d60e8d7200bd4d56624754e936c

package/dist/components/cta-dialog/context.d.cts

@@ -0,0 +1,32 @@
+import { ReactNode, Context } from 'react';
+import { 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 content of the cta modal.
+     */
+    content?: ReactNode;
+    /**
+     * 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 declare const CTAModalContext: Context<CTAModalValue | null>;

package/dist/components/cta-dialog/context.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, Context } from 'react';
+import { 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 content of the cta modal.
+     */
+    content?: ReactNode;
+    /**
+     * 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 declare const CTAModalContext: Context<CTAModalValue | null>;

package/dist/components/cta-dialog/context.js

@@ -0,0 +1,7 @@
+"use client";
+"use client";
+import { createContext } from "react";
+//#region src/components/cta-dialog/context.tsx
+var CTAModalContext = createContext(null);
+//#endregion
+export { CTAModalContext };

package/dist/components/cta-dialog/index.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_provider = require("./provider.cjs");
+const require_utils = require("./utils.cjs");
+exports.CTAModal = require_provider.CTAModal;
+exports.createCTAModalActions = require_utils.createCTAModalActions;
+exports.useCTAModal = require_provider.useCTAModal;

package/dist/components/cta-dialog/index.d.cts

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

package/dist/components/cta-dialog/index.d.ts

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

package/dist/components/cta-dialog/index.js

@@ -0,0 +1,3 @@
+import { CTAModal, useCTAModal } from "./provider.js";
+import { createCTAModalActions } from "./utils.js";
+export { CTAModal, createCTAModalActions, useCTAModal };

package/dist/components/cta-dialog/provider.cjs

@@ -0,0 +1,147 @@
+"use client";
+"use client";
+const require_show = require("../show/show.cjs");
+const require_cerberus = require("../../context/cerberus.cjs");
+const require_avatar = require("../avatar/avatar.cjs");
+const require_for = require("../for/for.cjs");
+const require_primitives = require("../dialog/primitives.cjs");
+const require_close_icon_trigger = require("../dialog/close-icon-trigger.cjs");
+const require_dialog = require("../dialog/dialog.cjs");
+const require_context = require("./context.cjs");
+const require_trigger_item = require("./trigger-item.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let styled_system_jsx = require("styled-system/jsx");
+//#region src/components/cta-dialog/provider.tsx
+/**
+* This module provides the provider and hook for the cta modal.
+* @module 'react/cta-modal/provider'
+*/
+/**
+* Provides a CTA modal to the app.
+* @see https://cerberus.digitalu.design/react/cta-modal
+* @example
+* ```tsx
+* // Wrap the Provider around the root of the feature.
+* <CTAModal>
+*   <SomeFeatureSection />
+* </CTAModal>
+*
+* // Use the hook to show the cta modal.
+* const cta = useCTAModal()
+*
+* const handleClick = useCallback(async () => {
+*  const userConsent = await cta.show({
+*   heading: 'Create or copy a Cohort',
+*  description:
+*   'Create a new cohort or copy and existing one.',
+*  icon: <Copy size={24} />,
+*  actions: [
+*  {
+*   text: 'Create Cohort',
+*   onClick: () => {},
+*  {
+*   text: 'Copy Cohort',
+*   onClick: () => {}
+*  }
+* })
+* setConsent(userConsent)
+* }, [cta])
+* ```
+*/
+function CTAModal(props) {
+	const { children, ...rootProps } = props;
+	const [open, setOpen] = (0, react.useState)(false);
+	const [content, setContent] = (0, react.useState)(null);
+	const confirmIcon = content?.icon;
+	const { icons } = require_cerberus.useCerberusContext();
+	const { confirmModal: FallbackIcon } = icons;
+	const handleShow = (0, react.useCallback)((options) => {
+		setContent({ ...options });
+		setOpen(true);
+	}, [setOpen]);
+	const handleActionClick = (0, react.useCallback)((event) => {
+		const index = Number(event.currentTarget.getAttribute("data-index"));
+		(content?.actions)._actions[index]?.handleClick?.(event);
+		setOpen(false);
+	}, [content, setOpen]);
+	const value = (0, react.useMemo)(() => ({ show: handleShow }), [handleShow]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_context.CTAModalContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.DialogProvider, {
+			lazyMount: true,
+			open,
+			onOpenChange: (details) => setOpen(details.open),
+			unmountOnExit: true,
+			...rootProps,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_dialog.Dialog, {
+				size: "sm",
+				style: { "--dialog-content-min-h": "auto" },
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_close_icon_trigger.DialogCloseIconTrigger, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.VStack, {
+					gap: "xl",
+					w: "full",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.VStack, {
+						alignItems: "flex-start",
+						gap: "md",
+						w: "full",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.VStack, {
+							gap: "lg",
+							w: "full",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
+									gradient: "charon-light",
+									fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+										when: confirmIcon,
+										fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FallbackIcon, { size: 24 }),
+										children: confirmIcon
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.DialogHeading, { children: content?.heading }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+									when: content?.description,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.DialogDescription, {
+										textAlign: "center",
+										children: content?.description
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+									when: content?.content,
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.DialogDescription, {
+										textAlign: "center",
+										children: content?.content
+									})
+								})
+							]
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(styled_system_jsx.HStack, {
+						gap: "md",
+						w: "full",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_for.For, {
+							each: content?.actions._actions,
+							children: (action, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+								when: content?.actions?.type === "btnAction",
+								fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_trigger_item.TriggerItem, {
+									asChild: true,
+									children: action
+								}),
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_trigger_item.TriggerItem, {
+									"data-index": index,
+									onClick: handleActionClick,
+									children: action?.text
+								})
+							}, index)
+						})
+					})]
+				})]
+			})
+		})]
+	});
+}
+function useCTAModal() {
+	const context = (0, react.useContext)(require_context.CTAModalContext);
+	if (context === null) throw new Error("useCTAModal must be used within a CTAModal Provider");
+	return context;
+}
+//#endregion
+exports.CTAModal = CTAModal;
+exports.useCTAModal = useCTAModal;

package/dist/components/cta-dialog/provider.d.cts

@@ -0,0 +1,41 @@
+import { PropsWithChildren } from 'react';
+import { DialogRootProps } from '../dialog/index';
+import { CTAModalValue } from './context';
+/**
+ * This module provides the provider and hook for the cta modal.
+ * @module 'react/cta-modal/provider'
+ */
+/**
+ * Provides a CTA modal to the app.
+ * @see https://cerberus.digitalu.design/react/cta-modal
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <CTAModal>
+ *   <SomeFeatureSection />
+ * </CTAModal>
+ *
+ * // Use the hook to show the cta modal.
+ * const cta = useCTAModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const userConsent = await cta.show({
+ *   heading: 'Create or copy a Cohort',
+ *  description:
+ *   'Create a new cohort or copy and existing one.',
+ *  icon: <Copy size={24} />,
+ *  actions: [
+ *  {
+ *   text: 'Create Cohort',
+ *   onClick: () => {},
+ *  {
+ *   text: 'Copy Cohort',
+ *   onClick: () => {}
+ *  }
+ * })
+ * setConsent(userConsent)
+ * }, [cta])
+ * ```
+ */
+export declare function CTAModal(props: PropsWithChildren<DialogRootProps>): import("react").JSX.Element;
+export declare function useCTAModal(): CTAModalValue;

package/dist/components/cta-dialog/provider.d.ts

@@ -0,0 +1,41 @@
+import { PropsWithChildren } from 'react';
+import { DialogRootProps } from '../dialog/index';
+import { CTAModalValue } from './context';
+/**
+ * This module provides the provider and hook for the cta modal.
+ * @module 'react/cta-modal/provider'
+ */
+/**
+ * Provides a CTA modal to the app.
+ * @see https://cerberus.digitalu.design/react/cta-modal
+ * @example
+ * ```tsx
+ * // Wrap the Provider around the root of the feature.
+ * <CTAModal>
+ *   <SomeFeatureSection />
+ * </CTAModal>
+ *
+ * // Use the hook to show the cta modal.
+ * const cta = useCTAModal()
+ *
+ * const handleClick = useCallback(async () => {
+ *  const userConsent = await cta.show({
+ *   heading: 'Create or copy a Cohort',
+ *  description:
+ *   'Create a new cohort or copy and existing one.',
+ *  icon: <Copy size={24} />,
+ *  actions: [
+ *  {
+ *   text: 'Create Cohort',
+ *   onClick: () => {},
+ *  {
+ *   text: 'Copy Cohort',
+ *   onClick: () => {}
+ *  }
+ * })
+ * setConsent(userConsent)
+ * }, [cta])
+ * ```
+ */
+export declare function CTAModal(props: PropsWithChildren<DialogRootProps>): import("react").JSX.Element;
+export declare function useCTAModal(): CTAModalValue;

package/dist/components/cta-dialog/provider.js

@@ -0,0 +1,146 @@
+"use client";
+"use client";
+import { Show } from "../show/show.js";
+import { useCerberusContext } from "../../context/cerberus.js";
+import { Avatar } from "../avatar/avatar.js";
+import { For } from "../for/for.js";
+import { DialogDescription, DialogHeading, DialogProvider } from "../dialog/primitives.js";
+import { DialogCloseIconTrigger } from "../dialog/close-icon-trigger.js";
+import { Dialog } from "../dialog/dialog.js";
+import { CTAModalContext } from "./context.js";
+import { TriggerItem } from "./trigger-item.js";
+import { useCallback, useContext, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HStack, VStack } from "styled-system/jsx";
+//#region src/components/cta-dialog/provider.tsx
+/**
+* This module provides the provider and hook for the cta modal.
+* @module 'react/cta-modal/provider'
+*/
+/**
+* Provides a CTA modal to the app.
+* @see https://cerberus.digitalu.design/react/cta-modal
+* @example
+* ```tsx
+* // Wrap the Provider around the root of the feature.
+* <CTAModal>
+*   <SomeFeatureSection />
+* </CTAModal>
+*
+* // Use the hook to show the cta modal.
+* const cta = useCTAModal()
+*
+* const handleClick = useCallback(async () => {
+*  const userConsent = await cta.show({
+*   heading: 'Create or copy a Cohort',
+*  description:
+*   'Create a new cohort or copy and existing one.',
+*  icon: <Copy size={24} />,
+*  actions: [
+*  {
+*   text: 'Create Cohort',
+*   onClick: () => {},
+*  {
+*   text: 'Copy Cohort',
+*   onClick: () => {}
+*  }
+* })
+* setConsent(userConsent)
+* }, [cta])
+* ```
+*/
+function CTAModal(props) {
+	const { children, ...rootProps } = props;
+	const [open, setOpen] = useState(false);
+	const [content, setContent] = useState(null);
+	const confirmIcon = content?.icon;
+	const { icons } = useCerberusContext();
+	const { confirmModal: FallbackIcon } = icons;
+	const handleShow = useCallback((options) => {
+		setContent({ ...options });
+		setOpen(true);
+	}, [setOpen]);
+	const handleActionClick = useCallback((event) => {
+		const index = Number(event.currentTarget.getAttribute("data-index"));
+		(content?.actions)._actions[index]?.handleClick?.(event);
+		setOpen(false);
+	}, [content, setOpen]);
+	const value = useMemo(() => ({ show: handleShow }), [handleShow]);
+	return /* @__PURE__ */ jsxs(CTAModalContext.Provider, {
+		value,
+		children: [children, /* @__PURE__ */ jsx(DialogProvider, {
+			lazyMount: true,
+			open,
+			onOpenChange: (details) => setOpen(details.open),
+			unmountOnExit: true,
+			...rootProps,
+			children: /* @__PURE__ */ jsxs(Dialog, {
+				size: "sm",
+				style: { "--dialog-content-min-h": "auto" },
+				children: [/* @__PURE__ */ jsx(DialogCloseIconTrigger, {}), /* @__PURE__ */ jsxs(VStack, {
+					gap: "xl",
+					w: "full",
+					children: [/* @__PURE__ */ jsx(VStack, {
+						alignItems: "flex-start",
+						gap: "md",
+						w: "full",
+						children: /* @__PURE__ */ jsxs(VStack, {
+							gap: "lg",
+							w: "full",
+							children: [
+								/* @__PURE__ */ jsx(Avatar, {
+									gradient: "charon-light",
+									fallback: /* @__PURE__ */ jsx(Show, {
+										when: confirmIcon,
+										fallback: /* @__PURE__ */ jsx(FallbackIcon, { size: 24 }),
+										children: confirmIcon
+									})
+								}),
+								/* @__PURE__ */ jsx(DialogHeading, { children: content?.heading }),
+								/* @__PURE__ */ jsx(Show, {
+									when: content?.description,
+									children: /* @__PURE__ */ jsx(DialogDescription, {
+										textAlign: "center",
+										children: content?.description
+									})
+								}),
+								/* @__PURE__ */ jsx(Show, {
+									when: content?.content,
+									children: /* @__PURE__ */ jsx(DialogDescription, {
+										textAlign: "center",
+										children: content?.content
+									})
+								})
+							]
+						})
+					}), /* @__PURE__ */ jsx(HStack, {
+						gap: "md",
+						w: "full",
+						children: /* @__PURE__ */ jsx(For, {
+							each: content?.actions._actions,
+							children: (action, index) => /* @__PURE__ */ jsx(Show, {
+								when: content?.actions?.type === "btnAction",
+								fallback: /* @__PURE__ */ jsx(TriggerItem, {
+									asChild: true,
+									children: action
+								}),
+								children: /* @__PURE__ */ jsx(TriggerItem, {
+									"data-index": index,
+									onClick: handleActionClick,
+									children: action?.text
+								})
+							}, index)
+						})
+					})]
+				})]
+			})
+		})]
+	});
+}
+function useCTAModal() {
+	const context = useContext(CTAModalContext);
+	if (context === null) throw new Error("useCTAModal must be used within a CTAModal Provider");
+	return context;
+}
+//#endregion
+export { CTAModal, useCTAModal };

package/dist/components/cta-dialog/trigger-item.cjs

@@ -0,0 +1,31 @@
+"use client";
+const require_button = require("../button/button.cjs");
+let styled_system_recipes = require("styled-system/recipes");
+let _ark_ui_react_factory = require("@ark-ui/react/factory");
+let styled_system_css = require("styled-system/css");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/cta-dialog/trigger-item.tsx
+/**
+* Trigger item for the cta modal which renders content based on the actions.
+* type.
+*/
+function TriggerItem(props) {
+	const { asChild, children, ...buttonProps } = props;
+	if (asChild) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_ark_ui_react_factory.ark.div, {
+		className: (0, styled_system_css.cx)((0, styled_system_recipes.button)({
+			shape: "rounded",
+			usage: "ghost"
+		}), (0, styled_system_css.css)({ w: "1/2" })),
+		asChild: true,
+		children
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+		...buttonProps,
+		className: (0, styled_system_css.css)({ w: "1/2" }),
+		shape: "rounded",
+		usage: "outlined",
+		children
+	});
+}
+//#endregion
+exports.TriggerItem = TriggerItem;

package/dist/components/cta-dialog/trigger-item.d.cts

@@ -0,0 +1,14 @@
+import { CerberusProps } from '../../system/types';
+import { ButtonProps } from '../button/button';
+/**
+ * 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 declare function TriggerItem(props: CerberusProps<'button'> & TriggerItemProps): import("react").JSX.Element;

package/dist/components/cta-dialog/trigger-item.d.ts

@@ -0,0 +1,14 @@
+import { CerberusProps } from '../../system/types';
+import { ButtonProps } from '../button/button';
+/**
+ * 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 declare function TriggerItem(props: CerberusProps<'button'> & TriggerItemProps): import("react").JSX.Element;

package/dist/components/cta-dialog/trigger-item.js

@@ -0,0 +1,31 @@
+"use client";
+import { Button } from "../button/button.js";
+import { button } from "styled-system/recipes";
+import { ark } from "@ark-ui/react/factory";
+import { css, cx } from "styled-system/css";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/cta-dialog/trigger-item.tsx
+/**
+* Trigger item for the cta modal which renders content based on the actions.
+* type.
+*/
+function TriggerItem(props) {
+	const { asChild, children, ...buttonProps } = props;
+	if (asChild) return /* @__PURE__ */ jsx(ark.div, {
+		className: cx(button({
+			shape: "rounded",
+			usage: "ghost"
+		}), css({ w: "1/2" })),
+		asChild: true,
+		children
+	});
+	return /* @__PURE__ */ jsx(Button, {
+		...buttonProps,
+		className: css({ w: "1/2" }),
+		shape: "rounded",
+		usage: "outlined",
+		children
+	});
+}
+//#endregion
+export { TriggerItem };

package/dist/components/cta-dialog/utils.cjs

@@ -0,0 +1,18 @@
+"use client";
+//#region src/components/cta-dialog/utils.ts
+/**
+* Creates the action data to pass to the cta modal `show` method.
+*/
+function createCTAModalActions(providedActions) {
+	if (providedActions.length !== 2) throw new Error("CTAModal must include 2 actions");
+	if (providedActions.every((action) => action?.handleClick)) return {
+		type: "btnAction",
+		_actions: providedActions
+	};
+	return {
+		type: "reactNode",
+		_actions: providedActions
+	};
+}
+//#endregion
+exports.createCTAModalActions = createCTAModalActions;

package/dist/components/cta-dialog/utils.d.cts

@@ -0,0 +1,30 @@
+import { 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 declare function createCTAModalActions(providedActions: CTAModalAction): CTAModalActionReturn;

package/dist/components/cta-dialog/utils.d.ts

@@ -0,0 +1,30 @@
+import { 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 declare function createCTAModalActions(providedActions: CTAModalAction): CTAModalActionReturn;

package/dist/components/cta-dialog/utils.js

@@ -0,0 +1,18 @@
+"use client";
+//#region src/components/cta-dialog/utils.ts
+/**
+* Creates the action data to pass to the cta modal `show` method.
+*/
+function createCTAModalActions(providedActions) {
+	if (providedActions.length !== 2) throw new Error("CTAModal must include 2 actions");
+	if (providedActions.every((action) => action?.handleClick)) return {
+		type: "btnAction",
+		_actions: providedActions
+	};
+	return {
+		type: "reactNode",
+		_actions: providedActions
+	};
+}
+//#endregion
+export { createCTAModalActions };