npm - @cerberus-design/react - Versions diffs - 0.16.0-next-22894bb → 0.16.0-next-1e5283a - Mend

@cerberus-design/react 0.16.0-next-22894bb → 0.16.0-next-1e5283a

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 (83) hide show

package/build/modern/_tsup-dts-rollup.d.ts CHANGED Viewed

@@ -46,12 +46,15 @@ import { defaultCoordinates } from '@dnd-kit/core';
 import { defaultDropAnimation } from '@dnd-kit/core';
 import { defaultDropAnimationSideEffects } from '@dnd-kit/core';
 import { defaultScreenReaderInstructions } from '@dnd-kit/core';
-import { Dialog as Dialog_2 } from '@ark-ui/react';
-import { DialogCloseTriggerProps } from '@ark-ui/react';
-import { DialogContentProps } from '@ark-ui/react';
+import { DialogBackdropProps } from '@ark-ui/react/dialog';
+import { DialogCloseTriggerProps } from '@ark-ui/react/dialog';
+import { DialogContentProps } from '@ark-ui/react/dialog';
+import { DialogDescriptionProps } from '@ark-ui/react/dialog';
 import { DialogHTMLAttributes } from 'react';
-import { DialogRootProps } from '@ark-ui/react';
-import { DialogTitleProps } from '@ark-ui/react';
+import { DialogPositionerProps } from '@ark-ui/react/dialog';
+import { DialogRootProps } from '@ark-ui/react/dialog';
+import { DialogTitleProps } from '@ark-ui/react/dialog';
+import { DialogTriggerProps } from '@ark-ui/react/dialog';
 import { DialogVariantProps } from '@cerberus/styled-system/recipes';
 import type { Dispatch } from 'react';
 import { DistanceMeasurement } from '@dnd-kit/core';
@@ -1431,8 +1434,10 @@ export { DestructiveConfirmOptions }
 export { DestructiveConfirmOptions as DestructiveConfirmOptions_alias_1 }
 /**
- * The content of the dialog. Must be used within the `DialogProvider` component.
+ * An abstraction of the Dialog primitives that controls the content of the
+ * dialog. Must be used within the `DialogProvider` component.
  * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
+ * @definition [Ark Dialog docs](https://ark-ui.com/react/docs/components/dialog)
  * @example
  * ```tsx
  * <DialogProvider>
@@ -1448,143 +1453,156 @@ export { DestructiveConfirmOptions as DestructiveConfirmOptions_alias_1 }
 declare function Dialog(props: DialogProps): JSX_2.Element;
 export { Dialog }
 export { Dialog as Dialog_alias_1 }
+export { Dialog as Dialog_alias_2 }
 /**
- * The backdrop of the dialog. Must be used within the `DialogProvider`
- * component.
+ * The overlay of the dialog.
  */
-declare const DialogBackdrop: ForwardRefExoticComponent<Dialog_2.BackdropProps & RefAttributes<HTMLDivElement>>;
+declare function DialogBackdrop(props: DialogBackdropProps): JSX_2.Element;
 export { DialogBackdrop }
 export { DialogBackdrop as DialogBackdrop_alias_1 }
+export { DialogBackdrop as DialogBackdrop_alias_2 }
 /**
- * This module contains client-side components for the Dialog family.
- * @module @cerberus-design/react/dialog
+ * This module contains the close trigger for the dialog.
+ * @module react/dialog
  */
 declare function DialogCloseIconTrigger(props: DialogCloseTriggerProps): JSX_2.Element;
 export { DialogCloseIconTrigger }
 export { DialogCloseIconTrigger as DialogCloseIconTrigger_alias_1 }
+export { DialogCloseIconTrigger as DialogCloseIconTrigger_alias_2 }
 /**
- * The trigger that closes the dialog. Must be used within the `DialogProvider`
- * component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *   <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <Text>Dialog Content</Text>
- *    <DialogCloseTrigger>Close</DialogCloseTrigger>
- *  </Dialog>
- * </DialogProvider>
- * ```
+ * The trigger that closes the dialog.
  */
-declare const DialogCloseTrigger: ForwardRefExoticComponent<Dialog_2.CloseTriggerProps & RefAttributes<HTMLButtonElement>>;
+declare function DialogCloseTrigger(props: DialogTriggerProps): JSX_2.Element;
 export { DialogCloseTrigger }
 export { DialogCloseTrigger as DialogCloseTrigger_alias_1 }
+export { DialogCloseTrigger as DialogCloseTrigger_alias_2 }
 /**
- * The content of the dialog. Must be used within the `DialogProvider`
- * component.
+ * The visible content of the dialog.
  */
-declare const DialogContent: ForwardRefExoticComponent<Dialog_2.ContentProps & RefAttributes<HTMLDivElement>>;
+declare function DialogContent(props: DialogContentProps & DialogVariantProps): JSX_2.Element;
 export { DialogContent }
 export { DialogContent as DialogContent_alias_1 }
