@cerberus-design/react 0.13.2 → 0.14.0
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.
- package/build/legacy/_tsup-dts-rollup.d.cts +607 -129
- package/build/legacy/components/Accordion.cjs +101 -0
- package/build/legacy/components/Accordion.cjs.map +1 -0
- package/build/legacy/components/AccordionItemGroup.cjs +119 -0
- package/build/legacy/components/AccordionItemGroup.cjs.map +1 -0
- package/build/legacy/components/Admonition.cjs +3 -0
- package/build/legacy/components/Admonition.cjs.map +1 -1
- package/build/legacy/components/Avatar.cjs +3 -0
- package/build/legacy/components/Avatar.cjs.map +1 -1
- package/build/legacy/components/Checkbox.cjs +3 -0
- package/build/legacy/components/Checkbox.cjs.map +1 -1
- package/build/legacy/components/DatePicker.client.cjs +497 -0
- package/build/legacy/components/DatePicker.client.cjs.map +1 -0
- package/build/legacy/components/DatePicker.server.cjs +364 -0
- package/build/legacy/components/DatePicker.server.cjs.map +1 -0
- package/build/legacy/components/FileStatus.cjs +3 -0
- package/build/legacy/components/FileStatus.cjs.map +1 -1
- package/build/legacy/components/FileUploader.cjs +3 -0
- package/build/legacy/components/FileUploader.cjs.map +1 -1
- package/build/legacy/components/Input.cjs +3 -0
- package/build/legacy/components/Input.cjs.map +1 -1
- package/build/legacy/components/Notification.cjs +3 -0
- package/build/legacy/components/Notification.cjs.map +1 -1
- package/build/legacy/components/NotificationDescription.cjs.map +1 -1
- package/build/legacy/components/NotificationHeading.cjs.map +1 -1
- package/build/legacy/components/ProgressBar.cjs.map +1 -1
- package/build/legacy/components/Select.cjs +3 -0
- package/build/legacy/components/Select.cjs.map +1 -1
- package/build/legacy/components/Tabs.client.cjs +104 -0
- package/build/legacy/components/Tabs.client.cjs.map +1 -0
- package/build/legacy/components/Tag.cjs +3 -0
- package/build/legacy/components/Tag.cjs.map +1 -1
- package/build/legacy/components/Text.cjs +59 -0
- package/build/legacy/components/Text.cjs.map +1 -0
- package/build/legacy/components/Toggle.cjs +3 -0
- package/build/legacy/components/Toggle.cjs.map +1 -1
- package/build/legacy/components/Tooltip.cjs +2 -2
- package/build/legacy/components/Tooltip.cjs.map +1 -1
- package/build/legacy/config/cerbIcons.cjs +3 -0
- package/build/legacy/config/cerbIcons.cjs.map +1 -1
- package/build/legacy/config/defineIcons.cjs +3 -0
- package/build/legacy/config/defineIcons.cjs.map +1 -1
- package/build/legacy/config/icons/checkbox.icons.cjs.map +1 -1
- package/build/legacy/context/confirm-modal.cjs +3 -0
- package/build/legacy/context/confirm-modal.cjs.map +1 -1
- package/build/legacy/context/cta-modal.cjs +5 -3
- package/build/legacy/context/cta-modal.cjs.map +1 -1
- package/build/legacy/context/notification-center.cjs +3 -0
- package/build/legacy/context/notification-center.cjs.map +1 -1
- package/build/legacy/context/prompt-modal.cjs +3 -0
- package/build/legacy/context/prompt-modal.cjs.map +1 -1
- package/build/legacy/context/tabs.cjs +53 -24
- package/build/legacy/context/tabs.cjs.map +1 -1
- package/build/legacy/hooks/useDate.cjs +8 -0
- package/build/legacy/hooks/useDate.cjs.map +1 -1
- package/build/legacy/index.cjs +1083 -711
- package/build/legacy/index.cjs.map +1 -1
- package/build/legacy/utils/index.cjs +21 -2
- package/build/legacy/utils/index.cjs.map +1 -1
- package/build/legacy/utils/localStorage.cjs +44 -0
- package/build/legacy/utils/localStorage.cjs.map +1 -0
- package/build/modern/_tsup-dts-rollup.d.ts +607 -129
- package/build/modern/chunk-2ZNIYPDV.js +47 -0
- package/build/modern/chunk-2ZNIYPDV.js.map +1 -0
- package/build/modern/chunk-34E3UFFB.js +75 -0
- package/build/modern/chunk-34E3UFFB.js.map +1 -0
- package/build/modern/{chunk-CZND26FC.js → chunk-3BM6MZ4A.js} +8 -1
- package/build/modern/{chunk-CZND26FC.js.map → chunk-3BM6MZ4A.js.map} +1 -1
- package/build/modern/{chunk-N4QTLDVM.js → chunk-4IMOKN2D.js} +3 -3
- package/build/modern/{chunk-F27AAKQ3.js → chunk-5KHU6MM5.js} +8 -2
- package/build/modern/chunk-5KHU6MM5.js.map +1 -0
- package/build/modern/{chunk-WFJWCZ7E.js → chunk-77B4HFKT.js} +13 -14
- package/build/modern/chunk-77B4HFKT.js.map +1 -0
- package/build/modern/{chunk-FBSESDWJ.js → chunk-BHSYQCDV.js} +16 -16
- package/build/modern/chunk-BHSYQCDV.js.map +1 -0
- package/build/modern/{chunk-SPZYPRZ6.js → chunk-BU5JK37R.js} +2 -2
- package/build/modern/{chunk-UTGEFJ3L.js → chunk-C5EHJUS5.js} +1 -1
- package/build/modern/{chunk-UTGEFJ3L.js.map → chunk-C5EHJUS5.js.map} +1 -1
- package/build/modern/{chunk-VERRHMW4.js → chunk-DDOTCGGA.js} +2 -2
- package/build/modern/{chunk-CP7OUC2Q.js → chunk-E3PAEB7Y.js} +1 -1
- package/build/modern/chunk-E3PAEB7Y.js.map +1 -0
- package/build/modern/{chunk-F72ZABKX.js → chunk-F4LTOZAN.js} +2 -2
- package/build/modern/{chunk-NKM6PISB.js → chunk-F7EWTOML.js} +2 -2
- package/build/modern/chunk-F7XWOSN3.js +39 -0
- package/build/modern/chunk-F7XWOSN3.js.map +1 -0
- package/build/modern/chunk-FQLMPEYX.js +18 -0
- package/build/modern/chunk-FQLMPEYX.js.map +1 -0
- package/build/modern/{chunk-7MM5KYEX.js → chunk-GI6CSUU4.js} +7 -7
- package/build/modern/{chunk-7SGPJM66.js → chunk-HP4ZN473.js} +2 -2
- package/build/modern/chunk-HP4ZN473.js.map +1 -0
- package/build/modern/chunk-IP5VFOPZ.js +132 -0
- package/build/modern/chunk-IP5VFOPZ.js.map +1 -0
- package/build/modern/{chunk-KML4CTMK.js → chunk-LPALHB6R.js} +3 -3
- package/build/modern/chunk-LPALHB6R.js.map +1 -0
- package/build/modern/{chunk-3XGLNXJJ.js → chunk-M73ECA25.js} +8 -8
- package/build/modern/chunk-M73ECA25.js.map +1 -0
- package/build/modern/chunk-N7O6D7BW.js +63 -0
- package/build/modern/chunk-N7O6D7BW.js.map +1 -0
- package/build/modern/{chunk-W4DXACNV.js → chunk-O7QVCF3H.js} +3 -3
- package/build/modern/chunk-RIZGWERR.js +161 -0
- package/build/modern/chunk-RIZGWERR.js.map +1 -0
- package/build/modern/chunk-RZ7NG77U.js +77 -0
- package/build/modern/chunk-RZ7NG77U.js.map +1 -0
- package/build/modern/{chunk-XL4JREDT.js → chunk-S25RHYZV.js} +2 -2
- package/build/modern/{chunk-SXIXDXG3.js → chunk-SLHYBPJ5.js} +1 -1
- package/build/modern/chunk-SLHYBPJ5.js.map +1 -0
- package/build/modern/{chunk-GRUXP3NG.js → chunk-T6U7AKKP.js} +10 -10
- package/build/modern/chunk-T6U7AKKP.js.map +1 -0
- package/build/modern/{chunk-XEW6TJJ4.js → chunk-UXY3KCC3.js} +1 -1
- package/build/modern/chunk-UXY3KCC3.js.map +1 -0
- package/build/modern/{chunk-NB6DV4VA.js → chunk-W2LSPRQ3.js} +2 -2
- package/build/modern/{chunk-KCANMM64.js → chunk-WZJ5UQNM.js} +1 -1
- package/build/modern/chunk-WZJ5UQNM.js.map +1 -0
- package/build/modern/{chunk-NMNONSHU.js → chunk-XVU2NQCW.js} +2 -2
- package/build/modern/components/Accordion.js +15 -0
- package/build/modern/components/AccordionItemGroup.js +9 -0
- package/build/modern/components/Admonition.js +5 -5
- package/build/modern/components/Avatar.js +4 -4
- package/build/modern/components/Checkbox.js +4 -4
- package/build/modern/components/DatePicker.client.js +31 -0
- package/build/modern/components/DatePicker.server.js +31 -0
- package/build/modern/components/FileStatus.js +7 -7
- package/build/modern/components/FileUploader.js +5 -5
- package/build/modern/components/Input.js +4 -4
- package/build/modern/components/Notification.js +4 -4
- package/build/modern/components/NotificationDescription.js +1 -1
- package/build/modern/components/NotificationHeading.js +1 -1
- package/build/modern/components/ProgressBar.js +1 -1
- package/build/modern/components/Select.js +4 -4
- package/build/modern/components/Tabs.client.js +18 -0
- package/build/modern/components/Tabs.client.js.map +1 -0
- package/build/modern/components/Tag.js +4 -4
- package/build/modern/components/Text.js +7 -0
- package/build/modern/components/Text.js.map +1 -0
- package/build/modern/components/Toggle.js +4 -4
- package/build/modern/components/Tooltip.js +1 -1
- package/build/modern/config/cerbIcons.js +2 -2
- package/build/modern/config/defineIcons.js +3 -3
- package/build/modern/config/icons/checkbox.icons.js +1 -1
- package/build/modern/context/confirm-modal.js +8 -8
- package/build/modern/context/cta-modal.js +8 -8
- package/build/modern/context/notification-center.js +7 -7
- package/build/modern/context/prompt-modal.js +11 -11
- package/build/modern/context/tabs.js +2 -1
- package/build/modern/hooks/useDate.js +3 -1
- package/build/modern/index.js +158 -94
- package/build/modern/index.js.map +1 -1
- package/build/modern/utils/index.js +8 -2
- package/build/modern/utils/localStorage.js +10 -0
- package/build/modern/utils/localStorage.js.map +1 -0
- package/package.json +2 -2
- package/src/components/Accordion.tsx +160 -0
- package/src/components/AccordionItemGroup.tsx +79 -0
- package/src/components/DatePicker.client.tsx +365 -0
- package/src/components/DatePicker.server.tsx +229 -0
- package/src/components/Notification.tsx +6 -3
- package/src/components/NotificationDescription.tsx +2 -2
- package/src/components/NotificationHeading.tsx +1 -2
- package/src/components/ProgressBar.tsx +1 -1
- package/src/components/Tabs.client.tsx +113 -0
- package/src/components/Text.tsx +70 -0
- package/src/components/Tooltip.tsx +2 -2
- package/src/config/cerbIcons.ts +9 -0
- package/src/config/icons/checkbox.icons.tsx +2 -2
- package/src/context/confirm-modal.tsx +1 -1
- package/src/context/cta-modal.tsx +6 -7
- package/src/context/notification-center.tsx +1 -1
- package/src/context/prompt-modal.tsx +1 -1
- package/src/context/tabs.tsx +66 -65
- package/src/hooks/useDate.ts +12 -0
- package/src/index.ts +6 -4
- package/src/utils/index.ts +2 -0
- package/src/utils/localStorage.ts +28 -0
- package/build/legacy/aria-helpers/tabs.aria.cjs +0 -100
- package/build/legacy/aria-helpers/tabs.aria.cjs.map +0 -1
- package/build/legacy/components/Tab.cjs +0 -135
- package/build/legacy/components/Tab.cjs.map +0 -1
- package/build/legacy/components/TabList.cjs +0 -69
- package/build/legacy/components/TabList.cjs.map +0 -1
- package/build/legacy/components/TabPanel.cjs +0 -76
- package/build/legacy/components/TabPanel.cjs.map +0 -1
- package/build/modern/aria-helpers/tabs.aria.js +0 -9
- package/build/modern/chunk-3XGLNXJJ.js.map +0 -1
- package/build/modern/chunk-7SGPJM66.js.map +0 -1
- package/build/modern/chunk-AYIRV5CL.js +0 -32
- package/build/modern/chunk-AYIRV5CL.js.map +0 -1
- package/build/modern/chunk-CP7OUC2Q.js.map +0 -1
- package/build/modern/chunk-F27AAKQ3.js.map +0 -1
- package/build/modern/chunk-FBSESDWJ.js.map +0 -1
- package/build/modern/chunk-GRUXP3NG.js.map +0 -1
- package/build/modern/chunk-ITOIXNJS.js +0 -64
- package/build/modern/chunk-ITOIXNJS.js.map +0 -1
- package/build/modern/chunk-KCANMM64.js.map +0 -1
- package/build/modern/chunk-KML4CTMK.js.map +0 -1
- package/build/modern/chunk-RIFQSCHT.js +0 -58
- package/build/modern/chunk-RIFQSCHT.js.map +0 -1
- package/build/modern/chunk-SLF6SIPB.js +0 -46
- package/build/modern/chunk-SLF6SIPB.js.map +0 -1
- package/build/modern/chunk-SXIXDXG3.js.map +0 -1
- package/build/modern/chunk-UKPF7JOB.js +0 -33
- package/build/modern/chunk-UKPF7JOB.js.map +0 -1
- package/build/modern/chunk-WFJWCZ7E.js.map +0 -1
- package/build/modern/chunk-XEW6TJJ4.js.map +0 -1
- package/build/modern/components/Tab.js +0 -10
- package/build/modern/components/TabList.js +0 -9
- package/build/modern/components/TabPanel.js +0 -10
- package/src/aria-helpers/tabs.aria.ts +0 -70
- package/src/components/Tab.tsx +0 -68
- package/src/components/TabList.tsx +0 -51
- package/src/components/TabPanel.tsx +0 -49
- /package/build/modern/{chunk-N4QTLDVM.js.map → chunk-4IMOKN2D.js.map} +0 -0
- /package/build/modern/{chunk-SPZYPRZ6.js.map → chunk-BU5JK37R.js.map} +0 -0
- /package/build/modern/{chunk-VERRHMW4.js.map → chunk-DDOTCGGA.js.map} +0 -0
- /package/build/modern/{chunk-F72ZABKX.js.map → chunk-F4LTOZAN.js.map} +0 -0
- /package/build/modern/{chunk-NKM6PISB.js.map → chunk-F7EWTOML.js.map} +0 -0
- /package/build/modern/{chunk-7MM5KYEX.js.map → chunk-GI6CSUU4.js.map} +0 -0
- /package/build/modern/{chunk-W4DXACNV.js.map → chunk-O7QVCF3H.js.map} +0 -0
- /package/build/modern/{chunk-XL4JREDT.js.map → chunk-S25RHYZV.js.map} +0 -0
- /package/build/modern/{chunk-NB6DV4VA.js.map → chunk-W2LSPRQ3.js.map} +0 -0
- /package/build/modern/{chunk-NMNONSHU.js.map → chunk-XVU2NQCW.js.map} +0 -0
- /package/build/modern/{aria-helpers/tabs.aria.js.map → components/Accordion.js.map} +0 -0
- /package/build/modern/components/{Tab.js.map → AccordionItemGroup.js.map} +0 -0
- /package/build/modern/components/{TabList.js.map → DatePicker.client.js.map} +0 -0
- /package/build/modern/components/{TabPanel.js.map → DatePicker.server.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tag.tsx","../../../src/components/Show.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts"],"sourcesContent":["import type {\n HTMLAttributes,\n MouseEventHandler,\n PropsWithChildren,\n} from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport {\n iconButton,\n tag,\n type TagVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n TagVariantProps & {\n /**\n * The action to be performed when the tag is clicked. Not available when\n * the palette or gradient props are provided.\n */\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n /**\n * The gradient to apply to the tag. Not available when the onClick prop is\n * provided.\n */\n gradient?: never\n /**\n * The palette to use for the tag. Not available when the onClick prop is\n * provided.\n */\n palette?: never\n /**\n * The action to be performed when the tag is clicked.\n */\n onClick: MouseEventHandler<HTMLSpanElement>\n /**\n * The shape of the tag. Not available when the onClick prop is provided.\n * @type 'pill' | 'rounded'\n * @default 'pill'\n */\n shape?: never\n /**\n * The usage of the tag. Not available when the onClick prop is provided.\n * @type 'filled' | 'outlined'\n * @default 'filled'\n */\n usage?: never\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @see https://cerberus.digitalu.design/react/tag\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n const { close: Close } = $cerberusIcons\n\n return (\n <span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <button\n aria-label=\"Close\"\n className={iconButton({\n palette: 'action',\n usage: 'filled',\n size: 'sm',\n })}\n onClick={onClick}\n >\n <Close />\n </button>\n </Show>\n </span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\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","import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\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 waitingFileUploader?: 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: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\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 { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACEA,mBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ADhCA,iBAAwB;AACxB,qBAIO;;;AEXP,mBAcO;;;ACQD;AAVC,SAAS,cAAc,OAA0B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,sDAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;;;AC9BM,IAAAA,sBAAA;AATC,SAAS,oBAAoB,OAAiC;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,OAAO,MAAM,QAAQ;AAAA,MACrB,QAAQ,MAAM,QAAQ;AAAA,MACtB,SAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,iBAAgB;AAAA,gBAChB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,aAAY;AAAA,oBACZ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,OAAM;AAAA,oBACN,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,GAAE;AAAA,gBACF,GAAE;AAAA,gBACF,SAAQ;AAAA,gBAER;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,QAAO;AAAA,oBACP,aAAa;AAAA,oBACb,SAAQ;AAAA,oBACR,QAAO;AAAA,oBAEP;AAAA,sBAAC;AAAA;AAAA,wBACC,MAAK;AAAA,wBACL,eAAc;AAAA,wBACd,QAAO;AAAA,wBACP,KAAI;AAAA,wBACJ,aAAY;AAAA;AAAA,oBACb;AAAA;AAAA,gBACH;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFxCO,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;;;AGxCO,IAAI,iBAAiB;;;ALuDxB,IAAAC,sBAAA;AATG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,WAAU,+BAAO,YAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAClD,QAAM,EAAE,OAAOC,OAAM,IAAI;AAEzB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,oBAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,6CAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,eAAW,2BAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,uDAACA,QAAA,EAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,kBAAc,gBAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":["import_jsx_runtime","import_jsx_runtime","Close"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Tag.tsx","../../../src/components/Show.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts"],"sourcesContent":["import type {\n HTMLAttributes,\n MouseEventHandler,\n PropsWithChildren,\n} from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport {\n iconButton,\n tag,\n type TagVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n TagVariantProps & {\n /**\n * The action to be performed when the tag is clicked. Not available when\n * the palette or gradient props are provided.\n */\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n /**\n * The gradient to apply to the tag. Not available when the onClick prop is\n * provided.\n */\n gradient?: never\n /**\n * The palette to use for the tag. Not available when the onClick prop is\n * provided.\n */\n palette?: never\n /**\n * The action to be performed when the tag is clicked.\n */\n onClick: MouseEventHandler<HTMLSpanElement>\n /**\n * The shape of the tag. Not available when the onClick prop is provided.\n * @type 'pill' | 'rounded'\n * @default 'pill'\n */\n shape?: never\n /**\n * The usage of the tag. Not available when the onClick prop is provided.\n * @type 'filled' | 'outlined'\n * @default 'filled'\n */\n usage?: never\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @see https://cerberus.digitalu.design/react/tag\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n const { close: Close } = $cerberusIcons\n\n return (\n <span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <button\n aria-label=\"Close\"\n className={iconButton({\n palette: 'action',\n usage: 'filled',\n size: 'sm',\n })}\n onClick={onClick}\n >\n <Close />\n </button>\n </Show>\n </span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\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","import {\n Calendar,\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n calendar?: IconType\n calendarPrev?: IconType\n calendarNext?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: 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 calendar: Calendar,\n calendarPrev: ChevronLeft,\n calendarNext: ChevronRight,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\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\nexport type CheckboxIconProps = 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\nexport type IndeterminateIconProps = 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 { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\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"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","Close"]}
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/Text.tsx
|
|
21
|
+
var Text_exports = {};
|
|
22
|
+
__export(Text_exports, {
|
|
23
|
+
Text: () => Text
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(Text_exports);
|
|
26
|
+
var import_jsx = require("@cerberus-design/styled-system/jsx");
|
|
27
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
28
|
+
function Text(props) {
|
|
29
|
+
const { as = "p", ...pandaJSXProps } = props;
|
|
30
|
+
switch (as) {
|
|
31
|
+
case "h1":
|
|
32
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.H1, { ...pandaJSXProps });
|
|
33
|
+
case "h2":
|
|
34
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.H2, { ...pandaJSXProps });
|
|
35
|
+
case "h3":
|
|
36
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.H3, { ...pandaJSXProps });
|
|
37
|
+
case "h4":
|
|
38
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.H4, { ...pandaJSXProps });
|
|
39
|
+
case "h5":
|
|
40
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.H5, { ...pandaJSXProps });
|
|
41
|
+
case "h6":
|
|
42
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.H6, { ...pandaJSXProps });
|
|
43
|
+
case "strong":
|
|
44
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.Strong, { ...pandaJSXProps });
|
|
45
|
+
case "em":
|
|
46
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.Em, { ...pandaJSXProps });
|
|
47
|
+
case "small":
|
|
48
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.Small, { ...pandaJSXProps });
|
|
49
|
+
case "span":
|
|
50
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.Span, { ...pandaJSXProps });
|
|
51
|
+
default:
|
|
52
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx.P, { ...pandaJSXProps });
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
56
|
+
0 && (module.exports = {
|
|
57
|
+
Text
|
|
58
|
+
});
|
|
59
|
+
//# sourceMappingURL=Text.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Text.tsx"],"sourcesContent":["import {\n Em,\n H1,\n H2,\n H3,\n H4,\n H5,\n H6,\n P,\n Small,\n Span,\n Strong,\n type BoxProps,\n} from '@cerberus-design/styled-system/jsx'\nimport { type PropsWithChildren } from 'react'\n\n/**\n * This module exports a component for rendering text utilizing the styled-system JSX utility.\n * @module @cerberus-design/react/Text\n */\n\nexport type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'\nexport type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span'\n\nexport interface TextProps extends BoxProps {\n /**\n * The element to render as. Defaults to 'p'.\n */\n as?: TextElements | Headings\n}\n\n/**\n * A component for rendering text utilizing the styled-system JSX utility.\n * @definition [Text docs](https://cerberus.digitalu.design/react/text)\n * @example\n * ```tsx\n * <Text as=\"h1\" color=\"page.text.100\" textStyle={{\n * base: 'heading-md',\n * md: 'heading-lg',\n * }}>\n * Hello, world!\n * </Text>\n */\nexport function Text(props: PropsWithChildren<TextProps>) {\n const { as = 'p', ...pandaJSXProps } = props\n switch (as) {\n case 'h1':\n return <H1 {...pandaJSXProps} />\n case 'h2':\n return <H2 {...pandaJSXProps} />\n case 'h3':\n return <H3 {...pandaJSXProps} />\n case 'h4':\n return <H4 {...pandaJSXProps} />\n case 'h5':\n return <H5 {...pandaJSXProps} />\n case 'h6':\n return <H6 {...pandaJSXProps} />\n case 'strong':\n return <Strong {...pandaJSXProps} />\n case 'em':\n return <Em {...pandaJSXProps} />\n case 'small':\n return <Small {...pandaJSXProps} />\n case 'span':\n return <Span {...pandaJSXProps} />\n default:\n return <P {...pandaJSXProps} />\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAaO;AAkCM;AAJN,SAAS,KAAK,OAAqC;AACxD,QAAM,EAAE,KAAK,KAAK,GAAG,cAAc,IAAI;AACvC,UAAQ,IAAI;AAAA,IACV,KAAK;AACH,aAAO,4CAAC,iBAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,4CAAC,iBAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,4CAAC,iBAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,4CAAC,iBAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,4CAAC,iBAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,4CAAC,iBAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,4CAAC,qBAAQ,GAAG,eAAe;AAAA,IACpC,KAAK;AACH,aAAO,4CAAC,iBAAI,GAAG,eAAe;AAAA,IAChC,KAAK;AACH,aAAO,4CAAC,oBAAO,GAAG,eAAe;AAAA,IACnC,KAAK;AACH,aAAO,4CAAC,mBAAM,GAAG,eAAe;AAAA,IAClC;AACE,aAAO,4CAAC,gBAAG,GAAG,eAAe;AAAA,EACjC;AACF;","names":[]}
|
|
@@ -167,6 +167,9 @@ function AnimatingUploadIcon(props) {
|
|
|
167
167
|
// src/config/cerbIcons.ts
|
|
168
168
|
var defaultIcons = {
|
|
169
169
|
avatar: import_icons.UserFilled,
|
|
170
|
+
calendar: import_icons.Calendar,
|
|
171
|
+
calendarPrev: import_icons.ChevronLeft,
|
|
172
|
+
calendarNext: import_icons.ChevronRight,
|
|
170
173
|
checkbox: CheckmarkIcon,
|
|
171
174
|
close: import_icons.Close,
|
|
172
175
|
confirmModal: import_icons.Information,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Toggle.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n toggle,\n type ToggleVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { InputHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module provides a toggle component.\n * @module\n */\n\nexport type ToggleBase = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'id' | 'value'\n> & {\n /**\n * The FieldMessage providing context for the Toggle.\n */\n describedBy?: string\n /**\n * A unique identifier for the Toggle. Required for accessibility.\n */\n id: string\n /**\n * The value of the Toggle.\n */\n value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\n/**\n * The Toggle component is used to switch between two states. Optionally\n * combine with the `useToggle` hook.\n * @see https://cerberus.digitalu.design/react/toggle\n * @example\n * ```tsx\n * const { checked, handleChange } = useToggle({ checked: 'toggle' })\n *\n * <Hstack justify=\"space-between\" w=\"full\">\n * <Field>\n * <Label htmlFor=\"toggle\">Show notifications</Label>\n * <Toggle\n * checked={checked === 'toggle'}\n * id=\"toggle\"\n * onChange={handleChange}\n * value=\"toggle\"\n * />\n * </Field>\n * </Hstack>\n * ```\n */\nexport function Toggle(props: ToggleProps) {\n const { size, describedBy, ...nativeProps } = props\n const styles = toggle({ size })\n const { invalid, ...state } = useFieldContext()\n const Icon = $cerberusIcons.toggleChecked\n\n return (\n <span\n className={cx('group', styles.track, hstack())}\n data-checked={props.checked || props.defaultChecked}\n >\n <input\n {...nativeProps}\n {...state}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={cx('peer', styles.input)}\n role=\"switch\"\n type=\"checkbox\"\n />\n <span\n className={cx(\n styles.thumb,\n vstack({\n justify: 'center',\n }),\n )}\n >\n <Icon />\n </span>\n </span>\n )\n}\n","import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\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 waitingFileUploader?: 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: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\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 { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\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 {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\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\n/**\n * Used to access the field context.\n * @returns The field context.\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"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Toggle.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n toggle,\n type ToggleVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { InputHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module provides a toggle component.\n * @module\n */\n\nexport type ToggleBase = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'id' | 'value'\n> & {\n /**\n * The FieldMessage providing context for the Toggle.\n */\n describedBy?: string\n /**\n * A unique identifier for the Toggle. Required for accessibility.\n */\n id: string\n /**\n * The value of the Toggle.\n */\n value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\n/**\n * The Toggle component is used to switch between two states. Optionally\n * combine with the `useToggle` hook.\n * @see https://cerberus.digitalu.design/react/toggle\n * @example\n * ```tsx\n * const { checked, handleChange } = useToggle({ checked: 'toggle' })\n *\n * <Hstack justify=\"space-between\" w=\"full\">\n * <Field>\n * <Label htmlFor=\"toggle\">Show notifications</Label>\n * <Toggle\n * checked={checked === 'toggle'}\n * id=\"toggle\"\n * onChange={handleChange}\n * value=\"toggle\"\n * />\n * </Field>\n * </Hstack>\n * ```\n */\nexport function Toggle(props: ToggleProps) {\n const { size, describedBy, ...nativeProps } = props\n const styles = toggle({ size })\n const { invalid, ...state } = useFieldContext()\n const Icon = $cerberusIcons.toggleChecked\n\n return (\n <span\n className={cx('group', styles.track, hstack())}\n data-checked={props.checked || props.defaultChecked}\n >\n <input\n {...nativeProps}\n {...state}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={cx('peer', styles.input)}\n role=\"switch\"\n type=\"checkbox\"\n />\n <span\n className={cx(\n styles.thumb,\n vstack({\n justify: 'center',\n }),\n )}\n >\n <Icon />\n </span>\n </span>\n )\n}\n","import {\n Calendar,\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n calendar?: IconType\n calendarPrev?: IconType\n calendarNext?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: 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 calendar: Calendar,\n calendarPrev: ChevronLeft,\n calendarNext: ChevronRight,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\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\nexport type CheckboxIconProps = 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\nexport type IndeterminateIconProps = 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 { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\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 {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\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\n/**\n * Used to access the field context.\n * @returns The field context.\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"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -28,13 +28,13 @@ var import_css = require("@cerberus/styled-system/css");
|
|
|
28
28
|
var import_recipes = require("@cerberus/styled-system/recipes");
|
|
29
29
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
30
|
function Tooltip(props) {
|
|
31
|
-
const { content, children, ...nativeProps } = props;
|
|
31
|
+
const { content, children, asChild, ...nativeProps } = props;
|
|
32
32
|
const styles = (0, import_recipes.tooltip)();
|
|
33
33
|
const position = {
|
|
34
34
|
placement: props.position || "top"
|
|
35
35
|
};
|
|
36
36
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_tooltip.Tooltip.Root, { openDelay: 400, positioning: position, children: [
|
|
37
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, children }),
|
|
37
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Trigger, { className: styles.trigger, asChild, children }),
|
|
38
38
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_tooltip.Tooltip.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
39
39
|
import_tooltip.Tooltip.Content,
|
|
40
40
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tooltip.tsx"],"sourcesContent":["import {\n Tooltip as ArkTooltip,\n type TooltipContentProps,\n} from '@ark-ui/react/tooltip'\nimport { cx } from '@cerberus/styled-system/css'\nimport { tooltip } from '@cerberus/styled-system/recipes'\nimport type { ReactNode } from 'react'\n\n/**\n * This module contains the Tooltip component.\n * @module Tooltip\n */\n\nexport interface TooltipProps {\n /**\n * The text content to display in the tooltip.\n */\n content: ReactNode\n /**\n * The position of the tooltip relative to the trigger element.\n */\n position?: 'top' | 'right' | 'bottom' | 'left'\n}\n\n/**\n * The Tooltip component is used to provide additional information about an element when it is hovered over.\n * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)\n * @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n * <Information />\n * </Tooltip>\n */\nexport function Tooltip(props: TooltipProps & TooltipContentProps) {\n const { content, children, ...nativeProps } = props\n const styles = tooltip()\n const position = {\n placement: props.position || 'top',\n }\n\n return (\n <ArkTooltip.Root openDelay={400} positioning={position}>\n <ArkTooltip.Trigger className={styles.trigger}>\n {children}\n </ArkTooltip.Trigger>\n\n <ArkTooltip.Positioner>\n <ArkTooltip.Content\n {...nativeProps}\n className={cx(nativeProps.className, styles.content)}\n >\n <ArkTooltip.Arrow className={styles.arrow}>\n <ArkTooltip.ArrowTip className={styles.arrowTip} />\n </ArkTooltip.Arrow>\n\n {content}\n </ArkTooltip.Content>\n </ArkTooltip.Positioner>\n </ArkTooltip.Root>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAGO;AACP,iBAAmB;AACnB,qBAAwB;AAqClB;AATC,SAAS,QAAQ,OAA2C;AACjE,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Tooltip.tsx"],"sourcesContent":["import {\n Tooltip as ArkTooltip,\n type TooltipContentProps,\n} from '@ark-ui/react/tooltip'\nimport { cx } from '@cerberus/styled-system/css'\nimport { tooltip } from '@cerberus/styled-system/recipes'\nimport type { ReactNode } from 'react'\n\n/**\n * This module contains the Tooltip component.\n * @module Tooltip\n */\n\nexport interface TooltipProps {\n /**\n * The text content to display in the tooltip.\n */\n content: ReactNode\n /**\n * The position of the tooltip relative to the trigger element.\n */\n position?: 'top' | 'right' | 'bottom' | 'left'\n}\n\n/**\n * The Tooltip component is used to provide additional information about an element when it is hovered over.\n * @definition [Tooltip docs](https://cerberus.digitalu.design/react/tooltip)\n * @example\n * ```tsx\n * <Tooltip content=\"This is a tooltip\">\n * <Information />\n * </Tooltip>\n */\nexport function Tooltip(props: TooltipProps & TooltipContentProps) {\n const { content, children, asChild, ...nativeProps } = props\n const styles = tooltip()\n const position = {\n placement: props.position || 'top',\n }\n\n return (\n <ArkTooltip.Root openDelay={400} positioning={position}>\n <ArkTooltip.Trigger className={styles.trigger} asChild={asChild}>\n {children}\n </ArkTooltip.Trigger>\n\n <ArkTooltip.Positioner>\n <ArkTooltip.Content\n {...nativeProps}\n className={cx(nativeProps.className, styles.content)}\n >\n <ArkTooltip.Arrow className={styles.arrow}>\n <ArkTooltip.ArrowTip className={styles.arrowTip} />\n </ArkTooltip.Arrow>\n\n {content}\n </ArkTooltip.Content>\n </ArkTooltip.Positioner>\n </ArkTooltip.Root>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAGO;AACP,iBAAmB;AACnB,qBAAwB;AAqClB;AATC,SAAS,QAAQ,OAA2C;AACjE,QAAM,EAAE,SAAS,UAAU,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,aAAS,wBAAQ;AACvB,QAAM,WAAW;AAAA,IACf,WAAW,MAAM,YAAY;AAAA,EAC/B;AAEA,SACE,6CAAC,eAAAA,QAAW,MAAX,EAAgB,WAAW,KAAK,aAAa,UAC5C;AAAA,gDAAC,eAAAA,QAAW,SAAX,EAAmB,WAAW,OAAO,SAAS,SAC5C,UACH;AAAA,IAEA,4CAAC,eAAAA,QAAW,YAAX,EACC;AAAA,MAAC,eAAAA,QAAW;AAAA,MAAX;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,eAAG,YAAY,WAAW,OAAO,OAAO;AAAA,QAEnD;AAAA,sDAAC,eAAAA,QAAW,OAAX,EAAiB,WAAW,OAAO,OAClC,sDAAC,eAAAA,QAAW,UAAX,EAAoB,WAAW,OAAO,UAAU,GACnD;AAAA,UAEC;AAAA;AAAA;AAAA,IACH,GACF;AAAA,KACF;AAEJ;","names":["ArkTooltip"]}
|
|
@@ -161,6 +161,9 @@ function AnimatingUploadIcon(props) {
|
|
|
161
161
|
// src/config/cerbIcons.ts
|
|
162
162
|
var defaultIcons = {
|
|
163
163
|
avatar: import_icons.UserFilled,
|
|
164
|
+
calendar: import_icons.Calendar,
|
|
165
|
+
calendarPrev: import_icons.ChevronLeft,
|
|
166
|
+
calendarNext: import_icons.ChevronRight,
|
|
164
167
|
checkbox: CheckmarkIcon,
|
|
165
168
|
close: import_icons.Close,
|
|
166
169
|
confirmModal: import_icons.Information,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\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 waitingFileUploader?: 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: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\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\
|
|
1
|
+
{"version":3,"sources":["../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["import {\n Calendar,\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n calendar?: IconType\n calendarPrev?: IconType\n calendarNext?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: 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 calendar: Calendar,\n calendarPrev: ChevronLeft,\n calendarNext: ChevronRight,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\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\nexport type CheckboxIconProps = 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\nexport type IndeterminateIconProps = 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 { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n"],"mappings":"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","names":["import_jsx_runtime"]}
|
|
@@ -164,6 +164,9 @@ function AnimatingUploadIcon(props) {
|
|
|
164
164
|
// src/config/cerbIcons.ts
|
|
165
165
|
var defaultIcons = {
|
|
166
166
|
avatar: import_icons.UserFilled,
|
|
167
|
+
calendar: import_icons.Calendar,
|
|
168
|
+
calendarPrev: import_icons.ChevronLeft,
|
|
169
|
+
calendarNext: import_icons.ChevronRight,
|
|
167
170
|
checkbox: CheckmarkIcon,
|
|
168
171
|
close: import_icons.Close,
|
|
169
172
|
confirmModal: import_icons.Information,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/config/defineIcons.ts","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["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","import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\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 waitingFileUploader?: 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: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\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\
|
|
1
|
+
{"version":3,"sources":["../../../src/config/defineIcons.ts","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx"],"sourcesContent":["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","import {\n Calendar,\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n calendar?: IconType\n calendarPrev?: IconType\n calendarNext?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: 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 calendar: Calendar,\n calendarPrev: ChevronLeft,\n calendarNext: ChevronRight,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\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\nexport type CheckboxIconProps = 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\nexport type IndeterminateIconProps = 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 { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n"],"mappings":"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","names":["import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/config/icons/checkbox.icons.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\
|
|
1
|
+
{"version":3,"sources":["../../../../src/config/icons/checkbox.icons.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = 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\nexport type IndeterminateIconProps = 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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBM;AAVC,SAAS,cAAc,OAA0B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,sDAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;","names":[]}
|
|
@@ -196,6 +196,9 @@ function AnimatingUploadIcon(props) {
|
|
|
196
196
|
// src/config/cerbIcons.ts
|
|
197
197
|
var defaultIcons = {
|
|
198
198
|
avatar: import_icons.UserFilled,
|
|
199
|
+
calendar: import_icons.Calendar,
|
|
200
|
+
calendarPrev: import_icons.ChevronLeft,
|
|
201
|
+
calendarNext: import_icons.ChevronRight,
|
|
199
202
|
checkbox: CheckmarkIcon,
|
|
200
203
|
close: import_icons.Close,
|
|
201
204
|
confirmModal: import_icons.Information,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/context/confirm-modal.tsx","../../../src/components/Portal.tsx","../../../src/components/Button.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/components/Show.tsx","../../../src/components/Modal.tsx","../../../src/hooks/useModal.ts","../../../src/components/ModalHeader.tsx","../../../src/components/ModalHeading.tsx","../../../src/components/ModalDescription.tsx","../../../src/components/Avatar.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 { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\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 interface ConfirmModalProviderProps {}\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 { modalRef, show, close } = useModal()\n const resolveRef = useRef<ShowResult>(null)\n const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n const focusTrap = trapFocus(modalRef)\n const ConfirmIcon = $cerberusIcons.confirmModal\n const kind = content?.kind ?? 'non-destructive'\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 close()\n },\n [close],\n )\n\n const handleShow = useCallback(\n (options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options })\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 <ConfirmModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <VStack gap=\"xl\" w=\"full\">\n <ModalHeader>\n <div\n className={hstack({\n justify: 'center',\n w: 'full',\n })}\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 </div>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\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 <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 </HStack>\n </VStack>\n </Modal>\n </Portal>\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","import {\n Portal as ArkPortal,\n type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\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 * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n * return (\n * <Portal>\n * <div>Portal Content outside of the React VDom tree</div>\n * </Portal>\n * )\n * }\n */\nexport const Portal = ArkPortal\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 * @see https://cerberus.digitalu.design/react/button\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 {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\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 waitingFileUploader?: 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: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\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 { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\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","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 { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\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","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 * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n *\n * <Modal ref={modalRef}>\n * <Avatar icon={SomeIcon} />\n * <ModalHeader>\n * <ModalHeading>Modal Heading</ModalHeading>\n * <ModalDescription>Modal description</ModalDescription>\n * </ModalHeader>\n *\n * {props.children}\n * </Modal>\n * ```\n */\nexport const Modal = forwardRef(ModalEl)\n","'use client'\n\nimport { useCallback, useMemo, useRef, useState, type RefObject } from 'react'\n\n/**\n * This module provides a hook for using a custom modal.\n * @module\n */\n\nexport interface UseModalReturnValue {\n /**\n * The ref for the modal.\n */\n modalRef: RefObject<HTMLDialogElement>\n /**\n * Shows the modal.\n */\n show: () => void\n /**\n * Closes the modal.\n */\n close: () => void\n /**\n * Whether the modal is open based on the show and close methods.\n */\n isOpen: boolean\n}\n\n/**\n * Provides a hook for using a custom modal via the native dialog element\n * methods.\n *\n * Cerberus modals use the native dialog element. This hook\n * does not control the modal via React state but rather by calling the\n * native dialog element's `showModal` and `close` methods.\n *\n * @memberof module:Modal\n * @see https://cerberus.digitalu.design/react/modal\n * @description [Moz Dev Dialog Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n */\nexport function useModal(): UseModalReturnValue {\n const modalRef = useRef<HTMLDialogElement | null>(null)\n const [isOpen, setIsOpen] = useState<boolean>(false)\n\n const show = useCallback(() => {\n modalRef.current?.showModal()\n setIsOpen(true)\n }, [])\n\n const close = useCallback(() => {\n modalRef.current?.close()\n setIsOpen(false)\n }, [])\n\n return useMemo(() => {\n return {\n modalRef,\n show,\n close,\n isOpen,\n }\n }, [modalRef, show, close, isOpen])\n}\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 * @see https://cerberus.digitalu.design/react/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: 'md',\n position: 'relative',\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 * @see https://cerberus.digitalu.design/react/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 * @see https://cerberus.digitalu.design/react/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","import { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n avatar,\n type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n /**\n * An optional icon to show when no src or ariaLabel is provided.\n */\n icon?: ReactNode\n /**\n * The size of the avatar.\n */\n width?: number\n /**\n * The size of the avatar.\n */\n height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n SharedAvatarProps & {\n /**\n * The aria-label for the avatar needed for accessibility.\n */\n ariaLabel: string\n /**\n * An optional element to replace the image. Recommended for Next.js Image component.\n */\n as?: never\n /**\n * The source of the image.\n */\n src: string\n }\nexport type AvatarAsProps = SharedAvatarProps & {\n /**\n * An optional element to replace the image. Recommended for Next.js Image component.\n */\n as: ReactNode\n /**\n * The aria-label for the avatar needed for accessibility.\n */\n ariaLabel?: never\n /**\n * The source of the image.\n */\n src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n AvatarVariantProps) &\n (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n * ariaLabel=\"Protector Cerberus\"\n * src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n const {\n ariaLabel,\n as,\n gradient,\n size,\n src,\n width,\n height,\n icon,\n ...nativeProps\n } = props\n const { avatar: AvatarIcon } = $cerberusIcons\n const initials = (ariaLabel || '')\n .split(' ')\n .map((word) => word[0])\n .join('')\n .slice(0, 2)\n\n return (\n <div\n {...nativeProps}\n className={cx(\n nativeProps.className,\n avatar({ gradient, size }),\n circle(),\n )}\n >\n <Show\n when={Boolean(src) || Boolean(as)}\n fallback={\n <Show\n when={Boolean(initials)}\n fallback={\n <Show\n when={Boolean(icon)}\n fallback={\n <AvatarIcon\n size={iconSizeMap[size as keyof typeof iconSizeMap]}\n />\n }\n >\n {icon}\n </Show>\n }\n >\n {initials}\n </Show>\n }\n >\n <Show\n when={Boolean(as)}\n fallback={\n <img\n alt={props.ariaLabel}\n className={css({\n h: 'full',\n objectFit: 'cover',\n w: 'full',\n })}\n decoding=\"async\"\n loading=\"lazy\"\n src={src}\n height={height}\n width={width}\n />\n }\n >\n {as}\n </Show>\n </Show>\n </div>\n )\n}\n\nconst iconSizeMap = {\n xs: 16,\n sm: 16,\n md: 20,\n lg: 34,\n xl: 32,\n '2xl': 32,\n '3xl': 32,\n '4xl': 32,\n}\n"],"mappings":"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","names":["import_react","ArkPortal","import_css","import_patterns","import_jsx_runtime","import_jsx_runtime","import_react","import_css","import_recipes","import_react","import_jsx_runtime","import_react","import_css","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_patterns","import_recipes","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/context/confirm-modal.tsx","../../../src/components/Portal.tsx","../../../src/components/Button.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts","../../../src/components/Show.tsx","../../../src/components/Modal.tsx","../../../src/hooks/useModal.ts","../../../src/components/ModalHeader.tsx","../../../src/components/ModalHeading.tsx","../../../src/components/ModalDescription.tsx","../../../src/components/Avatar.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 { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\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 { modalRef, show, close } = useModal()\n const resolveRef = useRef<ShowResult>(null)\n const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n const focusTrap = trapFocus(modalRef)\n const ConfirmIcon = $cerberusIcons.confirmModal\n const kind = content?.kind ?? 'non-destructive'\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 close()\n },\n [close],\n )\n\n const handleShow = useCallback(\n (options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options })\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 <ConfirmModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <VStack gap=\"xl\" w=\"full\">\n <ModalHeader>\n <div\n className={hstack({\n justify: 'center',\n w: 'full',\n })}\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 </div>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\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 <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 </HStack>\n </VStack>\n </Modal>\n </Portal>\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","import {\n Portal as ArkPortal,\n type PortalProps as ArkPortalProps,\n} from '@ark-ui/react'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport type PortalProps = ArkPortalProps\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 * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n * @example\n * ```tsx\n * 'use client'\n *\n * import { Portal } from '@cerberus/react'\n *\n * function SomeFeatureWithinSSRPage() {\n * return (\n * <Portal>\n * <div>Portal Content outside of the React VDom tree</div>\n * </Portal>\n * )\n * }\n */\nexport const Portal = ArkPortal\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 * @see https://cerberus.digitalu.design/react/button\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 {\n Calendar,\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n calendar?: IconType\n calendarPrev?: IconType\n calendarNext?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: 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 calendar: Calendar,\n calendarPrev: ChevronLeft,\n calendarNext: ChevronRight,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\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\nexport type CheckboxIconProps = 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\nexport type IndeterminateIconProps = 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 { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\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","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 { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\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","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 * @see https://cerberus.digitalu.design/react/modal\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n *\n * <Modal ref={modalRef}>\n * <Avatar icon={SomeIcon} />\n * <ModalHeader>\n * <ModalHeading>Modal Heading</ModalHeading>\n * <ModalDescription>Modal description</ModalDescription>\n * </ModalHeader>\n *\n * {props.children}\n * </Modal>\n * ```\n */\nexport const Modal = forwardRef(ModalEl)\n","'use client'\n\nimport { useCallback, useMemo, useRef, useState, type RefObject } from 'react'\n\n/**\n * This module provides a hook for using a custom modal.\n * @module\n */\n\nexport interface UseModalReturnValue {\n /**\n * The ref for the modal.\n */\n modalRef: RefObject<HTMLDialogElement>\n /**\n * Shows the modal.\n */\n show: () => void\n /**\n * Closes the modal.\n */\n close: () => void\n /**\n * Whether the modal is open based on the show and close methods.\n */\n isOpen: boolean\n}\n\n/**\n * Provides a hook for using a custom modal via the native dialog element\n * methods.\n *\n * Cerberus modals use the native dialog element. This hook\n * does not control the modal via React state but rather by calling the\n * native dialog element's `showModal` and `close` methods.\n *\n * @memberof module:Modal\n * @see https://cerberus.digitalu.design/react/modal\n * @description [Moz Dev Dialog Docs](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal)\n */\nexport function useModal(): UseModalReturnValue {\n const modalRef = useRef<HTMLDialogElement | null>(null)\n const [isOpen, setIsOpen] = useState<boolean>(false)\n\n const show = useCallback(() => {\n modalRef.current?.showModal()\n setIsOpen(true)\n }, [])\n\n const close = useCallback(() => {\n modalRef.current?.close()\n setIsOpen(false)\n }, [])\n\n return useMemo(() => {\n return {\n modalRef,\n show,\n close,\n isOpen,\n }\n }, [modalRef, show, close, isOpen])\n}\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 * @see https://cerberus.digitalu.design/react/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: 'md',\n position: 'relative',\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 * @see https://cerberus.digitalu.design/react/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 * @see https://cerberus.digitalu.design/react/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","import { css, cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n avatar,\n type AvatarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { HtmlHTMLAttributes, ReactNode } from 'react'\nimport { Show } from './Show'\n\n/**\n * This module contains the Avatar component.\n * @module\n */\n\nexport type SharedAvatarProps = {\n /**\n * An optional icon to show when no src or ariaLabel is provided.\n */\n icon?: ReactNode\n /**\n * The size of the avatar.\n */\n width?: number\n /**\n * The size of the avatar.\n */\n height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n SharedAvatarProps & {\n /**\n * The aria-label for the avatar needed for accessibility.\n */\n ariaLabel: string\n /**\n * An optional element to replace the image. Recommended for Next.js Image component.\n */\n as?: never\n /**\n * The source of the image.\n */\n src: string\n }\nexport type AvatarAsProps = SharedAvatarProps & {\n /**\n * An optional element to replace the image. Recommended for Next.js Image component.\n */\n as: ReactNode\n /**\n * The aria-label for the avatar needed for accessibility.\n */\n ariaLabel?: never\n /**\n * The source of the image.\n */\n src?: never\n}\n\nexport type AvatarProps = (HtmlHTMLAttributes<HTMLDivElement> &\n AvatarVariantProps) &\n (AvatarImageProps | AvatarAsProps)\n\n/**\n * The Avatar component is used to represent a user or entity. It will show an image if src provided, otherwise it will show the ariaLabel of the ariaLabel. If the ariaLabel is empty, it will show a `defineIcons().avatar` icon.\n * @see https://cerberus.digitalu.design/react/avatar\n * @example\n * ```tsx\n * <Avatar\n * ariaLabel=\"Protector Cerberus\"\n * src=\"https://cerberus.digitalu.design/logo.svg\"\n * />\n * ```\n */\nexport function Avatar(props: AvatarProps) {\n const {\n ariaLabel,\n as,\n gradient,\n size,\n src,\n width,\n height,\n icon,\n ...nativeProps\n } = props\n const { avatar: AvatarIcon } = $cerberusIcons\n const initials = (ariaLabel || '')\n .split(' ')\n .map((word) => word[0])\n .join('')\n .slice(0, 2)\n\n return (\n <div\n {...nativeProps}\n className={cx(\n nativeProps.className,\n avatar({ gradient, size }),\n circle(),\n )}\n >\n <Show\n when={Boolean(src) || Boolean(as)}\n fallback={\n <Show\n when={Boolean(initials)}\n fallback={\n <Show\n when={Boolean(icon)}\n fallback={\n <AvatarIcon\n size={iconSizeMap[size as keyof typeof iconSizeMap]}\n />\n }\n >\n {icon}\n </Show>\n }\n >\n {initials}\n </Show>\n }\n >\n <Show\n when={Boolean(as)}\n fallback={\n <img\n alt={props.ariaLabel}\n className={css({\n h: 'full',\n objectFit: 'cover',\n w: 'full',\n })}\n decoding=\"async\"\n loading=\"lazy\"\n src={src}\n height={height}\n width={width}\n />\n }\n >\n {as}\n </Show>\n </Show>\n </div>\n )\n}\n\nconst iconSizeMap = {\n xs: 16,\n sm: 16,\n md: 20,\n lg: 34,\n xl: 32,\n '2xl': 32,\n '3xl': 32,\n '4xl': 32,\n}\n"],"mappings":"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","names":["import_react","ArkPortal","import_css","import_patterns","import_jsx_runtime","import_jsx_runtime","import_react","import_css","import_recipes","import_react","import_jsx_runtime","import_react","import_css","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_recipes","import_jsx_runtime","import_css","import_patterns","import_recipes","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -192,6 +192,9 @@ function AnimatingUploadIcon(props) {
|
|
|
192
192
|
// src/config/cerbIcons.ts
|
|
193
193
|
var defaultIcons = {
|
|
194
194
|
avatar: import_icons.UserFilled,
|
|
195
|
+
calendar: import_icons.Calendar,
|
|
196
|
+
calendarPrev: import_icons.ChevronLeft,
|
|
197
|
+
calendarNext: import_icons.ChevronRight,
|
|
195
198
|
checkbox: CheckmarkIcon,
|
|
196
199
|
close: import_icons.Close,
|
|
197
200
|
confirmModal: import_icons.Information,
|
|
@@ -477,9 +480,8 @@ function CTAModal(props) {
|
|
|
477
480
|
(event) => {
|
|
478
481
|
const index = event.currentTarget.getAttribute("data-index");
|
|
479
482
|
const action = content == null ? void 0 : content.actions[Number(index)];
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
}
|
|
483
|
+
const { onClick } = action || {};
|
|
484
|
+
onClick == null ? void 0 : onClick(event);
|
|
483
485
|
close();
|
|
484
486
|
},
|
|
485
487
|
[content, close]
|