@cerberus-design/react 0.9.2-next-5604236 → 0.9.2-next-74f2c67
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 +730 -117
- package/build/legacy/aria-helpers/tabs.aria.cjs.map +1 -1
- package/build/legacy/components/Avatar.cjs.map +1 -1
- package/build/legacy/components/Button.cjs.map +1 -1
- package/build/legacy/components/Checkbox.cjs.map +1 -1
- package/build/legacy/components/CircularProgress.cjs.map +1 -1
- package/build/legacy/components/Droppable.cjs.map +1 -1
- package/build/legacy/components/FeatureFlag.cjs.map +1 -1
- package/build/legacy/components/FieldMessage.cjs.map +1 -1
- package/build/legacy/components/FileStatus.cjs +70 -74
- package/build/legacy/components/FileStatus.cjs.map +1 -1
- package/build/legacy/components/FileUploader.cjs.map +1 -1
- package/build/legacy/components/IconButton.cjs.map +1 -1
- package/build/legacy/components/Input.cjs.map +1 -1
- package/build/legacy/components/Label.cjs.map +1 -1
- package/build/legacy/components/Modal.cjs.map +1 -1
- package/build/legacy/components/ModalDescription.cjs.map +1 -1
- package/build/legacy/components/ModalHeader.cjs.map +1 -1
- package/build/legacy/components/ModalHeading.cjs.map +1 -1
- package/build/legacy/components/NavMenuLink.cjs.map +1 -1
- package/build/legacy/components/NavMenuList.cjs.map +1 -1
- package/build/legacy/components/NavMenuTrigger.cjs.map +1 -1
- 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/Portal.cjs.map +1 -1
- package/build/legacy/components/ProgressBar.cjs.map +1 -1
- package/build/legacy/components/Radio.cjs.map +1 -1
- package/build/legacy/components/Select.cjs.map +1 -1
- package/build/legacy/components/Show.cjs.map +1 -1
- package/build/legacy/components/Spinner.cjs.map +1 -1
- package/build/legacy/components/Tab.cjs.map +1 -1
- package/build/legacy/components/TabList.cjs.map +1 -1
- package/build/legacy/components/TabPanel.cjs.map +1 -1
- package/build/legacy/components/Table.cjs.map +1 -1
- package/build/legacy/components/Tag.cjs +70 -4
- package/build/legacy/components/Tag.cjs.map +1 -1
- package/build/legacy/components/Tbody.cjs.map +1 -1
- package/build/legacy/components/Td.cjs.map +1 -1
- package/build/legacy/components/Textarea.cjs.map +1 -1
- package/build/legacy/components/Th.cjs.map +1 -1
- package/build/legacy/components/Thead.cjs.map +1 -1
- package/build/legacy/components/Toggle.cjs.map +1 -1
- package/build/legacy/context/confirm-modal.cjs.map +1 -1
- package/build/legacy/context/feature-flags.cjs.map +1 -1
- package/build/legacy/context/field.cjs.map +1 -1
- package/build/legacy/context/navMenu.cjs.map +1 -1
- package/build/legacy/context/notification-center.cjs.map +1 -1
- package/build/legacy/context/prompt-modal.cjs.map +1 -1
- package/build/legacy/context/tabs.cjs.map +1 -1
- package/build/legacy/context/theme.cjs.map +1 -1
- package/build/legacy/hooks/useModal.cjs.map +1 -1
- package/build/legacy/hooks/useTheme.cjs.map +1 -1
- package/build/legacy/hooks/useToggle.cjs.map +1 -1
- package/build/legacy/index.cjs +5 -5
- package/build/legacy/index.cjs.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +730 -117
- package/build/modern/aria-helpers/tabs.aria.js +2 -2
- package/build/modern/{chunk-LAOQSNMN.js → chunk-2RPWSVRX.js} +6 -6
- package/build/modern/chunk-2RPWSVRX.js.map +1 -0
- package/build/modern/{chunk-JB7IQ2BM.js → chunk-2UXE5PDG.js} +1 -1
- package/build/modern/chunk-2UXE5PDG.js.map +1 -0
- package/build/modern/{chunk-4CAT3FHV.js → chunk-2VX52EEJ.js} +1 -1
- package/build/modern/chunk-2VX52EEJ.js.map +1 -0
- package/build/modern/{chunk-A6CLBPFE.js → chunk-3O6UTN3J.js} +1 -1
- package/build/modern/chunk-3O6UTN3J.js.map +1 -0
- package/build/modern/{chunk-UN3OAW56.js → chunk-477G5ZEL.js} +2 -2
- package/build/modern/chunk-477G5ZEL.js.map +1 -0
- package/build/modern/{chunk-PMCYXRAH.js → chunk-5V5MBSM3.js} +3 -3
- package/build/modern/chunk-5V5MBSM3.js.map +1 -0
- package/build/modern/{chunk-3GXISGPS.js → chunk-7K6PZBHN.js} +2 -2
- package/build/modern/chunk-7K6PZBHN.js.map +1 -0
- package/build/modern/{chunk-IXOJLCNO.js → chunk-7SYJFI5E.js} +1 -1
- package/build/modern/chunk-7SYJFI5E.js.map +1 -0
- package/build/modern/{chunk-GABTVDSB.js → chunk-AUAPBPGW.js} +3 -3
- package/build/modern/chunk-AUAPBPGW.js.map +1 -0
- package/build/modern/{chunk-A5WYZVUR.js → chunk-B4CVET74.js} +1 -1
- package/build/modern/chunk-B4CVET74.js.map +1 -0
- package/build/modern/{chunk-2UFNQM55.js → chunk-BE4EOU2P.js} +1 -1
- package/build/modern/{chunk-2UFNQM55.js.map → chunk-BE4EOU2P.js.map} +1 -1
- package/build/modern/{chunk-VULPMZUW.js → chunk-BIDE4IJG.js} +3 -3
- package/build/modern/chunk-BIDE4IJG.js.map +1 -0
- package/build/modern/{chunk-4O4QFF4S.js → chunk-BUVVRQLZ.js} +1 -1
- package/build/modern/chunk-BUVVRQLZ.js.map +1 -0
- package/build/modern/{chunk-4M3EUP57.js → chunk-CJFW36DZ.js} +1 -1
- package/build/modern/chunk-CJFW36DZ.js.map +1 -0
- package/build/modern/{chunk-ZBEHDXFT.js → chunk-E6QFLLXH.js} +13 -13
- package/build/modern/chunk-E6QFLLXH.js.map +1 -0
- package/build/modern/{chunk-S3MTABYX.js → chunk-EB37HRCN.js} +2 -2
- package/build/modern/chunk-EB37HRCN.js.map +1 -0
- package/build/modern/{chunk-JXJ6VFZO.js → chunk-EJOXOICK.js} +1 -1
- package/build/modern/chunk-EJOXOICK.js.map +1 -0
- package/build/modern/{chunk-6F34A7NZ.js → chunk-EXGKZGML.js} +1 -1
- package/build/modern/chunk-EXGKZGML.js.map +1 -0
- package/build/modern/{chunk-ISPTI4GC.js → chunk-EZYCKM7R.js} +2 -2
- package/build/modern/chunk-EZYCKM7R.js.map +1 -0
- package/build/modern/{chunk-4YJOK7JJ.js → chunk-GMG3B34U.js} +2 -2
- package/build/modern/chunk-GMG3B34U.js.map +1 -0
- package/build/modern/{chunk-U72VPIZA.js → chunk-HHVQ6LCA.js} +3 -3
- package/build/modern/chunk-HHVQ6LCA.js.map +1 -0
- package/build/modern/{chunk-XREC5IJE.js → chunk-HPM2XRWT.js} +1 -1
- package/build/modern/chunk-HPM2XRWT.js.map +1 -0
- package/build/modern/{chunk-RQPDRHRP.js → chunk-I35HMGJQ.js} +3 -3
- package/build/modern/chunk-I35HMGJQ.js.map +1 -0
- package/build/modern/{chunk-CMKBUSGN.js → chunk-ILZKQP6R.js} +10 -10
- package/build/modern/chunk-ILZKQP6R.js.map +1 -0
- package/build/modern/{chunk-GKUDLVOV.js → chunk-ITOIXNJS.js} +2 -2
- package/build/modern/{chunk-BTEEBIVN.js → chunk-JCGWTIR4.js} +3 -3
- package/build/modern/chunk-JCGWTIR4.js.map +1 -0
- package/build/modern/{chunk-TCO46FK7.js → chunk-JIJM6JFJ.js} +2 -2
- package/build/modern/chunk-JIJM6JFJ.js.map +1 -0
- package/build/modern/{chunk-VGHVH2T3.js → chunk-JWIJHSI6.js} +5 -3
- package/build/modern/chunk-JWIJHSI6.js.map +1 -0
- package/build/modern/{chunk-6DIGPXAD.js → chunk-KBBASJIY.js} +2 -2
- package/build/modern/chunk-KBBASJIY.js.map +1 -0
- package/build/modern/{chunk-SONHHNYQ.js → chunk-LFWAJ5DX.js} +3 -3
- package/build/modern/chunk-LFWAJ5DX.js.map +1 -0
- package/build/modern/{chunk-PH64POOB.js → chunk-LJYCFFX7.js} +2 -2
- package/build/modern/chunk-LJYCFFX7.js.map +1 -0
- package/build/modern/{chunk-AEDGCR25.js → chunk-NUGDTZCL.js} +7 -7
- package/build/modern/chunk-NUGDTZCL.js.map +1 -0
- package/build/modern/{chunk-XPVDT4VF.js → chunk-O6JYYVO7.js} +3 -3
- package/build/modern/chunk-O6JYYVO7.js.map +1 -0
- package/build/modern/{chunk-KJUCHZHV.js → chunk-O75QAT4Z.js} +1 -1
- package/build/modern/chunk-O75QAT4Z.js.map +1 -0
- package/build/modern/{chunk-C5HLLGME.js → chunk-OW62FLJ6.js} +1 -1
- package/build/modern/chunk-OW62FLJ6.js.map +1 -0
- package/build/modern/{chunk-RPZAPUCF.js → chunk-OWKN5IV7.js} +3 -3
- package/build/modern/chunk-OWKN5IV7.js.map +1 -0
- package/build/modern/{chunk-PJ3744I6.js → chunk-PKQTTFWA.js} +1 -1
- package/build/modern/chunk-PKQTTFWA.js.map +1 -0
- package/build/modern/{chunk-N3FUF4TB.js → chunk-PKY46RRA.js} +1 -1
- package/build/modern/chunk-PKY46RRA.js.map +1 -0
- package/build/modern/{chunk-4M4LCQ43.js → chunk-Q7BRMIBR.js} +1 -1
- package/build/modern/{chunk-4M4LCQ43.js.map → chunk-Q7BRMIBR.js.map} +1 -1
- package/build/modern/{chunk-QEA6N6TN.js → chunk-REO5GUNC.js} +1 -1
- package/build/modern/chunk-REO5GUNC.js.map +1 -0
- package/build/modern/{chunk-KF24CS4S.js → chunk-RIFQSCHT.js} +1 -1
- package/build/modern/chunk-RIFQSCHT.js.map +1 -0
- package/build/modern/{chunk-RBZAEOKN.js → chunk-S7XGIQY6.js} +6 -3
- package/build/modern/chunk-S7XGIQY6.js.map +1 -0
- package/build/modern/{chunk-3C2DJSEE.js → chunk-SXIXDXG3.js} +1 -1
- package/build/modern/chunk-SXIXDXG3.js.map +1 -0
- package/build/modern/{chunk-7VJOPJVX.js → chunk-TKI2CKHH.js} +1 -1
- package/build/modern/chunk-TKI2CKHH.js.map +1 -0
- package/build/modern/{chunk-SLHX5K6I.js → chunk-UBJBMOG7.js} +4 -2
- package/build/modern/chunk-UBJBMOG7.js.map +1 -0
- package/build/modern/{chunk-ZAU4JVLL.js → chunk-UZDVOIW5.js} +1 -1
- package/build/modern/chunk-UZDVOIW5.js.map +1 -0
- package/build/modern/{chunk-QZ6NS6VN.js → chunk-VG46RHBJ.js} +1 -1
- package/build/modern/chunk-VG46RHBJ.js.map +1 -0
- package/build/modern/{chunk-QU7UV5DB.js → chunk-WLEX22KS.js} +1 -1
- package/build/modern/chunk-WLEX22KS.js.map +1 -0
- package/build/modern/{chunk-SSY3KX3F.js → chunk-WZOYPFUU.js} +3 -3
- package/build/modern/chunk-WZOYPFUU.js.map +1 -0
- package/build/modern/{chunk-HW76XVA3.js → chunk-XEW6TJJ4.js} +1 -1
- package/build/modern/chunk-XEW6TJJ4.js.map +1 -0
- package/build/modern/{chunk-G6O7KRQ6.js → chunk-ZFK33MVD.js} +1 -1
- package/build/modern/chunk-ZFK33MVD.js.map +1 -0
- package/build/modern/components/Avatar.js +2 -2
- package/build/modern/components/Button.js +1 -1
- package/build/modern/components/Checkbox.js +3 -3
- package/build/modern/components/CircularProgress.js +1 -1
- package/build/modern/components/Droppable.js +1 -1
- package/build/modern/components/FeatureFlag.js +3 -3
- package/build/modern/components/FieldMessage.js +2 -2
- package/build/modern/components/FileStatus.js +7 -7
- package/build/modern/components/FileUploader.js +3 -3
- package/build/modern/components/IconButton.js +1 -1
- package/build/modern/components/Input.js +3 -3
- package/build/modern/components/Label.js +3 -3
- package/build/modern/components/Modal.js +1 -1
- package/build/modern/components/ModalDescription.js +1 -1
- package/build/modern/components/ModalHeader.js +1 -1
- package/build/modern/components/ModalHeading.js +1 -1
- package/build/modern/components/NavMenuLink.js +2 -2
- package/build/modern/components/NavMenuList.js +3 -3
- package/build/modern/components/NavMenuTrigger.js +3 -3
- package/build/modern/components/Notification.js +1 -1
- package/build/modern/components/NotificationDescription.js +1 -1
- package/build/modern/components/NotificationHeading.js +1 -1
- package/build/modern/components/Portal.js +1 -1
- package/build/modern/components/ProgressBar.js +1 -1
- package/build/modern/components/Radio.js +2 -2
- package/build/modern/components/Select.js +3 -3
- package/build/modern/components/Show.js +1 -1
- package/build/modern/components/Spinner.js +1 -1
- package/build/modern/components/Tab.js +3 -3
- package/build/modern/components/TabList.js +2 -2
- package/build/modern/components/TabPanel.js +3 -3
- package/build/modern/components/Table.js +1 -1
- package/build/modern/components/Tag.js +5 -2
- package/build/modern/components/Tbody.js +1 -1
- package/build/modern/components/Td.js +1 -1
- package/build/modern/components/Textarea.js +2 -2
- package/build/modern/components/Th.js +2 -2
- package/build/modern/components/Thead.js +1 -1
- package/build/modern/components/Toggle.js +2 -2
- package/build/modern/context/confirm-modal.js +10 -10
- package/build/modern/context/feature-flags.js +1 -1
- package/build/modern/context/field.js +1 -1
- package/build/modern/context/navMenu.js +1 -1
- package/build/modern/context/notification-center.js +7 -7
- package/build/modern/context/prompt-modal.js +13 -13
- package/build/modern/context/tabs.js +1 -1
- package/build/modern/context/theme.js +2 -2
- package/build/modern/hooks/useModal.js +1 -1
- package/build/modern/hooks/useTheme.js +1 -1
- package/build/modern/hooks/useToggle.js +1 -1
- package/build/modern/index.js +51 -51
- package/package.json +2 -2
- package/src/components/Avatar.tsx +28 -1
- package/src/components/Button.tsx +1 -1
- package/src/components/Checkbox.tsx +11 -1
- package/src/components/CircularProgress.tsx +1 -1
- package/src/components/Droppable.tsx +13 -0
- package/src/components/FeatureFlag.tsx +7 -0
- package/src/components/FieldMessage.tsx +13 -6
- package/src/components/FileStatus.tsx +38 -11
- package/src/components/FileUploader.tsx +10 -0
- package/src/components/IconButton.tsx +15 -5
- package/src/components/Input.tsx +21 -4
- package/src/components/Label.tsx +13 -8
- package/src/components/Modal.tsx +8 -3
- package/src/components/ModalDescription.tsx +1 -0
- package/src/components/ModalHeader.tsx +1 -0
- package/src/components/ModalHeading.tsx +1 -0
- package/src/components/NavMenuLink.tsx +22 -0
- package/src/components/NavMenuList.tsx +37 -5
- package/src/components/NavMenuTrigger.tsx +13 -0
- package/src/components/Notification.tsx +13 -6
- package/src/components/NotificationDescription.tsx +8 -6
- package/src/components/NotificationHeading.tsx +8 -6
- package/src/components/Portal.tsx +9 -2
- package/src/components/ProgressBar.tsx +14 -4
- package/src/components/Radio.tsx +29 -0
- package/src/components/Select.tsx +17 -8
- package/src/components/Show.tsx +16 -5
- package/src/components/Spinner.tsx +12 -5
- package/src/components/Tab.tsx +13 -5
- package/src/components/TabList.tsx +5 -1
- package/src/components/TabPanel.tsx +7 -2
- package/src/components/Table.tsx +6 -3
- package/src/components/Tag.tsx +28 -2
- package/src/components/Tbody.tsx +7 -1
- package/src/components/Td.tsx +2 -1
- package/src/components/Textarea.tsx +9 -4
- package/src/components/Th.tsx +13 -1
- package/src/components/Thead.tsx +2 -1
- package/src/components/Toggle.tsx +35 -0
- package/src/context/confirm-modal.tsx +17 -0
- package/src/context/feature-flags.tsx +4 -1
- package/src/context/field.tsx +26 -0
- package/src/context/navMenu.tsx +25 -0
- package/src/context/notification-center.tsx +17 -0
- package/src/context/prompt-modal.tsx +39 -1
- package/src/context/tabs.tsx +31 -4
- package/src/context/theme.tsx +29 -1
- package/src/hooks/useModal.ts +14 -0
- package/src/hooks/useTheme.ts +21 -0
- package/src/hooks/useToggle.ts +22 -0
- package/build/modern/chunk-3C2DJSEE.js.map +0 -1
- package/build/modern/chunk-3GXISGPS.js.map +0 -1
- package/build/modern/chunk-4CAT3FHV.js.map +0 -1
- package/build/modern/chunk-4M3EUP57.js.map +0 -1
- package/build/modern/chunk-4O4QFF4S.js.map +0 -1
- package/build/modern/chunk-4YJOK7JJ.js.map +0 -1
- package/build/modern/chunk-6DIGPXAD.js.map +0 -1
- package/build/modern/chunk-6F34A7NZ.js.map +0 -1
- package/build/modern/chunk-7VJOPJVX.js.map +0 -1
- package/build/modern/chunk-A5WYZVUR.js.map +0 -1
- package/build/modern/chunk-A6CLBPFE.js.map +0 -1
- package/build/modern/chunk-AEDGCR25.js.map +0 -1
- package/build/modern/chunk-BTEEBIVN.js.map +0 -1
- package/build/modern/chunk-C5HLLGME.js.map +0 -1
- package/build/modern/chunk-CMKBUSGN.js.map +0 -1
- package/build/modern/chunk-G6O7KRQ6.js.map +0 -1
- package/build/modern/chunk-GABTVDSB.js.map +0 -1
- package/build/modern/chunk-HW76XVA3.js.map +0 -1
- package/build/modern/chunk-ISPTI4GC.js.map +0 -1
- package/build/modern/chunk-IXOJLCNO.js.map +0 -1
- package/build/modern/chunk-JB7IQ2BM.js.map +0 -1
- package/build/modern/chunk-JXJ6VFZO.js.map +0 -1
- package/build/modern/chunk-KF24CS4S.js.map +0 -1
- package/build/modern/chunk-KJUCHZHV.js.map +0 -1
- package/build/modern/chunk-LAOQSNMN.js.map +0 -1
- package/build/modern/chunk-N3FUF4TB.js.map +0 -1
- package/build/modern/chunk-PH64POOB.js.map +0 -1
- package/build/modern/chunk-PJ3744I6.js.map +0 -1
- package/build/modern/chunk-PMCYXRAH.js.map +0 -1
- package/build/modern/chunk-QEA6N6TN.js.map +0 -1
- package/build/modern/chunk-QU7UV5DB.js.map +0 -1
- package/build/modern/chunk-QZ6NS6VN.js.map +0 -1
- package/build/modern/chunk-RBZAEOKN.js.map +0 -1
- package/build/modern/chunk-RPZAPUCF.js.map +0 -1
- package/build/modern/chunk-RQPDRHRP.js.map +0 -1
- package/build/modern/chunk-S3MTABYX.js.map +0 -1
- package/build/modern/chunk-SLHX5K6I.js.map +0 -1
- package/build/modern/chunk-SONHHNYQ.js.map +0 -1
- package/build/modern/chunk-SSY3KX3F.js.map +0 -1
- package/build/modern/chunk-TCO46FK7.js.map +0 -1
- package/build/modern/chunk-U72VPIZA.js.map +0 -1
- package/build/modern/chunk-UN3OAW56.js.map +0 -1
- package/build/modern/chunk-VGHVH2T3.js.map +0 -1
- package/build/modern/chunk-VULPMZUW.js.map +0 -1
- package/build/modern/chunk-XPVDT4VF.js.map +0 -1
- package/build/modern/chunk-XREC5IJE.js.map +0 -1
- package/build/modern/chunk-ZAU4JVLL.js.map +0 -1
- package/build/modern/chunk-ZBEHDXFT.js.map +0 -1
- /package/build/modern/{chunk-GKUDLVOV.js.map → chunk-ITOIXNJS.js.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/FileUploader.tsx","../../../src/components/Show.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/components/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { type InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { fileUploader } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Avatar } from './Avatar'\n\nexport interface FileUploaderProps\n extends InputHTMLAttributes<HTMLInputElement> {\n heading?: string\n name: string\n}\n\nexport function FileUploader(props: FileUploaderProps) {\n const styles = fileUploader()\n const Icon = $cerberusIcons.fileUploader\n\n return (\n <div\n className={cx(\n vstack({\n justify: 'center',\n }),\n styles.container,\n )}\n >\n <div className={styles.icon}>\n <Avatar\n gradient=\"charon-light\"\n ariaLabel=\"\"\n icon={<Icon />}\n size=\"md\"\n src=\"\"\n />\n </div>\n\n <label\n className={cx(\n vstack({\n justify: 'center',\n }),\n styles.label,\n )}\n htmlFor={props.name}\n >\n <Show when={Boolean(props.heading)}>\n <p className={styles.heading}>{props.heading}</p>\n </Show>\n Import {props.accept?.replace(',', ', ')} files\n <p className={styles.description}>Click to select files</p>\n <input\n {...props}\n className={cx(props.className, styles.input)}\n type=\"file\"\n />\n </label>\n </div>\n )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n when: boolean | null | undefined\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n * <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n","import {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","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 icon?: ReactNode\n width?: number\n height?: number\n}\nexport type AvatarImageProps = HtmlHTMLAttributes<HTMLImageElement> &\n SharedAvatarProps & {\n ariaLabel: string\n as?: never\n src: string\n }\nexport type AvatarAsProps = SharedAvatarProps & {\n as: ReactNode\n ariaLabel?: never\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 * @definition [Avatar docs](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_css","import_patterns","import_recipes","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FileUploader.tsx","../../../src/components/Show.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/components/Avatar.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { type InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { fileUploader } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Avatar } from './Avatar'\n\nexport interface FileUploaderProps\n extends InputHTMLAttributes<HTMLInputElement> {\n /**\n * The optional heading to display in the FileUploader component.\n */\n heading?: string\n /**\n * The name of the file input element.\n */\n name: string\n}\n\n/**\n * A component that allows the user to upload files.\n * @see https://cerberus.digitalu.design/react/file-uploader\n */\nexport function FileUploader(props: FileUploaderProps) {\n const styles = fileUploader()\n const Icon = $cerberusIcons.fileUploader\n\n return (\n <div\n className={cx(\n vstack({\n justify: 'center',\n }),\n styles.container,\n )}\n >\n <div className={styles.icon}>\n <Avatar\n gradient=\"charon-light\"\n ariaLabel=\"\"\n icon={<Icon />}\n size=\"md\"\n src=\"\"\n />\n </div>\n\n <label\n className={cx(\n vstack({\n justify: 'center',\n }),\n styles.label,\n )}\n htmlFor={props.name}\n >\n <Show when={Boolean(props.heading)}>\n <p className={styles.heading}>{props.heading}</p>\n </Show>\n Import {props.accept?.replace(',', ', ')} files\n <p className={styles.description}>Click to select files</p>\n <input\n {...props}\n className={cx(props.className, styles.input)}\n type=\"file\"\n />\n </label>\n </div>\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 {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","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_css","import_patterns","import_recipes","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx
|
|
1
|
+
{"version":3,"sources":["../../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n iconButton,\n type IconButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { Positions } from '../types'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport interface IconButtonRawProps\n extends ButtonHTMLAttributes<HTMLButtonElement> {\n /**\n * The aria-label attribute for the icon button.\n */\n ariaLabel: string\n /**\n * The position of the tooltip relative to the icon button.\n * @example 'top' | 'right' | 'bottom' | 'left'\n * @default 'top'\n */\n tooltipPosition?: Positions\n}\nexport type IconButtonProps = IconButtonRawProps & IconButtonVariantProps\n\n/**\n * A component that allows the user to perform actions using an icon\n * @see https://cerberus.digitalu.design/react/icon-button\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n const { ariaLabel, palette, usage, size, ...nativeProps } = props\n return (\n <button\n {...nativeProps}\n data-tooltip\n data-position={props.tooltipPosition ?? 'top'}\n aria-label={ariaLabel ?? 'Icon Button'}\n className={cx(\n nativeProps.className,\n iconButton({\n palette,\n usage,\n size,\n }),\n )}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAmB;AACnB,qBAGO;AA8BH;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,MAAM,GAAG,YAAY,IAAI;AAC5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,gBAAY;AAAA,MACZ,iBAAe,MAAM,mBAAmB;AAAA,MACxC,cAAY,aAAa;AAAA,MACzB,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,2BAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Input.tsx","../../../src/context/field.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input } from '@cerberus/styled-system/recipes'\nimport { cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from './Show'\n\nexport type InputRecipeProps = RecipeVariantProps<typeof input>\nexport interface InputBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n describedBy?: string\n id: string\n startIcon?: ReactNode\n endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputRecipeProps\n\nexport function Input(props: InputProps) {\n const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n const inputStyles = input({ size })\n const { invalid, ...fieldStates } = useFieldContext()\n const hasEndIcon = Boolean(endIcon)\n const { invalid: InvalidIcon } = $cerberusIcons\n\n return (\n <div className={inputStyles.root}>\n <Show when={Boolean(startIcon)}>\n <span className={inputStyles.startIcon}>{startIcon}</span>\n </Show>\n\n <input\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n data-start-icon={Boolean(startIcon)}\n className={cx('peer', nativeProps.className, inputStyles.input)}\n />\n\n <Show when={invalid}>\n <InvalidIcon className={inputStyles.icon} />\n </Show>\n <Show when={hasEndIcon && !invalid}>\n <span className={inputStyles.icon}>{endIcon}</span>\n </Show>\n </div>\n )\n}\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\nexport interface FieldContextValue {\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n","import {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n when: boolean | null | undefined\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n * <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAsB;AACtB,iBAA4C;;;ACF5C,mBAKO;AAyBH;AAhBJ,IAAM,mBAAe,4BAAwC,IAAI;AAsB1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;AC5CA,mBAeO;;;ACOD,IAAAA,sBAAA;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,uDAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;;;ADPO,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,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;;;AEtCO,IAAI,iBAAiB;;;ACnB5B,IAAAC,gBAAgE;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ALAI,IAAAC,sBAAA;AARG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,kBAAc,sBAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,SACE,8CAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,iDAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,uDAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,eAAW,eAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,6CAAC,QAAK,MAAM,SACV,uDAAC,eAAY,WAAW,YAAY,MAAM,GAC5C;AAAA,IACA,6CAAC,QAAK,MAAM,cAAc,CAAC,SACzB,uDAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":["import_jsx_runtime","import_react","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Input.tsx","../../../src/context/field.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport type { InputHTMLAttributes, ReactNode } from 'react'\nimport { input, type InputVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { Show } from './Show'\n\nexport interface InputBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'id' | 'size'> {\n /**\n * The id of the FieldMessage component used to describe the input. Required for accessibility.\n */\n describedBy?: string\n /**\n * The unique identifier for the input element. Required for accessibility.\n */\n id: string\n /**\n * An optional icon to display at the start of the input.\n */\n startIcon?: ReactNode\n /**\n * An optional icon to display at the end of the input.\n */\n endIcon?: ReactNode\n}\nexport type InputProps = InputBaseProps & InputVariantProps\n\n/**\n * A component that allows the user to input text. Must be wrapped in a Field\n * component to keep track of the state for entire group of elements related to\n * the field.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Input(props: InputProps) {\n const { describedBy, size, startIcon, endIcon, ...nativeProps } = props\n const inputStyles = input({ size })\n const { invalid, ...fieldStates } = useFieldContext()\n const hasEndIcon = Boolean(endIcon)\n const { invalid: InvalidIcon } = $cerberusIcons\n\n return (\n <div className={inputStyles.root}>\n <Show when={Boolean(startIcon)}>\n <span className={inputStyles.startIcon}>{startIcon}</span>\n </Show>\n\n <input\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n data-start-icon={Boolean(startIcon)}\n className={cx('peer', nativeProps.className, inputStyles.input)}\n />\n\n <Show when={invalid}>\n <InvalidIcon className={inputStyles.icon} />\n </Show>\n <Show when={hasEndIcon && !invalid}>\n <span className={inputStyles.icon}>{endIcon}</span>\n </Show>\n </div>\n )\n}\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\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","import {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,iBAAmB;;;ACFnB,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ACtEA,mBAeO;;;ACOD,IAAAA,sBAAA;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,uDAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;;;ADPO,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,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;;;AEtCO,IAAI,iBAAiB;;;ACnB5B,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ALMI,IAAAC,sBAAA;AARG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,aAAa,MAAM,WAAW,SAAS,GAAG,YAAY,IAAI;AAClE,QAAM,kBAAc,sBAAM,EAAE,KAAK,CAAC;AAClC,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,EAAE,SAAS,YAAY,IAAI;AAEjC,SACE,8CAAC,SAAI,WAAW,YAAY,MAC1B;AAAA,iDAAC,QAAK,MAAM,QAAQ,SAAS,GAC3B,uDAAC,UAAK,WAAW,YAAY,WAAY,qBAAU,GACrD;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,mBAAiB,QAAQ,SAAS;AAAA,QAClC,eAAW,eAAG,QAAQ,YAAY,WAAW,YAAY,KAAK;AAAA;AAAA,IAChE;AAAA,IAEA,6CAAC,QAAK,MAAM,SACV,uDAAC,eAAY,WAAW,YAAY,MAAM,GAC5C;AAAA,IACA,6CAAC,QAAK,MAAM,cAAc,CAAC,SACzB,uDAAC,UAAK,WAAW,YAAY,MAAO,mBAAQ,GAC9C;AAAA,KACF;AAEJ;","names":["import_jsx_runtime","import_react","import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Label.tsx","../../../src/context/field.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Label.tsx","../../../src/context/field.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label, type LabelVariantProps } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n /**\n * The unique identifier for the input element. Required for accessibility.\n */\n htmlFor: string\n /**\n * Used to hide the label from the UI while keeping it accessible to screen readers. Typically used for global search inputs that have no visible label.\n */\n hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelVariantProps\n\n/**\n * A a11y compliant label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @see https://cerberus.digitalu.design/react/label\n * @example\n * ```tsx\n * <Field required>\n * <Label htmlFor=\"search\" hidden>Search everything</Label>\n * <Input id=\"search\" startIcon={Search} type=\"text\" />\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n const { hidden, size, ...nativeProps } = props\n const { required, disabled } = useFieldContext()\n const usage = hidden ? 'hidden' : 'visible'\n\n return (\n <label\n {...nativeProps}\n {...(disabled && { 'data-disabled': true })}\n className={cx(\n nativeProps.className,\n label({ size, usage }),\n hstack({\n justify: 'space-between',\n w: 'full',\n }),\n )}\n >\n {props.children}\n <Show when={required}>\n <span\n className={css({\n color: 'inherit',\n fontSize: 'inherit',\n })}\n >\n (required)\n </span>\n </Show>\n </label>\n )\n}\n","'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","'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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAC9C,iBAAwB;AACxB,sBAAuB;;;ACHvB,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ACpEA,IAAAA,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AFKI,IAAAC,sBAAA;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAI,YAAY,EAAE,iBAAiB,KAAK;AAAA,MACzC,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,sBAAM,EAAE,MAAM,MAAM,CAAC;AAAA,YACrB,wBAAO;AAAA,UACL,SAAS;AAAA,UACT,GAAG;AAAA,QACL,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,6CAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,gBAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":["import_react","import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n return (\n <dialog\n {...props}\n className={cx(props.className, modal().dialog)}\n ref={ref}\n />\n )\n}\n\n/**\n * The Modal component is the root element for a customizable modal.\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n *\n * <Modal ref={modalRef}>\n * <
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Modal.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AACtB,mBAAmE;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAoBO,IAAM,YAAQ,yBAAW,OAAO;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalDescription component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalDescription>Modal Heading</ModalDescription>\n * </Modal>\n * ```\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ModalDescription.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAqBb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,4CAAC,OAAG,GAAG,OAAO,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The ModalHeader component is a header element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalHeader>\n * <h2>Modal Heading</h2>\n * </ModalHeader>\n * </Modal>\n * ```\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n return (\n <div\n {...props}\n className={cx(\n props.className,\n vstack({\n alignItems: 'flex-start',\n gap: '4',\n mb: '8',\n }),\n )}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,sBAAuB;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ModalHeader.tsx"],"sourcesContent":["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: '4',\n mb: '8',\n }),\n )}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,sBAAuB;AAwBnB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,MAAM;AAAA,YACN,wBAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,IAAI;AAAA,QACN,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalHeading component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalHeading>Modal Heading</ModalHeading>\n * </Modal>\n * ```\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ModalHeading.tsx"],"sourcesContent":["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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAqBb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,4CAAC,OAAG,GAAG,OAAO,eAAW,eAAG,MAAM,eAAW,sBAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NavMenuLink.tsx","../../../src/components/Show.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\nexport interface NavMenuLinkProps\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n as?: ElementType\n}\n\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n const { as, ...nativeProps } = props\n const hasAs = Boolean(as)\n const AsSub: ElementType = as!\n\n return (\n <li\n className={css({\n w: 'full',\n })}\n >\n <Show\n when={hasAs}\n fallback={\n <a\n {...nativeProps}\n className={cx(\n nativeProps.className,\n css({\n color: 'action.navigation.initial',\n textStyle: 'link',\n _hover: {\n color: 'action.navigation.hover',\n },\n }),\n )}\n />\n }\n >\n {hasAs && <AsSub {...nativeProps} />}\n </Show>\n </li>\n )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n when: boolean | null | undefined\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NavMenuLink.tsx","../../../src/components/Show.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuLink component.\n * @module\n */\n\nexport interface NavMenuLinkProps\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * The element type to render as. Recommended to use for Next apps with the\n * `Link` component.\n */\n as?: ElementType\n}\n\n/**\n * The NavMenuLink component is a link element that is used within the NavMenu.\n * @see https://cerberus.digitalu.design/react/nav-menu\n * @example\n * ```tsx\n * <NavMenu>\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n * <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * </NavMenu>\n * ```\n */\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n const { as, ...nativeProps } = props\n const hasAs = Boolean(as)\n const AsSub: ElementType = as!\n\n return (\n <li\n className={css({\n w: 'full',\n })}\n >\n <Show\n when={hasAs}\n fallback={\n <a\n {...nativeProps}\n className={cx(\n nativeProps.className,\n css({\n color: 'action.navigation.initial',\n textStyle: 'link',\n _hover: {\n color: 'action.navigation.hover',\n },\n }),\n )}\n />\n }\n >\n {hasAs && <AsSub {...nativeProps} />}\n </Show>\n </li>\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"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAwB;;;ACCxB,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;;;ADOU;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,gBAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,eAAW;AAAA,gBACT,YAAY;AAAA,oBACZ,gBAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,4CAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NavMenuList.tsx","../../../src/context/navMenu.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\ninterface GetPositionResult {\n left: string\n right: string\n top: string\n bottom: string\n}\n\nexport function getPosition(position: Positions): GetPositionResult {\n const defaultPositions = {\n left: 'auto',\n right: 'auto',\n top: 'auto',\n bottom: 'auto',\n }\n switch (position) {\n case 'right':\n return { ...defaultPositions, top: '0%', left: '105%' }\n case 'left':\n return { ...defaultPositions, top: '0%', right: '105%' }\n case 'bottom':\n return { ...defaultPositions, top: '110%' }\n case 'top':\n return { ...defaultPositions, bottom: '110%' }\n default:\n return defaultPositions\n }\n}\n\nconst navListStyles = vstack({\n alignItems: 'flex-start',\n bgColor: 'page.surface.100',\n boxShadow: 'lg',\n gap: '2',\n opacity: '0',\n p: '4',\n position: 'absolute',\n rounded: 'md',\n zIndex: 'dropdown',\n _motionSafe: {\n animationName: 'zoomIn',\n animationDelay: '100ms',\n animationDuration: '150ms',\n animationFillMode: 'both',\n animationTimingFunction: 'ease-in-out',\n },\n _positionBottom: {\n transformOrigin: 'top left',\n },\n _positionTop: {\n transformOrigin: 'bottom left',\n },\n _positionLeft: {\n transformOrigin: 'top right',\n },\n _positionRight: {\n transformOrigin: 'top left',\n },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n id: string\n position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NavMenuList.tsx","../../../src/context/navMenu.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuList component.\n * @module\n */\n\ninterface GetPositionResult {\n /**\n * The left position of the element.\n */\n left: string\n /**\n * The right position of the element.\n */\n right: string\n /**\n * The top position of the element.\n */\n top: string\n /**\n * The bottom position of the element.\n */\n bottom: string\n}\n\n/**\n * Returns the position of the NavMenuList based on the position prop.\n * @param position - The position of the NavMenuList.\n * @returns The position of the NavMenuList.\n */\nexport function getPosition(position: Positions): GetPositionResult {\n const defaultPositions = {\n left: 'auto',\n right: 'auto',\n top: 'auto',\n bottom: 'auto',\n }\n switch (position) {\n case 'right':\n return { ...defaultPositions, top: '0%', left: '105%' }\n case 'left':\n return { ...defaultPositions, top: '0%', right: '105%' }\n case 'bottom':\n return { ...defaultPositions, top: '110%' }\n case 'top':\n return { ...defaultPositions, bottom: '110%' }\n default:\n return defaultPositions\n }\n}\n\nconst navListStyles = vstack({\n alignItems: 'flex-start',\n bgColor: 'page.surface.100',\n boxShadow: 'lg',\n gap: '2',\n opacity: '0',\n p: '4',\n position: 'absolute',\n rounded: 'md',\n zIndex: 'dropdown',\n _motionSafe: {\n animationName: 'zoomIn',\n animationDelay: '100ms',\n animationDuration: '150ms',\n animationFillMode: 'both',\n animationTimingFunction: 'ease-in-out',\n },\n _positionBottom: {\n transformOrigin: 'top left',\n },\n _positionTop: {\n transformOrigin: 'bottom left',\n },\n _positionLeft: {\n transformOrigin: 'top right',\n },\n _positionRight: {\n transformOrigin: 'top left',\n },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n /**\n * The unique identifier for the NavMenuList. Required for accessibility.\n */\n id: string\n /**\n * The position of the NavMenuList.\n * @type 'top' | 'right' | 'bottom' | 'left'\n * @default 'bottom'\n */\n position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @see https://cerberus.digitalu.design/react/nav-menu\n *\n * @example\n * ```tsx\n * <NavMenu>\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n * <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * </NavMenu>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n const { position, ...nativeProps } = props\n const { menuRef, expanded } = useNavMenuContext()\n const locationStyles = useMemo(\n () => getPosition(position ?? 'bottom'),\n [position],\n )\n\n return (\n <Show when={expanded}>\n <ul\n {...nativeProps}\n data-position={position ?? 'bottom'}\n className={cx(nativeProps.className, navListStyles)}\n ref={menuRef}\n style={locationStyles}\n />\n </Show>\n )\n}\n","'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type PropsWithChildren,\n type RefObject,\n} from 'react'\n\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n /**\n * The ref for the trigger button.\n */\n triggerRef: NavTriggerRef | null\n /**\n * The ref for the menu.\n */\n menuRef: NavMenuRef | null\n /**\n * Whether the menu is expanded.\n */\n expanded: boolean\n /**\n * Called when the menu button is clicked.\n */\n onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * Provides the nav menu state for all the NavMenu family components.\n * @see https://cerberus.digitalu.design/react/nav-menu\n */\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n const triggerRef = useRef<HTMLButtonElement>(null)\n const menuRef = useRef<HTMLUListElement>(null)\n const [expanded, setExpanded] = useState<boolean>(false)\n\n const handleToggle = useCallback(() => {\n setExpanded((prev) => !prev)\n }, [])\n\n const value = useMemo(\n () => ({\n triggerRef,\n menuRef,\n expanded,\n onToggle: handleToggle,\n }),\n [expanded, handleToggle],\n )\n\n return (\n <NavMenuContext.Provider value={value}>\n <nav\n className={css({\n position: 'relative',\n })}\n >\n {props.children}\n </nav>\n </NavMenuContext.Provider>\n )\n}\n\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\n */\nexport function useNavMenuContext(): NavMenuContextValue {\n const context = useContext(NavMenuContext)\n if (!context) {\n throw new Error('useNavMenuContext must be used within a NavMenu.')\n }\n return context\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAA6C;AAC7C,IAAAC,cAAmB;AACnB,sBAAuB;;;ACFvB,iBAAoB;AACpB,mBASO;AAwDD;AA3BN,IAAM,qBAAiB,4BAA0C,IAAI;AA0C9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;ACvFA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AF0FM,IAAAC,sBAAA;AA1FC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,oBAAgB,wBAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AA8BM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,qBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,6CAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,eAAW,gBAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":["import_react","import_css","import_react","import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NavMenuTrigger.tsx","../../../src/aria-helpers/nav-menu.aria.ts","../../../src/context/navMenu.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport {\n useCallback,\n type ButtonHTMLAttributes,\n type ElementType,\n type MouseEvent,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\nimport {\n createNavTriggerProps,\n type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { ButtonProps } from './Button'\nimport { Show } from './Show'\n\nexport interface NavMenuTriggerProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonProps,\n NavTriggerAriaValues {\n as?: ElementType\n}\n\n/**\n * A component that allows the user to trigger a navigation menu.\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n * @example\n * ```tsx\n * <NavMenu>\n * <NavMenuTrigger controls=\"nav-menu-list\">\n * Menu\n * </NavMenuTrigger>\n * </NavMenu>\n * ```\n */\nexport function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {\n const {\n as,\n palette,\n usage,\n shape,\n controls,\n expanded: propsExpanded,\n onClick,\n ...nativeProps\n } = props\n const { triggerRef, onToggle, expanded } = useNavMenuContext()\n const ariaProps = createNavTriggerProps({\n controls,\n expanded: propsExpanded ?? expanded,\n })\n const hasAs = Boolean(as)\n const AsSub: ElementType = as!\n\n const handleClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n if (onClick) return onClick(e)\n onToggle()\n },\n [onClick, onToggle],\n )\n\n return (\n <Show\n when={hasAs}\n fallback={\n <button\n {...nativeProps}\n {...ariaProps}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n }),\n )}\n onClick={handleClick}\n ref={triggerRef}\n >\n {props.children}\n </button>\n }\n >\n {hasAs && (\n <AsSub\n {...nativeProps}\n {...ariaProps}\n onClick={handleClick}\n ref={triggerRef}\n />\n )}\n </Show>\n )\n}\n","export interface NavTriggerAriaValues {\n controls: string\n expanded?: boolean\n}\n\ninterface NavTriggerAriaReturn {\n ['aria-controls']: string\n ['aria-expanded']: boolean\n}\n\nexport function createNavTriggerProps(\n values: NavTriggerAriaValues,\n): NavTriggerAriaReturn {\n return {\n ['aria-controls']: values.controls,\n ['aria-expanded']: values.expanded ?? false,\n }\n}\n","'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type PropsWithChildren,\n type RefObject,\n} from 'react'\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n triggerRef: NavTriggerRef | null\n menuRef: NavMenuRef | null\n expanded: boolean\n onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n const triggerRef = useRef<HTMLButtonElement>(null)\n const menuRef = useRef<HTMLUListElement>(null)\n const [expanded, setExpanded] = useState<boolean>(false)\n\n const handleToggle = useCallback(() => {\n setExpanded((prev) => !prev)\n }, [])\n\n const value = useMemo(\n () => ({\n triggerRef,\n menuRef,\n expanded,\n onToggle: handleToggle,\n }),\n [expanded, handleToggle],\n )\n\n return (\n <NavMenuContext.Provider value={value}>\n <nav\n className={css({\n position: 'relative',\n })}\n >\n {props.children}\n </nav>\n </NavMenuContext.Provider>\n )\n}\n\nexport function useNavMenuContext(): NavMenuContextValue {\n const context = useContext(NavMenuContext)\n if (!context) {\n throw new Error('useNavMenuContext must be used within a NavMenu.')\n }\n return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n when: boolean | null | undefined\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NavMenuTrigger.tsx","../../../src/aria-helpers/nav-menu.aria.ts","../../../src/context/navMenu.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport {\n useCallback,\n type ButtonHTMLAttributes,\n type ElementType,\n type MouseEvent,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\nimport {\n createNavTriggerProps,\n type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { ButtonProps } from './Button'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuTrigger component.\n * @module\n */\n\nexport interface NavMenuTriggerProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonProps,\n NavTriggerAriaValues {\n /**\n * The element type to render as. Recommended to use for an IconButton trigger vs a standard Button.\n * @default 'button'\n * @example\n * ```tsx\n * <NavMenuTrigger as={IconButton} href=\"/home\" />\n * ```\n */\n as?: ElementType\n}\n\n/**\n * A component that allows the user to trigger a navigation menu.\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n * @example\n * ```tsx\n * <NavMenu>\n * <NavMenuTrigger controls=\"nav-menu-list\">\n * Menu\n * </NavMenuTrigger>\n * </NavMenu>\n * ```\n */\nexport function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {\n const {\n as,\n palette,\n usage,\n shape,\n controls,\n expanded: propsExpanded,\n onClick,\n ...nativeProps\n } = props\n const { triggerRef, onToggle, expanded } = useNavMenuContext()\n const ariaProps = createNavTriggerProps({\n controls,\n expanded: propsExpanded ?? expanded,\n })\n const hasAs = Boolean(as)\n const AsSub: ElementType = as!\n\n const handleClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n if (onClick) return onClick(e)\n onToggle()\n },\n [onClick, onToggle],\n )\n\n return (\n <Show\n when={hasAs}\n fallback={\n <button\n {...nativeProps}\n {...ariaProps}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n }),\n )}\n onClick={handleClick}\n ref={triggerRef}\n >\n {props.children}\n </button>\n }\n >\n {hasAs && (\n <AsSub\n {...nativeProps}\n {...ariaProps}\n onClick={handleClick}\n ref={triggerRef}\n />\n )}\n </Show>\n )\n}\n","export interface NavTriggerAriaValues {\n controls: string\n expanded?: boolean\n}\n\ninterface NavTriggerAriaReturn {\n ['aria-controls']: string\n ['aria-expanded']: boolean\n}\n\nexport function createNavTriggerProps(\n values: NavTriggerAriaValues,\n): NavTriggerAriaReturn {\n return {\n ['aria-controls']: values.controls,\n ['aria-expanded']: values.expanded ?? false,\n }\n}\n","'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type PropsWithChildren,\n type RefObject,\n} from 'react'\n\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n /**\n * The ref for the trigger button.\n */\n triggerRef: NavTriggerRef | null\n /**\n * The ref for the menu.\n */\n menuRef: NavMenuRef | null\n /**\n * Whether the menu is expanded.\n */\n expanded: boolean\n /**\n * Called when the menu button is clicked.\n */\n onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * Provides the nav menu state for all the NavMenu family components.\n * @see https://cerberus.digitalu.design/react/nav-menu\n */\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n const triggerRef = useRef<HTMLButtonElement>(null)\n const menuRef = useRef<HTMLUListElement>(null)\n const [expanded, setExpanded] = useState<boolean>(false)\n\n const handleToggle = useCallback(() => {\n setExpanded((prev) => !prev)\n }, [])\n\n const value = useMemo(\n () => ({\n triggerRef,\n menuRef,\n expanded,\n onToggle: handleToggle,\n }),\n [expanded, handleToggle],\n )\n\n return (\n <NavMenuContext.Provider value={value}>\n <nav\n className={css({\n position: 'relative',\n })}\n >\n {props.children}\n </nav>\n </NavMenuContext.Provider>\n )\n}\n\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\n */\nexport function useNavMenuContext(): NavMenuContextValue {\n const context = useContext(NavMenuContext)\n if (!context) {\n throw new Error('useNavMenuContext must be used within a NavMenu.')\n }\n return context\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,gBAKO;AACP,IAAAC,cAAmB;AACnB,qBAAuB;;;ACChB,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;;;ACfA,iBAAoB;AACpB,mBASO;AAwDD;AA3BN,IAAM,qBAAiB,4BAA0C,IAAI;AA0C9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;ACvFA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AH2CQ,IAAAC,sBAAA;AA/BD,SAAS,eAAe,OAAyC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,YAAY,UAAU,SAAS,IAAI,kBAAkB;AAC7D,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,UAAU,iBAAiB;AAAA,EAC7B,CAAC;AACD,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,QAAM,kBAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,QAAS,QAAO,QAAQ,CAAC;AAC7B,eAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,eAAW;AAAA,YACT,YAAY;AAAA,gBACZ,uBAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,SAAS;AAAA,UACT,KAAK;AAAA,UAEJ,gBAAM;AAAA;AAAA,MACT;AAAA,MAGD,mBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,KAAK;AAAA;AAAA,MACP;AAAA;AAAA,EAEJ;AAEJ;","names":["import_react","import_css","import_react","import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n const palette = props.palette || 'info'\n const key = `${palette}Notification` as keyof typeof $cerberusIcons\n const Icon = $cerberusIcons[key] as IconType\n return <Icon />\n}\n\nexport interface NotificationBaseProps\n extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n id: string\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n const palette = props.palette || 'info'\n const key = `${palette}Notification` as keyof typeof $cerberusIcons\n const Icon = $cerberusIcons[key] as IconType\n return <Icon />\n}\n\nexport interface NotificationBaseProps\n extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n /**\n * The unique id of the notification. Required for the onClose callback.\n */\n id: string\n /**\n * Called when the close button is clicked.\n */\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * A static Notification component that displays a message to the user. This\n * is typically only used when not utilizing the NotificationCenter.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n * <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n * This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n const { children, palette, onClose, ...nativeProps } = props\n const ref = useRef<HTMLDialogElement>(null)\n const onKeyDown = trapFocus(ref)\n const styles = notification({ palette })\n\n return (\n <dialog\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n position: 'relative',\n gap: '4',\n }),\n styles.dialog,\n )}\n onKeyDown={onKeyDown}\n ref={ref}\n role=\"alert\"\n >\n <span className={styles.icon}>\n <MatchNotificationIcon palette={palette} />\n </span>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0',\n py: '2',\n })}\n >\n {children}\n </div>\n\n <button\n aria-label=\"Close\"\n className={styles.close}\n onClick={onClose}\n value={props.id}\n >\n <Close />\n </button>\n </dialog>\n )\n}\n","import {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","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"],"mappings":"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","names":["import_icons","import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NotificationDescription.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NotificationDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nexport interface BaseNotificationDescriptionProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n NotificationVariantProps\n\n/**\n * Used to render the description of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p\n className={cx(nativeProps.className, styles.description)}\n {...nativeProps}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAGO;AAuBH;AAJG,SAAS,wBAAwB,OAAqC;AAC3E,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,aAAS,6BAAa,EAAE,QAAQ,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,eAAG,YAAY,WAAW,OAAO,WAAW;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NotificationHeading.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NotificationHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nexport interface BaseNotificationHeadingProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n NotificationVariantProps\n\n/**\n * Used to render the heading of a notification.\n * @see https://cerberus.digitalu.design/react/notification\n * @memberof module:NotificationCenter\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAGO;AAuBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,aAAS,6BAAa,EAAE,QAAQ,CAAC;AACvC,SACE,4CAAC,OAAE,eAAW,eAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n container?: Element | DocumentFragment\n key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n /**\n * The root container to render the children into.\n * @default document.body\n */\n container?: Element | DocumentFragment\n /**\n * An optional key to use for the Portal component.\n */\n key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @see https://cerberus.digitalu.design/react/portal\n * @definition [React Portal Docs](https://react.dev/reference/react-dom/createPortal)\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n const container = props.container || document.body\n return createPortal(props.children, container, props.key)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,uBAA6B;AAwBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,aAAO,+BAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ProgressBar.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n progressBar,\n type ProgressBarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ProgressBar component.\n * @module\n */\n\nexport interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}\nexport type NonIndeterminateProgressBarProps = {\n indeterminate?: never\n now: number\n}\nexport type IndeterminateProgressBarProps = {\n indeterminate
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ProgressBar.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport {\n progressBar,\n type ProgressBarVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ProgressBar component.\n * @module\n */\n\nexport interface ProgressBarBaseProps extends HTMLAttributes<HTMLDivElement> {}\nexport type NonIndeterminateProgressBarProps = {\n /**\n * The state of the progress bar.\n */\n indeterminate?: never\n /**\n * The current value of the progress bar.\n */\n now: number\n}\nexport type IndeterminateProgressBarProps = {\n /**\n * The state of the progress bar.\n */\n indeterminate?: true\n /**\n * The current value of the progress bar.\n */\n now?: never\n}\nexport type ProgressBarProps = ProgressBarBaseProps &\n ProgressBarVariantProps &\n (NonIndeterminateProgressBarProps | IndeterminateProgressBarProps)\n\n/**\n * The ProgressBar component is used to display the progress of a task.\n * @see https://cerberus.digitalu.design/react/progress-indicators\n * @example\n * ```tsx\n * <ProgressBar value={75} />\n * ```\n */\nexport function ProgressBar(props: ProgressBarProps) {\n const { indeterminate, size, usage, now, ...nativeProps } = props\n const styles = progressBar({ size, usage })\n const nowClamped = Math.min(100, Math.max(0, now || 0))\n const width = {\n width: indeterminate ? '50%' : `${nowClamped}%`,\n }\n\n return (\n <div\n {...nativeProps}\n aria-valuemin={0}\n aria-valuemax={100}\n aria-valuenow={indeterminate ? 0 : nowClamped}\n className={cx(nativeProps.className, styles.root)}\n role=\"progressbar\"\n >\n <div\n {...(indeterminate && { 'data-indeterminate': true })}\n data-complete={nowClamped === 100}\n className={styles.bar}\n style={width}\n />\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAGO;AA0DD;AAjBC,SAAS,YAAY,OAAyB;AACnD,QAAM,EAAE,eAAe,MAAM,OAAO,KAAK,GAAG,YAAY,IAAI;AAC5D,QAAM,aAAS,4BAAY,EAAE,MAAM,MAAM,CAAC;AAC1C,QAAM,aAAa,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,OAAO,CAAC,CAAC;AACtD,QAAM,QAAQ;AAAA,IACZ,OAAO,gBAAgB,QAAQ,GAAG,UAAU;AAAA,EAC9C;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe,gBAAgB,IAAI;AAAA,MACnC,eAAW,eAAG,YAAY,WAAW,OAAO,IAAI;AAAA,MAChD,MAAK;AAAA,MAEL;AAAA,QAAC;AAAA;AAAA,UACE,GAAI,iBAAiB,EAAE,sBAAsB,KAAK;AAAA,UACnD,iBAAe,eAAe;AAAA,UAC9B,WAAW,OAAO;AAAA,UAClB,OAAO;AAAA;AAAA,MACT;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Radio.tsx","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { radio } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\nimport { useFieldContext } from '../context/field'\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n const { children, size, ...nativeProps } = props\n const { invalid, ...state } = useFieldContext()\n const styles = radio({ size })\n\n return (\n <div className={cx('group', hstack(), styles.root)} tabIndex={0}>\n <input\n {...nativeProps}\n {...state}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(nativeProps.className, styles.input)}\n tabIndex={-1}\n type=\"radio\"\n />\n {children}\n </div>\n )\n}\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\nexport interface FieldContextValue {\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAAuB;AACvB,qBAAsB;;;ACFtB,mBAKO;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Radio.tsx","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { radio } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module contains the Radio component.\n * @module\n */\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n /**\n * A unique identifier for the radio button. Required for accessibility.\n */\n id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\n/**\n * The Radio component is used to allow users to select a single option from a list of options.\n * @see https://cerberus.digitalu.design/react/radio\n * @memberof module:Field\n * @example\n * ```tsx\n * <Field>\n * <fieldset name=\"fruit\">\n * <Radio id=\"radio-1\" name=\"fruit\" value=\"1\">\n * Option 1\n * </Radio>\n * <Radio id=\"radio-2\" name=\"fruit\" value=\"2\">\n * Option 2\n * </Radio>\n * <Radio id=\"radio-3\" name=\"fruit\" value=\"3\">\n * Option 3\n * </Radio>\n * </fieldset>\n * </Field>\n * ```\n */\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n const { children, size, ...nativeProps } = props\n const { invalid, ...state } = useFieldContext()\n const styles = radio({ size })\n\n return (\n <div className={cx('group', hstack(), styles.root)} tabIndex={0}>\n <input\n {...nativeProps}\n {...state}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(nativeProps.className, styles.input)}\n tabIndex={-1}\n type=\"radio\"\n />\n {children}\n </div>\n )\n}\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAAuB;AACvB,qBAAsB;;;ACFtB,mBAKO;AA+CH;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ADnBI,IAAAA,sBAAA;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,aAAS,sBAAM,EAAE,KAAK,CAAC;AAE7B,SACE,8CAAC,SAAI,eAAW,eAAG,aAAS,wBAAO,GAAG,OAAO,IAAI,GAAG,UAAU,GAC5D;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,eAAW,eAAG,YAAY,WAAW,OAAO,KAAK;AAAA,QACjD,UAAU;AAAA,QACV,MAAK;AAAA;AAAA,IACP;AAAA,IACC;AAAA,KACH;AAEJ;","names":["import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/context/field.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport {\n select,\n type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the select components.\n * @module\n */\n\nexport type SelectProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n 'size'\n> &\n SelectVariantProps & {\n id: string\n describedBy?: string\n }\n\n/**\n * Select component\n * props: SelectHTMLAttributes<HTMLSelectElement> & SelectVariantProps & { describedBy?: string }\n * @example\n * ```tsx\n * <Select describedby=\"help:fruit\" id=\"fruit\">\n * <Option value=\"\">Choose option</Option>\n * <Option value=\"one\">Option 1</Option>\n * <Option value=\"two\">Option 2</Option>\n * <Option value=\"three\">Option 3</Option>\n * </Select>\n * ```\n */\nexport function Select(props: SelectProps) {\n const { describedBy, size, ...nativeProps } = props\n const { invalid, ...fieldStates } = useFieldContext()\n const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons\n const styles = select({\n size,\n })\n\n return (\n <div className={styles.root}>\n <select\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={styles.input}\n />\n <span\n className={cx(\n styles.iconStack,\n hstack({\n gap: '2',\n }),\n )}\n >\n <Show when={invalid}>\n <span\n {...(invalid && { 'data-invalid': true })}\n className={styles.stateIcon}\n >\n <InvalidIcon />\n </span>\n </Show>\n <span className={styles.arrowIcon}>\n <SelectArrow />\n </span>\n </span>\n </div>\n )\n}\n\n// We only export this component for consistency with the other components\n\nexport type OptionProps = OptionHTMLAttributes<HTMLOptionElement>\n\n/**\n * Option component\n * props: OptionHTMLAttributes<HTMLOptionElement>\n * @example\n * ```tsx\n * <Option value=\"one\">Option 1</Option>\n * ```\n */\nexport function Option(props: OptionProps) {\n return <option {...props} />\n}\n","import {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\nexport interface FieldContextValue {\n disabled?: boolean\n readOnly?: boolean\n required?: boolean\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n when: boolean | null | undefined\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n * <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_react","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Select.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/config/defineIcons.ts","../../../src/context/field.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport {\n select,\n type SelectVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { OptionHTMLAttributes, SelectHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the select components.\n * @module\n */\n\nexport type SelectProps = Omit<\n SelectHTMLAttributes<HTMLSelectElement>,\n 'size'\n> &\n SelectVariantProps & {\n /**\n * The unique id of the select element. Required for accessibility.\n */\n id: string\n /**\n * The id of the FieldMessage that describes the select element.\n */\n describedBy?: string\n }\n\n/**\n * Used to allow users to select a single option from a list of options.\n * @see https://cerberus.digitalu.design/react/select\n * @memberof module:Field\n * @example\n * ```tsx\n * <Field>\n * <Select describedby=\"help:fruit\" id=\"fruit\">\n * <Option value=\"\">Choose option</Option>\n * <Option value=\"one\">Option 1</Option>\n * <Option value=\"two\">Option 2</Option>\n * <Option value=\"three\">Option 3</Option>\n * </Select>\n * </Field>\n * ```\n */\nexport function Select(props: SelectProps) {\n const { describedBy, size, ...nativeProps } = props\n const { invalid, ...fieldStates } = useFieldContext()\n const { invalid: InvalidIcon, selectArrow: SelectArrow } = $cerberusIcons\n const styles = select({\n size,\n })\n\n return (\n <div className={styles.root}>\n <select\n {...nativeProps}\n {...fieldStates}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={styles.input}\n />\n <span\n className={cx(\n styles.iconStack,\n hstack({\n gap: '2',\n }),\n )}\n >\n <Show when={invalid}>\n <span\n {...(invalid && { 'data-invalid': true })}\n className={styles.stateIcon}\n >\n <InvalidIcon />\n </span>\n </Show>\n <span className={styles.arrowIcon}>\n <SelectArrow />\n </span>\n </span>\n </div>\n )\n}\n\n// We only export this component for consistency with the other components\n\nexport type OptionProps = OptionHTMLAttributes<HTMLOptionElement>\n\n/**\n * Option component\n * props: OptionHTMLAttributes<HTMLOptionElement>\n * @example\n * ```tsx\n * <Option value=\"one\">Option 1</Option>\n * ```\n */\nexport function Option(props: OptionProps) {\n return <option {...props} />\n}\n","import {\n Checkmark,\n CheckmarkFilled,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n ErrorFilled,\n Information,\n InformationFilled,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n fileUploader: CloudUpload,\n indeterminate: IndeterminateIcon,\n infoNotification: InformationFilled,\n successNotification: CheckmarkFilled,\n warningNotification: WarningFilled,\n dangerNotification: ErrorFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport {\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","'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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAmB;AACnB,sBAAuB;AACvB,qBAGO;;;ACPP,mBAeO;;;ACOD;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;;;ADPO,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,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;;;AEtCO,IAAI,iBAAiB;;;ACnB5B,mBAKO;AA+CH,IAAAA,sBAAA;AApBJ,IAAM,mBAAe,4BAAwC,IAAI;AA8B1D,SAAS,kBAAqC;AACnD,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;;;ACpEA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ALqBM,IAAAC,sBAAA;AAVC,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,aAAa,MAAM,GAAG,YAAY,IAAI;AAC9C,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI,gBAAgB;AACpD,QAAM,EAAE,SAAS,aAAa,aAAa,YAAY,IAAI;AAC3D,QAAM,aAAS,uBAAO;AAAA,IACpB;AAAA,EACF,CAAC;AAED,SACE,8CAAC,SAAI,WAAW,OAAO,MACrB;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,QACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,OAAO;AAAA;AAAA,IACpB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,eAAW;AAAA,UACT,OAAO;AAAA,cACP,wBAAO;AAAA,YACL,KAAK;AAAA,UACP,CAAC;AAAA,QACH;AAAA,QAEA;AAAA,uDAAC,QAAK,MAAM,SACV;AAAA,YAAC;AAAA;AAAA,cACE,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,cACvC,WAAW,OAAO;AAAA,cAElB,uDAAC,eAAY;AAAA;AAAA,UACf,GACF;AAAA,UACA,6CAAC,UAAK,WAAW,OAAO,WACtB,uDAAC,eAAY,GACf;AAAA;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;AAcO,SAAS,OAAO,OAAoB;AACzC,SAAO,6CAAC,YAAQ,GAAG,OAAO;AAC5B;","names":["import_jsx_runtime","import_react","import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n when: boolean | null | undefined\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Show.tsx"],"sourcesContent":["'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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,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;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Spinner.tsx"],"sourcesContent":["import type { SVGProps } from 'react'\n\n/**\n * This module contains the Spinner component.\n * @module\n */\n\nexport type SpinnerProps = SVGProps<SVGSVGElement> & {\n /**\n * The size of the spinner\n */\n size?: number | string\n}\n\n/**\n * The Spinner component is used to display a loading indicator. Typically used\n * in buttons, modals, and other components that require a loading state.\n * @see https://cerberus.digitalu.design/react/loading-states/\n * @example\n * ```tsx\n * <Button>\n * <Show when={loading} fallback={<>Save</>}>\n * Saving\n * <Spinner size={24} />\n * </Show>\n * </Button>\n * ```\n */\nexport function Spinner(props: SpinnerProps) {\n return (\n <svg\n aria-busy=\"true\"\n role=\"status\"\n xmlns=\"http://www.w3.org/2000/svg\"\n height={props.size}\n width={props.size}\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n strokeWidth={2}\n >\n <path\n strokeDasharray={16}\n strokeDashoffset={16}\n d=\"M12 3c4.97 0 9 4.03 9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n dur=\"0.15s\"\n values=\"16;0\"\n ></animate>\n <animateTransform\n attributeName=\"transform\"\n dur=\"0.75s\"\n repeatCount=\"indefinite\"\n type=\"rotate\"\n values=\"0 12 12;360 12 12\"\n ></animateTransform>\n </path>\n <path\n strokeDasharray={64}\n strokeDashoffset={64}\n strokeOpacity={0.3}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9Z\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n dur=\"0.6s\"\n values=\"64;0\"\n ></animate>\n </path>\n </g>\n </svg>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CQ;AAlBD,SAAS,QAAQ,OAAqB;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,OAAM;AAAA,MACN,QAAQ,MAAM;AAAA,MACd,OAAO,MAAM;AAAA,MACb,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;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,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA;AAAA,oBAAC;AAAA;AAAA,sBACC,MAAK;AAAA,sBACL,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,QAAO;AAAA;AAAA,kBACR;AAAA,kBACD;AAAA,oBAAC;AAAA;AAAA,sBACC,eAAc;AAAA,sBACd,KAAI;AAAA,sBACJ,aAAY;AAAA,sBACZ,MAAK;AAAA,sBACL,QAAO;AAAA;AAAA,kBACR;AAAA;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,eAAe;AAAA,gBACf,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
|