+export { DialogContent as DialogContent_alias_2 }
 /**
- * The description of the dialog. Must be used within the `DialogContent` component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *   <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <DialogHeading>Dialog Title</DialogHeading>
- *    <DialogDescription>Dialog Description</DialogDescription>
- *  </Dialog>
- * </DialogProvider>
- * ```
+ * The description of the dialog.
  */
-declare function DialogDescription(props: DialogTitleProps): JSX_2.Element;
+declare function DialogDescription(props: DialogDescriptionProps): JSX_2.Element;
 export { DialogDescription }
 export { DialogDescription as DialogDescription_alias_1 }
+export { DialogDescription as DialogDescription_alias_2 }
 /**
- * The heading of the dialog. Must be used within the `DialogContent` component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *   <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <DialogHeading>Dialog Title</DialogHeading>
- *    <Text>Dialog Content</Text>
- *  </Dialog>
- * </DialogProvider>
- * ```
+ * The heading of the dialog.
  */
 declare function DialogHeading(props: DialogTitleProps): JSX_2.Element;
 export { DialogHeading }
 export { DialogHeading as DialogHeading_alias_1 }
+export { DialogHeading as DialogHeading_alias_2 }
+/**
+ * An Object containing the parts of the dialog component. For users that
+ * prefer Object component syntax.
+ *
+ * @remarks
+ *
+ * When using object component syntax, you import the DialogParts object and
+ * the entire family of components vs. only what you use.
+ */
+declare const DialogParts: DialogPartsValue;
+export { DialogParts }
+export { DialogParts as DialogParts_alias_1 }
+export { DialogParts as DialogParts_alias_2 }
+/**
+ * This module contains the parts of the Dialog component.
+ * @module 'dialog/parts'
+ */
+declare interface DialogPartsValue {
+    /**
+     * The context provider of the dialog.
+     */
+    Root: ElementType;
+    /**
+     * The trigger that opens the dialog.
+     */
+    Trigger: ElementType;
+    /**
+     * The overlay of the dialog.
+     */
+    Backdrop: ElementType;
+    /**
+     * The container that positions the dialog.
+     */
+    Positioner: ElementType;
+    /**
+     * The visible content of the dialog.
+     */
+    Content: ElementType;
+    /**
+     * The heading of the dialog.
+     */
+    Heading: ElementType;
+    /**
+     * The description of the dialog.
+     */
+    Description: ElementType;
+    /**
+     * The trigger that closes the dialog.
+     */
+    CloseTrigger: ElementType;
+}
 /**
- * The positioner of the dialog. Must be used within the `DialogProvider`
- * component.
+ * The container that positions the dialog.
  */
-declare const DialogPositioner: ForwardRefExoticComponent<Dialog_2.PositionerProps & RefAttributes<HTMLDivElement>>;
+declare function DialogPositioner(props: DialogPositionerProps): JSX_2.Element;
 export { DialogPositioner }
 export { DialogPositioner as DialogPositioner_alias_1 }
+export { DialogPositioner as DialogPositioner_alias_2 }
+/**
+ * This module contains and abstraction of the Dialog primitives.
+ * @module 'dialog'
+ */
 declare interface DialogProps extends Omit<DialogContentProps, 'size'>, DialogVariantProps {
 }
 export { DialogProps }
 export { DialogProps as DialogProps_alias_1 }
+export { DialogProps as DialogProps_alias_2 }
 /**
- * The provider that controls the dialog components.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogProvider>
- *  <DialogTrigger asChild>
- *    <Button>Open Dialog</Button>
- *  </DialogTrigger>
- *  <Dialog>
- *    <Text>Dialog Content</Text>
- *    <DialogCloseTrigger>Close</DialogCloseTrigger>
- *  </Dialog>
- * </DialogProvider>
- * ```
+ * The provider that controls the dialog components. This is a named export of
+ * the DialogRoot primitive.
  */
-declare function DialogProvider(props: DialogProviderProps): JSX_2.Element;
+declare const DialogProvider: typeof DialogRoot;
 export { DialogProvider }
 export { DialogProvider as DialogProvider_alias_1 }
+export { DialogProvider as DialogProvider_alias_2 }
-declare type DialogProviderProps = DialogRootProps;
-export { DialogProviderProps }
-export { DialogProviderProps as DialogProviderProps_alias_1 }
+/**
+ * This module contains the primitives of the Dialog component.
+ * @module 'dialog/primitives'
+ */
+/**
+ * The provider that controls the dialog components.
+ */
+declare function DialogRoot(props: DialogRootProps): JSX_2.Element;
+export { DialogRoot }
+export { DialogRoot as DialogRoot_alias_1 }
+export { DialogRoot as DialogRoot_alias_2 }
 /**
- * The trigger that opens the dialog. Must be used within the `DialogProvider`
- * component.
- * @definition [Dialog docs](https://cerberus.digitalu.design/react/dialog)
- * @example
- * ```tsx
- * <DialogTrigger asChild>
- *  <Button>Open Dialog</Button>
- * </DialogTrigger>
- * ```
+ * The trigger that opens the dialog.
  */
