@cerberus-design/react 0.15.0-next-32cd15e → 0.15.0-next-68149ba
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 +35 -3
- package/build/legacy/components/DatePicker.client.cjs +37 -30
- package/build/legacy/components/DatePicker.client.cjs.map +1 -1
- package/build/legacy/components/button/button.cjs +154 -0
- package/build/legacy/components/button/button.cjs.map +1 -0
- package/build/legacy/components/button/index.cjs +163 -0
- package/build/legacy/components/button/index.cjs.map +1 -0
- package/build/legacy/components/button/parts.cjs +159 -0
- package/build/legacy/components/button/parts.cjs.map +1 -0
- package/build/legacy/components/deprecated/NavMenuTrigger.cjs.map +1 -1
- package/build/legacy/context/confirm-modal.cjs +53 -44
- package/build/legacy/context/confirm-modal.cjs.map +1 -1
- package/build/legacy/context/cta-modal.cjs +53 -44
- package/build/legacy/context/cta-modal.cjs.map +1 -1
- package/build/legacy/context/notification-center.cjs +22 -15
- package/build/legacy/context/notification-center.cjs.map +1 -1
- package/build/legacy/context/prompt-modal.cjs +75 -66
- package/build/legacy/context/prompt-modal.cjs.map +1 -1
- package/build/legacy/hooks/useRootColors.cjs +0 -1
- package/build/legacy/hooks/useRootColors.cjs.map +1 -1
- package/build/legacy/index.cjs +416 -394
- package/build/legacy/index.cjs.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +35 -3
- package/build/modern/{chunk-BRVZVAPT.js → chunk-245SMQ45.js} +1 -1
- package/build/modern/chunk-245SMQ45.js.map +1 -0
- package/build/modern/{chunk-ISCJ542I.js → chunk-2HOUQ2DX.js} +2 -2
- package/build/modern/chunk-2JX27W6Y.js +15 -0
- package/build/modern/chunk-2JX27W6Y.js.map +1 -0
- package/build/modern/{chunk-F5OVI74O.js → chunk-3RGRHMJQ.js} +6 -6
- package/build/modern/chunk-3RGRHMJQ.js.map +1 -0
- package/build/modern/{chunk-FV4UITYD.js → chunk-5QONP7GT.js} +4 -4
- package/build/modern/{chunk-O6LFWUHI.js → chunk-7P7OWBGV.js} +2 -2
- package/build/modern/{chunk-UNDJYNQC.js → chunk-7S47NSGR.js} +6 -6
- package/build/modern/chunk-7S47NSGR.js.map +1 -0
- package/build/modern/{chunk-25HMVHLT.js → chunk-7SU6FCTJ.js} +5 -5
- package/build/modern/chunk-CYC2YUKU.js +1 -0
- package/build/modern/{chunk-NJSETNRL.js → chunk-DXBZ3HMY.js} +2 -2
- package/build/modern/{chunk-A6BRQ2QK.js → chunk-KU2AWAK3.js} +2 -2
- package/build/modern/chunk-KU2AWAK3.js.map +1 -0
- package/build/modern/chunk-MER66QUY.js +52 -0
- package/build/modern/chunk-MER66QUY.js.map +1 -0
- package/build/modern/{chunk-EDARV2EI.js → chunk-MISIUX63.js} +4 -4
- package/build/modern/{chunk-N24COMHJ.js → chunk-NGOLRISW.js} +4 -4
- package/build/modern/{chunk-ZUXK7V4G.js → chunk-Q4IV5NUT.js} +9 -9
- package/build/modern/chunk-Q4IV5NUT.js.map +1 -0
- package/build/modern/{chunk-GCQMH4QA.js → chunk-SXLPDPOZ.js} +4 -4
- package/build/modern/{chunk-MZ3UCDUL.js → chunk-VYCU7I4J.js} +4 -4
- package/build/modern/{chunk-RMVJK26W.js → chunk-XJQXHSH7.js} +1 -2
- package/build/modern/chunk-XJQXHSH7.js.map +1 -0
- package/build/modern/{chunk-FOKO6LKG.js → chunk-Z7FGXAND.js} +7 -7
- package/build/modern/chunk-Z7FGXAND.js.map +1 -0
- package/build/modern/components/AccordionItemGroup.js +1 -1
- package/build/modern/components/Admonition.client.js +3 -3
- package/build/modern/components/Admonition.js +4 -4
- package/build/modern/components/Avatar.js +2 -2
- package/build/modern/components/Checkbox.js +2 -2
- package/build/modern/components/DatePicker.client.js +4 -2
- package/build/modern/components/FileStatus.js +3 -3
- package/build/modern/components/FileUploader.js +3 -3
- package/build/modern/components/Input.js +2 -2
- package/build/modern/components/Select.js +2 -2
- package/build/modern/components/Tag.js +2 -2
- package/build/modern/components/button/button.js +12 -0
- package/build/modern/components/button/button.js.map +1 -0
- package/build/modern/components/button/index.js +16 -0
- package/build/modern/components/button/index.js.map +1 -0
- package/build/modern/components/button/parts.js +10 -0
- package/build/modern/components/button/parts.js.map +1 -0
- package/build/modern/components/deprecated/NavMenuTrigger.js +1 -1
- package/build/modern/context/confirm-modal.js +5 -4
- package/build/modern/context/cta-modal.js +5 -4
- package/build/modern/context/notification-center.js +5 -4
- package/build/modern/context/prompt-modal.js +6 -5
- package/build/modern/hooks/useRootColors.js +1 -1
- package/build/modern/index.js +53 -46
- package/build/modern/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/DatePicker.client.tsx +1 -1
- package/src/components/button/button.tsx +77 -0
- package/src/components/button/index.ts +2 -0
- package/src/components/button/parts.ts +26 -0
- package/src/components/deprecated/NavMenuTrigger.tsx +1 -1
- package/src/context/confirm-modal.tsx +1 -1
- package/src/context/cta-modal.tsx +1 -1
- package/src/context/notification-center.tsx +1 -1
- package/src/context/prompt-modal.tsx +1 -1
- package/src/hooks/useRootColors.ts +0 -1
- package/src/index.ts +1 -1
- package/build/legacy/components/Button.cjs +0 -51
- package/build/legacy/components/Button.cjs.map +0 -1
- package/build/modern/chunk-A6BRQ2QK.js.map +0 -1
- package/build/modern/chunk-BRVZVAPT.js.map +0 -1
- package/build/modern/chunk-F5OVI74O.js.map +0 -1
- package/build/modern/chunk-FOKO6LKG.js.map +0 -1
- package/build/modern/chunk-RMVJK26W.js.map +0 -1
- package/build/modern/chunk-STNRGV3Y.js +0 -29
- package/build/modern/chunk-STNRGV3Y.js.map +0 -1
- package/build/modern/chunk-UNDJYNQC.js.map +0 -1
- package/build/modern/chunk-ZUXK7V4G.js.map +0 -1
- package/build/modern/components/Button.js +0 -7
- package/src/components/Button.tsx +0 -36
- /package/build/modern/{chunk-ISCJ542I.js.map → chunk-2HOUQ2DX.js.map} +0 -0
- /package/build/modern/{chunk-FV4UITYD.js.map → chunk-5QONP7GT.js.map} +0 -0
- /package/build/modern/{chunk-O6LFWUHI.js.map → chunk-7P7OWBGV.js.map} +0 -0
- /package/build/modern/{chunk-25HMVHLT.js.map → chunk-7SU6FCTJ.js.map} +0 -0
- /package/build/modern/{components/Button.js.map → chunk-CYC2YUKU.js.map} +0 -0
- /package/build/modern/{chunk-NJSETNRL.js.map → chunk-DXBZ3HMY.js.map} +0 -0
- /package/build/modern/{chunk-EDARV2EI.js.map → chunk-MISIUX63.js.map} +0 -0
- /package/build/modern/{chunk-N24COMHJ.js.map → chunk-NGOLRISW.js.map} +0 -0
- /package/build/modern/{chunk-GCQMH4QA.js.map → chunk-SXLPDPOZ.js.map} +0 -0
- /package/build/modern/{chunk-MZ3UCDUL.js.map → chunk-VYCU7I4J.js.map} +0 -0
|
@@ -545,14 +545,46 @@ export { BaseSelectProps as BaseSelectProps_alias_1 }
|
|
|
545
545
|
declare function Button(props: ButtonProps): JSX.Element;
|
|
546
546
|
export { Button }
|
|
547
547
|
export { Button as Button_alias_1 }
|
|
548
|
+
export { Button as Button_alias_2 }
|
|
548
549
|
|
|
549
550
|
/**
|
|
550
|
-
*
|
|
551
|
-
*
|
|
551
|
+
* An icon to display in a button that utilizes the pending state to display
|
|
552
|
+
* a loading spinner.
|
|
553
|
+
*/
|
|
554
|
+
declare function ButtonIcon(props: PropsWithChildren<object>): JSX_2.Element;
|
|
555
|
+
export { ButtonIcon }
|
|
556
|
+
export { ButtonIcon as ButtonIcon_alias_1 }
|
|
557
|
+
export { ButtonIcon as ButtonIcon_alias_2 }
|
|
558
|
+
|
|
559
|
+
/**
|
|
560
|
+
* An Object containing the parts of the Button component. For users that
|
|
561
|
+
* prefer Object component syntax.
|
|
562
|
+
*
|
|
563
|
+
* @remarks
|
|
564
|
+
*
|
|
565
|
+
* When using object component syntax, you import the ButtonParts object and
|
|
566
|
+
* the entire family of components vs. only what you use.
|
|
552
567
|
*/
|
|
553
|
-
declare
|
|
568
|
+
declare const ButtonParts: ButtonPartsValue;
|
|
569
|
+
export { ButtonParts }
|
|
570
|
+
export { ButtonParts as ButtonParts_alias_1 }
|
|
571
|
+
export { ButtonParts as ButtonParts_alias_2 }
|
|
572
|
+
|
|
573
|
+
/**
|
|
574
|
+
* This module contains the parts of the Button component.
|
|
575
|
+
* @module 'button/parts'
|
|
576
|
+
*/
|
|
577
|
+
declare interface ButtonPartsValue {
|
|
578
|
+
Root: ElementType;
|
|
579
|
+
Icon: ElementType;
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariantProps & {
|
|
583
|
+
pending?: boolean;
|
|
584
|
+
};
|
|
554
585
|
export { ButtonProps }
|
|
555
586
|
export { ButtonProps as ButtonProps_alias_1 }
|
|
587
|
+
export { ButtonProps as ButtonProps_alias_2 }
|
|
556
588
|
|
|
557
589
|
export { CancelDrop }
|
|
558
590
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/deprecated/NavMenuTrigger.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/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"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AA+Df;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,cAAc;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,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,OAAO;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":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Avatar
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-SXLPDPOZ.js";
|
|
4
4
|
import {
|
|
5
5
|
useCerberusContext
|
|
6
6
|
} from "./chunk-GITT5645.js";
|
|
@@ -79,4 +79,4 @@ function MatchAvatar(props) {
|
|
|
79
79
|
export {
|
|
80
80
|
MatchAvatar
|
|
81
81
|
};
|
|
82
|
-
//# sourceMappingURL=chunk-
|
|
82
|
+
//# sourceMappingURL=chunk-2HOUQ2DX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/button/parts.ts"],"sourcesContent":["import type { ElementType } from 'react'\nimport { Button, ButtonIcon } from './button'\n\n/**\n * This module contains the parts of the Button component.\n * @module 'button/parts'\n */\n\ninterface ButtonPartsValue {\n Root: ElementType\n Icon: ElementType\n}\n\n/**\n * An Object containing the parts of the Button component. For users that\n * prefer Object component syntax.\n *\n * @remarks\n *\n * When using object component syntax, you import the ButtonParts object and\n * the entire family of components vs. only what you use.\n */\nexport const ButtonParts: ButtonPartsValue = {\n Root: Button,\n Icon: ButtonIcon,\n}\n"],"mappings":";;;;;;AAsBO,IAAM,cAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM;AACR;","names":[]}
|
|
@@ -9,16 +9,16 @@ import {
|
|
|
9
9
|
} from "./chunk-TFL56AYR.js";
|
|
10
10
|
import {
|
|
11
11
|
Avatar
|
|
12
|
-
} from "./chunk-
|
|
13
|
-
import {
|
|
14
|
-
Show
|
|
15
|
-
} from "./chunk-BUVVRQLZ.js";
|
|
12
|
+
} from "./chunk-SXLPDPOZ.js";
|
|
16
13
|
import {
|
|
17
14
|
useCerberusContext
|
|
18
15
|
} from "./chunk-GITT5645.js";
|
|
19
16
|
import {
|
|
20
17
|
Button
|
|
21
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-MER66QUY.js";
|
|
19
|
+
import {
|
|
20
|
+
Show
|
|
21
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
22
22
|
|
|
23
23
|
// src/context/cta-modal.tsx
|
|
24
24
|
import {
|
|
@@ -123,4 +123,4 @@ export {
|
|
|
123
123
|
CTAModal,
|
|
124
124
|
useCTAModal
|
|
125
125
|
};
|
|
126
|
-
//# sourceMappingURL=chunk-
|
|
126
|
+
//# sourceMappingURL=chunk-3RGRHMJQ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/context/cta-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type MouseEventHandler,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Button } from '../components/button/button'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { useCerberusContext } from './cerberus'\nimport { HStack } from '@cerberus/styled-system/jsx'\nimport { css } from '@cerberus/styled-system/css'\nimport { VStack } from '@cerberus/styled-system/jsx'\nimport {\n Dialog,\n DialogDescription,\n DialogHeading,\n DialogProvider,\n} from '../components/Dialog'\nimport { DialogCloseIconTrigger } from '../components/Dialog.client'\n\n/**\n * This module provides a context and hook for the cta modal.\n * @module\n */\n\nexport interface ShowCTAModalOptions {\n /**\n * The heading of the cta modal.\n */\n heading: string\n /**\n * The description of the cta modal.\n */\n description?: string\n /**\n * The icon used for the modal Avatar.\n */\n icon?: ReactNode\n /**\n * The actions for the cta modal. Max of 2 actions.\n */\n actions: {\n text: string\n onClick: MouseEventHandler<HTMLButtonElement>\n }[]\n}\n\nexport interface CTAModalValue {\n show: (options: ShowCTAModalOptions) => void\n}\n\nconst CTAModalContext = createContext<CTAModalValue | null>(null)\n\nexport type CTAModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a CTA modal to the app.\n * @see https://cerberus.digitalu.design/react/cta-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <CTAModal>\n * <SomeFeatureSection />\n * </CTAModal>\n *\n * // Use the hook to show the cta modal.\n * const cta = useCTAModal()\n *\n * const handleClick = useCallback(async () => {\n * const userConsent = await cta.show({\n * heading: 'Create or copy a Cohort',\n * description:\n * 'Create a new cohort or copy and existing one.',\n * icon: <Copy size={24} />,\n * actions: [\n * {\n * text: 'Create Cohort',\n * onClick: () => {},\n * {\n * text: 'Copy Cohort',\n * onClick: () => {}\n * }\n * })\n * setConsent(userConsent)\n * }, [cta])\n * ```\n */\nexport function CTAModal(props: PropsWithChildren<CTAModalProviderProps>) {\n const [open, setOpen] = useState<boolean>(false)\n const [content, setContent] = useState<ShowCTAModalOptions | null>(null)\n const confirmIcon = content?.icon\n\n const { icons } = useCerberusContext()\n const { confirmModal: FallbackIcon } = icons\n\n const handleShow = useCallback(\n (options: ShowCTAModalOptions) => {\n const maxActions = 2\n if (options.actions.length > maxActions) {\n throw new Error(\n `CTA Modal only supports a maximum of ${maxActions} actions.`,\n )\n }\n setContent({ ...options })\n setOpen(true)\n },\n [setOpen],\n )\n\n const handleActionClick = useCallback(\n (event: MouseEvent<HTMLButtonElement>) => {\n const index = event.currentTarget.getAttribute('data-index')\n const action = content?.actions[Number(index)]\n const { onClick } = action || {}\n onClick?.(event)\n setOpen(false)\n },\n [content, setOpen],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <CTAModalContext.Provider value={value}>\n {props.children}\n\n <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n <Dialog size=\"sm\">\n <DialogCloseIconTrigger />\n\n <VStack gap=\"xl\" w=\"full\">\n <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n <VStack gap=\"lg\" w=\"full\">\n <Avatar\n ariaLabel=\"\"\n gradient=\"charon-light\"\n icon={\n <Show\n when={Boolean(confirmIcon)}\n fallback={<FallbackIcon size={24} />}\n >\n {confirmIcon}\n </Show>\n }\n src=\"\"\n />\n <DialogHeading>{content?.heading}</DialogHeading>\n <DialogDescription>{content?.description}</DialogDescription>\n </VStack>\n </VStack>\n\n <HStack gap=\"md\" w=\"full\">\n <Show when={Boolean(content?.actions?.length)}>\n {content?.actions?.map((action, index) => (\n <Button\n data-index={index}\n className={css({\n w: '1/2',\n })}\n key={index}\n onClick={handleActionClick}\n shape=\"rounded\"\n usage=\"outlined\"\n >\n {action.text}\n </Button>\n ))}\n </Show>\n </HStack>\n </VStack>\n </Dialog>\n </DialogProvider>\n </CTAModalContext.Provider>\n )\n}\n\nexport function useCTAModal(): CTAModalValue {\n const context = useContext(CTAModalContext)\n if (context === null) {\n throw new Error('useCTAModal must be used within a CTAModal Provider')\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAKK;AAKP,SAAS,cAAc;AACvB,SAAS,WAAW;AACpB,SAAS,cAAc;AA0Hb,cAII,YAJJ;AAlFV,IAAM,kBAAkB,cAAoC,IAAI;AAoCzD,SAAS,SAAS,OAAiD;AACxE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAkB,KAAK;AAC/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAqC,IAAI;AACvE,QAAM,cAAc,SAAS;AAE7B,QAAM,EAAE,MAAM,IAAI,mBAAmB;AACrC,QAAM,EAAE,cAAc,aAAa,IAAI;AAEvC,QAAM,aAAa;AAAA,IACjB,CAAC,YAAiC;AAChC,YAAM,aAAa;AACnB,UAAI,QAAQ,QAAQ,SAAS,YAAY;AACvC,cAAM,IAAI;AAAA,UACR,wCAAwC,UAAU;AAAA,QACpD;AAAA,MACF;AACA,iBAAW,EAAE,GAAG,QAAQ,CAAC;AACzB,cAAQ,IAAI;AAAA,IACd;AAAA,IACA,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAC,UAAyC;AACxC,YAAM,QAAQ,MAAM,cAAc,aAAa,YAAY;AAC3D,YAAM,SAAS,SAAS,QAAQ,OAAO,KAAK,CAAC;AAC7C,YAAM,EAAE,QAAQ,IAAI,UAAU,CAAC;AAC/B,gBAAU,KAAK;AACf,cAAQ,KAAK;AAAA,IACf;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EACnB;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,gBAAgB,UAAhB,EAAyB,OACvB;AAAA,UAAM;AAAA,IAEP,oBAAC,kBAAe,MAAY,cAAc,CAAC,MAAM,QAAQ,EAAE,IAAI,GAC7D,+BAAC,UAAO,MAAK,MACX;AAAA,0BAAC,0BAAuB;AAAA,MAExB,qBAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA,4BAAC,UAAO,YAAW,cAAa,KAAI,MAAK,GAAE,QACzC,+BAAC,UAAO,KAAI,MAAK,GAAE,QACjB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAU;AAAA,cACV,UAAS;AAAA,cACT,MACE;AAAA,gBAAC;AAAA;AAAA,kBACC,MAAM,QAAQ,WAAW;AAAA,kBACzB,UAAU,oBAAC,gBAAa,MAAM,IAAI;AAAA,kBAEjC;AAAA;AAAA,cACH;AAAA,cAEF,KAAI;AAAA;AAAA,UACN;AAAA,UACA,oBAAC,iBAAe,mBAAS,SAAQ;AAAA,UACjC,oBAAC,qBAAmB,mBAAS,aAAY;AAAA,WAC3C,GACF;AAAA,QAEA,oBAAC,UAAO,KAAI,MAAK,GAAE,QACjB,8BAAC,QAAK,MAAM,QAAQ,SAAS,SAAS,MAAM,GACzC,mBAAS,SAAS,IAAI,CAAC,QAAQ,UAC9B;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,YACZ,WAAW,IAAI;AAAA,cACb,GAAG;AAAA,YACL,CAAC;AAAA,YAED,SAAS;AAAA,YACT,OAAM;AAAA,YACN,OAAM;AAAA,YAEL,iBAAO;AAAA;AAAA,UALH;AAAA,QAMP,CACD,GACH,GACF;AAAA,SACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,cAA6B;AAC3C,QAAM,UAAU,WAAW,eAAe;AAC1C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}
|
|
@@ -19,12 +19,12 @@ import {
|
|
|
19
19
|
import {
|
|
20
20
|
Portal
|
|
21
21
|
} from "./chunk-IQJDVFPP.js";
|
|
22
|
-
import {
|
|
23
|
-
Show
|
|
24
|
-
} from "./chunk-BUVVRQLZ.js";
|
|
25
22
|
import {
|
|
26
23
|
useCerberusContext
|
|
27
24
|
} from "./chunk-GITT5645.js";
|
|
25
|
+
import {
|
|
26
|
+
Show
|
|
27
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
28
28
|
|
|
29
29
|
// src/components/Select.tsx
|
|
30
30
|
import {
|
|
@@ -94,4 +94,4 @@ export {
|
|
|
94
94
|
OptionGroupLabel,
|
|
95
95
|
createSelectCollection
|
|
96
96
|
};
|
|
97
|
-
//# sourceMappingURL=chunk-
|
|
97
|
+
//# sourceMappingURL=chunk-5QONP7GT.js.map
|
|
@@ -12,7 +12,7 @@ import {
|
|
|
12
12
|
} from "./chunk-APD6IX5R.js";
|
|
13
13
|
import {
|
|
14
14
|
Avatar
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-SXLPDPOZ.js";
|
|
16
16
|
import {
|
|
17
17
|
useCerberusContext
|
|
18
18
|
} from "./chunk-GITT5645.js";
|
|
@@ -227,4 +227,4 @@ export {
|
|
|
227
227
|
processStatus,
|
|
228
228
|
FileStatus
|
|
229
229
|
};
|
|
230
|
-
//# sourceMappingURL=chunk-
|
|
230
|
+
//# sourceMappingURL=chunk-7P7OWBGV.js.map
|
|
@@ -7,16 +7,16 @@ import {
|
|
|
7
7
|
} from "./chunk-TFL56AYR.js";
|
|
8
8
|
import {
|
|
9
9
|
Avatar
|
|
10
|
-
} from "./chunk-
|
|
11
|
-
import {
|
|
12
|
-
Show
|
|
13
|
-
} from "./chunk-BUVVRQLZ.js";
|
|
10
|
+
} from "./chunk-SXLPDPOZ.js";
|
|
14
11
|
import {
|
|
15
12
|
useCerberusContext
|
|
16
13
|
} from "./chunk-GITT5645.js";
|
|
17
14
|
import {
|
|
18
15
|
Button
|
|
19
|
-
} from "./chunk-
|
|
16
|
+
} from "./chunk-MER66QUY.js";
|
|
17
|
+
import {
|
|
18
|
+
Show
|
|
19
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
20
20
|
|
|
21
21
|
// src/context/confirm-modal.tsx
|
|
22
22
|
import {
|
|
@@ -155,4 +155,4 @@ export {
|
|
|
155
155
|
ConfirmModal,
|
|
156
156
|
useConfirmModal
|
|
157
157
|
};
|
|
158
|
-
//# sourceMappingURL=chunk-
|
|
158
|
+
//# sourceMappingURL=chunk-7S47NSGR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/context/confirm-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Button } from '../components/button/button'\nimport { css } from '@cerberus/styled-system/css'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { useCerberusContext } from './cerberus'\nimport {\n Dialog,\n DialogCloseTrigger,\n DialogDescription,\n DialogHeading,\n DialogProvider,\n} from '../components/Dialog'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface BaseConfirmOptions {\n /**\n * The heading of the confirm modal.\n */\n heading: string\n /**\n * The text for the action button.\n */\n actionText: string\n /**\n * The text for the cancel button.\n */\n cancelText: string\n}\n\nexport interface DestructiveConfirmOptions extends BaseConfirmOptions {\n /**\n * The kind of confirm modal to show.\n */\n kind?: 'destructive'\n /**\n * The description of the confirm modal. Can only be a string for destructive confirm modals.\n */\n description?: string\n}\n\nexport interface NonDestructiveConfirmModalOptions extends BaseConfirmOptions {\n /**\n * The kind of confirm modal to show.\n * @default 'non-destructive'\n */\n kind?: 'non-destructive'\n /**\n * The description of the confirm modal. Can be a ReactNode for non-destructive kind if you need to display text links.\n * @example\n * ```tsx\n * description: <>Use a Fragment because we put the content within a Paragraph tag.</>\n */\n description?: ReactNode\n}\n\nexport type ShowConfirmModalOptions =\n | NonDestructiveConfirmModalOptions\n | DestructiveConfirmOptions\n\nexport type ShowResult =\n | ((value: boolean | PromiseLike<boolean>) => void)\n | null\n\nexport interface ConfirmModalValue {\n show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport type ConfirmModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a confirm modal to the app.\n * @see https://cerberus.digitalu.design/react/confirm-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n * <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n * const userConsent = await confirm.show({\n * heading: 'Add new payment method?',\n * description:\n * 'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n const [open, setOpen] = useState<boolean>(false)\n const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n const resolveRef = useRef<ShowResult>(null)\n const kind = content?.kind ?? 'non-destructive'\n\n const { icons } = useCerberusContext()\n const { confirmModal: ConfirmIcon } = icons\n\n const palette = useMemo(\n () => (kind === 'destructive' ? 'danger' : 'action'),\n [kind],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(true)\n }\n resolveRef.current?.(false)\n setOpen(false)\n },\n [setOpen],\n )\n\n const handleShow = useCallback(\n (options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options })\n setOpen(true)\n resolveRef.current = resolve\n })\n },\n [setOpen, setContent],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <ConfirmModalContext.Provider value={value}>\n {props.children}\n\n <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n <Dialog size=\"sm\">\n <VStack gap=\"xl\" w=\"full\">\n <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n <HStack\n alignSelf=\"center\"\n justify=\"center\"\n paddingBlockEnd=\"md\"\n w=\"full\"\n >\n <Show\n when={palette === 'danger'}\n fallback={\n <Avatar\n ariaLabel=\"\"\n gradient=\"charon-light\"\n icon={<ConfirmIcon size={24} />}\n src=\"\"\n />\n }\n >\n <Avatar\n ariaLabel=\"\"\n gradient=\"hades-dark\"\n icon={<ConfirmIcon size={24} />}\n src=\"\"\n />\n </Show>\n </HStack>\n <DialogHeading>{content?.heading}</DialogHeading>\n <DialogDescription>{content?.description}</DialogDescription>\n </VStack>\n\n <HStack gap=\"4\" w=\"full\">\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <DialogCloseTrigger asChild>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </DialogCloseTrigger>\n </HStack>\n </VStack>\n </Dialog>\n </DialogProvider>\n </ConfirmModalContext.Provider>\n )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n const context = useContext(ConfirmModalContext)\n if (context === null) {\n throw new Error(\n 'useConfirmModal must be used within a ConfirmModal Provider',\n )\n }\n return context\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Avatar
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import {
|
|
5
|
-
Show
|
|
6
|
-
} from "./chunk-BUVVRQLZ.js";
|
|
3
|
+
} from "./chunk-SXLPDPOZ.js";
|
|
7
4
|
import {
|
|
8
5
|
useCerberusContext
|
|
9
6
|
} from "./chunk-GITT5645.js";
|
|
7
|
+
import {
|
|
8
|
+
Show
|
|
9
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
10
10
|
|
|
11
11
|
// src/components/FileUploader.tsx
|
|
12
12
|
import { cx } from "@cerberus/styled-system/css";
|
|
@@ -73,4 +73,4 @@ function FileUploader(props) {
|
|
|
73
73
|
export {
|
|
74
74
|
FileUploader
|
|
75
75
|
};
|
|
76
|
-
//# sourceMappingURL=chunk-
|
|
76
|
+
//# sourceMappingURL=chunk-7SU6FCTJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=chunk-CYC2YUKU.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
MatchAvatar
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-2HOUQ2DX.js";
|
|
4
4
|
import {
|
|
5
5
|
Show
|
|
6
6
|
} from "./chunk-BUVVRQLZ.js";
|
|
@@ -65,4 +65,4 @@ export {
|
|
|
65
65
|
AdmonitionHeading,
|
|
66
66
|
AdmonitionDescription
|
|
67
67
|
};
|
|
68
|
-
//# sourceMappingURL=chunk-
|
|
68
|
+
//# sourceMappingURL=chunk-DXBZ3HMY.js.map
|
|
@@ -21,7 +21,7 @@ import {
|
|
|
21
21
|
} from "./chunk-GITT5645.js";
|
|
22
22
|
import {
|
|
23
23
|
Button
|
|
24
|
-
} from "./chunk-
|
|
24
|
+
} from "./chunk-MER66QUY.js";
|
|
25
25
|
|
|
26
26
|
// src/components/DatePicker.client.tsx
|
|
27
27
|
import {
|
|
@@ -214,4 +214,4 @@ export {
|
|
|
214
214
|
DatePickerYearView,
|
|
215
215
|
DatePickerCalendar
|
|
216
216
|
};
|
|
217
|
-
//# sourceMappingURL=chunk-
|
|
217
|
+
//# sourceMappingURL=chunk-KU2AWAK3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/DatePicker.client.tsx"],"sourcesContent":["'use client'\n\nimport {\n DatePicker as ArkDP,\n type DatePickerContentProps,\n type DatePickerInputProps,\n type DatePickerRootProps,\n type DatePickerTriggerProps,\n type DatePickerViewControlProps,\n type DatePickerViewProps,\n} from '@ark-ui/react'\nimport { Portal } from './Portal'\nimport { datePicker, iconButton } from '@cerberus/styled-system/recipes'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { useFieldContext } from '../context/field'\nimport {\n DatePickerView,\n DatePickerContext,\n DatePickerTable,\n DatePickerTableHeader,\n DatePickerTableCellTrigger,\n DatePickerTableCell,\n DatePickerViewControl,\n} from './DatePicker.server'\nimport { IconButton } from './IconButton'\nimport { Button } from './button/button'\nimport { useCerberusContext } from '../context/cerberus'\nimport { useMemo, type InputHTMLAttributes } from 'react'\n\n/**\n * This module contains the DatePicker client family components.\n * @module DatePicker:client\n */\n\n// We are not exposing this to the public API\nconst datePickerStyles = datePicker()\n\n/**\n * The main context provider for the DatePicker family components.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePicker(props: DatePickerRootProps) {\n const states = useFieldContext()\n\n // TODO: Remove this once the bug is fixed: https://github.com/chakra-ui/ark/issues/3112\n\n // There is a bug with the Root component that causes random date selection\n // onBlur after the first selection if the format prop is used.\n // const handleFormat = useCallback((value: DateValue) => {\n // return formatISOToMilitary(value.toString())\n // }, [])\n\n return (\n <ArkDP.Root\n {...props}\n {...states}\n positioning={{\n placement: 'bottom-start',\n }}\n />\n )\n}\n\n/**\n * An abstraction of the DatePicker control that contains the prev, view, and\n * next triggers which control the calendar output.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerViewControlGroup />\n * ```\n */\nexport function DatePickerViewControlGroup(props: DatePickerViewControlProps) {\n const { icons } = useCerberusContext()\n const { calendarPrev: PrevIcon, calendarNext: NextIcon } = icons\n return (\n <DatePickerViewControl {...props}>\n <ArkDP.PrevTrigger asChild>\n <IconButton ariaLabel=\"Previous\" size=\"sm\">\n <PrevIcon />\n </IconButton>\n </ArkDP.PrevTrigger>\n\n <ArkDP.ViewTrigger asChild>\n <Button\n className={css({\n h: '2rem',\n paddingInline: 'md',\n })}\n shape=\"rounded\"\n size=\"sm\"\n usage=\"ghost\"\n >\n <ArkDP.RangeText />\n </Button>\n </ArkDP.ViewTrigger>\n\n <ArkDP.NextTrigger asChild>\n <IconButton ariaLabel=\"Next\" size=\"sm\">\n <NextIcon />\n </IconButton>\n </ArkDP.NextTrigger>\n </DatePickerViewControl>\n )\n}\n\n/**\n * The trigger component for the DatePicker which opens the calendar.\n * @definition [datePicker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <DatePickerTrigger />\n * ```\n */\nexport function DatePickerTrigger(props: DatePickerTriggerProps) {\n const { icons } = useCerberusContext()\n const { calendar: CalendarIcon } = icons\n return (\n <ArkDP.Trigger\n {...props}\n className={cx(\n props.className,\n iconButton({\n size: 'sm',\n usage: 'ghost',\n }),\n datePickerStyles.trigger,\n )}\n >\n <CalendarIcon />\n </ArkDP.Trigger>\n )\n}\n\n/**\n * The input component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerInput(props: DatePickerInputProps) {\n const { invalid, ...fieldStates } = useFieldContext()\n return (\n <ArkDP.Control className={datePickerStyles.control}>\n <DatePickerTrigger />\n <ArkDP.Input\n {...props}\n {...fieldStates}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(props.className, datePickerStyles.input)}\n placeholder={props.placeholder ?? 'DD MMM YYYY'}\n maxLength={11}\n />\n </ArkDP.Control>\n )\n}\n\nexport interface RangePickerInputProps\n extends Omit<DatePickerInputProps, 'defaultValue'> {\n /**\n * The defaultValue to add for the inputs. The first item is the start date\n * and the second item is the end date.\n */\n defaultValue?: [\n InputHTMLAttributes<HTMLInputElement>['defaultValue'],\n InputHTMLAttributes<HTMLInputElement>['defaultValue'],\n ]\n}\n\n/**\n * The input component for the DatePicker that uses ranges.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\" selection=\"range\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <RangePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function RangePickerInput(props: RangePickerInputProps) {\n const { invalid, ...fieldStates } = useFieldContext()\n const { defaultValue, ...nativeProps } = props\n\n const startDate = useMemo(() => defaultValue?.[0], [defaultValue])\n const endDate = useMemo(() => defaultValue?.[1], [defaultValue])\n\n return (\n <ArkDP.Control data-range className={datePickerStyles.control}>\n <DatePickerTrigger />\n <ArkDP.Input\n {...nativeProps}\n {...fieldStates}\n {...(invalid && { 'aria-invalid': true })}\n data-range-input\n defaultValue={startDate}\n className={cx(props.className, datePickerStyles.input)}\n placeholder={props.placeholder ?? 'DD MMM YYYY'}\n maxLength={11}\n index={0}\n />\n <ArkDP.Input\n {...nativeProps}\n {...fieldStates}\n {...(invalid && { 'aria-invalid': true })}\n data-range-input\n defaultValue={endDate}\n data-range-end-input\n className={cx(props.className, datePickerStyles.input)}\n placeholder={props.placeholder ?? 'DD MMM YYYY'}\n maxLength={11}\n index={1}\n />\n </ArkDP.Control>\n )\n}\n\n/**\n * The content component for the DatePicker which contains the calendar.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerContent(\n props: DatePickerContentProps & {\n withModal?: boolean\n },\n) {\n const { children, withModal, ...contentProps } = props\n return (\n <Portal disabled={withModal ?? false}>\n <ArkDP.Positioner className={datePickerStyles.positioner}>\n <ArkDP.Content\n {...contentProps}\n className={cx(contentProps.className, datePickerStyles.content)}\n >\n {children}\n </ArkDP.Content>\n </ArkDP.Positioner>\n </Portal>\n )\n}\n\n/**\n * The day view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerDayView(props: Omit<DatePickerViewProps, 'view'>) {\n function isToday(date: ArkDP.DateValue): boolean {\n const today = new Date()\n const formatted = today.toISOString().split('T')[0]\n const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n return formatted === arkDate\n }\n\n function isPastDay(date: ArkDP.DateValue): boolean {\n const today = new Date()\n const arkDate = `${date.year}-${String(date.month).padStart(2, '0')}-${String(date.day).padStart(2, '0')}`\n return new Date(arkDate) < today\n }\n\n function getDayValue(date: ArkDP.DateValue): 'today' | 'past' | 'future' {\n if (isToday(date)) return 'today'\n if (isPastDay(date)) return 'past'\n return 'future'\n }\n\n return (\n <DatePickerView {...props} view=\"day\">\n <DatePickerContext>\n {(datePicker) => (\n <>\n <DatePickerViewControlGroup />\n\n <DatePickerTable>\n <ArkDP.TableHead>\n <ArkDP.TableRow>\n {datePicker.weekDays.map((weekDay, id) => (\n <DatePickerTableHeader key={id}>\n {weekDay.narrow}\n </DatePickerTableHeader>\n ))}\n </ArkDP.TableRow>\n </ArkDP.TableHead>\n\n <ArkDP.TableBody>\n {datePicker.weeks.map((week, id) => (\n <ArkDP.TableRow key={id}>\n {week.map((day, id) => (\n <DatePickerTableCell key={id} value={day}>\n <DatePickerTableCellTrigger\n data-date={getDayValue(day)}\n >\n {day.day}\n </DatePickerTableCellTrigger>\n </DatePickerTableCell>\n ))}\n </ArkDP.TableRow>\n ))}\n </ArkDP.TableBody>\n </DatePickerTable>\n </>\n )}\n </DatePickerContext>\n </DatePickerView>\n )\n}\n\n/**\n * The month view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerMonthView(props: Omit<DatePickerViewProps, 'view'>) {\n return (\n <ArkDP.View {...props} view=\"month\">\n <ArkDP.Context>\n {(datePicker) => (\n <>\n <DatePickerViewControlGroup />\n\n <DatePickerTable>\n <ArkDP.TableBody>\n {datePicker\n .getMonthsGrid({ columns: 4, format: 'short' })\n .map((months, id) => (\n <ArkDP.TableRow key={id}>\n {months.map((month, id) => (\n <DatePickerTableCell key={id} value={month.value}>\n <DatePickerTableCellTrigger>\n {month.label}\n </DatePickerTableCellTrigger>\n </DatePickerTableCell>\n ))}\n </ArkDP.TableRow>\n ))}\n </ArkDP.TableBody>\n </DatePickerTable>\n </>\n )}\n </ArkDP.Context>\n </ArkDP.View>\n )\n}\n\n/**\n * The year view component for the DatePicker.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerYearView(props: Omit<DatePickerViewProps, 'view'>) {\n return (\n <ArkDP.View {...props} view=\"year\">\n <ArkDP.Context>\n {(datePicker) => (\n <>\n <DatePickerViewControlGroup />\n\n <DatePickerTable>\n <ArkDP.TableBody>\n {datePicker.getYearsGrid({ columns: 4 }).map((years, id) => (\n <ArkDP.TableRow key={id}>\n {years.map((year, id) => (\n <DatePickerTableCell key={id} value={year.value}>\n <DatePickerTableCellTrigger>\n {year.label}\n </DatePickerTableCellTrigger>\n </DatePickerTableCell>\n ))}\n </ArkDP.TableRow>\n ))}\n </ArkDP.TableBody>\n </DatePickerTable>\n </>\n )}\n </ArkDP.Context>\n </ArkDP.View>\n )\n}\n\n/**\n * An abstraction of the DatePicker content components that contain the\n * different calendar views and controls.\n * @definition [Date Picker docs](https://cerberus.digitalu.design/react/date-picker)\n * @example\n * ```tsx\n * <Field>\n * <DatePicker name=\"start_date\">\n * <DatePickerLabel>Start date</DatePickerLabel>\n * <DatePickerInput />\n * <DatePickerCalendar />\n * </DatePicker>\n * </Field>\n * ```\n */\nexport function DatePickerCalendar(props: { withModal?: boolean }) {\n return (\n <DatePickerContent withModal={props.withModal}>\n <DatePickerDayView />\n <DatePickerMonthView />\n <DatePickerYearView />\n </DatePickerContent>\n )\n}\n"],"mappings":"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","names":["datePicker","id"]}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Spinner
|
|
3
|
+
} from "./chunk-7SYJFI5E.js";
|
|
4
|
+
import {
|
|
5
|
+
Show
|
|
6
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
7
|
+
|
|
8
|
+
// src/components/button/button.tsx
|
|
9
|
+
import {
|
|
10
|
+
createContext,
|
|
11
|
+
useContext,
|
|
12
|
+
useMemo
|
|
13
|
+
} from "react";
|
|
14
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
15
|
+
import {
|
|
16
|
+
button
|
|
17
|
+
} from "@cerberus/styled-system/recipes";
|
|
18
|
+
import { Box } from "@cerberus/styled-system/jsx";
|
|
19
|
+
import { Fragment, jsx } from "react/jsx-runtime";
|
|
20
|
+
var ButtonContext = createContext({
|
|
21
|
+
pending: false
|
|
22
|
+
});
|
|
23
|
+
function Button(props) {
|
|
24
|
+
const { palette, usage, shape, size, pending = false, ...nativeProps } = props;
|
|
25
|
+
const value = useMemo(() => ({ pending }), [pending]);
|
|
26
|
+
return /* @__PURE__ */ jsx(ButtonContext.Provider, { value, children: /* @__PURE__ */ jsx(
|
|
27
|
+
"button",
|
|
28
|
+
{
|
|
29
|
+
...nativeProps,
|
|
30
|
+
disabled: pending || nativeProps.disabled,
|
|
31
|
+
className: cx(
|
|
32
|
+
nativeProps.className,
|
|
33
|
+
button({
|
|
34
|
+
palette,
|
|
35
|
+
usage,
|
|
36
|
+
shape,
|
|
37
|
+
size
|
|
38
|
+
})
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
) });
|
|
42
|
+
}
|
|
43
|
+
function ButtonIcon(props) {
|
|
44
|
+
const { pending } = useContext(ButtonContext);
|
|
45
|
+
return /* @__PURE__ */ jsx(Show, { when: pending, fallback: /* @__PURE__ */ jsx(Fragment, { children: props.children }), children: /* @__PURE__ */ jsx(Box, { w: "4", children: /* @__PURE__ */ jsx(Spinner, {}) }) });
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
export {
|
|
49
|
+
Button,
|
|
50
|
+
ButtonIcon
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=chunk-MER66QUY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/button/button.tsx"],"sourcesContent":["'use client'\n\nimport {\n type ButtonHTMLAttributes,\n type PropsWithChildren,\n createContext,\n useContext,\n useMemo,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n button,\n type ButtonVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { Show } from '../Show'\nimport { Spinner } from '../Spinner'\nimport { Box } from '@cerberus/styled-system/jsx'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\ninterface ButtonContextValue {\n pending: boolean\n}\n\nconst ButtonContext = createContext<ButtonContextValue>({\n pending: false,\n})\n\nexport type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n ButtonVariantProps & {\n pending?: boolean\n }\n\n/**\n * A component that allows the user to perform actions\n * @see https://cerberus.digitalu.design/react/button\n */\nexport function Button(props: ButtonProps): JSX.Element {\n const { palette, usage, shape, size, pending = false, ...nativeProps } = props\n const value = useMemo(() => ({ pending }), [pending])\n\n return (\n <ButtonContext.Provider value={value}>\n <button\n {...nativeProps}\n disabled={pending || nativeProps.disabled}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n size,\n }),\n )}\n />\n </ButtonContext.Provider>\n )\n}\n\n/**\n * An icon to display in a button that utilizes the pending state to display\n * a loading spinner.\n */\nexport function ButtonIcon(props: PropsWithChildren<object>) {\n const { pending } = useContext(ButtonContext)\n return (\n <Show when={pending} fallback={<>{props.children}</>}>\n <Box w=\"4\">\n <Spinner />\n </Box>\n </Show>\n )\n}\n"],"mappings":";;;;;;;;AAEA;AAAA,EAGE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAGP,SAAS,WAAW;AA8Bd,SAwB6B,UAxB7B;AAnBN,IAAM,gBAAgB,cAAkC;AAAA,EACtD,SAAS;AACX,CAAC;AAWM,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,MAAM,UAAU,OAAO,GAAG,YAAY,IAAI;AACzE,QAAM,QAAQ,QAAQ,OAAO,EAAE,QAAQ,IAAI,CAAC,OAAO,CAAC;AAEpD,SACE,oBAAC,cAAc,UAAd,EAAuB,OACtB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,UAAU,WAAW,YAAY;AAAA,MACjC,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF,GACF;AAEJ;AAMO,SAAS,WAAW,OAAkC;AAC3D,QAAM,EAAE,QAAQ,IAAI,WAAW,aAAa;AAC5C,SACE,oBAAC,QAAK,MAAM,SAAS,UAAU,gCAAG,gBAAM,UAAS,GAC/C,8BAAC,OAAI,GAAE,KACL,8BAAC,WAAQ,GACX,GACF;AAEJ;","names":[]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Show
|
|
3
|
-
} from "./chunk-BUVVRQLZ.js";
|
|
4
1
|
import {
|
|
5
2
|
useCerberusContext
|
|
6
3
|
} from "./chunk-GITT5645.js";
|
|
4
|
+
import {
|
|
5
|
+
Show
|
|
6
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
7
7
|
|
|
8
8
|
// src/components/Tag.tsx
|
|
9
9
|
import { css, cx } from "@cerberus/styled-system/css";
|
|
@@ -62,4 +62,4 @@ var closableCss = css({
|
|
|
62
62
|
export {
|
|
63
63
|
Tag
|
|
64
64
|
};
|
|
65
|
-
//# sourceMappingURL=chunk-
|
|
65
|
+
//# sourceMappingURL=chunk-MISIUX63.js.map
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useFieldContext
|
|
3
3
|
} from "./chunk-UZDVOIW5.js";
|
|
4
|
-
import {
|
|
5
|
-
Show
|
|
6
|
-
} from "./chunk-BUVVRQLZ.js";
|
|
7
4
|
import {
|
|
8
5
|
useCerberusContext
|
|
9
6
|
} from "./chunk-GITT5645.js";
|
|
7
|
+
import {
|
|
8
|
+
Show
|
|
9
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
10
10
|
|
|
11
11
|
// src/components/Checkbox.tsx
|
|
12
12
|
import {
|
|
@@ -60,4 +60,4 @@ function Checkbox(props) {
|
|
|
60
60
|
export {
|
|
61
61
|
Checkbox
|
|
62
62
|
};
|
|
63
|
-
//# sourceMappingURL=chunk-
|
|
63
|
+
//# sourceMappingURL=chunk-NGOLRISW.js.map
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Text
|
|
3
3
|
} from "./chunk-RU5LOXWI.js";
|
|
4
|
-
import {
|
|
5
|
-
Input
|
|
6
|
-
} from "./chunk-MZ3UCDUL.js";
|
|
7
4
|
import {
|
|
8
5
|
Label
|
|
9
6
|
} from "./chunk-NMF2HYWO.js";
|
|
7
|
+
import {
|
|
8
|
+
Input
|
|
9
|
+
} from "./chunk-VYCU7I4J.js";
|
|
10
10
|
import {
|
|
11
11
|
Field
|
|
12
12
|
} from "./chunk-UZDVOIW5.js";
|
|
@@ -18,16 +18,16 @@ import {
|
|
|
18
18
|
} from "./chunk-TFL56AYR.js";
|
|
19
19
|
import {
|
|
20
20
|
Avatar
|
|
21
|
-
} from "./chunk-
|
|
22
|
-
import {
|
|
23
|
-
Show
|
|
24
|
-
} from "./chunk-BUVVRQLZ.js";
|
|
21
|
+
} from "./chunk-SXLPDPOZ.js";
|
|
25
22
|
import {
|
|
26
23
|
useCerberusContext
|
|
27
24
|
} from "./chunk-GITT5645.js";
|
|
28
25
|
import {
|
|
29
26
|
Button
|
|
30
|
-
} from "./chunk-
|
|
27
|
+
} from "./chunk-MER66QUY.js";
|
|
28
|
+
import {
|
|
29
|
+
Show
|
|
30
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
31
31
|
|
|
32
32
|
// src/context/prompt-modal.tsx
|
|
33
33
|
import {
|
|
@@ -212,4 +212,4 @@ export {
|
|
|
212
212
|
PromptModal,
|
|
213
213
|
usePromptModal
|
|
214
214
|
};
|
|
215
|
-
//# sourceMappingURL=chunk-
|
|
215
|
+
//# sourceMappingURL=chunk-Q4IV5NUT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/context/prompt-modal.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type ChangeEvent,\n type MouseEvent,\n type PropsWithChildren,\n} from 'react'\nimport { Button } from '../components/button/button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { Show } from '../components/Show'\nimport { Avatar } from '../components/Avatar'\nimport { Text } from '../components/Text'\nimport { useCerberusContext } from './cerberus'\nimport {\n Dialog,\n DialogDescription,\n DialogHeading,\n DialogProvider,\n} from '../components/Dialog'\nimport { HStack, VStack } from '@cerberus/styled-system/jsx'\nimport { DialogCloseTrigger } from '@ark-ui/react'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module PromptModal\n */\n\nexport interface ShowPromptModalOptions {\n /**\n * The kind of prompt modal to show.\n * @default 'non-destructive'\n */\n kind?: 'destructive' | 'non-destructive'\n /**\n * The heading of the prompt modal.\n */\n heading: string\n /**\n * The description of the prompt modal.\n */\n description?: string\n /**\n * The key to confirm the action.\n */\n key: string\n /**\n * The text for the action button.\n */\n actionText: string\n /**\n * The text for the cancel button.\n */\n cancelText: string\n}\nexport type PromptShowResult =\n | ((value: string | PromiseLike<string>) => void)\n | null\n\nexport interface PromptModalValue {\n /**\n * The method to trigger the prompt modal.\n * @returns the value of the key if the action is confirmed.\n * @example\n * ```tsx\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n */\n show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport type PromptModalProviderProps = PropsWithChildren<unknown>\n\n/**\n * Provides a prompt modal to the app.\n * @see https://cerberus.digitalu.design/react/prompt-modal\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n * <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n props: PropsWithChildren<PromptModalProviderProps>,\n) {\n const resolveRef = useRef<PromptShowResult>(null)\n const [open, setOpen] = useState<boolean>(false)\n const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n const [inputValue, setInputValue] = useState<string>('')\n\n const { icons } = useCerberusContext()\n const { promptModal: PromptIcon } = icons\n\n const isValid = useMemo(\n () => inputValue === content?.key,\n [inputValue, content],\n )\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.currentTarget.value)\n },\n [content],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(inputValue)\n }\n setOpen(false)\n },\n [inputValue, setOpen],\n )\n\n const handleShow = useCallback(\n (options: ShowPromptModalOptions) => {\n return new Promise<string>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n setOpen(true)\n resolveRef.current = resolve\n })\n },\n [setOpen],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <PromptModalContext.Provider value={value}>\n {props.children}\n\n <DialogProvider open={open} onOpenChange={(e) => setOpen(e.open)}>\n <Dialog size=\"sm\">\n <VStack gap=\"xl\" w=\"full\">\n <VStack alignItems=\"flex-start\" gap=\"md\" w=\"full\">\n <HStack\n alignSelf=\"center\"\n justify=\"center\"\n paddingBlockEnd=\"md\"\n w=\"full\"\n >\n <Show\n when={palette === 'danger'}\n fallback={\n <Avatar\n ariaLabel=\"\"\n gradient=\"charon-light\"\n icon={<PromptIcon size={24} />}\n src=\"\"\n />\n }\n >\n <Avatar\n ariaLabel=\"\"\n gradient=\"hades-dark\"\n icon={<PromptIcon size={24} />}\n src=\"\"\n />\n </Show>\n </HStack>\n <DialogHeading>{content?.heading}</DialogHeading>\n <DialogDescription>{content?.description}</DialogDescription>\n </VStack>\n\n <VStack\n alignItems=\"flex-start\"\n marginBlockStart=\"md\"\n marginBlockEnd=\"lg\"\n w=\"full\"\n >\n <Field invalid={!isValid}>\n <Label\n className={hstack({\n gap: 'xs',\n justify: 'flex-start !important',\n })}\n htmlFor=\"confirm\"\n size=\"md\"\n >\n Type\n <Text as=\"strong\" textTransform=\"uppercase\">\n {content?.key}\n </Text>\n to confirm\n </Label>\n <Input\n id=\"confirm\"\n name=\"confirm\"\n onChange={handleChange}\n type=\"text\"\n />\n </Field>\n </VStack>\n\n <HStack gap=\"md\" justify=\"stretch\" w=\"full\">\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n disabled={!isValid}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n\n <DialogCloseTrigger asChild>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </DialogCloseTrigger>\n </HStack>\n </VStack>\n </Dialog>\n </DialogProvider>\n </PromptModalContext.Provider>\n )\n}\n\n/**\n * Used to retrieve the context of the PromptModal provider.\n */\nexport function usePromptModal(): PromptModalValue {\n const context = useContext(PromptModalContext)\n if (context === null) {\n throw new Error('usePromptModal must be used within a PromptModal Provider')\n }\n return context\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Show
|
|
3
|
-
} from "./chunk-BUVVRQLZ.js";
|
|
4
1
|
import {
|
|
5
2
|
useCerberusContext
|
|
6
3
|
} from "./chunk-GITT5645.js";
|
|
4
|
+
import {
|
|
5
|
+
Show
|
|
6
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
7
7
|
|
|
8
8
|
// src/components/Avatar.tsx
|
|
9
9
|
import { css, cx } from "@cerberus/styled-system/css";
|
|
@@ -102,4 +102,4 @@ var iconSizeMap = {
|
|
|
102
102
|
export {
|
|
103
103
|
Avatar
|
|
104
104
|
};
|
|
105
|
-
//# sourceMappingURL=chunk-
|
|
105
|
+
//# sourceMappingURL=chunk-SXLPDPOZ.js.map
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useFieldContext
|
|
3
3
|
} from "./chunk-UZDVOIW5.js";
|
|
4
|
-
import {
|
|
5
|
-
Show
|
|
6
|
-
} from "./chunk-BUVVRQLZ.js";
|
|
7
4
|
import {
|
|
8
5
|
useCerberusContext
|
|
9
6
|
} from "./chunk-GITT5645.js";
|
|
7
|
+
import {
|
|
8
|
+
Show
|
|
9
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
10
10
|
|
|
11
11
|
// src/components/Input.tsx
|
|
12
12
|
import { input } from "@cerberus/styled-system/recipes";
|
|
@@ -40,4 +40,4 @@ function Input(props) {
|
|
|
40
40
|
export {
|
|
41
41
|
Input
|
|
42
42
|
};
|
|
43
|
-
//# sourceMappingURL=chunk-
|
|
43
|
+
//# sourceMappingURL=chunk-VYCU7I4J.js.map
|
|
@@ -11,7 +11,6 @@ function useRootColors(colors = []) {
|
|
|
11
11
|
useEffect(() => {
|
|
12
12
|
if (Object.keys(state).length === colors.length) return;
|
|
13
13
|
dispatch(formatColors(colors));
|
|
14
|
-
console.log("updating colors in root hook");
|
|
15
14
|
}, [colors]);
|
|
16
15
|
return useMemo(
|
|
17
16
|
() => ({ colors: state, refetch: handleRefetch }),
|
|
@@ -36,4 +35,4 @@ function rootColorsReducer(state, action) {
|
|
|
36
35
|
export {
|
|
37
36
|
useRootColors
|
|
38
37
|
};
|
|
39
|
-
//# sourceMappingURL=chunk-
|
|
38
|
+
//# sourceMappingURL=chunk-XJQXHSH7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/useRootColors.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useEffect, useMemo, useReducer } from 'react'\n\n/**\n * This module provides a hook to get Cerberus colors from the document root.\n * @module useRootColors\n */\n\nexport interface RootColorsResult {\n /**\n * A record of Cerberus colors where the key is the token name provided and the value is the color hex.\n */\n colors: Record<string, string>\n /**\n * A function to refetch the Cerberus colors from the document root. Useful when you need the latest colors after a theme/mode change.\n */\n refetch: () => Promise<void>\n}\n\n/**\n * This hook returns a record of Cerberus colors from the document root.\n * This is useful when you are working with a component that uses the `<canvas>`\n * element.\n * @param colors - An array of Cerberus tokens to get from the document root (i.e. `['dataViz.diverging.50', 'dataViz.diverging.200']`).\n * @returns A record of Cerberus colors where the key is the token name provided and the value is the color hex.\n */\nexport function useRootColors(colors: string[] = []): RootColorsResult {\n const [state, dispatch] = useReducer(rootColorsReducer, {})\n\n const handleRefetch = useCallback(() => {\n return new Promise<void>((resolve) => {\n dispatch(formatColors(colors))\n resolve()\n })\n }, [])\n\n useEffect(() => {\n if (Object.keys(state).length === colors.length) return\n dispatch(formatColors(colors))\n }, [colors])\n\n // reducer is already memoized\n return useMemo(\n () => ({ colors: state, refetch: handleRefetch }),\n [state, handleRefetch],\n )\n}\n\nfunction formatColors(colors: string[]): Record<string, string> {\n const rootStyles = getComputedStyle(document.body)\n return colors.reduce(\n (acc, color) => {\n const formattedColor = color\n .replace(/([a-z])([A-Z])/g, '$1-$2')\n .toLowerCase()\n .replaceAll('.', '-')\n acc[color] = rootStyles\n .getPropertyValue(`--cerberus-colors-${formattedColor}`)\n .trim()\n return acc\n },\n {} as Record<string, string>,\n )\n}\n\nfunction rootColorsReducer(\n state: Record<string, string>,\n action: Record<string, string>,\n): Record<string, string> {\n return { ...state, ...action }\n}\n"],"mappings":";AAEA,SAAS,aAAa,WAAW,SAAS,kBAAkB;AAyBrD,SAAS,cAAc,SAAmB,CAAC,GAAqB;AACrE,QAAM,CAAC,OAAO,QAAQ,IAAI,WAAW,mBAAmB,CAAC,CAAC;AAE1D,QAAM,gBAAgB,YAAY,MAAM;AACtC,WAAO,IAAI,QAAc,CAAC,YAAY;AACpC,eAAS,aAAa,MAAM,CAAC;AAC7B,cAAQ;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,QAAI,OAAO,KAAK,KAAK,EAAE,WAAW,OAAO,OAAQ;AACjD,aAAS,aAAa,MAAM,CAAC;AAAA,EAC/B,GAAG,CAAC,MAAM,CAAC;AAGX,SAAO;AAAA,IACL,OAAO,EAAE,QAAQ,OAAO,SAAS,cAAc;AAAA,IAC/C,CAAC,OAAO,aAAa;AAAA,EACvB;AACF;AAEA,SAAS,aAAa,QAA0C;AAC9D,QAAM,aAAa,iBAAiB,SAAS,IAAI;AACjD,SAAO,OAAO;AAAA,IACZ,CAAC,KAAK,UAAU;AACd,YAAM,iBAAiB,MACpB,QAAQ,mBAAmB,OAAO,EAClC,YAAY,EACZ,WAAW,KAAK,GAAG;AACtB,UAAI,KAAK,IAAI,WACV,iBAAiB,qBAAqB,cAAc,EAAE,EACtD,KAAK;AACR,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACF;AAEA,SAAS,kBACP,OACA,QACwB;AACxB,SAAO,EAAE,GAAG,OAAO,GAAG,OAAO;AAC/B;","names":[]}
|
|
@@ -10,12 +10,6 @@ import {
|
|
|
10
10
|
import {
|
|
11
11
|
Portal
|
|
12
12
|
} from "./chunk-IQJDVFPP.js";
|
|
13
|
-
import {
|
|
14
|
-
Show
|
|
15
|
-
} from "./chunk-BUVVRQLZ.js";
|
|
16
|
-
import {
|
|
17
|
-
Button
|
|
18
|
-
} from "./chunk-STNRGV3Y.js";
|
|
19
13
|
import {
|
|
20
14
|
addNotification,
|
|
21
15
|
clearNotificationState,
|
|
@@ -23,6 +17,12 @@ import {
|
|
|
23
17
|
removeNotification,
|
|
24
18
|
updateNotificationState
|
|
25
19
|
} from "./chunk-V3M3ZOQI.js";
|
|
20
|
+
import {
|
|
21
|
+
Button
|
|
22
|
+
} from "./chunk-MER66QUY.js";
|
|
23
|
+
import {
|
|
24
|
+
Show
|
|
25
|
+
} from "./chunk-BUVVRQLZ.js";
|
|
26
26
|
|
|
27
27
|
// src/context/notification-center.tsx
|
|
28
28
|
import {
|
|
@@ -177,4 +177,4 @@ export {
|
|
|
177
177
|
NotificationCenter,
|
|
178
178
|
useNotificationCenter
|
|
179
179
|
};
|
|
180
|
-
//# sourceMappingURL=chunk-
|
|
180
|
+
//# sourceMappingURL=chunk-Z7FGXAND.js.map
|