@cerberus-design/react 0.14.2 → 0.15.0

package/build/legacy/_tsup-dts-rollup.d.cts

@@ -13,8 +13,6 @@ import { AvatarVariantProps } from '@cerberus/styled-system/recipes';
 import { ButtonHTMLAttributes } from 'react';
 import { ButtonVariantProps } from '@cerberus/styled-system/recipes';
 import { CancelDrop } from '@dnd-kit/core';
-import { CarbonIconProps } from '@cerberus/icons';
-import { CarbonIconType } from '@cerberus/icons';
 import { ChangeEvent } from 'react';
 import { CheckboxVariantProps } from '@cerberus/styled-system/recipes';
 import { ClientRect as ClientRect_2 } from '@dnd-kit/core';
@@ -43,7 +41,14 @@ 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 { DialogHTMLAttributes } from 'react';
+import { DialogRootProps } from '@ark-ui/react';
+import { DialogTitleProps } from '@ark-ui/react';
+import { DialogVariantProps } from '@cerberus/styled-system/recipes';
+import type { Dispatch } from 'react';
 import { DistanceMeasurement } from '@dnd-kit/core';
 import { DndContext } from '@dnd-kit/core';
 import { DndContextDescriptor } from '@dnd-kit/core';
@@ -159,10 +164,6 @@ import { UseDroppableArguments } from '@dnd-kit/core';
 import { useSensor } from '@dnd-kit/core';
 import { useSensors } from '@dnd-kit/core';
 
-declare let $cerberusIcons: Required<DefinedIcons>;
-export { $cerberusIcons }
-export { $cerberusIcons as $cerberusIcons_alias_1 }
-
 /**
  * The context provider for the Accordion family.
  * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)
@@ -325,6 +326,18 @@ export { Activators }
 
 export { Active }
 
+/**
+ * Adds a notification to the notification center.
+ * @param dispatch The dispatch function.
+ * @param options The notification options.
+ */
+export declare function addNotification(dispatch: Dispatch<AddNotifyAction>, options: AddNotifyAction['payload']): void;
+
+export declare type AddNotifyAction = {
+    type: 'ADD_NOTIFICATION';
+    payload: NotificationOption;
+};
+
 /**
  * The `Admonition` component is used to create an admonition.
  * @example
@@ -405,7 +418,9 @@ export declare function AnimatingUploadIcon(props: AnimatingUploadIconProps): JS
  * This module contains an animating icon to use for the FileStatus component.
  * @module
  */
-export declare type AnimatingUploadIconProps = CarbonIconProps;
+export declare interface AnimatingUploadIconProps {
+    size?: 16 | 20 | 24 | 32;
+}
 
 export { Announcements }
 
@@ -523,6 +538,19 @@ export { ButtonProps as ButtonProps_alias_1 }
 
 export { CancelDrop }
 