-declare const DialogTrigger: ForwardRefExoticComponent<Dialog_2.TriggerProps & RefAttributes<HTMLButtonElement>>;
+declare function DialogTrigger(props: DialogTriggerProps): JSX_2.Element;
 export { DialogTrigger }
 export { DialogTrigger as DialogTrigger_alias_1 }
+export { DialogTrigger as DialogTrigger_alias_2 }
 export { DistanceMeasurement }

package/build/modern/{chunk-QEM3M4N3.js → chunk-4WKM2MJC.js} RENAMED Viewed

@@ -7,18 +7,20 @@ import {
 import {
   For
 } from "./chunk-DXOKSZVQ.js";
+import {
+  Avatar
+} from "./chunk-SXLPDPOZ.js";
 import {
   DialogCloseIconTrigger
-} from "./chunk-6BN3XKQF.js";
+} from "./chunk-NZKE7C53.js";
+import {
+  Dialog
+} from "./chunk-C45HS2C4.js";
 import {
-  Dialog,
   DialogDescription,
   DialogHeading,
   DialogProvider
-} from "./chunk-TFL56AYR.js";
-import {
-  Avatar
-} from "./chunk-SXLPDPOZ.js";
+} from "./chunk-D7UIWAFO.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
@@ -114,4 +116,4 @@ export {
   CTAModal,
   useCTAModal
 };
-//# sourceMappingURL=chunk-QEM3M4N3.js.map
+//# sourceMappingURL=chunk-4WKM2MJC.js.map

package/build/modern/chunk-4WKM2MJC.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/components/cta-dialog/provider.tsx"],"sourcesContent":["'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 '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from '../../context/cerberus'\nimport { Show } from '../Show'\nimport { For } from '../for'\nimport { Avatar } from '../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 ariaLabel=\"\"\n gradient=\"charon-light\"\n icon={\n <Show\n when={Boolean(confirmIcon)}\n fallback={<FallbackIcon size={24} />}\n >\n {confirmIcon}\n </Show>\n }\n src=\"\"\n />\n <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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AACP,SAAS,QAAQ,cAAc;AAiGrB,cAII,YAJJ;AAxCH,SAAS,SAAS,OAAkC;AACzD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAqC,IAAI;AACvE,QAAM,cAAc,SAAS;AAE7B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,cAAc,aAAa,IAAI;AAEvC,QAAM,aAAa;AAAA,IACjB,CAAC,YAAiC;AAChC,iBAAW,EAAE,GAAG,QAAQ,CAAC;AACzB,cAAQ,IAAI;AAAA,IACd;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,UAAyC;AACxC,YAAM,QAAQ,OAAO,MAAM,cAAc,aAAa,YAAY,CAAC;AACnE,YAAM,iBAAiB,SAAS;AAChC,YAAM,SAAS,eAAe,SAAS,KAAK;AAC5C,cAAQ,cAAc,KAAK;AAC3B,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OACvB;AAAA,UAAM;AAAA,IAEP,oBAAC,kBAAe,MAAY,cAAc,CAAC,MAAM,QAAQ,EAAE,IAAI,GAC7D,+BAAC,UAAO,MAAK,MACX;AAAA,0BAAC,0BAAuB;AAAA,MAExB,qBAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA,4BAAC,UAAO,YAAW,cAAa,KAAI,MAAK,GAAE,QACzC,+BAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,UAAS;AAAA,cACT,MACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,QAAQ,WAAW;AAAA,kBACzB,UAAU,oBAAC,gBAAa,MAAM,IAAI;AAAA,kBAEjC;AAAA;AAAA,cACH;AAAA,cAEF,KAAI;AAAA;AAAA,UACN;AAAA,UACA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,UACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,WAC3C,GACF;AAAA,QAEA,oBAAC,UAAO,KAAI,MAAK,GAAE,QACjB,8BAAC,OAAI,MAAM,SAAS,QAAQ,UACzB,WAAC,QAAQ,UACR;AAAA,UAAC;AAAA;AAAA,YAEC,MAAM,SAAS,SAAS,SAAS;AAAA,YACjC,UACE,oBAAC,eAAY,SAAO,MAAE,kBAAoB;AAAA,YAG5C,8BAAC,eAAY,cAAY,OAAO,SAAS,mBACrC,kBAA4B,MAChC;AAAA;AAAA,UARK;AAAA,QASP,GAEJ,GACF;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,cAA6B;AAC3C,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}

package/build/modern/{chunk-H5WNUPGH.js → chunk-6DAOKE6Z.js} RENAMED Viewed

@@ -177,4 +177,4 @@ export {
   NotificationCenter,
   useNotificationCenter
 };
-//# sourceMappingURL=chunk-H5WNUPGH.js.map
+//# sourceMappingURL=chunk-6DAOKE6Z.js.map

