@cerberus-design/react 0.7.1-next-3f3c232 → 0.7.2-next-702616b
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.ts +7 -8
- package/build/legacy/aria-helpers/tabs.aria.js +2 -2
- package/build/{modern/chunk-TPFNVGYA.js → legacy/chunk-2UFNQM55.js} +3 -3
- package/build/legacy/chunk-2UFNQM55.js.map +1 -0
- package/build/{modern/chunk-UPODPCRD.js → legacy/chunk-4M4LCQ43.js} +3 -3
- package/build/legacy/chunk-4M4LCQ43.js.map +1 -0
- package/build/legacy/{chunk-DGPLSWFJ.js → chunk-7CZ3NIGH.js} +8 -8
- package/build/legacy/chunk-7CZ3NIGH.js.map +1 -0
- package/build/legacy/{chunk-KFUXGX33.js → chunk-GKUDLVOV.js} +2 -2
- package/build/{modern/chunk-X2JMXTBH.js → legacy/chunk-ISPTI4GC.js} +2 -2
- package/build/legacy/{chunk-OGSAAB6K.js → chunk-JB7IQ2BM.js} +3 -3
- package/build/legacy/chunk-JB7IQ2BM.js.map +1 -0
- package/build/{modern/chunk-G3JEWPLM.js → legacy/chunk-JJP2TFTU.js} +4 -4
- package/build/legacy/chunk-JJP2TFTU.js.map +1 -0
- package/build/{modern/chunk-TAZI77TP.js → legacy/chunk-JWQJLOX4.js} +4 -4
- package/build/legacy/chunk-JWQJLOX4.js.map +1 -0
- package/build/legacy/{chunk-7KJIZIAU.js → chunk-KF24CS4S.js} +2 -4
- package/build/legacy/chunk-KF24CS4S.js.map +1 -0
- package/build/legacy/{chunk-JI4YTPEJ.js → chunk-NE5NHILF.js} +3 -3
- package/build/{modern/chunk-WE3JNSNO.js → legacy/chunk-PH64POOB.js} +4 -4
- package/build/legacy/chunk-PH64POOB.js.map +1 -0
- package/build/legacy/{chunk-2F5TB2EV.js → chunk-QU7UV5DB.js} +3 -3
- package/build/legacy/chunk-QU7UV5DB.js.map +1 -0
- package/build/legacy/{chunk-67S42J4B.js → chunk-U72VPIZA.js} +2 -2
- package/build/legacy/{chunk-D3ZXZA3U.js → chunk-XGNAFSMG.js} +8 -8
- package/build/legacy/chunk-XGNAFSMG.js.map +1 -0
- package/build/legacy/components/Modal.js +1 -1
- package/build/legacy/components/ModalDescription.js +1 -1
- package/build/legacy/components/ModalHeader.js +1 -1
- package/build/legacy/components/ModalHeading.js +1 -1
- package/build/legacy/components/ModalIcon.js +1 -1
- package/build/legacy/components/Radio.js +1 -1
- package/build/legacy/components/Tab.js +3 -3
- package/build/legacy/components/TabList.js +2 -2
- package/build/legacy/components/TabPanel.js +2 -2
- package/build/legacy/components/Toggle.js +1 -1
- package/build/legacy/context/confirm-modal.js +6 -6
- package/build/legacy/context/prompt-modal.js +6 -6
- package/build/legacy/context/tabs.js +1 -1
- package/build/legacy/index.js +14 -14
- package/build/modern/_tsup-dts-rollup.d.ts +7 -8
- package/build/modern/aria-helpers/tabs.aria.js +2 -2
- package/build/{legacy/chunk-TPFNVGYA.js → modern/chunk-2UFNQM55.js} +3 -3
- package/build/modern/chunk-2UFNQM55.js.map +1 -0
- package/build/{legacy/chunk-UPODPCRD.js → modern/chunk-4M4LCQ43.js} +3 -3
- package/build/modern/chunk-4M4LCQ43.js.map +1 -0
- package/build/modern/{chunk-WWG5QWXY.js → chunk-FAXDUWAU.js} +8 -8
- package/build/modern/chunk-FAXDUWAU.js.map +1 -0
- package/build/modern/{chunk-KFUXGX33.js → chunk-GKUDLVOV.js} +2 -2
- package/build/{legacy/chunk-X2JMXTBH.js → modern/chunk-ISPTI4GC.js} +2 -2
- package/build/modern/{chunk-OGSAAB6K.js → chunk-JB7IQ2BM.js} +3 -3
- package/build/modern/chunk-JB7IQ2BM.js.map +1 -0
- package/build/{legacy/chunk-G3JEWPLM.js → modern/chunk-JJP2TFTU.js} +4 -4
- package/build/modern/chunk-JJP2TFTU.js.map +1 -0
- package/build/{legacy/chunk-TAZI77TP.js → modern/chunk-JWQJLOX4.js} +4 -4
- package/build/modern/chunk-JWQJLOX4.js.map +1 -0
- package/build/modern/{chunk-7KJIZIAU.js → chunk-KF24CS4S.js} +2 -4
- package/build/modern/chunk-KF24CS4S.js.map +1 -0
- package/build/{legacy/chunk-WE3JNSNO.js → modern/chunk-PH64POOB.js} +4 -4
- package/build/modern/chunk-PH64POOB.js.map +1 -0
- package/build/modern/{chunk-2F5TB2EV.js → chunk-QU7UV5DB.js} +3 -3
- package/build/modern/chunk-QU7UV5DB.js.map +1 -0
- package/build/modern/{chunk-HBEEHHON.js → chunk-SONHHNYQ.js} +3 -3
- package/build/modern/{chunk-TAVCJ54A.js → chunk-TPRGGEVJ.js} +8 -8
- package/build/modern/chunk-TPRGGEVJ.js.map +1 -0
- package/build/modern/{chunk-67S42J4B.js → chunk-U72VPIZA.js} +2 -2
- package/build/modern/components/Modal.js +1 -1
- package/build/modern/components/ModalDescription.js +1 -1
- package/build/modern/components/ModalHeader.js +1 -1
- package/build/modern/components/ModalHeading.js +1 -1
- package/build/modern/components/ModalIcon.js +1 -1
- package/build/modern/components/Radio.js +1 -1
- package/build/modern/components/Tab.js +3 -3
- package/build/modern/components/TabList.js +2 -2
- package/build/modern/components/TabPanel.js +2 -2
- package/build/modern/components/Toggle.js +1 -1
- package/build/modern/context/confirm-modal.js +6 -6
- package/build/modern/context/prompt-modal.js +6 -6
- package/build/modern/context/tabs.js +1 -1
- package/build/modern/index.js +14 -14
- package/package.json +2 -2
- package/src/components/Modal.tsx +2 -2
- package/src/components/ModalDescription.tsx +2 -2
- package/src/components/ModalHeader.tsx +2 -2
- package/src/components/ModalHeading.tsx +2 -2
- package/src/components/ModalIcon.tsx +3 -3
- package/src/components/Radio.tsx +4 -4
- package/src/components/Toggle.tsx +3 -3
- package/src/context/confirm-modal.tsx +2 -2
- package/src/context/prompt-modal.tsx +2 -2
- package/src/context/tabs.tsx +2 -5
- package/build/legacy/chunk-2F5TB2EV.js.map +0 -1
- package/build/legacy/chunk-7KJIZIAU.js.map +0 -1
- package/build/legacy/chunk-D3ZXZA3U.js.map +0 -1
- package/build/legacy/chunk-DGPLSWFJ.js.map +0 -1
- package/build/legacy/chunk-G3JEWPLM.js.map +0 -1
- package/build/legacy/chunk-OGSAAB6K.js.map +0 -1
- package/build/legacy/chunk-TAZI77TP.js.map +0 -1
- package/build/legacy/chunk-TPFNVGYA.js.map +0 -1
- package/build/legacy/chunk-UPODPCRD.js.map +0 -1
- package/build/legacy/chunk-WE3JNSNO.js.map +0 -1
- package/build/modern/chunk-2F5TB2EV.js.map +0 -1
- package/build/modern/chunk-7KJIZIAU.js.map +0 -1
- package/build/modern/chunk-G3JEWPLM.js.map +0 -1
- package/build/modern/chunk-OGSAAB6K.js.map +0 -1
- package/build/modern/chunk-TAVCJ54A.js.map +0 -1
- package/build/modern/chunk-TAZI77TP.js.map +0 -1
- package/build/modern/chunk-TPFNVGYA.js.map +0 -1
- package/build/modern/chunk-UPODPCRD.js.map +0 -1
- package/build/modern/chunk-WE3JNSNO.js.map +0 -1
- package/build/modern/chunk-WWG5QWXY.js.map +0 -1
- /package/build/legacy/{chunk-KFUXGX33.js.map → chunk-GKUDLVOV.js.map} +0 -0
- /package/build/legacy/{chunk-X2JMXTBH.js.map → chunk-ISPTI4GC.js.map} +0 -0
- /package/build/legacy/{chunk-JI4YTPEJ.js.map → chunk-NE5NHILF.js.map} +0 -0
- /package/build/legacy/{chunk-67S42J4B.js.map → chunk-U72VPIZA.js.map} +0 -0
- /package/build/modern/{chunk-KFUXGX33.js.map → chunk-GKUDLVOV.js.map} +0 -0
- /package/build/modern/{chunk-X2JMXTBH.js.map → chunk-ISPTI4GC.js.map} +0 -0
- /package/build/modern/{chunk-HBEEHHON.js.map → chunk-SONHHNYQ.js.map} +0 -0
- /package/build/modern/{chunk-67S42J4B.js.map → chunk-U72VPIZA.js.map} +0 -0
|
@@ -14,22 +14,21 @@ import type { InputHTMLAttributes } from 'react';
|
|
|
14
14
|
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
15
15
|
import type { KeyboardEventHandler } from 'react';
|
|
16
16
|
import { label } from '@cerberus/styled-system/recipes';
|
|
17
|
-
import { ModalIconVariantProps } from '@cerberus
|
|
17
|
+
import { ModalIconVariantProps } from '@cerberus/styled-system/recipes';
|
|
18
18
|
import { MutableRefObject } from 'react';
|
|
19
|
-
import type { Pretty } from '@cerberus
|
|
19
|
+
import type { Pretty } from '@cerberus/styled-system/types';
|
|
20
20
|
import { PropsWithChildren } from 'react';
|
|
21
|
-
import { radio } from '@cerberus
|
|
21
|
+
import { radio } from '@cerberus/styled-system/recipes';
|
|
22
22
|
import { ReactNode } from 'react';
|
|
23
23
|
import { ReactPortal } from 'react';
|
|
24
24
|
import { RecipeVariantProps } from '@cerberus/styled-system/css';
|
|
25
|
-
import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus
|
|
26
|
-
import type { RecipeVariantProps as RecipeVariantProps_3 } from '@cerberus/styled-system/types';
|
|
25
|
+
import type { RecipeVariantProps as RecipeVariantProps_2 } from '@cerberus/styled-system/types';
|
|
27
26
|
import { RefAttributes } from 'react';
|
|
28
27
|
import { RefObject } from 'react';
|
|
29
|
-
import { TabsVariantProps } from '@cerberus
|
|
28
|
+
import { TabsVariantProps } from '@cerberus/styled-system/recipes';
|
|
30
29
|
import { tag } from '@cerberus/styled-system/recipes';
|
|
31
30
|
import type { TextareaHTMLAttributes } from 'react';
|
|
32
|
-
import { ToggleVariantProps } from '@cerberus
|
|
31
|
+
import { ToggleVariantProps } from '@cerberus/styled-system/recipes';
|
|
33
32
|
|
|
34
33
|
declare let $cerberusIcons: Required<DefinedIcons>;
|
|
35
34
|
export { $cerberusIcons }
|
|
@@ -809,7 +808,7 @@ export { TagProps as TagProps_alias_1 }
|
|
|
809
808
|
* This module contains the tag component.
|
|
810
809
|
* @module
|
|
811
810
|
*/
|
|
812
|
-
declare type TagRecipeProps =
|
|
811
|
+
declare type TagRecipeProps = RecipeVariantProps_2<typeof tag>;
|
|
813
812
|
export { TagRecipeProps }
|
|
814
813
|
export { TagRecipeProps as TagRecipeProps_alias_1 }
|
|
815
814
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/components/Modal.tsx
|
|
2
|
-
import { cx } from "@cerberus
|
|
3
|
-
import { modal } from "@cerberus
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { modal } from "@cerberus/styled-system/recipes";
|
|
4
4
|
import { forwardRef } from "react";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
function ModalEl(props, ref) {
|
|
@@ -18,4 +18,4 @@ var Modal = forwardRef(ModalEl);
|
|
|
18
18
|
export {
|
|
19
19
|
Modal
|
|
20
20
|
};
|
|
21
|
-
//# sourceMappingURL=chunk-
|
|
21
|
+
//# sourceMappingURL=chunk-2UFNQM55.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport { forwardRef, type ForwardedRef, type HTMLAttributes } from 'react'\n\n/**\n * This module contains the Modal root component for a customizable modal.\n * @module\n */\n\n// Modal\n\nexport type ModalProps = HTMLAttributes<HTMLDialogElement>\n\nfunction ModalEl(props: ModalProps, ref: ForwardedRef<HTMLDialogElement>) {\n return (\n <dialog\n {...props}\n className={cx(props.className, modal().dialog)}\n ref={ref}\n />\n )\n}\n\n/**\n * The Modal component is the root element for a customizable modal.\n * @example\n * ```tsx\n * const { modalRef } = useModal()\n *\n * <Modal ref={modalRef}>\n * <ModalIcon icon={$cerberusIcons.alert} />\n * <h2>Modal Heading</h2>\n * <p>Modal description</p>\n * </Modal>\n * ```\n */\nexport const Modal = forwardRef(ModalEl)\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,kBAA0D;AAa/D;AAFJ,SAAS,QAAQ,OAAmB,KAAsC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,MAAM;AAAA,MAC7C;AAAA;AAAA,EACF;AAEJ;AAeO,IAAM,QAAQ,WAAW,OAAO;","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/components/ModalDescription.tsx
|
|
2
|
-
import { cx } from "@cerberus
|
|
3
|
-
import { modal } from "@cerberus
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { modal } from "@cerberus/styled-system/recipes";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
function ModalDescription(props) {
|
|
6
6
|
return /* @__PURE__ */ jsx("p", { ...props, className: cx(props.className, modal().description) });
|
|
@@ -9,4 +9,4 @@ function ModalDescription(props) {
|
|
|
9
9
|
export {
|
|
10
10
|
ModalDescription
|
|
11
11
|
};
|
|
12
|
-
//# sourceMappingURL=chunk-
|
|
12
|
+
//# sourceMappingURL=chunk-4M4LCQ43.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalDescription component for a customizable modal.\n * @module\n */\n\nexport type ModalDescriptionProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalDescription component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalDescription>Modal Heading</ModalDescription>\n * </Modal>\n * ```\n */\nexport function ModalDescription(props: ModalDescriptionProps) {\n return <p {...props} className={cx(props.className, modal().description)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAoBb;AADF,SAAS,iBAAiB,OAA8B;AAC7D,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,WAAW,GAAG;AAC5E;","names":[]}
|
|
@@ -3,19 +3,19 @@ import {
|
|
|
3
3
|
} from "./chunk-4CAT3FHV.js";
|
|
4
4
|
import {
|
|
5
5
|
Modal
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-2UFNQM55.js";
|
|
7
7
|
import {
|
|
8
8
|
ModalDescription
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-4M4LCQ43.js";
|
|
10
10
|
import {
|
|
11
11
|
ModalHeader
|
|
12
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-QU7UV5DB.js";
|
|
13
13
|
import {
|
|
14
14
|
ModalHeading
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-JB7IQ2BM.js";
|
|
16
16
|
import {
|
|
17
17
|
ModalIcon
|
|
18
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-JJP2TFTU.js";
|
|
19
19
|
import {
|
|
20
20
|
Button
|
|
21
21
|
} from "./chunk-2ATICEW3.js";
|
|
@@ -50,8 +50,8 @@ import {
|
|
|
50
50
|
useRef,
|
|
51
51
|
useState
|
|
52
52
|
} from "react";
|
|
53
|
-
import { css } from "@cerberus
|
|
54
|
-
import { hstack, vstack } from "@cerberus
|
|
53
|
+
import { css } from "@cerberus/styled-system/css";
|
|
54
|
+
import { hstack, vstack } from "@cerberus/styled-system/patterns";
|
|
55
55
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
56
56
|
var PromptModalContext = createContext(null);
|
|
57
57
|
function PromptModal(props) {
|
|
@@ -205,4 +205,4 @@ export {
|
|
|
205
205
|
PromptModal,
|
|
206
206
|
usePromptModal
|
|
207
207
|
};
|
|
208
|
-
//# sourceMappingURL=chunk-
|
|
208
|
+
//# sourceMappingURL=chunk-7CZ3NIGH.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 { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Input } from '../components/Input'\nimport { Field } from './field'\nimport { Label } from '../components/Label'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { useModal } from '../hooks/useModal'\nimport { Modal } from '../components/Modal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\n\n/**\n * This module provides a context and hook for the prompt modal.\n * @module\n */\n\nexport interface ShowPromptModalOptions {\n kind?: 'destructive' | 'non-destructive'\n heading: string\n description?: string\n key: string\n actionText: string\n cancelText: string\n}\nexport type PromptShowResult =\n | ((value: string | PromiseLike<string>) => void)\n | null\n\nexport interface PromptModalValue {\n show: (options: ShowPromptModalOptions) => Promise<string>\n}\n\nconst PromptModalContext = createContext<PromptModalValue | null>(null)\n\nexport interface PromptModalProviderProps {}\n\n/**\n * Provides a prompt modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <PromptModal>\n * <SomeFeatureSection />\n * </PromptModal>\n *\n * // Use the hook to show the prompt modal.\n * const prompt = usePromptModal()\n *\n * const handleClick = useCallback(async () => {\n * const accepted = await prompt.show({\n * kind: 'destructive',\n * heading: 'Delete channel?',\n * description:\n * 'This will permanently delete a channel on your account. There is no going back.',\n * key: CHANNEL_NAME,\n * actionText: 'Yes, delete channel',\n * cancelText: 'No, cancel',\n * })\n * // do something with accepted\n * }, [prompt])\n * ```\n */\nexport function PromptModal(\n props: PropsWithChildren<PromptModalProviderProps>,\n) {\n const { modalRef, show, close } = useModal()\n const resolveRef = useRef<PromptShowResult>(null)\n const [content, setContent] = useState<ShowPromptModalOptions | null>(null)\n const [inputValue, setInputValue] = useState<string>('')\n const focusTrap = trapFocus(modalRef)\n const PromptIcon = $cerberusIcons.promptModal\n\n const isValid = useMemo(\n () => inputValue === content?.key,\n [inputValue, content],\n )\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n\n const handleChange = useCallback(\n (e: ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.currentTarget.value)\n },\n [content],\n )\n\n const handleChoice = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n if (target.value === 'true') {\n resolveRef.current?.(inputValue)\n }\n close()\n },\n [inputValue, close],\n )\n\n const handleShow = useCallback(\n (options: ShowPromptModalOptions) => {\n return new Promise<string>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n show()\n resolveRef.current = resolve\n })\n },\n [show],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <PromptModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <ModalHeader>\n <Show\n when={palette === 'danger'}\n fallback={\n <ModalIcon palette=\"action\">\n <PromptIcon size={24} />\n </ModalIcon>\n }\n >\n <ModalIcon palette=\"danger\">\n <PromptIcon size={24} />\n </ModalIcon>\n </Show>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n mt: '4',\n mb: '8',\n })}\n >\n <Field invalid={!isValid}>\n <Label htmlFor=\"confirm\" size=\"md\">\n Type\n <strong\n className={css({\n textTransform: 'uppercase',\n })}\n >\n {content?.key}\n </strong>\n to confirm\n </Label>\n <Input\n id=\"confirm\"\n name=\"confirm\"\n onChange={handleChange}\n type=\"text\"\n />\n </Field>\n </div>\n\n <div\n className={hstack({\n justifyContent: 'stretch',\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n disabled={!isValid}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </div>\n </Modal>\n </Portal>\n </PromptModalContext.Provider>\n )\n}\n\nexport function usePromptModal(): PromptModalValue {\n const context = useContext(PromptModalContext)\n if (context === null) {\n throw new Error('usePromptModal must be used within a PromptModal Provider')\n }\n return context\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useTabsContext
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-KF24CS4S.js";
|
|
4
4
|
|
|
5
5
|
// src/aria-helpers/tabs.aria.ts
|
|
6
6
|
import { useEffect, useState } from "react";
|
|
@@ -61,4 +61,4 @@ function useTabsKeyboardNavigation() {
|
|
|
61
61
|
export {
|
|
62
62
|
useTabsKeyboardNavigation
|
|
63
63
|
};
|
|
64
|
-
//# sourceMappingURL=chunk-
|
|
64
|
+
//# sourceMappingURL=chunk-GKUDLVOV.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useTabsContext
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-KF24CS4S.js";
|
|
4
4
|
|
|
5
5
|
// src/components/TabList.tsx
|
|
6
6
|
import { cx } from "@cerberus/styled-system/css";
|
|
@@ -29,4 +29,4 @@ function TabList(props) {
|
|
|
29
29
|
export {
|
|
30
30
|
TabList
|
|
31
31
|
};
|
|
32
|
-
//# sourceMappingURL=chunk-
|
|
32
|
+
//# sourceMappingURL=chunk-ISPTI4GC.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/components/ModalHeading.tsx
|
|
2
|
-
import { cx } from "@cerberus
|
|
3
|
-
import { modal } from "@cerberus
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { modal } from "@cerberus/styled-system/recipes";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
function ModalHeading(props) {
|
|
6
6
|
return /* @__PURE__ */ jsx("p", { ...props, className: cx(props.className, modal().heading) });
|
|
@@ -9,4 +9,4 @@ function ModalHeading(props) {
|
|
|
9
9
|
export {
|
|
10
10
|
ModalHeading
|
|
11
11
|
};
|
|
12
|
-
//# sourceMappingURL=chunk-
|
|
12
|
+
//# sourceMappingURL=chunk-JB7IQ2BM.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/ModalHeading.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { modal } from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeading component for a customizable modal.\n * @module\n */\n\nexport type ModalHeadingProps = HTMLAttributes<HTMLParagraphElement>\n\n/**\n * The ModalHeading component is a heading element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalHeading>Modal Heading</ModalHeading>\n * </Modal>\n * ```\n */\nexport function ModalHeading(props: ModalHeadingProps) {\n return <p {...props} className={cx(props.className, modal().heading)} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AAoBb;AADF,SAAS,aAAa,OAA0B;AACrD,SAAO,oBAAC,OAAG,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,EAAE,OAAO,GAAG;AACxE;","names":[]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
// src/components/ModalIcon.tsx
|
|
2
|
-
import { cx } from "@cerberus
|
|
3
|
-
import { circle } from "@cerberus
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { circle } from "@cerberus/styled-system/patterns";
|
|
4
4
|
import {
|
|
5
5
|
modalIcon
|
|
6
|
-
} from "@cerberus
|
|
6
|
+
} from "@cerberus/styled-system/recipes";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
8
|
function ModalIcon(props) {
|
|
9
9
|
const { palette, ...nativeProps } = props;
|
|
@@ -26,4 +26,4 @@ function ModalIcon(props) {
|
|
|
26
26
|
export {
|
|
27
27
|
ModalIcon
|
|
28
28
|
};
|
|
29
|
-
//# sourceMappingURL=chunk-
|
|
29
|
+
//# sourceMappingURL=chunk-JJP2TFTU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/ModalIcon.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { circle } from '@cerberus/styled-system/patterns'\nimport {\n modalIcon,\n type ModalIconVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\n\nexport type ModalIconBaseProps = HTMLAttributes<HTMLDivElement>\nexport type ModalIconProps = ModalIconBaseProps & ModalIconVariantProps\n\nexport function ModalIcon(props: PropsWithChildren<ModalIconProps>) {\n const { palette, ...nativeProps } = props\n return (\n <div\n {...nativeProps}\n className={cx(\n nativeProps.className,\n modalIcon({\n palette,\n }),\n circle(),\n )}\n >\n {props.children}\n </div>\n )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,OAEK;AASH;AAHG,SAAS,UAAU,OAA0C;AAClE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,UAAU;AAAA,UACR;AAAA,QACF,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MAEC,gBAAM;AAAA;AAAA,EACT;AAEJ;","names":[]}
|
|
@@ -6,11 +6,11 @@ import {
|
|
|
6
6
|
} from "./chunk-6TXQZ3PB.js";
|
|
7
7
|
|
|
8
8
|
// src/components/Toggle.tsx
|
|
9
|
-
import { cx } from "@cerberus
|
|
10
|
-
import { hstack, vstack } from "@cerberus
|
|
9
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
10
|
+
import { hstack, vstack } from "@cerberus/styled-system/patterns";
|
|
11
11
|
import {
|
|
12
12
|
toggle
|
|
13
|
-
} from "@cerberus
|
|
13
|
+
} from "@cerberus/styled-system/recipes";
|
|
14
14
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
15
15
|
function Toggle(props) {
|
|
16
16
|
const { size, describedBy, ...nativeProps } = props;
|
|
@@ -55,4 +55,4 @@ function Toggle(props) {
|
|
|
55
55
|
export {
|
|
56
56
|
Toggle
|
|
57
57
|
};
|
|
58
|
-
//# sourceMappingURL=chunk-
|
|
58
|
+
//# sourceMappingURL=chunk-JWQJLOX4.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Toggle.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\nexport type ToggleBase = Omit<\n InputHTMLAttributes<HTMLInputElement>,\n 'size' | 'id' | 'value'\n> & {\n describedBy?: string\n id: string\n value: string\n}\nexport type ToggleProps = ToggleBase & ToggleVariantProps\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"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AAsBH,SAIE,KAJF;AAPG,SAAS,OAAO,OAAoB;AACzC,QAAM,EAAE,MAAM,aAAa,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,OAAO,EAAE,KAAK,CAAC;AAC9B,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,OAAO,eAAe;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,SAAS,OAAO,OAAO,OAAO,CAAC;AAAA,MAC7C,gBAAc,MAAM,WAAW,MAAM;AAAA,MAErC;AAAA;AAAA,UAAC;AAAA;AAAA,YACE,GAAG;AAAA,YACH,GAAG;AAAA,YACH,GAAI,eAAe,EAAE,oBAAoB,YAAY;AAAA,YACrD,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,YACvC,WAAW,GAAG,QAAQ,OAAO,KAAK;AAAA,YAClC,MAAK;AAAA,YACL,MAAK;AAAA;AAAA,QACP;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,cACP,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,YACH;AAAA,YAEA,8BAAC,QAAK;AAAA;AAAA,QACR;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
// src/context/tabs.tsx
|
|
2
|
-
import {
|
|
3
|
-
tabs
|
|
4
|
-
} from "@cerberus-design/styled-system/recipes";
|
|
2
|
+
import { tabs } from "@cerberus/styled-system/recipes";
|
|
5
3
|
import {
|
|
6
4
|
createContext,
|
|
7
5
|
useContext,
|
|
@@ -57,4 +55,4 @@ export {
|
|
|
57
55
|
Tabs,
|
|
58
56
|
useTabsContext
|
|
59
57
|
};
|
|
60
|
-
//# sourceMappingURL=chunk-
|
|
58
|
+
//# sourceMappingURL=chunk-KF24CS4S.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/context/tabs.tsx"],"sourcesContent":["'use client'\n\nimport { tabs, type TabsVariantProps } from '@cerberus/styled-system/recipes'\nimport type { Pretty } from '@cerberus/styled-system/types'\nimport {\n createContext,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n type MutableRefObject,\n type PropsWithChildren,\n} from 'react'\n\n/**\n * This module provides a Tabs component and a hook to access its context.\n * @module\n */\n\nexport interface TabsContextValue {\n tabs: MutableRefObject<HTMLButtonElement[]>\n id: string\n active: string\n styles: Pretty<Record<'tabList' | 'tab' | 'tabPanel', string>>\n onTabUpdate: (active: string) => void\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null)\n\nexport interface TabsProps {\n id?: string\n active?: string\n cache?: boolean\n}\n\n/**\n * The Tabs component provides a context to manage tab state.\n * @param id - the id of the tabs component,\n * @param active - the default active tab id,\n * @param cache - whether to cache the active tab state in local storage\n * @example\n * ```tsx\n * <Tabs cache>\n * <TabList description=\"Button details\">\n * <Tab id=\"overview\">Overview</Tab>\n * <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * <TabPanels>\n * <TabPanel id=\"overview\">Overview content</TabPanel>\n * <TabPanel id=\"guidelines\">Guidelines content</TabPanel>\n * </TabPanels>\n * </Tabs>\n * ```\n */\nexport function Tabs(\n props: PropsWithChildren<TabsProps & TabsVariantProps>,\n): JSX.Element {\n const { cache, active, id, palette } = props\n const [activeTab, setActiveTab] = useState(() => (cache ? '' : active ?? ''))\n const tabsList = useRef<HTMLButtonElement[]>([])\n const uuid = useMemo(() => {\n return id ? `cerberus-tabs-${id}` : 'cerberus-tabs'\n }, [id])\n\n const value = useMemo(\n () => ({\n tabs: tabsList,\n id: uuid,\n active: activeTab,\n styles: tabs({ palette }),\n onTabUpdate: setActiveTab,\n }),\n [activeTab, setActiveTab, palette, uuid, tabsList],\n )\n\n // Get the active tab from local storage\n useEffect(() => {\n if (cache) {\n const cachedTab = window.localStorage.getItem(uuid)\n setActiveTab(\n cache ? cachedTab || (props.active ?? '') : props.active ?? '',\n )\n }\n }, [cache, active, uuid])\n\n // Update the active tab in local storage\n useEffect(() => {\n if (cache && activeTab) {\n window.localStorage.setItem(uuid, activeTab)\n }\n }, [activeTab, cache])\n\n return (\n <TabsContext.Provider value={value}>{props.children}</TabsContext.Provider>\n )\n}\n\nexport function useTabsContext(): TabsContextValue {\n const context = useContext(TabsContext)\n if (!context) {\n throw new Error('useTabsContext must be used within a Tabs Provider.')\n }\n return context\n}\n"],"mappings":";AAEA,SAAS,YAAmC;AAE5C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAiFH;AAlEG,IAAM,cAAc,cAAuC,IAAI;AA2B/D,SAAS,KACd,OACa;AACb,QAAM,EAAE,OAAO,QAAQ,IAAI,QAAQ,IAAI;AACvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,MAAO,QAAQ,KAAK,UAAU,EAAG;AAC5E,QAAM,WAAW,OAA4B,CAAC,CAAC;AAC/C,QAAM,OAAO,QAAQ,MAAM;AACzB,WAAO,KAAK,iBAAiB,EAAE,KAAK;AAAA,EACtC,GAAG,CAAC,EAAE,CAAC;AAEP,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,QAAQ,KAAK,EAAE,QAAQ,CAAC;AAAA,MACxB,aAAa;AAAA,IACf;AAAA,IACA,CAAC,WAAW,cAAc,SAAS,MAAM,QAAQ;AAAA,EACnD;AAGA,YAAU,MAAM;AACd,QAAI,OAAO;AACT,YAAM,YAAY,OAAO,aAAa,QAAQ,IAAI;AAClD;AAAA,QACE,QAAQ,cAAc,MAAM,UAAU,MAAM,MAAM,UAAU;AAAA,MAC9D;AAAA,IACF;AAAA,EACF,GAAG,CAAC,OAAO,QAAQ,IAAI,CAAC;AAGxB,YAAU,MAAM;AACd,QAAI,SAAS,WAAW;AACtB,aAAO,aAAa,QAAQ,MAAM,SAAS;AAAA,IAC7C;AAAA,EACF,GAAG,CAAC,WAAW,KAAK,CAAC;AAErB,SACE,oBAAC,YAAY,UAAZ,EAAqB,OAAe,gBAAM,UAAS;AAExD;AAEO,SAAS,iBAAmC;AACjD,QAAM,UAAU,WAAW,WAAW;AACtC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
useTabsKeyboardNavigation
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-GKUDLVOV.js";
|
|
4
4
|
import {
|
|
5
5
|
useTabsContext
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-KF24CS4S.js";
|
|
7
7
|
|
|
8
8
|
// src/components/Tab.tsx
|
|
9
9
|
import {
|
|
@@ -44,4 +44,4 @@ function Tab(props) {
|
|
|
44
44
|
export {
|
|
45
45
|
Tab
|
|
46
46
|
};
|
|
47
|
-
//# sourceMappingURL=chunk-
|
|
47
|
+
//# sourceMappingURL=chunk-NE5NHILF.js.map
|
|
@@ -3,9 +3,9 @@ import {
|
|
|
3
3
|
} from "./chunk-ZAU4JVLL.js";
|
|
4
4
|
|
|
5
5
|
// src/components/Radio.tsx
|
|
6
|
-
import { cx } from "@cerberus
|
|
7
|
-
import { hstack } from "@cerberus
|
|
8
|
-
import { radio } from "@cerberus
|
|
6
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
7
|
+
import { hstack } from "@cerberus/styled-system/patterns";
|
|
8
|
+
import { radio } from "@cerberus/styled-system/recipes";
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
10
|
function Radio(props) {
|
|
11
11
|
const { children, size, ...nativeProps } = props;
|
|
@@ -30,4 +30,4 @@ function Radio(props) {
|
|
|
30
30
|
export {
|
|
31
31
|
Radio
|
|
32
32
|
};
|
|
33
|
-
//# sourceMappingURL=chunk-
|
|
33
|
+
//# sourceMappingURL=chunk-PH64POOB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Radio.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { radio } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\nimport type { InputHTMLAttributes, PropsWithChildren } from 'react'\nimport { useFieldContext } from '../context/field'\n\nexport type RadioRecipe = RecipeVariantProps<typeof radio>\nexport interface RadioBaseProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {\n id: string\n}\nexport type RadioProps = RadioBaseProps & RadioRecipe\n\nexport function Radio(props: PropsWithChildren<RadioProps>) {\n const { children, size, ...nativeProps } = props\n const { invalid, ...state } = useFieldContext()\n const styles = radio({ size })\n\n return (\n <div className={cx('group', hstack(), styles.root)} tabIndex={0}>\n <input\n {...nativeProps}\n {...state}\n {...(invalid && { 'aria-invalid': true })}\n className={cx(nativeProps.className, styles.input)}\n tabIndex={-1}\n type=\"radio\"\n />\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AACvB,SAAS,aAAa;AAkBlB,SACE,KADF;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,UAAU,MAAM,GAAG,YAAY,IAAI;AAC3C,QAAM,EAAE,SAAS,GAAG,MAAM,IAAI,gBAAgB;AAC9C,QAAM,SAAS,MAAM,EAAE,KAAK,CAAC;AAE7B,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,OAAO,GAAG,OAAO,IAAI,GAAG,UAAU,GAC5D;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACH,GAAI,WAAW,EAAE,gBAAgB,KAAK;AAAA,QACvC,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,QACjD,UAAU;AAAA,QACV,MAAK;AAAA;AAAA,IACP;AAAA,IACC;AAAA,KACH;AAEJ;","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// src/components/ModalHeader.tsx
|
|
2
|
-
import { cx } from "@cerberus
|
|
3
|
-
import { vstack } from "@cerberus
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { vstack } from "@cerberus/styled-system/patterns";
|
|
4
4
|
import { jsx } from "react/jsx-runtime";
|
|
5
5
|
function ModalHeader(props) {
|
|
6
6
|
return /* @__PURE__ */ jsx(
|
|
@@ -22,4 +22,4 @@ function ModalHeader(props) {
|
|
|
22
22
|
export {
|
|
23
23
|
ModalHeader
|
|
24
24
|
};
|
|
25
|
-
//# sourceMappingURL=chunk-
|
|
25
|
+
//# sourceMappingURL=chunk-QU7UV5DB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/ModalHeader.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes } from 'react'\n\n/**\n * This module contains the ModalHeader component for a customizable modal.\n * @module\n */\n\nexport type ModalHeaderProps = HTMLAttributes<HTMLDivElement>\n\n/**\n * The ModalHeader component is a header element for a customizable modal.\n * @example\n * ```tsx\n * <Modal>\n * <ModalHeader>\n * <h2>Modal Heading</h2>\n * </ModalHeader>\n * </Modal>\n * ```\n */\nexport function ModalHeader(props: ModalHeaderProps) {\n return (\n <div\n {...props}\n className={cx(\n props.className,\n vstack({\n alignItems: 'flex-start',\n gap: '4',\n mb: '8',\n }),\n )}\n />\n )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,cAAc;AAuBnB;AAFG,SAAS,YAAY,OAAyB;AACnD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,MAAM;AAAA,QACN,OAAO;AAAA,UACL,YAAY;AAAA,UACZ,KAAK;AAAA,UACL,IAAI;AAAA,QACN,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-4O4QFF4S.js";
|
|
4
4
|
import {
|
|
5
5
|
useTabsContext
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-KF24CS4S.js";
|
|
7
7
|
|
|
8
8
|
// src/components/TabPanel.tsx
|
|
9
9
|
import { cx } from "@cerberus/styled-system/css";
|
|
@@ -29,4 +29,4 @@ function TabPanel(props) {
|
|
|
29
29
|
export {
|
|
30
30
|
TabPanel
|
|
31
31
|
};
|
|
32
|
-
//# sourceMappingURL=chunk-
|
|
32
|
+
//# sourceMappingURL=chunk-U72VPIZA.js.map
|
|
@@ -3,19 +3,19 @@ import {
|
|
|
3
3
|
} from "./chunk-4CAT3FHV.js";
|
|
4
4
|
import {
|
|
5
5
|
Modal
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-2UFNQM55.js";
|
|
7
7
|
import {
|
|
8
8
|
ModalDescription
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-4M4LCQ43.js";
|
|
10
10
|
import {
|
|
11
11
|
ModalHeader
|
|
12
|
-
} from "./chunk-
|
|
12
|
+
} from "./chunk-QU7UV5DB.js";
|
|
13
13
|
import {
|
|
14
14
|
ModalHeading
|
|
15
|
-
} from "./chunk-
|
|
15
|
+
} from "./chunk-JB7IQ2BM.js";
|
|
16
16
|
import {
|
|
17
17
|
ModalIcon
|
|
18
|
-
} from "./chunk-
|
|
18
|
+
} from "./chunk-JJP2TFTU.js";
|
|
19
19
|
import {
|
|
20
20
|
Button
|
|
21
21
|
} from "./chunk-2ATICEW3.js";
|
|
@@ -41,8 +41,8 @@ import {
|
|
|
41
41
|
useRef,
|
|
42
42
|
useState
|
|
43
43
|
} from "react";
|
|
44
|
-
import { css } from "@cerberus
|
|
45
|
-
import { hstack } from "@cerberus
|
|
44
|
+
import { css } from "@cerberus/styled-system/css";
|
|
45
|
+
import { hstack } from "@cerberus/styled-system/patterns";
|
|
46
46
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
47
47
|
var ConfirmModalContext = createContext(null);
|
|
48
48
|
function ConfirmModal(props) {
|
|
@@ -152,4 +152,4 @@ export {
|
|
|
152
152
|
ConfirmModal,
|
|
153
153
|
useConfirmModal
|
|
154
154
|
};
|
|
155
|
-
//# sourceMappingURL=chunk-
|
|
155
|
+
//# sourceMappingURL=chunk-XGNAFSMG.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} from 'react'\nimport { Portal } from '../components/Portal'\nimport { Button } from '../components/Button'\nimport { css } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { ModalIcon } from '../components/ModalIcon'\nimport { Show } from '../components/Show'\nimport { Modal } from '../components/Modal'\nimport { useModal } from '../hooks/useModal'\nimport { ModalHeader } from '../components/ModalHeader'\nimport { ModalHeading } from '../components/ModalHeading'\nimport { ModalDescription } from '../components/ModalDescription'\n\n/**\n * This module provides a context and hook for the confirm modal.\n * @module\n */\n\nexport interface ShowConfirmModalOptions {\n kind?: 'destructive' | 'non-destructive'\n heading: string\n description?: string\n actionText: string\n cancelText: string\n}\nexport type ShowResult =\n | ((value: boolean | PromiseLike<boolean>) => void)\n | null\n\nexport interface ConfirmModalValue {\n show: (options: ShowConfirmModalOptions) => Promise<boolean>\n}\n\nconst ConfirmModalContext = createContext<ConfirmModalValue | null>(null)\n\nexport interface ConfirmModalProviderProps {}\n\n/**\n * Provides a confirm modal to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <ConfirmModal>\n * <SomeFeatureSection />\n * </ConfirmModal>\n *\n * // Use the hook to show the confirm modal.\n * const confirm = useConfirmModal()\n *\n * const handleClick = useCallback(async () => {\n * const userConsent = await confirm.show({\n * heading: 'Add new payment method?',\n * description:\n * 'This will add a new payment method to your account to be billed for future purchases.',\n * actionText: 'Yes, add payment method',\n * cancelText: 'No, cancel',\n * })\n * setConsent(userConsent)\n * }, [confirm])\n * ```\n */\nexport function ConfirmModal(\n props: PropsWithChildren<ConfirmModalProviderProps>,\n) {\n const { modalRef, show, close } = useModal()\n const resolveRef = useRef<ShowResult>(null)\n const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n const focusTrap = trapFocus(modalRef)\n const ConfirmIcon = $cerberusIcons.confirmModal\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\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?.(true)\n }\n resolveRef.current?.(false)\n close()\n },\n [close],\n )\n\n const handleShow = useCallback(\n (options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n show()\n resolveRef.current = resolve\n })\n },\n [show],\n )\n\n const value = useMemo(\n () => ({\n show: handleShow,\n }),\n [handleShow],\n )\n\n return (\n <ConfirmModalContext.Provider value={value}>\n {props.children}\n\n <Portal>\n <Modal onKeyDown={focusTrap} ref={modalRef}>\n <ModalHeader>\n <Show\n when={palette === 'danger'}\n fallback={\n <ModalIcon palette=\"action\">\n <ConfirmIcon size={24} />\n </ModalIcon>\n }\n >\n <ModalIcon palette=\"danger\">\n <ConfirmIcon size={24} />\n </ModalIcon>\n </Show>\n <ModalHeading>{content?.heading}</ModalHeading>\n <ModalDescription>{content?.description}</ModalDescription>\n </ModalHeader>\n\n <div\n className={hstack({\n gap: '4',\n })}\n >\n <Button\n autoFocus\n className={css({\n w: '1/2',\n })}\n name=\"confirm\"\n onClick={handleChoice}\n palette={palette}\n value=\"true\"\n >\n {content?.actionText}\n </Button>\n <Button\n className={css({\n w: '1/2',\n })}\n name=\"cancel\"\n onClick={handleChoice}\n usage=\"outlined\"\n value=\"false\"\n >\n {content?.cancelText}\n </Button>\n </div>\n </Modal>\n </Portal>\n </ConfirmModalContext.Provider>\n )\n}\n\nexport function useConfirmModal(): ConfirmModalValue {\n const context = useContext(ConfirmModalContext)\n if (context === null) {\n throw new Error(\n 'useConfirmModal must be used within a ConfirmModal Provider',\n )\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP,SAAS,WAAW;AACpB,SAAS,cAAc;AA6Gb,SAKQ,KALR;AA9EV,IAAM,sBAAsB,cAAwC,IAAI;AA4BjE,SAAS,aACd,OACA;AACA,QAAM,EAAE,UAAU,MAAM,MAAM,IAAI,SAAS;AAC3C,QAAM,aAAa,OAAmB,IAAI;AAC1C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAyC,IAAI;AAC3E,QAAM,YAAY,UAAU,QAAQ;AACpC,QAAM,cAAc,eAAe;AAEnC,QAAM,UAAU;AAAA,IACd,OAAO,mCAAS,UAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AAzF1C;AA0FM,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,UAAU,QAAQ;AAC3B,yBAAW,YAAX,oCAAqB;AAAA,MACvB;AACA,uBAAW,YAAX,oCAAqB;AACrB,YAAM;AAAA,IACR;AAAA,IACA,CAAC,KAAK;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IACjB,CAAC,YAAqC;AACpC,aAAO,IAAI,QAAiB,CAAC,YAAY;AACvC,mBAAW,EAAE,GAAG,SAAS,MAAM,QAAQ,QAAQ,kBAAkB,CAAC;AAClE,aAAK;AACL,mBAAW,UAAU;AAAA,MACvB,CAAC;AAAA,IACH;AAAA,IACA,CAAC,IAAI;AAAA,EACP;AAEA,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,MAAM;AAAA,IACR;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SACE,qBAAC,oBAAoB,UAApB,EAA6B,OAC3B;AAAA,UAAM;AAAA,IAEP,oBAAC,UACC,+BAAC,SAAM,WAAW,WAAW,KAAK,UAChC;AAAA,2BAAC,eACC;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,YAAY;AAAA,YAClB,UACE,oBAAC,aAAU,SAAQ,UACjB,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA,YAGF,8BAAC,aAAU,SAAQ,UACjB,8BAAC,eAAY,MAAM,IAAI,GACzB;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,gBAAc,6CAAS,SAAQ;AAAA,QAChC,oBAAC,oBAAkB,6CAAS,aAAY;AAAA,SAC1C;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,KAAK;AAAA,UACP,CAAC;AAAA,UAED;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAS;AAAA,gBACT,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT;AAAA,gBACA,OAAM;AAAA,gBAEL,6CAAS;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,IAAI;AAAA,kBACb,GAAG;AAAA,gBACL,CAAC;AAAA,gBACD,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,OAAM;AAAA,gBACN,OAAM;AAAA,gBAEL,6CAAS;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;AAEO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,mBAAmB;AAC9C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
import {
|
|
3
3
|
ConfirmModal,
|
|
4
4
|
useConfirmModal
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-XGNAFSMG.js";
|
|
6
6
|
import "../chunk-4CAT3FHV.js";
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
9
|
-
import "../chunk-
|
|
10
|
-
import "../chunk-
|
|
11
|
-
import "../chunk-
|
|
7
|
+
import "../chunk-2UFNQM55.js";
|
|
8
|
+
import "../chunk-4M4LCQ43.js";
|
|
9
|
+
import "../chunk-QU7UV5DB.js";
|
|
10
|
+
import "../chunk-JB7IQ2BM.js";
|
|
11
|
+
import "../chunk-JJP2TFTU.js";
|
|
12
12
|
import "../chunk-2ATICEW3.js";
|
|
13
13
|
import "../chunk-4O4QFF4S.js";
|
|
14
14
|
import "../chunk-KESKDLX6.js";
|
|
@@ -2,13 +2,13 @@
|
|
|
2
2
|
import {
|
|
3
3
|
PromptModal,
|
|
4
4
|
usePromptModal
|
|
5
|
-
} from "../chunk-
|
|
5
|
+
} from "../chunk-7CZ3NIGH.js";
|
|
6
6
|
import "../chunk-4CAT3FHV.js";
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
9
|
-
import "../chunk-
|
|
10
|
-
import "../chunk-
|
|
11
|
-
import "../chunk-
|
|
7
|
+
import "../chunk-2UFNQM55.js";
|
|
8
|
+
import "../chunk-4M4LCQ43.js";
|
|
9
|
+
import "../chunk-QU7UV5DB.js";
|
|
10
|
+
import "../chunk-JB7IQ2BM.js";
|
|
11
|
+
import "../chunk-JJP2TFTU.js";
|
|
12
12
|
import "../chunk-2ATICEW3.js";
|
|
13
13
|
import "../chunk-5GEC53G7.js";
|
|
14
14
|
import "../chunk-CU7HXAKM.js";
|