+/**
+ * Cerberus configuration provider.
+ * @param props.config The Cerberus configuration created with
+ * `makeSystemConfig` helper.
+ */
+declare function CerberusProvider(props: PropsWithChildren<CerberusProviderProps>): JSX_2.Element;
+export { CerberusProvider }
+export { CerberusProvider as CerberusProvider_alias_1 }
+
+declare interface CerberusProviderProps {
+    config: SystemConfig;
+}
+
 /**
  * Checkbox component
  * @definition [ARIA Target Size](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html#:~:text=Understanding%20SC%202.5.,%3ATarget%20Size%20(Level%20AAA)&text=The%20size%20of%20the%20target,Equivalent)
@@ -621,6 +649,16 @@ declare interface CircularProgressProps extends SVGProps<SVGSVGElement> {
 export { CircularProgressProps }
 export { CircularProgressProps as CircularProgressProps_alias_1 }
 
+/**
+ * Clears the notification state.
+ * @param dispatch The dispatch function.
+ */
+export declare function clearNotificationState(dispatch: Dispatch<ClearNotifyAction>): void;
+
+export declare type ClearNotifyAction = {
+    type: 'CLEAR_NOTIFICATIONS';
+};
+
 declare type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {
     /**
      * The gradient to apply to the tag. Not available when the onClick prop is
@@ -813,7 +851,9 @@ export { DatePicker as DatePicker_alias_1 }
  * </Field>
  * ```
  */
-declare function DatePickerCalendar(): JSX_2.Element;
+declare function DatePickerCalendar(props: {
+    withModal?: boolean;
+}): JSX_2.Element;
 export { DatePickerCalendar }
 export { DatePickerCalendar as DatePickerCalendar_alias_1 }
 
@@ -831,7 +871,9 @@ export { DatePickerCalendar as DatePickerCalendar_alias_1 }
  * </Field>
  * ```
  */
-declare function DatePickerContent(props: DatePickerContentProps): JSX_2.Element;
+declare function DatePickerContent(props: DatePickerContentProps & {
+    withModal?: boolean;
+}): JSX_2.Element;
 export { DatePickerContent }
 export { DatePickerContent as DatePickerContent_alias_1 }
 
@@ -1043,8 +1085,6 @@ export { defaultDropAnimation }
 
 export { defaultDropAnimationSideEffects }
 
-export declare const defaultIcons: DefinedIcons;
-
 export { defaultScreenReaderInstructions }
 
 /**
@@ -1055,34 +1095,51 @@ declare type DefaultThemes = 'cerberus' | 'acheron';
 export { DefaultThemes }
 export { DefaultThemes as DefaultThemes_alias_1 }
 
-export declare interface DefinedIcons {
-    accordionIndicator?: IconType;
-    avatar?: IconType;
-    calendar?: IconType;
-    calendarPrev?: IconType;
-    calendarNext?: IconType;
-    checkbox?: IconType;
-    close?: IconType;
-    confirmModal?: IconType;
-    delete?: IconType;
-    promptModal?: IconType;
-    waitingFileUploader?: IconType;
-    fileUploader?: IconType;
-    indeterminate?: IconType;
-    infoNotification?: IconType;
-    successNotification?: IconType;
-    warningNotification?: IconType;
-    dangerNotification?: IconType;
-    invalid: IconType;
-    invalidAlt?: IconType;
-    redo?: IconType;
-    selectArrow?: IconType;
-    toggleChecked?: IconType;
+declare interface DefinedIcons<T extends IconType = IconType> {
+    accordionIndicator: T;
+    avatar: T;
+    calendar: T;
+    calendarPrev: T;
+    calendarNext: T;
+    checkbox?: T;
+    close: T;
+    confirmModal: T;
+    delete: T;
+    promptModal: T;
+    waitingFileUploader: T;
+    fileUploader?: T;
+    indeterminate?: T;
+    infoNotification: T;
+    successNotification: T;
+    warningNotification: T;
+    dangerNotification: T;
+    invalid: T;
+    invalidAlt: T;
+    redo: T;
+    selectArrow: T;
+    toggleChecked: T;
 }
+export { DefinedIcons }
+export { DefinedIcons as DefinedIcons_alias_1 }
+export { DefinedIcons as DefinedIcons_alias_2 }
 
-declare function defineIcons(icons: DefinedIcons): Required<DefinedIcons>;
+/**
+ * Defines the icons that will be used in Cerberus React components via the
+ * CerberusProvider.
+ * @param icons The icons that will be used in Cerberus React components.
+ * @returns Icons object compatible with the CerberusProvider SystemConfig.
+ * @example
+ * ```tsx
+ * const icons = defineIcons({
+ *  accordionIndicator: MyAccordionIndicatorIcon,
+ *  ...
+ * })
+ * ```
+ */
+declare function defineIcons<T extends IconType>(icons: DefinedIcons): Required<DefinedIcons<T>>;
 export { defineIcons }
 export { defineIcons as defineIcons_alias_1 }
+export { defineIcons as defineIcons_alias_2 }
 
 declare interface DestructiveConfirmOptions extends BaseConfirmOptions {
     /**
@@ -1097,6 +1154,162 @@ declare interface DestructiveConfirmOptions extends BaseConfirmOptions {
 export { DestructiveConfirmOptions }
 export { DestructiveConfirmOptions as DestructiveConfirmOptions_alias_1 }
 
+/**
+ * The content of 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>
+ *  </Dialog>
+ * </DialogProvider>
+ * ```
+ */
+declare function Dialog(props: DialogProps): JSX_2.Element;
+export { Dialog }
+export { Dialog as Dialog_alias_1 }
+
+/**
+ * The backdrop of the dialog. Must be used within the `DialogProvider`
+ * component.
+ */
+declare const DialogBackdrop: ForwardRefExoticComponent<Dialog_2.BackdropProps & RefAttributes<HTMLDivElement>>;
+export { DialogBackdrop }
+export { DialogBackdrop as DialogBackdrop_alias_1 }
+
+/**
+ * This module contains client-side components for the Dialog family.
+ * @module @cerberus-design/react/dialog
+ */
+declare function DialogCloseIconTrigger(props: DialogCloseTriggerProps): JSX_2.Element;
+export { DialogCloseIconTrigger }
+export { DialogCloseIconTrigger as DialogCloseIconTrigger_alias_1 }
+
+/**
+ * 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>
+ * ```
+ */
+declare const DialogCloseTrigger: ForwardRefExoticComponent<Dialog_2.CloseTriggerProps & RefAttributes<HTMLButtonElement>>;
+export { DialogCloseTrigger }
+export { DialogCloseTrigger as DialogCloseTrigger_alias_1 }
+
+/**
+ * The content of the dialog. Must be used within the `DialogProvider`
+ * component.
+ */
+declare const DialogContent: ForwardRefExoticComponent<Dialog_2.ContentProps & RefAttributes<HTMLDivElement>>;
+export { DialogContent }
+export { DialogContent as DialogContent_alias_1 }
+
+/**
+ * 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>
+ * ```
+ */
+declare function DialogDescription(props: DialogTitleProps): JSX_2.Element;
+export { DialogDescription }
+export { DialogDescription as DialogDescription_alias_1 }
+
+/**
+ * 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>
+ * ```
+ */
+declare function DialogHeading(props: DialogTitleProps): JSX_2.Element;
+export { DialogHeading }
+export { DialogHeading as DialogHeading_alias_1 }
+
+/**
+ * The positioner of the dialog. Must be used within the `DialogProvider`
+ * component.
+ */
+declare const DialogPositioner: ForwardRefExoticComponent<Dialog_2.PositionerProps & RefAttributes<HTMLDivElement>>;
+export { DialogPositioner }
+export { DialogPositioner as DialogPositioner_alias_1 }
+
+declare interface DialogProps extends Omit<DialogContentProps, 'size'>, DialogVariantProps {
+}
+export { DialogProps }
+export { DialogProps as DialogProps_alias_1 }
+
+/**
+ * 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>
+ * ```
+ */
+declare function DialogProvider(props: DialogProviderProps): JSX_2.Element;
+export { DialogProvider }
+export { DialogProvider as DialogProvider_alias_1 }
+
+declare type DialogProviderProps = DialogRootProps;
+export { DialogProviderProps }
+export { DialogProviderProps as DialogProviderProps_alias_1 }
+
+/**
+ * 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>
+ * ```
+ */
+declare const DialogTrigger: ForwardRefExoticComponent<Dialog_2.TriggerProps & RefAttributes<HTMLButtonElement>>;
+export { DialogTrigger }
+export { DialogTrigger as DialogTrigger_alias_1 }
+
 export { DistanceMeasurement }
 
 export { DndContext }
@@ -1613,7 +1826,10 @@ declare interface IconButtonRawProps extends ButtonHTMLAttributes<HTMLButtonElem
 export { IconButtonRawProps }
 export { IconButtonRawProps as IconButtonRawProps_alias_1 }
 
-export declare type IconType = CarbonIconType | ElementType;
+declare type IconType = ElementType;
+export { IconType }
+export { IconType as IconType_alias_1 }
+export { IconType as IconType_alias_2 }
 
 /**
  * Indeterminate icon for Checkbox component
@@ -1773,6 +1989,34 @@ declare type LegendProps = HTMLAttributes<HTMLLegendElement> & LabelVariantProps
 export { LegendProps }
 export { LegendProps as LegendProps_alias_1 }
 
+/**
+ * Create a system configuration object to be used on the CerberusProvider.
+ * @param options The system configuration options you want to customize.
+ * @returns A CerberusProvider-compatible system configuration object.
+ * @example
+ * ```tsx
+ * const icons = defineIcons({
+ *  accordionIndicator: MyAccordionIndicatorIcon,
+ *  ...
+ * })
+ * const config = makeSystemConfig({
+ *   icons,
+ * })
+ *
+ * // In your app
+ * <CerberusProvider config={config}>
+ *  <App />
+ * </CerberusProvider>
+ * ```
+ */
+declare function makeSystemConfig(options: SystemConfig): SystemConfig;
+export { makeSystemConfig }
+export { makeSystemConfig as makeSystemConfig_alias_1 }
+
+export declare function MatchAvatar(props: MatchAvatarProps): JSX_2.Element;
+
+declare type MatchAvatarProps = AdmonitionVariantProps;
+
 export { MeasuringConfiguration }
 
 export { MeasuringFrequency }
@@ -1912,36 +2156,14 @@ export { MenuTrigger }
 export { MenuTrigger as MenuTrigger_alias_1 }
 
 /**
- * The Modal component is the root element for a customizable modal.
- * @see https://cerberus.digitalu.design/react/modal
- * @example
- * ```tsx
- * const { modalRef } = useModal()
- *
- * <Modal ref={modalRef}>
- *  <Avatar icon={SomeIcon} />
- *  <ModalHeader>
- *    <ModalHeading>Modal Heading</ModalHeading>
- *    <ModalDescription>Modal description</ModalDescription>
- *  </ModalHeader>
- *
- *  {props.children}
- * </Modal>
- * ```
+ * @deprecated use `Dialog` instead
  */
 declare const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDialogElement>>;
 export { Modal }
 export { Modal as Modal_alias_1 }
 
 /**
- * The ModalDescription component is a heading element for a customizable modal.
- * @see https://cerberus.digitalu.design/react/modal
- * @example
- * ```tsx
- * <Modal>
- *   <ModalDescription>Modal Heading</ModalDescription>
- * </Modal>
- * ```
+ * @deprecated use `DialogDescription` instead
  */
 declare function ModalDescription(props: ModalDescriptionProps): JSX_2.Element;
 export { ModalDescription }
@@ -1956,16 +2178,7 @@ export { ModalDescriptionProps }
 export { ModalDescriptionProps as ModalDescriptionProps_alias_1 }
 
 /**
- * The ModalHeader component is a header element for a customizable modal.
- * @see https://cerberus.digitalu.design/react/modal
- * @example
- * ```tsx
- * <Modal>
- *   <ModalHeader>
- *     <h2>Modal Heading</h2>
- *   </ModalHeader>
- * </Modal>
- * ```
+ * @deprecated there is no replacement for this component
  */
 declare function ModalHeader(props: ModalHeaderProps): JSX_2.Element;
 export { ModalHeader }
@@ -1980,14 +2193,7 @@ export { ModalHeaderProps }
 export { ModalHeaderProps as ModalHeaderProps_alias_1 }
 
 /**
- * The ModalHeading component is a heading element for a customizable modal.
- * @see https://cerberus.digitalu.design/react/modal
- * @example
- * ```tsx
- * <Modal>
- *   <ModalHeading>Modal Heading</ModalHeading>
- * </Modal>
- * ```
+ * @deprecated use `DialogHeading` instead
  */
 declare function ModalHeading(props: ModalHeadingProps): JSX_2.Element;
 export { ModalHeading }
@@ -2249,6 +2455,19 @@ declare function NotificationCenter(props: PropsWithChildren<NotificationsProvid
 export { NotificationCenter }
 export { NotificationCenter as NotificationCenter_alias_1 }
 
+/**
+ * This module contains the reducer store and actions for the notification
+ * center.
+ * @module notification-center/store
+ */
+/**
+ * The reducer for the notification center.
+ * @param state An array of notifications.
+ * @param action An action to take on the notifications.
+ * @returns The new state of the notifications.
+ */
+export declare function notificationCenterReducer(state: NotificationsStore, action: AddNotifyAction | RemoveNotifyAction | UpdateNotifyAction | ClearNotifyAction): NotificationsStore;
+
 /**
  * Used to render the description of a notification.
  * @see https://cerberus.digitalu.design/react/notification
@@ -2277,14 +2496,26 @@ declare type NotificationHeadingProps = BaseNotificationHeadingProps & Notificat
 export { NotificationHeadingProps }
 export { NotificationHeadingProps as NotificationHeadingProps_alias_1 }
 
+export declare type NotificationOption = NotifyOptions & {
+    state: 'open' | 'closed';
+};
+
 declare type NotificationProps = NotificationBaseProps & NotificationVariantProps;
 export { NotificationProps }
 export { NotificationProps as NotificationProps_alias_1 }
 
-declare type NotificationsProviderProps = PortalProps;
+declare type NotificationsProviderProps = PortalProps & {
+    /**
+     * The duration in milliseconds to show the notification.
+     * @default 6000
+     */
+    duration?: number;
+};
 export { NotificationsProviderProps }
 export { NotificationsProviderProps as NotificationsProviderProps_alias_1 }
 
+export declare type NotificationsStore = NotificationOption[];
+
 declare interface NotificationsValue {
     notify: (options: NotifyOptions) => void;
 }
@@ -2546,12 +2777,39 @@ export { RadioRecipe as RadioRecipe_alias_1 }
  * </Field>
  * ```
  */
-declare function RangePickerInput(props: DatePickerInputProps): JSX_2.Element;
+declare function RangePickerInput(props: RangePickerInputProps): JSX_2.Element;
 export { RangePickerInput }
 export { RangePickerInput as RangePickerInput_alias_1 }
 
+declare interface RangePickerInputProps extends Omit<DatePickerInputProps, 'defaultValue'> {
+    /**
+     * The defaultValue to add for the inputs. The first item is the start date
+     * and the second item is the end date.
+     */
+    defaultValue?: [
+    InputHTMLAttributes<HTMLInputElement>['defaultValue'],
+    InputHTMLAttributes<HTMLInputElement>['defaultValue']
+    ];
+}
+export { RangePickerInputProps }
+export { RangePickerInputProps as RangePickerInputProps_alias_1 }
+
 export { rectIntersection }
 
+/**
+ * Removes a notification from the notification center.
+ * @param dispatch The dispatch function.
+ * @param id The id of the notification to remove.
+ */
+export declare function removeNotification(dispatch: Dispatch<RemoveNotifyAction>, id: RemoveNotifyAction['payload']['id']): void;
+
+export declare type RemoveNotifyAction = {
+    type: 'REMOVE_NOTIFICATION';
+    payload: {
+        id: Required<NotificationOption['id']>;
+    };
+};
+
 /**
  * This module provides a hook to get Cerberus colors from the document root.
  * @module useRootColors
@@ -2803,6 +3061,20 @@ declare type StaticTagProps = HTMLAttributes<HTMLSpanElement> & TagVariantProps
 export { StaticTagProps }
 export { StaticTagProps as StaticTagProps_alias_1 }
 
+/**
+ * This module contains the types for the Cerberus React configuration.
+ * @module config.types
+ */
+declare interface SystemConfig {
+    /**
+     * The icons that will be used in Cerberus React components.
+     */
+    icons: Required<DefinedIcons>;
+}
+export { SystemConfig }
+export { SystemConfig as SystemConfig_alias_1 }
+export { SystemConfig as SystemConfig_alias_2 }
+
 /**
  * The trigger for the Tabs group.
  * @definition [Tabs docs](https://cerberus.digitalu.design/react/tabs)
@@ -3344,6 +3616,28 @@ export { TrProps as TrProps_alias_1 }
 
 export { UniqueIdentifier }
 
+/**
+ * Updates a notification in the notification center.
+ * @param dispatch The dispatch function.
+ * @param options The notification options.
+ */
+export declare function updateNotificationState(dispatch: Dispatch<UpdateNotifyAction>, options: UpdateNotifyAction['payload']): void;
+
+export declare type UpdateNotifyAction = {
+    type: 'UPDATE_NOTIFICATION';
+    payload: {
+        id: Required<NotificationOption['id']>;
+    } & Partial<NotificationOption>;
+};
+
+/**
+ * Returns the Cerberus configuration context.
+ * @returns The Cerberus configuration context.
+ */
+declare function useCerberusContext(): SystemConfig;
+export { useCerberusContext }
+export { useCerberusContext as useCerberusContext_alias_1 }
+
 declare function useConfirmModal(): ConfirmModalValue;
 export { useConfirmModal }
 export { useConfirmModal as useConfirmModal_alias_1 }