package/build/modern/{chunk-H5WNUPGH.js.map → chunk-6DAOKE6Z.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useReducer,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/button/button'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n addNotification,\n clearNotificationState,\n notificationCenterReducer,\n removeNotification,\n updateNotificationState,\n} from './notification-center/store'\n\n/*\n This module provides a context and hook for notifications.\n * @module\n /\n\nexport interface NotifyOptions {\n /\n The palette of the notification.\n * @default 'info'\n /\n palette: 'info' \| 'success' \| 'warning' \| 'danger'\n /\n The heading of the notification.\n /\n heading: string\n /\n The unique id of the notification.\n /\n id?: string\n /\n The description of the notification.\n /\n description?: ReactNode\n /\n The action to take when the notification is closed\n /\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue \| null>(null)\n\nexport type NotificationsProviderProps = PortalProps & {\n /\n The duration in milliseconds to show the notification.\n * @default 6000\n /\n duration?: number\n}\n\n/\n Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n \n // Use the hook to show a notification.\n * const notify = useNotifications()\n \n const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n /\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [state, dispatch] = useReducer(notificationCenterReducer, [])\n const styles = notification()\n\n const timeout = useMemo<number>(\n () => props.duration \|\| 6000,\n [props.duration],\n )\n\n const closeNotification = useCallback(\n (id: string) => {\n updateNotificationState(dispatch, {\n id,\n state: 'closed',\n })\n window.setTimeout(() => {\n removeNotification(dispatch, id)\n }, 150)\n },\n [dispatch],\n )\n\n const handleNotify = useCallback(\n (options: NotifyOptions) => {\n const id = `${options.palette}:${state.length + 1}`\n addNotification(dispatch, {\n ...options,\n id,\n state: 'open',\n })\n\n window.setTimeout(() => {\n closeNotification(id)\n }, timeout)\n },\n [dispatch, state, timeout, closeNotification],\n )\n\n const handleClose = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n closeNotification(target.value)\n },\n [closeNotification],\n )\n\n const handleCloseAll = useCallback(() => {\n state.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n // we don't want to animate out for this one\n clearNotificationState(dispatch)\n }, [state, dispatch])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={state.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={state.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"ghost\"\n >\n Close all\n </Button>\n </Show>\n\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {state.map((option) => (\n <MatchNotification\n key={option.id}\n {...option}\n onClose={handleClose}\n open={option.state}\n />\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n open: 'open' \| 'closed'\n onClose: (e: MouseEvent<HTMLButtonElement>) => void\n key: string \| undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n const { palette, id, onClose, heading, description, open } = props\n const sharedProps = useMemo(\n () => ({\n id: id!,\n open: true,\n onClose,\n 'data-state': open,\n }),\n [id, open, onClose],\n )\n\n switch (palette) {\n case 'success':\n return (\n <Notification {...sharedProps} palette=\"success\">\n <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"success\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'warning':\n return (\n <Notification {...sharedProps} palette=\"warning\">\n <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"warning\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'danger':\n return (\n <Notification {...sharedProps} palette=\"danger\">\n <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"danger\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'info':\n default:\n return (\n <Notification {...sharedProps} palette=\"info\">\n <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"info\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n }\n}\n\n/\n The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n"],"mappings":"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","names":[]}
1	+ {"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useReducer,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { Button } from '../components/button/button'\nimport {\n addNotification,\n clearNotificationState,\n notificationCenterReducer,\n removeNotification,\n updateNotificationState,\n} from './notification-center/store'\n\n/*\n This module provides a context and hook for notifications.\n * @module\n /\n\nexport interface NotifyOptions {\n /\n The palette of the notification.\n * @default 'info'\n /\n palette: 'info' \| 'success' \| 'warning' \| 'danger'\n /\n The heading of the notification.\n /\n heading: string\n /\n The unique id of the notification.\n /\n id?: string\n /\n The description of the notification.\n /\n description?: ReactNode\n /\n The action to take when the notification is closed\n /\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue \| null>(null)\n\nexport type NotificationsProviderProps = PortalProps & {\n /\n The duration in milliseconds to show the notification.\n * @default 6000\n /\n duration?: number\n}\n\n/\n Provides a notification center to the app.\n * @see https://cerberus.digitalu.design/react/notification\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n \n // Use the hook to show a notification.\n * const notify = useNotifications()\n \n const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n /\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [state, dispatch] = useReducer(notificationCenterReducer, [])\n const styles = notification()\n\n const timeout = useMemo<number>(\n () => props.duration \|\| 6000,\n [props.duration],\n )\n\n const closeNotification = useCallback(\n (id: string) => {\n updateNotificationState(dispatch, {\n id,\n state: 'closed',\n })\n window.setTimeout(() => {\n removeNotification(dispatch, id)\n }, 150)\n },\n [dispatch],\n )\n\n const handleNotify = useCallback(\n (options: NotifyOptions) => {\n const id = `${options.palette}:${state.length + 1}`\n addNotification(dispatch, {\n ...options,\n id,\n state: 'open',\n })\n\n window.setTimeout(() => {\n closeNotification(id)\n }, timeout)\n },\n [dispatch, state, timeout, closeNotification],\n )\n\n const handleClose = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n closeNotification(target.value)\n },\n [closeNotification],\n )\n\n const handleCloseAll = useCallback(() => {\n state.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n // we don't want to animate out for this one\n clearNotificationState(dispatch)\n }, [state, dispatch])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={state.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={state.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"ghost\"\n >\n Close all\n </Button>\n </Show>\n\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {state.map((option) => (\n <MatchNotification\n key={option.id}\n {...option}\n onClose={handleClose}\n open={option.state}\n />\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\ninterface MatchNotificationProps extends Omit<NotifyOptions, 'onClose'> {\n open: 'open' \| 'closed'\n onClose: (e: MouseEvent<HTMLButtonElement>) => void\n key: string \| undefined\n}\n\nfunction MatchNotification(props: MatchNotificationProps) {\n const { palette, id, onClose, heading, description, open } = props\n const sharedProps = useMemo(\n () => ({\n id: id!,\n open: true,\n onClose,\n 'data-state': open,\n }),\n [id, open, onClose],\n )\n\n switch (palette) {\n case 'success':\n return (\n <Notification {...sharedProps} palette=\"success\">\n <NotificationHeading palette=\"success\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"success\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'warning':\n return (\n <Notification {...sharedProps} palette=\"warning\">\n <NotificationHeading palette=\"warning\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"warning\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'danger':\n return (\n <Notification {...sharedProps} palette=\"danger\">\n <NotificationHeading palette=\"danger\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"danger\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n\n case 'info':\n default:\n return (\n <Notification {...sharedProps} palette=\"info\">\n <NotificationHeading palette=\"info\">{heading}</NotificationHeading>\n <NotificationDescription palette=\"info\">\n {description}\n </NotificationDescription>\n </Notification>\n )\n }\n}\n\n/\n The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n"],"mappings":"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","names":[]}

package/build/modern/chunk-C45HS2C4.js ADDED Viewed

@@ -0,0 +1,22 @@
+import {
+  Portal
+} from "./chunk-IQJDVFPP.js";
+import {
+  DialogBackdrop,
+  DialogContent,
+  DialogPositioner
+} from "./chunk-D7UIWAFO.js";
+// src/components/dialog/dialog.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Dialog(props) {
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(DialogBackdrop, {}),
+    /* @__PURE__ */ jsx(DialogPositioner, { children: /* @__PURE__ */ jsx(DialogContent, { ...props }) })
+  ] });
+}
+export {
+  Dialog
+};
+//# sourceMappingURL=chunk-C45HS2C4.js.map

package/build/modern/chunk-C45HS2C4.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/components/dialog/dialog.tsx"],"sourcesContent":["import type { DialogContentProps } from '@ark-ui/react/dialog'\nimport type { DialogVariantProps } from '@cerberus/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"],"mappings":";;;;;;;;;;AAiCI,SACE,KADF;AAFG,SAAS,OAAO,OAAoB;AACzC,SACE,qBAAC,UACC;AAAA,wBAAC,kBAAe;AAAA,IAChB,oBAAC,oBACC,8BAAC,iBAAe,GAAG,OAAO,GAC5B;AAAA,KACF;AAEJ;","names":[]}

package/build/modern/{chunk-ZFFW5ELD.js → chunk-CF3EHG42.js} RENAMED Viewed

@@ -1,12 +1,12 @@
 import {
   ProgressBar
 } from "./chunk-WZJ5UQNM.js";
-import {
-  IconButton
-} from "./chunk-APD6IX5R.js";
 import {
   Avatar
 } from "./chunk-SXLPDPOZ.js";
+import {
+  IconButton
+} from "./chunk-APD6IX5R.js";
 import {
   Field
 } from "./chunk-FBS7AX76.js";
@@ -227,4 +227,4 @@ export {
   processStatus,
   FileStatus
 };
-//# sourceMappingURL=chunk-ZFFW5ELD.js.map
+//# sourceMappingURL=chunk-CF3EHG42.js.map

package/build/modern/chunk-D7UIWAFO.js ADDED Viewed

@@ -0,0 +1,84 @@
+// src/components/dialog/primitives.tsx
+import {
+  Dialog
+} from "@ark-ui/react/dialog";
+import { cx } from "@cerberus/styled-system/css";
+import {
+  dialog
+} from "@cerberus/styled-system/recipes";
+import { jsx } from "react/jsx-runtime";
+function DialogRoot(props) {
+  return /* @__PURE__ */ jsx(Dialog.Root, { ...props });
+}
+function DialogTrigger(props) {
+  const styles = dialog();
+  return /* @__PURE__ */ jsx(
+    Dialog.Trigger,
+    {
+      ...props,
+      className: cx(styles.trigger, props.className)
+    }
+  );
+}
+function DialogBackdrop(props) {
+  const styles = dialog();
+  return /* @__PURE__ */ jsx(
+    Dialog.Backdrop,
+    {
+      ...props,
+      className: cx(styles.backdrop, props.className)
+    }
+  );
+}
+function DialogPositioner(props) {
+  const styles = dialog();
+  return /* @__PURE__ */ jsx(
+    Dialog.Positioner,
+    {
+      ...props,
+      className: cx(styles.positioner, props.className)
+    }
+  );
+}
+function DialogContent(props) {
+  const { size, ...contentProps } = props;
+  const styles = dialog({ size });
+  return /* @__PURE__ */ jsx(
+    Dialog.Content,
+    {
+      ...contentProps,
+      className: cx(styles.content, contentProps.className)
+    }
+  );
+}
+function DialogHeading(props) {
+  const styles = dialog();
+  return /* @__PURE__ */ jsx(Dialog.Title, { ...props, className: cx(styles.title, props.className) });
+}
+function DialogDescription(props) {
+  const styles = dialog();
+  return /* @__PURE__ */ jsx(
+    Dialog.Description,
+    {
+      ...props,
+      className: cx(styles.description, props.className)
+    }
+  );
+}
+function DialogCloseTrigger(props) {
+  return /* @__PURE__ */ jsx(Dialog.CloseTrigger, { ...props });
+}
+var DialogProvider = DialogRoot;
+export {
+  DialogRoot,
+  DialogTrigger,
+  DialogBackdrop,
+  DialogPositioner,
+  DialogContent,
+  DialogHeading,
+  DialogDescription,
+  DialogCloseTrigger,
+  DialogProvider
+};
+//# sourceMappingURL=chunk-D7UIWAFO.js.map

package/build/modern/chunk-D7UIWAFO.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/components/dialog/primitives.tsx"],"sourcesContent":["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 '@cerberus/styled-system/css'\nimport {\n dialog,\n type DialogVariantProps,\n} from '@cerberus/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"],"mappings":";AAAA;AAAA,EACE;AAAA,OAQK;AACP,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAWE;AADF,SAAS,WAAW,OAAwB;AACjD,SAAO,oBAAC,OAAO,MAAP,EAAa,GAAG,OAAO;AACjC;AAKO,SAAS,cAAc,OAA2B;AACvD,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,SAAS,MAAM,SAAS;AAAA;AAAA,EAC/C;AAEJ;AAKO,SAAS,eAAe,OAA4B;AACzD,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,UAAU,MAAM,SAAS;AAAA;AAAA,EAChD;AAEJ;AAKO,SAAS,iBAAiB,OAA8B;AAC7D,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,YAAY,MAAM,SAAS;AAAA;AAAA,EAClD;AAEJ;AAKO,SAAS,cAAc,OAAgD;AAC5E,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,SAAS,aAAa,SAAS;AAAA;AAAA,EACtD;AAEJ;AAKO,SAAS,cAAc,OAAyB;AACrD,QAAM,SAAS,OAAO;AACtB,SACE,oBAAC,OAAO,OAAP,EAAc,GAAG,OAAO,WAAW,GAAG,OAAO,OAAO,MAAM,SAAS,GAAG;AAE3E;AAKO,SAAS,kBAAkB,OAA+B;AAC/D,QAAM,SAAS,OAAO;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,OAAO,aAAa,MAAM,SAAS;AAAA;AAAA,EACnD;AAEJ;AAKO,SAAS,mBAAmB,OAA2B;AAC5D,SAAO,oBAAC,OAAO,cAAP,EAAqB,GAAG,OAAO;AACzC;AAMO,IAAM,iBAAiB;","names":[]}

package/build/modern/chunk-DJOYRUNT.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ //# sourceMappingURL=chunk-DJOYRUNT.js.map

package/build/modern/chunk-FCSO6N2Y.js ADDED Viewed

@@ -0,0 +1,27 @@
+import {
+  DialogBackdrop,
+  DialogCloseTrigger,
+  DialogContent,
+  DialogDescription,
+  DialogHeading,
+  DialogPositioner,
+  DialogRoot,
+  DialogTrigger
+} from "./chunk-D7UIWAFO.js";
+// src/components/dialog/parts.ts
+var DialogParts = {
+  Root: DialogRoot,
+  Trigger: DialogTrigger,
+  Backdrop: DialogBackdrop,
+  Positioner: DialogPositioner,
+  Content: DialogContent,
+  Heading: DialogHeading,
+  Description: DialogDescription,
+  CloseTrigger: DialogCloseTrigger
+};
+export {
+  DialogParts
+};
+//# sourceMappingURL=chunk-FCSO6N2Y.js.map

package/build/modern/chunk-FCSO6N2Y.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../src/components/dialog/parts.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport {\n DialogBackdrop,\n DialogCloseTrigger,\n DialogContent,\n DialogDescription,\n DialogHeading,\n DialogPositioner,\n DialogRoot,\n DialogTrigger,\n} from './primitives'\n\n/**\n * This module contains the parts of the Dialog component.\n * @module 'dialog/parts'\n */\n\ninterface DialogPartsValue {\n /**\n * The context provider of the dialog.\n */\n Root: ElementType\n /**\n * The trigger that opens the dialog.\n */\n Trigger: ElementType\n /**\n * The overlay of the dialog.\n */\n Backdrop: ElementType\n /**\n * The container that positions the dialog.\n */\n Positioner: ElementType\n /**\n * The visible content of the dialog.\n */\n Content: ElementType\n /**\n * The heading of the dialog.\n */\n Heading: ElementType\n /**\n * The description of the dialog.\n */\n Description: ElementType\n /**\n * The trigger that closes the dialog.\n */\n CloseTrigger: ElementType\n}\n\n/**\n * An Object containing the parts of the dialog component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the DialogParts object and\n * the entire family of components vs. only what you use.\n */\nexport const DialogParts: DialogPartsValue = {\n Root: DialogRoot,\n Trigger: DialogTrigger,\n Backdrop: DialogBackdrop,\n Positioner: DialogPositioner,\n Content: DialogContent,\n Heading: DialogHeading,\n Description: DialogDescription,\n CloseTrigger: DialogCloseTrigger,\n}\n"],"mappings":";;;;;;;;;;;;AA6DO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAChB;","names":[]}

package/build/modern/{chunk-H54FR7IP.js → chunk-MTZDZXZM.js} RENAMED Viewed

@@ -1,13 +1,15 @@
 import {
-  Dialog,
+  Avatar
+} from "./chunk-SXLPDPOZ.js";
+import {
+  Dialog
+} from "./chunk-C45HS2C4.js";
+import {
   DialogCloseTrigger,
   DialogDescription,
   DialogHeading,
   DialogProvider
-} from "./chunk-TFL56AYR.js";
-import {
-  Avatar
-} from "./chunk-SXLPDPOZ.js";
+} from "./chunk-D7UIWAFO.js";
 import {
   useCerberusContext
 } from "./chunk-GITT5645.js";
