@cerberus-design/react 0.11.1 → 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/legacy/_tsup-dts-rollup.d.cts +244 -33
- package/build/legacy/components/Admonition.cjs +1 -1
- package/build/legacy/components/Admonition.cjs.map +1 -1
- package/build/legacy/components/Avatar.cjs +1 -1
- package/build/legacy/components/Avatar.cjs.map +1 -1
- package/build/legacy/components/Checkbox.cjs +1 -1
- package/build/legacy/components/Checkbox.cjs.map +1 -1
- package/build/legacy/components/FileStatus.cjs +1 -1
- package/build/legacy/components/FileStatus.cjs.map +1 -1
- package/build/legacy/components/FileUploader.cjs +1 -1
- package/build/legacy/components/FileUploader.cjs.map +1 -1
- package/build/legacy/components/Input.cjs +1 -1
- package/build/legacy/components/Input.cjs.map +1 -1
- package/build/legacy/components/Menu.cjs +82 -0
- package/build/legacy/components/Menu.cjs.map +1 -0
- package/build/legacy/components/ModalHeader.cjs +2 -1
- package/build/legacy/components/ModalHeader.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 +3 -3
- package/build/legacy/components/Notification.cjs.map +1 -1
- package/build/legacy/components/Select.cjs +1 -1
- package/build/legacy/components/Select.cjs.map +1 -1
- package/build/legacy/components/Tag.cjs +3 -3
- 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/Th.cjs +1 -0
- package/build/legacy/components/Th.cjs.map +1 -1
- package/build/legacy/components/Thead.cjs.map +1 -1
- package/build/legacy/components/Toggle.cjs +1 -1
- package/build/legacy/components/Toggle.cjs.map +1 -1
- package/build/legacy/config/cerbIcons.cjs +1 -1
- package/build/legacy/config/cerbIcons.cjs.map +1 -1
- package/build/legacy/config/defineIcons.cjs +1 -1
- package/build/legacy/config/defineIcons.cjs.map +1 -1
- package/build/legacy/context/confirm-modal.cjs +3 -2
- package/build/legacy/context/confirm-modal.cjs.map +1 -1
- package/build/legacy/context/cta-modal.cjs +567 -0
- package/build/legacy/context/cta-modal.cjs.map +1 -0
- package/build/legacy/context/navMenu.cjs.map +1 -1
- package/build/legacy/context/notification-center.cjs +3 -3
- package/build/legacy/context/notification-center.cjs.map +1 -1
- package/build/legacy/context/prompt-modal.cjs +3 -2
- package/build/legacy/context/prompt-modal.cjs.map +1 -1
- package/build/legacy/index.cjs +501 -324
- package/build/legacy/index.cjs.map +1 -1
- package/build/legacy/utils/index.cjs +34 -0
- package/build/legacy/utils/index.cjs.map +1 -0
- package/build/modern/_tsup-dts-rollup.d.ts +244 -33
- package/build/modern/{chunk-HPM2XRWT.js → chunk-3R4TIF2X.js} +1 -1
- package/build/modern/{chunk-HPM2XRWT.js.map → chunk-3R4TIF2X.js.map} +1 -1
- package/build/modern/{chunk-RDQHHCFR.js → chunk-5OSUZUR4.js} +2 -2
- package/build/modern/{chunk-O75QAT4Z.js → chunk-6WS765J3.js} +1 -1
- package/build/modern/chunk-6WS765J3.js.map +1 -0
- package/build/modern/{chunk-KLUBAM4U.js → chunk-7SGPJM66.js} +4 -4
- package/build/modern/chunk-7SGPJM66.js.map +1 -0
- package/build/modern/{chunk-X4Y4WTRU.js → chunk-CSEHDNMJ.js} +7 -7
- package/build/modern/{chunk-TMR7JGMP.js → chunk-F27AAKQ3.js} +3 -3
- package/build/modern/chunk-F27AAKQ3.js.map +1 -0
- package/build/modern/{chunk-243VUIA6.js → chunk-F72ZABKX.js} +2 -2
- package/build/modern/chunk-F72ZABKX.js.map +1 -0
- package/build/modern/{chunk-KF6V5JLW.js → chunk-N4QTLDVM.js} +3 -3
- package/build/modern/{chunk-MDIUFBDX.js → chunk-NB6DV4VA.js} +2 -2
- package/build/modern/{chunk-UJKS4DDN.js → chunk-NKM6PISB.js} +2 -2
- package/build/modern/{chunk-YWCTMLLO.js → chunk-NMNONSHU.js} +2 -2
- package/build/modern/{chunk-OWKN5IV7.js → chunk-PM7CWT3N.js} +2 -2
- package/build/modern/chunk-PM7CWT3N.js.map +1 -0
- package/build/modern/chunk-RUR5MV54.js +52 -0
- package/build/modern/chunk-RUR5MV54.js.map +1 -0
- package/build/modern/{chunk-CO4BKT7K.js → chunk-SGKHA4EB.js} +1 -1
- package/build/modern/chunk-SGKHA4EB.js.map +1 -0
- package/build/modern/{chunk-ZX6DBC2Z.js → chunk-SPZYPRZ6.js} +2 -2
- package/build/modern/chunk-T6LS5P5W.js +155 -0
- package/build/modern/chunk-T6LS5P5W.js.map +1 -0
- package/build/modern/chunk-UTGEFJ3L.js +10 -0
- package/build/modern/chunk-UTGEFJ3L.js.map +1 -0
- package/build/modern/{chunk-5V5MBSM3.js → chunk-UZVQ4INR.js} +2 -2
- package/build/modern/chunk-UZVQ4INR.js.map +1 -0
- package/build/modern/{chunk-FT7DFRHQ.js → chunk-VERRHMW4.js} +2 -2
- package/build/modern/{chunk-3NE6C66J.js → chunk-VP5ERLAY.js} +8 -8
- package/build/modern/{chunk-HCB5NQ5J.js → chunk-W4DXACNV.js} +3 -3
- package/build/modern/{chunk-KBBASJIY.js → chunk-WPVDQRRF.js} +1 -1
- package/build/modern/chunk-WPVDQRRF.js.map +1 -0
- package/build/modern/{chunk-PA5EB7EO.js → chunk-XL4JREDT.js} +2 -2
- package/build/modern/{chunk-PKY46RRA.js → chunk-Y6QQCRQV.js} +1 -1
- package/build/modern/{chunk-PKY46RRA.js.map → chunk-Y6QQCRQV.js.map} +1 -1
- package/build/modern/{chunk-YMJMB6OP.js → chunk-ZBMA5G54.js} +6 -6
- package/build/modern/{chunk-ULYQLKWA.js → chunk-ZFAIE47A.js} +3 -2
- package/build/modern/{chunk-ULYQLKWA.js.map → chunk-ZFAIE47A.js.map} +1 -1
- package/build/modern/{chunk-PKQTTFWA.js → chunk-ZR37P4NZ.js} +1 -1
- package/build/modern/{chunk-PKQTTFWA.js.map → chunk-ZR37P4NZ.js.map} +1 -1
- package/build/modern/components/Admonition.js +4 -4
- package/build/modern/components/Avatar.js +3 -3
- package/build/modern/components/Checkbox.js +3 -3
- package/build/modern/components/FileStatus.js +5 -5
- package/build/modern/components/FileUploader.js +4 -4
- package/build/modern/components/Input.js +3 -3
- package/build/modern/components/Menu.js +19 -0
- package/build/modern/components/Menu.js.map +1 -0
- package/build/modern/components/ModalHeader.js +1 -1
- package/build/modern/components/NavMenuLink.js +1 -1
- package/build/modern/components/NavMenuList.js +2 -2
- package/build/modern/components/NavMenuTrigger.js +2 -2
- package/build/modern/components/Notification.js +3 -3
- package/build/modern/components/Select.js +3 -3
- package/build/modern/components/Tag.js +3 -3
- package/build/modern/components/Tbody.js +1 -1
- package/build/modern/components/Td.js +1 -1
- package/build/modern/components/Th.js +2 -1
- package/build/modern/components/Thead.js +1 -1
- package/build/modern/components/Toggle.js +3 -3
- package/build/modern/config/cerbIcons.js +1 -1
- package/build/modern/config/defineIcons.js +2 -2
- package/build/modern/context/confirm-modal.js +6 -6
- package/build/modern/context/cta-modal.js +25 -0
- package/build/modern/context/cta-modal.js.map +1 -0
- package/build/modern/context/navMenu.js +1 -1
- package/build/modern/context/notification-center.js +4 -4
- package/build/modern/context/prompt-modal.js +7 -7
- package/build/modern/index.js +72 -46
- package/build/modern/index.js.map +1 -1
- package/build/modern/utils/index.js +7 -0
- package/build/modern/utils/index.js.map +1 -0
- package/package.json +3 -2
- package/src/components/Menu.tsx +244 -0
- package/src/components/ModalHeader.tsx +1 -0
- package/src/components/NavMenuLink.tsx +1 -11
- package/src/components/NavMenuList.tsx +1 -3
- package/src/components/NavMenuTrigger.tsx +1 -10
- package/src/components/Notification.tsx +2 -2
- package/src/components/Tag.tsx +8 -4
- package/src/components/Tbody.tsx +1 -2
- package/src/components/Td.tsx +1 -2
- package/src/components/Th.tsx +4 -2
- package/src/components/Thead.tsx +1 -2
- package/src/config/cerbIcons.ts +2 -2
- package/src/context/cta-modal.tsx +210 -0
- package/src/context/navMenu.tsx +1 -2
- package/src/index.ts +3 -0
- package/src/utils/index.ts +19 -0
- package/build/modern/chunk-243VUIA6.js.map +0 -1
- package/build/modern/chunk-5V5MBSM3.js.map +0 -1
- package/build/modern/chunk-CO4BKT7K.js.map +0 -1
- package/build/modern/chunk-KBBASJIY.js.map +0 -1
- package/build/modern/chunk-KLUBAM4U.js.map +0 -1
- package/build/modern/chunk-O75QAT4Z.js.map +0 -1
- package/build/modern/chunk-OWKN5IV7.js.map +0 -1
- package/build/modern/chunk-TMR7JGMP.js.map +0 -1
- /package/build/modern/{chunk-RDQHHCFR.js.map → chunk-5OSUZUR4.js.map} +0 -0
- /package/build/modern/{chunk-X4Y4WTRU.js.map → chunk-CSEHDNMJ.js.map} +0 -0
- /package/build/modern/{chunk-KF6V5JLW.js.map → chunk-N4QTLDVM.js.map} +0 -0
- /package/build/modern/{chunk-MDIUFBDX.js.map → chunk-NB6DV4VA.js.map} +0 -0
- /package/build/modern/{chunk-UJKS4DDN.js.map → chunk-NKM6PISB.js.map} +0 -0
- /package/build/modern/{chunk-YWCTMLLO.js.map → chunk-NMNONSHU.js.map} +0 -0
- /package/build/modern/{chunk-ZX6DBC2Z.js.map → chunk-SPZYPRZ6.js.map} +0 -0
- /package/build/modern/{chunk-FT7DFRHQ.js.map → chunk-VERRHMW4.js.map} +0 -0
- /package/build/modern/{chunk-3NE6C66J.js.map → chunk-VP5ERLAY.js.map} +0 -0
- /package/build/modern/{chunk-HCB5NQ5J.js.map → chunk-W4DXACNV.js.map} +0 -0
- /package/build/modern/{chunk-PA5EB7EO.js.map → chunk-XL4JREDT.js.map} +0 -0
- /package/build/modern/{chunk-YMJMB6OP.js.map → chunk-ZBMA5G54.js.map} +0 -0
|
@@ -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\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 *
|
|
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 * @deprecated use the {@link Menu} family instead\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;;;ADHU;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\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 *
|
|
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 * @deprecated use the {@link Menu} family instead\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 * @deprecated use the {@link Menu} family instead\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;AAuDD;AA1BN,IAAM,qBAAiB,4BAA0C,IAAI;AAyC9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;ACtFA,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;;;AFwFM,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\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 *
|
|
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 * @deprecated use the {@link Menu} family instead\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 * @deprecated use the {@link Menu} family instead\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;AAuDD;AA1BN,IAAM,qBAAiB,4BAA0C,IAAI;AAyC9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;ACtFA,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;;;AHkCQ,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"]}
|
|
@@ -28,7 +28,6 @@ var import_css = require("@cerberus/styled-system/css");
|
|
|
28
28
|
var import_patterns = require("@cerberus/styled-system/patterns");
|
|
29
29
|
var import_recipes = require("@cerberus/styled-system/recipes");
|
|
30
30
|
var import_react = require("react");
|
|
31
|
-
var import_icons2 = require("@cerberus/icons");
|
|
32
31
|
|
|
33
32
|
// src/config/cerbIcons.ts
|
|
34
33
|
var import_icons = require("@cerberus/icons");
|
|
@@ -170,7 +169,7 @@ function AnimatingUploadIcon(props) {
|
|
|
170
169
|
var defaultIcons = {
|
|
171
170
|
avatar: import_icons.UserFilled,
|
|
172
171
|
checkbox: CheckmarkIcon,
|
|
173
|
-
close: import_icons.
|
|
172
|
+
close: import_icons.Close,
|
|
174
173
|
confirmModal: import_icons.Information,
|
|
175
174
|
delete: import_icons.TrashCan,
|
|
176
175
|
promptModal: import_icons.Information,
|
|
@@ -230,6 +229,7 @@ function Notification(props) {
|
|
|
230
229
|
const ref = (0, import_react.useRef)(null);
|
|
231
230
|
const onKeyDown = trapFocus(ref);
|
|
232
231
|
const styles = (0, import_recipes.notification)({ palette });
|
|
232
|
+
const { close: CloseIcon } = $cerberusIcons;
|
|
233
233
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
234
234
|
"dialog",
|
|
235
235
|
{
|
|
@@ -264,7 +264,7 @@ function Notification(props) {
|
|
|
264
264
|
className: styles.close,
|
|
265
265
|
onClick: onClose,
|
|
266
266
|
value: props.id,
|
|
267
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
267
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseIcon, {})
|
|
268
268
|
}
|
|
269
269
|
)
|
|
270
270
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts"],"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 >\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 CheckmarkOutline,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n const focusableElements =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n const focusable = Array.from(\n modalRef.current?.querySelectorAll(focusableElements) ?? [],\n )\n const firstFocusable = focusable[0] as HTMLElement\n const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n lastFocusable.focus()\n event.preventDefault()\n }\n } else {\n if (document.activeElement === lastFocusable) {\n firstFocusable.focus()\n event.preventDefault()\n }\n }\n }\n }\n}\n"],"mappings":"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","names":["import_icons","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Notification.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/aria-helpers/trap-focus.aria.ts"],"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 { $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 const { close: CloseIcon } = $cerberusIcons\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 >\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 <CloseIcon />\n </button>\n </dialog>\n )\n}\n","import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n const focusableElements =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n const focusable = Array.from(\n modalRef.current?.querySelectorAll(focusableElements) ?? [],\n )\n const firstFocusable = focusable[0] as HTMLElement\n const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n lastFocusable.focus()\n event.preventDefault()\n }\n } else {\n if (document.activeElement === lastFocusable) {\n firstFocusable.focus()\n event.preventDefault()\n }\n }\n }\n }\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -169,7 +169,7 @@ function AnimatingUploadIcon(props) {
|
|
|
169
169
|
var defaultIcons = {
|
|
170
170
|
avatar: import_icons.UserFilled,
|
|
171
171
|
checkbox: CheckmarkIcon,
|
|
172
|
-
close: import_icons.
|
|
172
|
+
close: import_icons.Close,
|
|
173
173
|
confirmModal: import_icons.Information,
|
|
174
174
|
delete: import_icons.TrashCan,
|
|
175
175
|
promptModal: import_icons.Information,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Select.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.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 CheckmarkOutline,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n","'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,mBAcO;;;ACQD;AAVC,SAAS,cAAc,OAA0B;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA;AAAA,MACJ;AAAA;AAAA,EACF;AAEJ;AAOO,SAAS,kBAAkB,OAA+B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACP,GAAG;AAAA,MAEJ,sDAAC,UAAK,MAAK,gBAAe,GAAE,qBAAoB;AAAA;AAAA,EAClD;AAEJ;;;AC9BM,IAAAA,sBAAA;AATC,SAAS,oBAAoB,OAAiC;AACnE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAY;AAAA,MACZ,OAAM;AAAA,MACN,OAAO,MAAM,QAAQ;AAAA,MACrB,QAAQ,MAAM,QAAQ;AAAA,MACtB,SAAQ;AAAA,MAER;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,QAAO;AAAA,UACP,eAAc;AAAA,UACd,gBAAe;AAAA,UACf,aAAa;AAAA,UAEb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,iBAAgB;AAAA,gBAChB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,eAAc;AAAA,oBACd,KAAI;AAAA,oBACJ,aAAY;AAAA,oBACZ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,aAAU;AAAA,gBACV,iBAAiB;AAAA,gBACjB,kBAAkB;AAAA,gBAClB,GAAE;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,eAAc;AAAA,oBACd,OAAM;AAAA,oBACN,KAAI;AAAA,oBACJ,QAAO;AAAA;AAAA,gBACR;AAAA;AAAA,YACH;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,OAAM;AAAA,gBACN,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,GAAE;AAAA,gBACF,GAAE;AAAA,gBACF,SAAQ;AAAA,gBAER;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,QAAO;AAAA,oBACP,aAAa;AAAA,oBACb,SAAQ;AAAA,oBACR,QAAO;AAAA,oBAEP;AAAA,sBAAC;AAAA;AAAA,wBACC,MAAK;AAAA,wBACL,eAAc;AAAA,wBACd,QAAO;AAAA,wBACP,KAAI;AAAA,wBACJ,aAAY;AAAA;AAAA,oBACb;AAAA;AAAA,gBACH;AAAA;AAAA,YACF;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;;;AFxCO,IAAM,eAA6B;AAAA,EACxC,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,qBAAqB;AAAA,EACrB,cAAc;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,qBAAqB;AAAA,EACrB,oBAAoB;AAAA,EACpB,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,aAAa;AAAA,EACb,eAAe;AACjB;;;AGxCO,IAAI,iBAAiB;;;ACnB5B,mBAKO;AA+CH,IAAAC,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;;;ANqBM,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_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/components/AnimatingUploadIcon.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 CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n","'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":"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","names":["import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime"]}
|
|
@@ -179,7 +179,7 @@ function AnimatingUploadIcon(props) {
|
|
|
179
179
|
var defaultIcons = {
|
|
180
180
|
avatar: import_icons.UserFilled,
|
|
181
181
|
checkbox: CheckmarkIcon,
|
|
182
|
-
close: import_icons.
|
|
182
|
+
close: import_icons.Close,
|
|
183
183
|
confirmModal: import_icons.Information,
|
|
184
184
|
delete: import_icons.TrashCan,
|
|
185
185
|
promptModal: import_icons.Information,
|
|
@@ -208,7 +208,7 @@ function Tag(props) {
|
|
|
208
208
|
const isClosable = Boolean(onClick);
|
|
209
209
|
const shape = isClosable ? "pill" : initShape;
|
|
210
210
|
const closableStyles = isClosable ? closableCss : "";
|
|
211
|
-
const { close:
|
|
211
|
+
const { close: Close2 } = $cerberusIcons;
|
|
212
212
|
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
|
|
213
213
|
"span",
|
|
214
214
|
{
|
|
@@ -235,7 +235,7 @@ function Tag(props) {
|
|
|
235
235
|
size: "sm"
|
|
236
236
|
}),
|
|
237
237
|
onClick,
|
|
238
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
238
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Close2, {})
|
|
239
239
|
}
|
|
240
240
|
) })
|
|
241
241
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tag.tsx","../../../src/components/Show.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport {\n iconButton,\n tag,\n type TagVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n TagVariantProps & {\n /**\n * The action to be performed when the tag is clicked. Not available when\n * the palette or gradient props are provided.\n */\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n /**\n * The gradient to apply to the tag. Not available when the onClick prop is\n * provided.\n */\n gradient?: never\n /**\n * The palette to use for the tag. Not available when the onClick prop is\n * provided.\n */\n palette?: never\n /**\n * The action to be performed when the tag is clicked.\n */\n onClick: () => void\n /**\n * The shape of the tag. Not available when the onClick prop is provided.\n * @type 'pill' | 'rounded'\n * @default 'pill'\n */\n shape: 'pill'\n /**\n * The usage of the tag. Not available when the onClick prop is provided.\n * @type 'filled' | 'outlined'\n * @default 'filled'\n */\n usage: 'filled'\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @see https://cerberus.digitalu.design/react/tag\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n const { close: Close } = $cerberusIcons\n\n return (\n <span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <button\n aria-label=\"Close\"\n className={iconButton({\n palette: 'action',\n usage: 'filled',\n size: 'sm',\n })}\n onClick={onClick}\n >\n <Close />\n </button>\n </Show>\n </span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n","import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Tag.tsx","../../../src/components/Show.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts"],"sourcesContent":["import type {\n HTMLAttributes,\n MouseEventHandler,\n PropsWithChildren,\n} from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport {\n iconButton,\n tag,\n type TagVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n TagVariantProps & {\n /**\n * The action to be performed when the tag is clicked. Not available when\n * the palette or gradient props are provided.\n */\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n /**\n * The gradient to apply to the tag. Not available when the onClick prop is\n * provided.\n */\n gradient?: never\n /**\n * The palette to use for the tag. Not available when the onClick prop is\n * provided.\n */\n palette?: never\n /**\n * The action to be performed when the tag is clicked.\n */\n onClick: MouseEventHandler<HTMLSpanElement>\n /**\n * The shape of the tag. Not available when the onClick prop is provided.\n * @type 'pill' | 'rounded'\n * @default 'pill'\n */\n shape?: never\n /**\n * The usage of the tag. Not available when the onClick prop is provided.\n * @type 'filled' | 'outlined'\n * @default 'filled'\n */\n usage?: never\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @see https://cerberus.digitalu.design/react/tag\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n const { close: Close } = $cerberusIcons\n\n return (\n <span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <button\n aria-label=\"Close\"\n className={iconButton({\n palette: 'action',\n usage: 'filled',\n size: 'sm',\n })}\n onClick={onClick}\n >\n <Close />\n </button>\n </Show>\n </span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n","import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","Close"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tbody.tsx"],"sourcesContent":["import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Tbody.tsx"],"sourcesContent":["import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a TBody component.\n * @module\n */\n\nexport type TbodyBaseProps = JSX.IntrinsicElements['tbody']\nexport type TbodyProps = TbodyBaseProps & TbodyVariantProps\n\n/**\n * The TBody component is used to render a table body.\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <TBody>\n * {children}\n * </TBody>\n * ```\n */\nexport function Tbody(props: TbodyProps) {\n const { decoration, ...nativeProps } = props\n return (\n <tbody\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tbody({\n decoration,\n }),\n )}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8C;AAC9C,iBAAmB;AAwBf;AAHG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,YAAY,GAAG,YAAY,IAAI;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,sBAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Td.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { td, type TdVariantProps } from '@cerberus/styled-system/recipes'\
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Td.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { td, type TdVariantProps } from '@cerberus/styled-system/recipes'\n\n/**\n * Th component for the Td component\n * @module\n */\n\nexport type TdBaseProps = JSX.IntrinsicElements['td']\nexport type TdProps = TdBaseProps & TdVariantProps\n\n/**\n * Styles for the Th component\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Td>Data cell</Td>\n * ```\n */\nexport function Td(props: TdProps) {\n const { size, ...nativeProps } = props\n return (\n <td\n {...nativeProps}\n className={cx(\n nativeProps.className,\n td({\n size,\n }),\n )}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAwC;AAsBpC;AAHG,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,mBAAG;AAAA,UACD;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Th.tsx","../../../src/components/Show.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Th.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = JSX.IntrinsicElements['th'] & {\n /**\n * Converts the Th into a actionable button. Called when the user clicks on\n * the Th.\n */\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n * @example\n * ```tsx\n * <Th onClick={handleClick}>\n * Names\n * <SortIcon />\n * </Th>\n * ```\n */\nexport function Th(props: ThProps) {\n const { size, onClick, ...nativeProps } = props\n return (\n <Show\n when={Boolean(onClick)}\n fallback={\n <th\n {...nativeProps}\n className={cx(nativeProps.className, th({ size }))}\n />\n }\n >\n <th {...nativeProps}>\n <button\n className={cx(\n nativeProps.className,\n th({ size }),\n css({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'space-between',\n userSelect: 'none',\n w: 'full',\n _hover: {\n bgColor: 'page.bg.100',\n },\n }),\n )}\n onClick={onClick}\n >\n {props.children}\n </button>\n </th>\n </Show>\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;AAEA,iBAAwB;AACxB,qBAAwC;;;ACDxC,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;;;ADKQ;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,eAAW,eAAG,YAAY,eAAW,mBAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,sDAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,YACT,YAAY;AAAA,gBACZ,mBAAG,EAAE,KAAK,CAAC;AAAA,gBACX,gBAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,cACH,QAAQ;AAAA,gBACN,SAAS;AAAA,cACX;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Thead.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { thead } from '@cerberus/styled-system/recipes'\
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Thead.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { thead } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Thead component.\n * @module\n */\n\nexport type TheadProps = JSX.IntrinsicElements['thead']\n\n/**\n * The Thead component is used to render a table header.\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Thead>\n * {children}\n * </Thead>\n * ```\n */\nexport function Thead(props: TheadProps) {\n return <thead {...props} className={cx(props.className, thead())} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAqBb;AADF,SAAS,MAAM,OAAmB;AACvC,SAAO,4CAAC,WAAO,GAAG,OAAO,eAAW,eAAG,MAAM,eAAW,sBAAM,CAAC,GAAG;AACpE;","names":[]}
|
|
@@ -168,7 +168,7 @@ function AnimatingUploadIcon(props) {
|
|
|
168
168
|
var defaultIcons = {
|
|
169
169
|
avatar: import_icons.UserFilled,
|
|
170
170
|
checkbox: CheckmarkIcon,
|
|
171
|
-
close: import_icons.
|
|
171
|
+
close: import_icons.Close,
|
|
172
172
|
confirmModal: import_icons.Information,
|
|
173
173
|
delete: import_icons.TrashCan,
|
|
174
174
|
promptModal: import_icons.Information,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Toggle.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n toggle,\n type ToggleVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { InputHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module provides a toggle component.\n * @module\n */\n\nexport type ToggleBase = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'id' | 'value'\n> & {\n /**\n * The FieldMessage providing context for the Toggle.\n */\n describedBy?: string\n /**\n * A unique identifier for the Toggle. Required for accessibility.\n */\n id: string\n /**\n * The value of the Toggle.\n */\n value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\n/**\n * The Toggle component is used to switch between two states. Optionally\n * combine with the `useToggle` hook.\n * @see https://cerberus.digitalu.design/react/toggle\n * @example\n * ```tsx\n * const { checked, handleChange } = useToggle({ checked: 'toggle' })\n *\n * <Hstack justify=\"space-between\" w=\"full\">\n * <Field>\n * <Label htmlFor=\"toggle\">Show notifications</Label>\n * <Toggle\n * checked={checked === 'toggle'}\n * id=\"toggle\"\n * onChange={handleChange}\n * value=\"toggle\"\n * />\n * </Field>\n * </Hstack>\n * ```\n */\nexport function Toggle(props: ToggleProps) {\n const { size, describedBy, ...nativeProps } = props\n const styles = toggle({ size })\n const { invalid, ...state } = useFieldContext()\n const Icon = $cerberusIcons.toggleChecked\n\n return (\n <span\n className={cx('group', styles.track, hstack())}\n data-checked={props.checked || props.defaultChecked}\n >\n <input\n {...nativeProps}\n {...state}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={cx('peer', styles.input)}\n role=\"switch\"\n type=\"checkbox\"\n />\n <span\n className={cx(\n styles.thumb,\n vstack({\n justify: 'center',\n }),\n )}\n >\n <Icon />\n </span>\n </span>\n )\n}\n","import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n CloseFilled,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: CloseFilled,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Toggle.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts","../../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n toggle,\n type ToggleVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { InputHTMLAttributes } from 'react'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { useFieldContext } from '../context/field'\n\n/**\n * This module provides a toggle component.\n * @module\n */\n\nexport type ToggleBase = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'id' | 'value'\n> & {\n /**\n * The FieldMessage providing context for the Toggle.\n */\n describedBy?: string\n /**\n * A unique identifier for the Toggle. Required for accessibility.\n */\n id: string\n /**\n * The value of the Toggle.\n */\n value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\n\n/**\n * The Toggle component is used to switch between two states. Optionally\n * combine with the `useToggle` hook.\n * @see https://cerberus.digitalu.design/react/toggle\n * @example\n * ```tsx\n * const { checked, handleChange } = useToggle({ checked: 'toggle' })\n *\n * <Hstack justify=\"space-between\" w=\"full\">\n * <Field>\n * <Label htmlFor=\"toggle\">Show notifications</Label>\n * <Toggle\n * checked={checked === 'toggle'}\n * id=\"toggle\"\n * onChange={handleChange}\n * value=\"toggle\"\n * />\n * </Field>\n * </Hstack>\n * ```\n */\nexport function Toggle(props: ToggleProps) {\n const { size, describedBy, ...nativeProps } = props\n const styles = toggle({ size })\n const { invalid, ...state } = useFieldContext()\n const Icon = $cerberusIcons.toggleChecked\n\n return (\n <span\n className={cx('group', styles.track, hstack())}\n data-checked={props.checked || props.defaultChecked}\n >\n <input\n {...nativeProps}\n {...state}\n {...(describedBy && { 'aria-describedby': describedBy })}\n {...(invalid && { 'aria-invalid': true })}\n className={cx('peer', styles.input)}\n role=\"switch\"\n type=\"checkbox\"\n />\n <span\n className={cx(\n styles.thumb,\n vstack({\n justify: 'center',\n }),\n )}\n >\n <Icon />\n </span>\n </span>\n )\n}\n","import {\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n avatar?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n avatar: UserFilled,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\ninterface CheckboxIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\ninterface IndeterminateIconProps extends SVGProps<SVGSVGElement> {}\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n","'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a context and hook for the field.\n * @module Field\n */\n\nexport interface FieldContextValue {\n /**\n * Whether the field is disabled.\n * @description [Moz Input Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes)\n */\n disabled?: boolean\n /**\n * Whether the field is read-only.\n */\n readOnly?: boolean\n /**\n * Whether the field is required.\n */\n required?: boolean\n /**\n * Whether the field is invalid.\n */\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\n/**\n * Provides the field state for a all related components used within a group.\n * @see https://cerberus.digitalu.design/react/input\n */\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readOnly: props.readOnly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readOnly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\n/**\n * Used to access the field context.\n * @returns The field context.\n */\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","import_jsx_runtime"]}
|
|
@@ -162,7 +162,7 @@ function AnimatingUploadIcon(props) {
|
|
|
162
162
|
var defaultIcons = {
|
|
163
163
|
avatar: import_icons.UserFilled,
|
|
164
164
|
checkbox: CheckmarkIcon,
|
|
165
|
-
close: import_icons.
|
|
165
|
+
close: import_icons.Close,
|
|
166
166
|
confirmModal: import_icons.Information,
|
|
167
167
|
delete: import_icons.TrashCan,
|
|
168
168
|
promptModal: import_icons.Information,
|