npm - @cerberus-design/react - Versions diffs - 0.8.1-next-9e4427f → 0.8.1-next-1c8242e - Mend

@cerberus-design/react 0.8.1-next-9e4427f → 0.8.1-next-1c8242e

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

package/build/legacy/context/prompt-modal.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/context/prompt-modal.tsx","../../../src/components/Portal.tsx","../../../src/components/Button.tsx","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/components/Input.tsx","../../../src/context/field.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/components/Show.tsx","../../../src/components/Label.tsx","../../../src/components/ModalIcon.tsx","../../../src/hooks/useModal.ts","../../../src/components/Modal.tsx","../../../src/components/ModalHeader.tsx","../../../src/components/ModalHeading.tsx","../../../src/components/ModalDescription.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type ChangeEvent,\n type MouseEvent,\n type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { useModal } from '../hooks/useModal'\nimport { Modal } from '../components/Modal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\n\n/*\n This module provides a context and hook for the prompt modal.\n * @module\n /\n\nexport interface ShowPromptModalOptions {\n kind?: 'destructive' \| 'non-destructive'\n heading: string\n description?: string\n key: string\n actionText: string\n cancelText: string\n}\nexport type PromptShowResult =\n \| ((value: string \| PromiseLike<string>) => void)\n \| null\n\nexport interface PromptModalValue {\n show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue \| null>(null)\n\nexport interface PromptModalProviderProps {}\n\n/\n Provides a prompt modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n * <SomeFeatureSection />\n * </PromptModal>\n \n // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n \n const handleClick = useCallback(async () => {\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n /\nexport function PromptModal(\n props: PropsWithChildren<PromptModalProviderProps>,\n) {\n const { modalRef, show, close } = useModal()\n const resolveRef = useRef<PromptShowResult>(null)\n const [content, setContent] = useState<ShowPromptModalOptions \| null>(null)\n const [inputValue, setInputValue] = useState<string>('')\n const focusTrap = trapFocus(modalRef)\n const PromptIcon = $cerberusIcons.promptModal\n\n const isValid = useMemo(\n () => inputValue === content?.key,\n [inputValue, content],\n )\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.currentTarget.value)\n },\n [content],\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?.(inputValue)\n }\n close()\n },\n [inputValue, close],\n )\n\n const handleShow = useCallback(\n (options: ShowPromptModalOptions) => {\n return new Promise<string>((resolve) => {\n setContent({ ...options, kind: options.kind \|\| 'non-destructive' })\n show()\n resolveRef.current = resolve\n })\n },\n [show],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <PromptModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <ModalHeader>\n <Show\n when={palette === 'danger'}\n fallback={\n <ModalIcon palette=\"action\">\n <PromptIcon size={24} />\n </ModalIcon>\n }\n >\n <ModalIcon palette=\"danger\">\n <PromptIcon size={24} />\n </ModalIcon>\n </Show>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n mt: '4',\n mb: '8',\n })}\n >\n <Field invalid={!isValid}>\n <Label htmlFor=\"confirm\" size=\"md\">\n Type\n <strong\n className={css({\n textTransform: 'uppercase',\n })}\n >\n {content?.key}\n </strong>\n to confirm\n </Label>\n <Input\n id=\"confirm\"\n name=\"confirm\"\n onChange={handleChange}\n type=\"text\"\n />\n </Field>\n </div>\n\n <div\n className={hstack({\n justifyContent: 'stretch',\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n disabled={!isValid}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\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 </div>\n </Modal>\n </Portal>\n </PromptModalContext.Provider>\n )\n}\n\nexport function usePromptModal(): PromptModalValue {\n const context = useContext(PromptModalContext)\n if (context === null) {\n throw new Error('usePromptModal must be used within a PromptModal Provider')\n }\n return context\n}\n","import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/\n This module is the Portal component.\n * @module\n /\n\nexport interface PortalProps {\n container?: Element \| DocumentFragment\n key?: null \| string\n}\n\n/\n The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @param container - The props for the Portal component.\n * @returns ReactPortal\n /\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n const container = props.container \|\| document.body\n return createPortal(props.children, container, props.key)\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n button,\n type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/\n This module contains the Button component.\n * @module\n /\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n ButtonVariantProps\n\n/\n A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n /\nexport function Button(props: ButtonProps): JSX.Element {\n const { palette, usage, shape, ...nativeProps } = props\n return (\n <button\n {...nativeProps}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n }),\n )}\n />\n )\n}\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n const focusableElements =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n const focusable = Array.from(\n modalRef.current?.querySelectorAll(focusableElements) ?? [],\n )\n const firstFocusable = focusable[0] as HTMLElement\n const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n lastFocusable.focus()\n event.preventDefault()\n }\n } else {\n if (document.activeElement === lastFocusable) {\n firstFocusable.focus()\n event.preventDefault()\n }\n }\n }\n }\n}\n","'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\nexport interface InputBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'size'> {\n describedBy?: string\n id: string\n startIcon?: ReactNode\n endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n const inputStyles = input({ size })\n const { invalid, ...fieldStates } = useFieldContext()\n const hasEndIcon = Boolean(endIcon)\n const { invalid: InvalidIcon } = $cerberusIcons\n\n return (\n <div className={inputStyles.root}>\n <Show when={Boolean(startIcon)}>\n <span className={inputStyles.startIcon}>{startIcon}</span>\n </Show>\n\n <input\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n data-start-icon={Boolean(startIcon)}\n className={cx('peer', nativeProps.className, inputStyles.input)}\n />\n\n <Show when={invalid}>\n <InvalidIcon className={inputStyles.icon} />\n </Show>\n <Show when={hasEndIcon && !invalid}>\n <span className={inputStyles.icon}>{endIcon}</span>\n </Show>\n </div>\n )\n}\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\nexport interface FieldContextValue {\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue \| null>(null)\n\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n","import {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType \| ElementType\n\nexport interface DefinedIcons {\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/\n This module contains substitute icons for the Checkbox component.\n * @module\n /\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/\n Checkmark icon for Checkbox component\n /\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/\n Indeterminate icon for Checkbox component\n /\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n when: boolean \| null \| undefined\n fallback?: ReactNode\n}\n\n/\n Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n * <div>Content</div>\n * </Show>\n /\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n","'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/\n This module contains the Label component.\n * @module\n /\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n htmlFor: string\n hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/\n A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n * <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n /\nexport function Label(props: PropsWithChildren<LabelProps>) {\n const { hidden, size, ...nativeProps } = props\n const { required, disabled } = useFieldContext()\n const usage = hidden ? 'hidden' : 'visible'\n\n return (\n <label\n {...nativeProps}\n {...(disabled && { 'data-disabled': true })}\n className={cx(\n nativeProps.className,\n label({ size, usage }),\n hstack({\n justify: 'space-between',\n w: 'full',\n }),\n )}\n >\n {props.children}\n <Show when={required}>\n <span\n className={css({\n color: 'inherit',\n fontSize: 'inherit',\n })}\n >\n (required)\n </span>\n </Show>\n </label>\n )\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n modalIcon,\n type ModalIconVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nexport type ModalIconProps = HTMLAttributes<HTMLDivElement> &\n ModalIconVariantProps\n\nexport function ModalIcon(props: PropsWithChildren<ModalIconProps>) {\n const { palette, ...nativeProps } = props\n return (\n <div\n {...nativeProps}\n className={cx(\n nativeProps.className,\n modalIcon({\n palette,\n }),\n circle(),\n )}\n >\n {props.children}\n </div>\n )\n}\n","'use client'\n\nimport { useCallback, useMemo, useRef, type RefObject } from 'react'\n\n/\n This module provides a hook for using a custom modal.\n * @module\n /\n\ninterface UseModalReturnValue {\n modalRef: RefObject<HTMLDialogElement>\n show: () => void\n close: () => void\n}\n\nexport function useModal(): UseModalReturnValue {\n const modalRef = useRef<HTMLDialogElement \| null>(null)\n\n const show = useCallback(() => {\n modalRef.current?.showModal()\n }, [])\n\n const close = useCallback(() => {\n modalRef.current?.close()\n }, [])\n\n return useMemo(() => {\n return {\n modalRef,\n show,\n close,\n }\n }, [modalRef, show, close])\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/\n This module contains the Modal root component for a customizable modal.\n * @module\n /\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n return (\n <dialog\n {...props}\n className={cx(props.className, modal().dialog)}\n ref={ref}\n />\n )\n}\n\n/\n The Modal component is the root element for a customizable modal.\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n \n <Modal ref={modalRef}>\n * <ModalIcon icon={$cerberusIcons.alert} />\n * <h2>Modal Heading</h2>\n * <p>Modal description</p>\n * </Modal>\n * ```\n /\nexport const Modal = forwardRef(ModalEl)\n","import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/\n This module contains the ModalHeader component for a customizable modal.\n * @module\n /\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/\n The ModalHeader component is a header element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalHeader>\n * <h2>Modal Heading</h2>\n * </ModalHeader>\n * </Modal>\n * ```\n /\nexport function ModalHeader(props: ModalHeaderProps) {\n return (\n <div\n {...props}\n className={cx(\n props.className,\n vstack({\n alignItems: 'flex-start',\n gap: '4',\n mb: '8',\n }),\n )}\n />\n )\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/\n This module contains the ModalHeading component for a customizable modal.\n * @module\n /\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/\n The ModalHeading component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalHeading>Modal Heading</ModalHeading>\n * </Modal>\n * ```\n /\nexport function ModalHeading(props: ModalHeadingProps) {\n return <p {...props} className={cx(props.className, modal().heading)} />\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/\n This module contains the ModalDescription component for a customizable modal.\n * @module\n /\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/\n The ModalDescription component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalDescription>Modal Heading</ModalDescription>\n * </Modal>\n * ```\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":"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","names":["import_react","import_css","import_patterns","import_recipes","import_css","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_recipes","import_css","import_jsx_runtime","import_css","import_patterns","import_recipes","import_jsx_runtime","import_react","import_css","import_recipes","import_react","import_jsx_runtime","import_css","import_patterns","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../../../src/context/prompt-modal.tsx","../../../src/components/Portal.tsx","../../../src/components/Button.tsx","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/components/Input.tsx","../../../src/context/field.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/components/Show.tsx","../../../src/components/Label.tsx","../../../src/components/ModalIcon.tsx","../../../src/hooks/useModal.ts","../../../src/components/Modal.tsx","../../../src/components/ModalHeader.tsx","../../../src/components/ModalHeading.tsx","../../../src/components/ModalDescription.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type ChangeEvent,\n type MouseEvent,\n type PropsWithChildren,\n} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { useModal } from '../hooks/useModal'\nimport { Modal } from '../components/Modal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\n\n/*\n This module provides a context and hook for the prompt modal.\n * @module\n /\n\nexport interface ShowPromptModalOptions {\n kind?: 'destructive' \| 'non-destructive'\n heading: string\n description?: string\n key: string\n actionText: string\n cancelText: string\n}\nexport type PromptShowResult =\n \| ((value: string \| PromiseLike<string>) => void)\n \| null\n\nexport interface PromptModalValue {\n show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue \| null>(null)\n\nexport interface PromptModalProviderProps {}\n\n/\n Provides a prompt modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n * <SomeFeatureSection />\n * </PromptModal>\n \n // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n \n const handleClick = useCallback(async () => {\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n /\nexport function PromptModal(\n props: PropsWithChildren<PromptModalProviderProps>,\n) {\n const { modalRef, show, close } = useModal()\n const resolveRef = useRef<PromptShowResult>(null)\n const [content, setContent] = useState<ShowPromptModalOptions \| null>(null)\n const [inputValue, setInputValue] = useState<string>('')\n const focusTrap = trapFocus(modalRef)\n const PromptIcon = $cerberusIcons.promptModal\n\n const isValid = useMemo(\n () => inputValue === content?.key,\n [inputValue, content],\n )\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.currentTarget.value)\n },\n [content],\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?.(inputValue)\n }\n close()\n },\n [inputValue, close],\n )\n\n const handleShow = useCallback(\n (options: ShowPromptModalOptions) => {\n return new Promise<string>((resolve) => {\n setContent({ ...options, kind: options.kind \|\| 'non-destructive' })\n show()\n resolveRef.current = resolve\n })\n },\n [show],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <PromptModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <ModalHeader>\n <Show\n when={palette === 'danger'}\n fallback={\n <ModalIcon palette=\"action\">\n <PromptIcon size={24} />\n </ModalIcon>\n }\n >\n <ModalIcon palette=\"danger\">\n <PromptIcon size={24} />\n </ModalIcon>\n </Show>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n mt: '4',\n mb: '8',\n })}\n >\n <Field invalid={!isValid}>\n <Label htmlFor=\"confirm\" size=\"md\">\n Type\n <strong\n className={css({\n textTransform: 'uppercase',\n })}\n >\n {content?.key}\n </strong>\n to confirm\n </Label>\n <Input\n id=\"confirm\"\n name=\"confirm\"\n onChange={handleChange}\n type=\"text\"\n />\n </Field>\n </div>\n\n <div\n className={hstack({\n justifyContent: 'stretch',\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n disabled={!isValid}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\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 </div>\n </Modal>\n </Portal>\n </PromptModalContext.Provider>\n )\n}\n\nexport function usePromptModal(): PromptModalValue {\n const context = useContext(PromptModalContext)\n if (context === null) {\n throw new Error('usePromptModal must be used within a PromptModal Provider')\n }\n return context\n}\n","import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/\n This module is the Portal component.\n * @module\n /\n\nexport interface PortalProps {\n container?: Element \| DocumentFragment\n key?: null \| string\n}\n\n/\n The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @param container - The props for the Portal component.\n * @returns ReactPortal\n /\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n const container = props.container \|\| document.body\n return createPortal(props.children, container, props.key)\n}\n","import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n button,\n type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\n\n/\n This module contains the Button component.\n * @module\n /\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n ButtonVariantProps\n\n/\n A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n /\nexport function Button(props: ButtonProps): JSX.Element {\n const { palette, usage, shape, ...nativeProps } = props\n return (\n <button\n {...nativeProps}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n }),\n )}\n />\n )\n}\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n const focusableElements =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n const focusable = Array.from(\n modalRef.current?.querySelectorAll(focusableElements) ?? [],\n )\n const firstFocusable = focusable[0] as HTMLElement\n const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n lastFocusable.focus()\n event.preventDefault()\n }\n } else {\n if (document.activeElement === lastFocusable) {\n firstFocusable.focus()\n event.preventDefault()\n }\n }\n }\n }\n}\n","'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\nexport interface InputBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' \| 'size'> {\n describedBy?: string\n id: string\n startIcon?: ReactNode\n endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n const inputStyles = input({ size })\n const { invalid, ...fieldStates } = useFieldContext()\n const hasEndIcon = Boolean(endIcon)\n const { invalid: InvalidIcon } = $cerberusIcons\n\n return (\n <div className={inputStyles.root}>\n <Show when={Boolean(startIcon)}>\n <span className={inputStyles.startIcon}>{startIcon}</span>\n </Show>\n\n <input\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n data-start-icon={Boolean(startIcon)}\n className={cx('peer', nativeProps.className, inputStyles.input)}\n />\n\n <Show when={invalid}>\n <InvalidIcon className={inputStyles.icon} />\n </Show>\n <Show when={hasEndIcon && !invalid}>\n <span className={inputStyles.icon}>{endIcon}</span>\n </Show>\n </div>\n )\n}\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\nexport interface FieldContextValue {\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue \| null>(null)\n\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n","import {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType \| ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/\n This module contains substitute icons for the Checkbox component.\n * @module\n /\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/\n Checkmark icon for Checkbox component\n /\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/\n Indeterminate icon for Checkbox component\n /\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n when: boolean \| null \| undefined\n fallback?: ReactNode\n}\n\n/\n Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n * <div>Content</div>\n * </Show>\n /\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n","'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/\n This module contains the Label component.\n * @module\n /\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n htmlFor: string\n hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/\n A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n * <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n /\nexport function Label(props: PropsWithChildren<LabelProps>) {\n const { hidden, size, ...nativeProps } = props\n const { required, disabled } = useFieldContext()\n const usage = hidden ? 'hidden' : 'visible'\n\n return (\n <label\n {...nativeProps}\n {...(disabled && { 'data-disabled': true })}\n className={cx(\n nativeProps.className,\n label({ size, usage }),\n hstack({\n justify: 'space-between',\n w: 'full',\n }),\n )}\n >\n {props.children}\n <Show when={required}>\n <span\n className={css({\n color: 'inherit',\n fontSize: 'inherit',\n })}\n >\n (required)\n </span>\n </Show>\n </label>\n )\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n modalIcon,\n type ModalIconVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nexport type ModalIconProps = HTMLAttributes<HTMLDivElement> &\n ModalIconVariantProps\n\nexport function ModalIcon(props: PropsWithChildren<ModalIconProps>) {\n const { palette, ...nativeProps } = props\n return (\n <div\n {...nativeProps}\n className={cx(\n nativeProps.className,\n modalIcon({\n palette,\n }),\n circle(),\n )}\n >\n {props.children}\n </div>\n )\n}\n","'use client'\n\nimport { useCallback, useMemo, useRef, type RefObject } from 'react'\n\n/\n This module provides a hook for using a custom modal.\n * @module\n /\n\ninterface UseModalReturnValue {\n modalRef: RefObject<HTMLDialogElement>\n show: () => void\n close: () => void\n}\n\nexport function useModal(): UseModalReturnValue {\n const modalRef = useRef<HTMLDialogElement \| null>(null)\n\n const show = useCallback(() => {\n modalRef.current?.showModal()\n }, [])\n\n const close = useCallback(() => {\n modalRef.current?.close()\n }, [])\n\n return useMemo(() => {\n return {\n modalRef,\n show,\n close,\n }\n }, [modalRef, show, close])\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/\n This module contains the Modal root component for a customizable modal.\n * @module\n /\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n return (\n <dialog\n {...props}\n className={cx(props.className, modal().dialog)}\n ref={ref}\n />\n )\n}\n\n/\n The Modal component is the root element for a customizable modal.\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n \n <Modal ref={modalRef}>\n * <ModalIcon icon={$cerberusIcons.alert} />\n * <h2>Modal Heading</h2>\n * <p>Modal description</p>\n * </Modal>\n * ```\n /\nexport const Modal = forwardRef(ModalEl)\n","import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/\n This module contains the ModalHeader component for a customizable modal.\n * @module\n /\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/\n The ModalHeader component is a header element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalHeader>\n * <h2>Modal Heading</h2>\n * </ModalHeader>\n * </Modal>\n * ```\n /\nexport function ModalHeader(props: ModalHeaderProps) {\n return (\n <div\n {...props}\n className={cx(\n props.className,\n vstack({\n alignItems: 'flex-start',\n gap: '4',\n mb: '8',\n }),\n )}\n />\n )\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/\n This module contains the ModalHeading component for a customizable modal.\n * @module\n /\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/\n The ModalHeading component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalHeading>Modal Heading</ModalHeading>\n * </Modal>\n * ```\n /\nexport function ModalHeading(props: ModalHeadingProps) {\n return <p {...props} className={cx(props.className, modal().heading)} />\n}\n","import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/\n This module contains the ModalDescription component for a customizable modal.\n * @module\n /\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/\n The ModalDescription component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalDescription>Modal Heading</ModalDescription>\n * </Modal>\n * ```\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":"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","names":["import_react","import_css","import_patterns","import_recipes","import_css","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","import_recipes","import_css","import_jsx_runtime","import_css","import_patterns","import_recipes","import_jsx_runtime","import_react","import_css","import_recipes","import_react","import_jsx_runtime","import_css","import_patterns","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_jsx_runtime"]}

package/build/legacy/index.cjs CHANGED Viewed

@@ -97,8 +97,86 @@ module.exports = __toCommonJS(src_exports);
 var import_css = require("@cerberus/styled-system/css");
 var import_patterns = require("@cerberus/styled-system/patterns");
 var import_recipes = require("@cerberus/styled-system/recipes");
+// src/config/cerbIcons.ts
 var import_icons = require("@cerberus/icons");
+// src/config/icons/checkbox.icons.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function CheckmarkIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      role: "img",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          fill: "currentColor",
+          d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
+        }
+      )
+    }
+  );
+}
+function IndeterminateIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "svg",
+    {
+      "aria-hidden": "true",
+      xmlns: "http://www.w3.org/2000/svg",
+      role: "img",
+      fill: "none",
+      viewBox: "0 0 24 24",
+      ...props,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
+    }
+  );
+}
+// src/config/cerbIcons.ts
+var defaultIcons = {
+  avatar: import_icons.UserFilled,
+  checkbox: CheckmarkIcon,
+  close: import_icons.CloseFilled,
+  confirmModal: import_icons.Information,
+  delete: import_icons.TrashCan,
+  promptModal: import_icons.Information,
+  fileUploader: import_icons.CloudUpload,
+  indeterminate: IndeterminateIcon,
+  infoNotification: import_icons.InformationFilled,
+  successNotification: import_icons.CheckmarkFilled,
+  warningNotification: import_icons.WarningFilled,
+  dangerNotification: import_icons.ErrorFilled,
+  invalid: import_icons.WarningFilled,
+  invalidAlt: import_icons.Warning,
+  redo: import_icons.Restart,
+  selectArrow: import_icons.ChevronDown,
+  toggleChecked: import_icons.Checkmark
+};
+// src/config/defineIcons.ts
+function _validateIconsProperties(icons) {
+  if (!icons.invalid) {
+    throw new Error(
+      "The an invalid property must be defined in your custom icons library."
+    );
+  }
+}
+function defineIcons(icons) {
+  _validateIconsProperties(icons);
+  $cerberusIcons = {
+    ...defaultIcons,
+    ...icons
+  };
+  return $cerberusIcons;
+}
+var $cerberusIcons = defaultIcons;
 // src/components/Show.tsx
 var import_react = require("react");
 function Show(props) {
@@ -111,11 +189,22 @@ function Show(props) {
 }
 // src/components/Avatar.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function Avatar(props) {
-  const { ariaLabel, as, gradient, size, src, width, height, ...nativeProps } = props;
+  const {
+    ariaLabel,
+    as,
+    gradient,
+    size,
+    src,
+    width,
+    height,
+    icon,
+    ...nativeProps
+  } = props;
+  const { avatar: AvatarIcon } = $cerberusIcons;
   const initials = (ariaLabel || "").split(" ").map((word) => word[0]).join("").slice(0, 2);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "div",
     {
       ...nativeProps,
@@ -124,28 +213,35 @@ function Avatar(props) {
         (0, import_recipes.avatar)({ gradient, size }),
         (0, import_patterns.circle)()
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         Show,
         {
           when: Boolean(src) || Boolean(as),
-          fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             Show,
             {
               when: Boolean(initials),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                import_icons.UserFilled,
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                Show,
                 {
-                  size: iconSizeMap[size]
+                  when: Boolean(icon),
+                  fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    AvatarIcon,
+                    {
+                      size: iconSizeMap[size]
+                    }
+                  ),
+                  children: icon
                 }
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: initials })
+              children: initials
             }
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
             Show,
             {
               when: Boolean(as),
-              fallback: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              fallback: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                 "img",
                 {
                   alt: props.ariaLabel,
@@ -183,10 +279,10 @@ var iconSizeMap = {
 // src/components/Button.tsx
 var import_css2 = require("@cerberus/styled-system/css");
 var import_recipes2 = require("@cerberus/styled-system/recipes");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function Button(props) {
   const { palette, usage, shape, ...nativeProps } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "button",
     {
       ...nativeProps,
@@ -209,7 +305,7 @@ var import_css3 = require("@cerberus/styled-system/css");
 // src/context/field.tsx
 var import_react2 = require("react");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var FieldContext = (0, import_react2.createContext)(null);
 function Field(props) {
   const value = (0, import_react2.useMemo)(
@@ -221,7 +317,7 @@ function Field(props) {
     }),
     [props.disabled, props.readOnly, props.required, props.invalid]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FieldContext.Provider, { value, children: props.children });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FieldContext.Provider, { value, children: props.children });
 }
 function useFieldContext() {
   const context = (0, import_react2.useContext)(FieldContext);
@@ -231,84 +327,6 @@ function useFieldContext() {
   return context;
 }
-// src/config/cerbIcons.ts
-var import_icons2 = require("@cerberus/icons");
-// src/config/icons/checkbox.icons.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function CheckmarkIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "svg",
-    {
-      "aria-hidden": "true",
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      role: "img",
-      viewBox: "0 0 24 24",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        "path",
-        {
-          fill: "currentColor",
-          d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
-        }
-      )
-    }
-  );
-}
-function IndeterminateIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    "svg",
-    {
-      "aria-hidden": "true",
-      xmlns: "http://www.w3.org/2000/svg",
-      role: "img",
-      fill: "none",
-      viewBox: "0 0 24 24",
-      ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
-    }
-  );
-}
-// src/config/cerbIcons.ts
-var defaultIcons = {
-  checkbox: CheckmarkIcon,
-  close: import_icons2.CloseFilled,
-  confirmModal: import_icons2.Information,
-  delete: import_icons2.TrashCan,
-  promptModal: import_icons2.Information,
-  fileUploader: import_icons2.CloudUpload,
-  indeterminate: IndeterminateIcon,
-  infoNotification: import_icons2.InformationFilled,
-  successNotification: import_icons2.CheckmarkFilled,
-  warningNotification: import_icons2.WarningFilled,
-  dangerNotification: import_icons2.ErrorFilled,
-  invalid: import_icons2.WarningFilled,
-  invalidAlt: import_icons2.Warning,
-  redo: import_icons2.Restart,
-  selectArrow: import_icons2.ChevronDown,
-  toggleChecked: import_icons2.Checkmark
-};
-// src/config/defineIcons.ts
-function _validateIconsProperties(icons) {
-  if (!icons.invalid) {
-    throw new Error(
-      "The an invalid property must be defined in your custom icons library."
-    );
-  }
-}
-function defineIcons(icons) {
-  _validateIconsProperties(icons);
-  $cerberusIcons = {
-    ...defaultIcons,
-    ...icons
-  };
-  return $cerberusIcons;
-}
-var $cerberusIcons = defaultIcons;
 // src/components/Checkbox.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function Checkbox(props) {
@@ -1092,7 +1110,7 @@ var import_css20 = require("@cerberus/styled-system/css");
 var import_patterns9 = require("@cerberus/styled-system/patterns");
 var import_recipes16 = require("@cerberus/styled-system/recipes");
 var import_react10 = require("react");
-var import_icons3 = require("@cerberus/icons");
+var import_icons2 = require("@cerberus/icons");
 // src/aria-helpers/trap-focus.aria.ts
 function trapFocus(modalRef) {
@@ -1168,7 +1186,7 @@ function Notification(props) {
             className: styles.close,
             onClick: onClose,
             value: props.id,
-            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons3.Close, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_icons2.Close, {})
           }
         )
       ]
@@ -1579,7 +1597,7 @@ function Tbody(props) {
 }
 // src/components/Tag.tsx
-var import_icons4 = require("@cerberus/icons");
+var import_icons3 = require("@cerberus/icons");
 var import_css33 = require("@cerberus/styled-system/css");
 var import_recipes27 = require("@cerberus/styled-system/recipes");
 var import_jsx_runtime39 = require("react/jsx-runtime");
@@ -1615,7 +1633,7 @@ function Tag(props) {
               size: "sm"
             }),
             onClick,
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons4.Close, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_icons3.Close, {})
           }
         ) })
       ]