@@ -155,4 +157,4 @@ export {
   ConfirmModal,
   useConfirmModal
 };
-//# sourceMappingURL=chunk-H54FR7IP.js.map
+//# sourceMappingURL=chunk-MTZDZXZM.js.map

package/build/modern/{chunk-H54FR7IP.js.map → chunk-MTZDZXZM.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Button } from '../components/button/button'\nimport { css } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from './cerberus'\nimport {\n Dialog,\n DialogCloseTrigger,\n DialogDescription,\n DialogHeading,\n DialogProvider,\n} from '../components/~~Dialog~~'\n\n/*\n This module provides a context and hook for the confirm modal.\n * @module\n /\n\nexport interface BaseConfirmOptions {\n /\n The heading of the confirm modal.\n /\n heading: string\n /\n The text for the action button.\n /\n actionText: string\n /\n The text for the cancel button.\n /\n cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n /\n The kind of confirm modal to show.\n /\n kind?: 'destructive'\n /\n The description of the confirm modal. Can only be a string for destructive confirm modals.\n /\n description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n /\n The kind of confirm modal to show.\n * @default 'non-destructive'\n /\n kind?: 'non-destructive'\n /\n The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n * @example\n * ```tsx\n * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n /\n description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n \| NonDestructiveConfirmModalOptions\n \| DestructiveConfirmOptions\n\nexport type ShowResult =\n \| ((value: boolean \| PromiseLike<boolean>) => void)\n \| null\n\nexport interface ConfirmModalValue {\n show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue \| null>(null)\n\nexport type ConfirmModalProviderProps = PropsWithChildren<unknown>\n\n/\n Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n * <SomeFeatureSection />\n * </ConfirmModal>\n \n // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n \n const handleClick = useCallback(async () => {\n * const userConsent = await confirm.show({\n * heading: 'Add new payment method?',\n * description:\n * 'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n const [open, setOpen] = useState<boolean>(false)\n const [content, setContent] = useState<ShowConfirmModalOptions \| null>(null)\n const resolveRef = useRef<ShowResult>(null)\n const kind = content?.kind ?? 'non-destructive'\n\n const { icons } = useCerberusContext()\n const { confirmModal: ConfirmIcon } = icons\n\n const palette = useMemo(\n () => (kind === 'destructive' ? 'danger' : 'action'),\n [kind],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(true)\n }\n resolveRef.current?.(false)\n setOpen(false)\n },\n [setOpen],\n )\n\n const handleShow = useCallback(\n (options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options })\n setOpen(true)\n resolveRef.current = resolve\n })\n },\n [setOpen, setContent],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <ConfirmModalContext.Provider value={value}>\n {props.children}\n\n <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n <Dialog size=\"sm\">\n <VStack gap=\"xl\" w=\"full\">\n <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n <HStack\n alignSelf=\"center\"\n justify=\"center\"\n paddingBlockEnd=\"md\"\n w=\"full\"\n >\n <Show\n when={palette === 'danger'}\n fallback={\n <Avatar\n ariaLabel=\"\"\n gradient=\"charon-light\"\n icon={<ConfirmIcon size={24} />}\n src=\"\"\n />\n }\n >\n <Avatar\n ariaLabel=\"\"\n gradient=\"hades-dark\"\n icon={<ConfirmIcon size={24} />}\n src=\"\"\n />\n </Show>\n </HStack>\n <DialogHeading>{content?.heading}</DialogHeading>\n <DialogDescription>{content?.description}</DialogDescription>\n </VStack>\n\n <HStack gap=\"4\" w=\"full\">\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <DialogCloseTrigger asChild>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </DialogCloseTrigger>\n </HStack>\n </VStack>\n </Dialog>\n </DialogProvider>\n </ConfirmModalContext.Provider>\n )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n const context = useContext(ConfirmModalContext)\n if (context === null) {\n throw new Error(\n 'useConfirmModal must be used within a ConfirmModal Provider',\n )\n }\n return context\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;~~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","names":[]}
1	+ {"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Button } from '../components/button/button'\nimport { css } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from './cerberus'\nimport {\n Dialog,\n DialogCloseTrigger,\n DialogDescription,\n DialogHeading,\n DialogProvider,\n} from '../components/dialog'\n\n/*\n This module provides a context and hook for the confirm modal.\n * @module\n /\n\nexport interface BaseConfirmOptions {\n /\n The heading of the confirm modal.\n /\n heading: string\n /\n The text for the action button.\n /\n actionText: string\n /\n The text for the cancel button.\n /\n cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n /\n The kind of confirm modal to show.\n /\n kind?: 'destructive'\n /\n The description of the confirm modal. Can only be a string for destructive confirm modals.\n /\n description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n /\n The kind of confirm modal to show.\n * @default 'non-destructive'\n /\n kind?: 'non-destructive'\n /\n The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n * @example\n * ```tsx\n * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n /\n description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n \| NonDestructiveConfirmModalOptions\n \| DestructiveConfirmOptions\n\nexport type ShowResult =\n \| ((value: boolean \| PromiseLike<boolean>) => void)\n \| null\n\nexport interface ConfirmModalValue {\n show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue \| null>(null)\n\nexport type ConfirmModalProviderProps = PropsWithChildren<unknown>\n\n/\n Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n * <SomeFeatureSection />\n * </ConfirmModal>\n \n // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n \n const handleClick = useCallback(async () => {\n * const userConsent = await confirm.show({\n * heading: 'Add new payment method?',\n * description:\n * 'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n const [open, setOpen] = useState<boolean>(false)\n const [content, setContent] = useState<ShowConfirmModalOptions \| null>(null)\n const resolveRef = useRef<ShowResult>(null)\n const kind = content?.kind ?? 'non-destructive'\n\n const { icons } = useCerberusContext()\n const { confirmModal: ConfirmIcon } = icons\n\n const palette = useMemo(\n () => (kind === 'destructive' ? 'danger' : 'action'),\n [kind],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(true)\n }\n resolveRef.current?.(false)\n setOpen(false)\n },\n [setOpen],\n )\n\n const handleShow = useCallback(\n (options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options })\n setOpen(true)\n resolveRef.current = resolve\n })\n },\n [setOpen, setContent],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <ConfirmModalContext.Provider value={value}>\n {props.children}\n\n <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n <Dialog size=\"sm\">\n <VStack gap=\"xl\" w=\"full\">\n <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n <HStack\n alignSelf=\"center\"\n justify=\"center\"\n paddingBlockEnd=\"md\"\n w=\"full\"\n >\n <Show\n when={palette === 'danger'}\n fallback={\n <Avatar\n ariaLabel=\"\"\n gradient=\"charon-light\"\n icon={<ConfirmIcon size={24} />}\n src=\"\"\n />\n }\n >\n <Avatar\n ariaLabel=\"\"\n gradient=\"hades-dark\"\n icon={<ConfirmIcon size={24} />}\n src=\"\"\n />\n </Show>\n </HStack>\n <DialogHeading>{content?.heading}</DialogHeading>\n <DialogDescription>{content?.description}</DialogDescription>\n </VStack>\n\n <HStack gap=\"4\" w=\"full\">\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <DialogCloseTrigger asChild>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </DialogCloseTrigger>\n </HStack>\n </VStack>\n </Dialog>\n </DialogProvider>\n </ConfirmModalContext.Provider>\n )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n const context = useContext(ConfirmModalContext)\n if (context === null) {\n throw new Error(\n 'useConfirmModal must be used within a ConfirmModal Provider',\n )\n }\n return context\n}\n"],"mappings":"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","names":[]}