@cerberus-design/react 0.6.1 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/legacy/_tsup-dts-rollup.d.ts +336 -4
- package/build/legacy/aria-helpers/tabs.aria.js +2 -2
- package/build/legacy/aria-helpers/trap-focus.aria.js +7 -0
- package/build/legacy/aria-helpers/trap-focus.aria.js.map +1 -0
- package/build/legacy/chunk-2F5TB2EV.js +25 -0
- package/build/legacy/chunk-2F5TB2EV.js.map +1 -0
- package/build/legacy/chunk-4CAT3FHV.js +11 -0
- package/build/legacy/chunk-4CAT3FHV.js.map +1 -0
- package/build/legacy/chunk-4M3EUP57.js +22 -0
- package/build/legacy/chunk-4M3EUP57.js.map +1 -0
- package/build/{modern/chunk-X4YQ27D5.js → legacy/chunk-5GEC53G7.js} +5 -5
- package/build/legacy/{chunk-YJCWUN33.js → chunk-67S42J4B.js} +5 -16
- package/build/legacy/chunk-67S42J4B.js.map +1 -0
- package/build/legacy/{chunk-3CBN7U25.js → chunk-6TXQZ3PB.js} +6 -3
- package/build/legacy/chunk-6TXQZ3PB.js.map +1 -0
- package/build/legacy/{chunk-DQOYTLGB.js → chunk-7KJIZIAU.js} +9 -5
- package/build/legacy/chunk-7KJIZIAU.js.map +1 -0
- package/build/legacy/chunk-C45DY4VE.js +17 -0
- package/build/legacy/chunk-C45DY4VE.js.map +1 -0
- package/build/{modern/chunk-HE3HFKYU.js → legacy/chunk-CU7HXAKM.js} +5 -5
- package/build/legacy/{chunk-HE3HFKYU.js.map → chunk-CU7HXAKM.js.map} +1 -1
- package/build/legacy/chunk-D3ZXZA3U.js +155 -0
- package/build/legacy/chunk-D3ZXZA3U.js.map +1 -0
- package/build/legacy/chunk-DGPLSWFJ.js +208 -0
- package/build/legacy/chunk-DGPLSWFJ.js.map +1 -0
- package/build/legacy/{chunk-5XNLWIZO.js → chunk-EVEEQRH6.js} +2 -2
- package/build/legacy/chunk-EVEEQRH6.js.map +1 -0
- package/build/legacy/chunk-G3JEWPLM.js +29 -0
- package/build/legacy/chunk-G3JEWPLM.js.map +1 -0
- package/build/legacy/chunk-JI4YTPEJ.js +47 -0
- package/build/legacy/chunk-JI4YTPEJ.js.map +1 -0
- package/build/legacy/chunk-KESKDLX6.js +30 -0
- package/build/legacy/chunk-KESKDLX6.js.map +1 -0
- package/build/legacy/{chunk-S7HBD2A7.js → chunk-KFUXGX33.js} +2 -2
- package/build/legacy/chunk-OGSAAB6K.js +12 -0
- package/build/legacy/chunk-OGSAAB6K.js.map +1 -0
- package/build/{modern/chunk-G2QMBSK5.js → legacy/chunk-PMCYXRAH.js} +2 -2
- package/build/legacy/chunk-PMCYXRAH.js.map +1 -0
- package/build/legacy/{chunk-734PGVLT.js → chunk-TAZI77TP.js} +2 -2
- package/build/legacy/chunk-TPFNVGYA.js +21 -0
- package/build/legacy/chunk-TPFNVGYA.js.map +1 -0
- package/build/legacy/chunk-TZNYJ3G7.js +25 -0
- package/build/legacy/chunk-TZNYJ3G7.js.map +1 -0
- package/build/legacy/chunk-UPODPCRD.js +12 -0
- package/build/legacy/chunk-UPODPCRD.js.map +1 -0
- package/build/legacy/chunk-VULPMZUW.js +18 -0
- package/build/legacy/chunk-VULPMZUW.js.map +1 -0
- package/build/{modern/chunk-5GSXIYD3.js → legacy/chunk-X2JMXTBH.js} +6 -8
- package/build/{modern/chunk-5GSXIYD3.js.map → legacy/chunk-X2JMXTBH.js.map} +1 -1
- package/build/legacy/components/FeatureFlag.js +10 -0
- package/build/legacy/components/FeatureFlag.js.map +1 -0
- package/build/legacy/components/Input.js +4 -4
- package/build/legacy/components/Label.js +2 -2
- package/build/legacy/components/Modal.js +7 -0
- package/build/legacy/components/Modal.js.map +1 -0
- package/build/legacy/components/ModalDescription.js +7 -0
- package/build/legacy/components/ModalDescription.js.map +1 -0
- package/build/legacy/components/ModalHeader.js +7 -0
- package/build/legacy/components/ModalHeader.js.map +1 -0
- package/build/legacy/components/ModalHeading.js +7 -0
- package/build/legacy/components/ModalHeading.js.map +1 -0
- package/build/legacy/components/ModalIcon.js +7 -0
- package/build/legacy/components/ModalIcon.js.map +1 -0
- package/build/legacy/components/NavMenuList.js +1 -1
- package/build/legacy/components/Portal.js +7 -0
- package/build/legacy/components/Portal.js.map +1 -0
- 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/Tag.js +1 -1
- package/build/legacy/components/Toggle.js +3 -3
- package/build/legacy/config/cerbIcons.js +1 -1
- package/build/legacy/config/defineIcons.js +2 -2
- package/build/legacy/context/confirm-modal.js +22 -0
- package/build/legacy/context/confirm-modal.js.map +1 -0
- package/build/legacy/context/feature-flags.js +10 -0
- package/build/legacy/context/feature-flags.js.map +1 -0
- package/build/legacy/context/prompt-modal.js +25 -0
- package/build/legacy/context/prompt-modal.js.map +1 -0
- package/build/legacy/context/tabs.js +1 -1
- package/build/legacy/hooks/useModal.js +8 -0
- package/build/legacy/hooks/useModal.js.map +1 -0
- package/build/legacy/index.js +89 -35
- package/build/modern/_tsup-dts-rollup.d.ts +336 -4
- package/build/modern/aria-helpers/tabs.aria.js +2 -2
- package/build/modern/aria-helpers/trap-focus.aria.js +7 -0
- package/build/modern/aria-helpers/trap-focus.aria.js.map +1 -0
- package/build/modern/chunk-2F5TB2EV.js +25 -0
- package/build/modern/chunk-2F5TB2EV.js.map +1 -0
- package/build/modern/chunk-4CAT3FHV.js +11 -0
- package/build/modern/chunk-4CAT3FHV.js.map +1 -0
- package/build/modern/chunk-4M3EUP57.js +22 -0
- package/build/modern/chunk-4M3EUP57.js.map +1 -0
- package/build/{legacy/chunk-X4YQ27D5.js → modern/chunk-5GEC53G7.js} +5 -5
- package/build/modern/{chunk-YJCWUN33.js → chunk-67S42J4B.js} +5 -16
- package/build/modern/chunk-67S42J4B.js.map +1 -0
- package/build/modern/{chunk-3CBN7U25.js → chunk-6TXQZ3PB.js} +6 -3
- package/build/modern/chunk-6TXQZ3PB.js.map +1 -0
- package/build/modern/{chunk-DQOYTLGB.js → chunk-7KJIZIAU.js} +9 -5
- package/build/modern/chunk-7KJIZIAU.js.map +1 -0
- package/build/modern/chunk-C45DY4VE.js +17 -0
- package/build/modern/chunk-C45DY4VE.js.map +1 -0
- package/build/modern/chunk-C5HLLGME.js +23 -0
- package/build/modern/chunk-C5HLLGME.js.map +1 -0
- package/build/{legacy/chunk-HE3HFKYU.js → modern/chunk-CU7HXAKM.js} +5 -5
- package/build/modern/{chunk-HE3HFKYU.js.map → chunk-CU7HXAKM.js.map} +1 -1
- package/build/modern/chunk-G3JEWPLM.js +29 -0
- package/build/modern/chunk-G3JEWPLM.js.map +1 -0
- package/build/modern/chunk-HBEEHHON.js +46 -0
- package/build/modern/chunk-HBEEHHON.js.map +1 -0
- package/build/modern/chunk-JIZQFTW6.js +29 -0
- package/build/modern/chunk-JIZQFTW6.js.map +1 -0
- package/build/modern/{chunk-S7HBD2A7.js → chunk-KFUXGX33.js} +2 -2
- package/build/modern/chunk-OGSAAB6K.js +12 -0
- package/build/modern/chunk-OGSAAB6K.js.map +1 -0
- package/build/{legacy/chunk-G2QMBSK5.js → modern/chunk-PMCYXRAH.js} +2 -2
- package/build/modern/chunk-PMCYXRAH.js.map +1 -0
- package/build/modern/chunk-TAVCJ54A.js +154 -0
- package/build/modern/chunk-TAVCJ54A.js.map +1 -0
- package/build/modern/{chunk-734PGVLT.js → chunk-TAZI77TP.js} +2 -2
- package/build/modern/chunk-TPFNVGYA.js +21 -0
- package/build/modern/chunk-TPFNVGYA.js.map +1 -0
- package/build/modern/chunk-UPODPCRD.js +12 -0
- package/build/modern/chunk-UPODPCRD.js.map +1 -0
- package/build/modern/chunk-VULPMZUW.js +18 -0
- package/build/modern/chunk-VULPMZUW.js.map +1 -0
- package/build/modern/chunk-WWG5QWXY.js +207 -0
- package/build/modern/chunk-WWG5QWXY.js.map +1 -0
- package/build/{legacy/chunk-5GSXIYD3.js → modern/chunk-X2JMXTBH.js} +6 -8
- package/build/{legacy/chunk-5GSXIYD3.js.map → modern/chunk-X2JMXTBH.js.map} +1 -1
- package/build/modern/{chunk-SLIOCQBZ.js → chunk-Z6IWNVPN.js} +2 -2
- package/build/modern/chunk-Z6IWNVPN.js.map +1 -0
- package/build/modern/components/FeatureFlag.js +10 -0
- package/build/modern/components/FeatureFlag.js.map +1 -0
- package/build/modern/components/Input.js +4 -4
- package/build/modern/components/Label.js +2 -2
- package/build/modern/components/Modal.js +7 -0
- package/build/modern/components/Modal.js.map +1 -0
- package/build/modern/components/ModalDescription.js +7 -0
- package/build/modern/components/ModalDescription.js.map +1 -0
- package/build/modern/components/ModalHeader.js +7 -0
- package/build/modern/components/ModalHeader.js.map +1 -0
- package/build/modern/components/ModalHeading.js +7 -0
- package/build/modern/components/ModalHeading.js.map +1 -0
- package/build/modern/components/ModalIcon.js +7 -0
- package/build/modern/components/ModalIcon.js.map +1 -0
- package/build/modern/components/NavMenuList.js +1 -1
- package/build/modern/components/Portal.js +7 -0
- package/build/modern/components/Portal.js.map +1 -0
- 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/Tag.js +1 -1
- package/build/modern/components/Toggle.js +3 -3
- package/build/modern/config/cerbIcons.js +1 -1
- package/build/modern/config/defineIcons.js +2 -2
- package/build/modern/context/confirm-modal.js +22 -0
- package/build/modern/context/confirm-modal.js.map +1 -0
- package/build/modern/context/feature-flags.js +10 -0
- package/build/modern/context/feature-flags.js.map +1 -0
- package/build/modern/context/prompt-modal.js +25 -0
- package/build/modern/context/prompt-modal.js.map +1 -0
- package/build/modern/context/tabs.js +1 -1
- package/build/modern/hooks/useModal.js +8 -0
- package/build/modern/hooks/useModal.js.map +1 -0
- package/build/modern/index.js +89 -35
- package/package.json +3 -2
- package/src/aria-helpers/trap-focus.aria.ts +29 -0
- package/src/components/FeatureFlag.tsx +14 -0
- package/src/components/Label.tsx +1 -1
- package/src/components/Modal.tsx +37 -0
- package/src/components/ModalDescription.tsx +23 -0
- package/src/components/ModalHeader.tsx +37 -0
- package/src/components/ModalHeading.tsx +23 -0
- package/src/components/ModalIcon.tsx +28 -0
- package/src/components/NavMenuList.tsx +1 -1
- package/src/components/Portal.tsx +22 -0
- package/src/components/Tab.tsx +3 -84
- package/src/components/TabList.tsx +2 -4
- package/src/components/TabPanel.tsx +3 -14
- package/src/components/Tag.tsx +1 -1
- package/src/config/cerbIcons.ts +11 -2
- package/src/config/defineIcons.ts +6 -3
- package/src/context/confirm-modal.tsx +185 -0
- package/src/context/feature-flags.tsx +60 -0
- package/src/context/prompt-modal.tsx +232 -0
- package/src/context/tabs.tsx +15 -5
- package/src/hooks/useModal.ts +34 -0
- package/src/index.ts +12 -0
- package/build/legacy/chunk-3CBN7U25.js.map +0 -1
- package/build/legacy/chunk-5MNCW677.js +0 -11
- package/build/legacy/chunk-5MNCW677.js.map +0 -1
- package/build/legacy/chunk-5XNLWIZO.js.map +0 -1
- package/build/legacy/chunk-DQOYTLGB.js.map +0 -1
- package/build/legacy/chunk-G2QMBSK5.js.map +0 -1
- package/build/legacy/chunk-YA2UV2AB.js +0 -126
- package/build/legacy/chunk-YA2UV2AB.js.map +0 -1
- package/build/legacy/chunk-YJCWUN33.js.map +0 -1
- package/build/modern/chunk-3CBN7U25.js.map +0 -1
- package/build/modern/chunk-5MNCW677.js +0 -11
- package/build/modern/chunk-5MNCW677.js.map +0 -1
- package/build/modern/chunk-DQOYTLGB.js.map +0 -1
- package/build/modern/chunk-G2QMBSK5.js.map +0 -1
- package/build/modern/chunk-SLIOCQBZ.js.map +0 -1
- package/build/modern/chunk-SUP7U42W.js +0 -125
- package/build/modern/chunk-SUP7U42W.js.map +0 -1
- package/build/modern/chunk-YJCWUN33.js.map +0 -1
- /package/build/legacy/{chunk-X4YQ27D5.js.map → chunk-5GEC53G7.js.map} +0 -0
- /package/build/legacy/{chunk-S7HBD2A7.js.map → chunk-KFUXGX33.js.map} +0 -0
- /package/build/legacy/{chunk-734PGVLT.js.map → chunk-TAZI77TP.js.map} +0 -0
- /package/build/modern/{chunk-X4YQ27D5.js.map → chunk-5GEC53G7.js.map} +0 -0
- /package/build/modern/{chunk-S7HBD2A7.js.map → chunk-KFUXGX33.js.map} +0 -0
- /package/build/modern/{chunk-734PGVLT.js.map → chunk-TAZI77TP.js.map} +0 -0
|
@@ -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-design/styled-system/css'\nimport { hstack } from '@cerberus-design/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,MAAO,SAAS,SAAS,gBAAgB,WAAW;AAAA,IACpD,CAAC,OAAO;AAAA,EACV;AAEA,QAAM,eAAe;AAAA,IACnB,CAAC,MAAqC;AACpC,YAAM,SAAS,EAAE;AACjB,UAAI,OAAO,UAAU,QAAQ;AAC3B,mBAAW,UAAU,IAAI;AAAA,MAC3B;AACA,iBAAW,UAAU,KAAK;AAC1B,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,mBAAS,SAAQ;AAAA,QAChC,oBAAC,oBAAkB,mBAAS,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,mBAAS;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,mBAAS;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":[]}
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-ZAU4JVLL.js";
|
|
4
4
|
import {
|
|
5
5
|
$cerberusIcons
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-6TXQZ3PB.js";
|
|
7
7
|
|
|
8
8
|
// src/components/Toggle.tsx
|
|
9
9
|
import { cx } from "@cerberus-design/styled-system/css";
|
|
@@ -55,4 +55,4 @@ function Toggle(props) {
|
|
|
55
55
|
export {
|
|
56
56
|
Toggle
|
|
57
57
|
};
|
|
58
|
-
//# sourceMappingURL=chunk-
|
|
58
|
+
//# sourceMappingURL=chunk-TAZI77TP.js.map
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
// src/components/Modal.tsx
|
|
2
|
+
import { cx } from "@cerberus-design/styled-system/css";
|
|
3
|
+
import { modal } from "@cerberus-design/styled-system/recipes";
|
|
4
|
+
import { forwardRef } from "react";
|
|
5
|
+
import { jsx } from "react/jsx-runtime";
|
|
6
|
+
function ModalEl(props, ref) {
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"dialog",
|
|
9
|
+
{
|
|
10
|
+
...props,
|
|
11
|
+
className: cx(props.className, modal().dialog),
|
|
12
|
+
ref
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
}
|
|
16
|
+
var Modal = forwardRef(ModalEl);
|
|
17
|
+
|
|
18
|
+
export {
|
|
19
|
+
Modal
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=chunk-TPFNVGYA.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Modal.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { modal } from '@cerberus-design/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":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// src/components/ModalDescription.tsx
|
|
2
|
+
import { cx } from "@cerberus-design/styled-system/css";
|
|
3
|
+
import { modal } from "@cerberus-design/styled-system/recipes";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
function ModalDescription(props) {
|
|
6
|
+
return /* @__PURE__ */ jsx("p", { ...props, className: cx(props.className, modal().description) });
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export {
|
|
10
|
+
ModalDescription
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=chunk-UPODPCRD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/ModalDescription.tsx"],"sourcesContent":["import { cx } from '@cerberus-design/styled-system/css'\nimport { modal } from '@cerberus-design/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":[]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useFeatureFlags
|
|
3
|
+
} from "./chunk-4M3EUP57.js";
|
|
4
|
+
import {
|
|
5
|
+
Show
|
|
6
|
+
} from "./chunk-4O4QFF4S.js";
|
|
7
|
+
|
|
8
|
+
// src/components/FeatureFlag.tsx
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
function FeatureFlag(props) {
|
|
11
|
+
const showContent = useFeatureFlags(props.flag);
|
|
12
|
+
return /* @__PURE__ */ jsx(Show, { when: showContent, children: props.children });
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export {
|
|
16
|
+
FeatureFlag
|
|
17
|
+
};
|
|
18
|
+
//# sourceMappingURL=chunk-VULPMZUW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/FeatureFlag.tsx"],"sourcesContent":["'use client'\n\nimport type { PropsWithChildren } from 'react'\nimport { useFeatureFlags } from '../context/feature-flags'\nimport { Show } from './Show'\n\nexport interface FeatureFlagProps {\n flag: string\n}\n\nexport function FeatureFlag(props: PropsWithChildren<FeatureFlagProps>) {\n const showContent = useFeatureFlags(props.flag)\n return <Show when={showContent}>{props.children}</Show>\n}\n"],"mappings":";;;;;;;;AAYS;AAFF,SAAS,YAAY,OAA4C;AACtE,QAAM,cAAc,gBAAgB,MAAM,IAAI;AAC9C,SAAO,oBAAC,QAAK,MAAM,aAAc,gBAAM,UAAS;AAClD;","names":[]}
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Portal
|
|
3
|
+
} from "./chunk-4CAT3FHV.js";
|
|
4
|
+
import {
|
|
5
|
+
Modal
|
|
6
|
+
} from "./chunk-TPFNVGYA.js";
|
|
7
|
+
import {
|
|
8
|
+
ModalDescription
|
|
9
|
+
} from "./chunk-UPODPCRD.js";
|
|
10
|
+
import {
|
|
11
|
+
ModalHeader
|
|
12
|
+
} from "./chunk-2F5TB2EV.js";
|
|
13
|
+
import {
|
|
14
|
+
ModalHeading
|
|
15
|
+
} from "./chunk-OGSAAB6K.js";
|
|
16
|
+
import {
|
|
17
|
+
ModalIcon
|
|
18
|
+
} from "./chunk-G3JEWPLM.js";
|
|
19
|
+
import {
|
|
20
|
+
Button
|
|
21
|
+
} from "./chunk-2ATICEW3.js";
|
|
22
|
+
import {
|
|
23
|
+
Input
|
|
24
|
+
} from "./chunk-5GEC53G7.js";
|
|
25
|
+
import {
|
|
26
|
+
Label
|
|
27
|
+
} from "./chunk-CU7HXAKM.js";
|
|
28
|
+
import {
|
|
29
|
+
Show
|
|
30
|
+
} from "./chunk-4O4QFF4S.js";
|
|
31
|
+
import {
|
|
32
|
+
Field
|
|
33
|
+
} from "./chunk-ZAU4JVLL.js";
|
|
34
|
+
import {
|
|
35
|
+
trapFocus
|
|
36
|
+
} from "./chunk-JIZQFTW6.js";
|
|
37
|
+
import {
|
|
38
|
+
$cerberusIcons
|
|
39
|
+
} from "./chunk-6TXQZ3PB.js";
|
|
40
|
+
import {
|
|
41
|
+
useModal
|
|
42
|
+
} from "./chunk-C5HLLGME.js";
|
|
43
|
+
|
|
44
|
+
// src/context/prompt-modal.tsx
|
|
45
|
+
import {
|
|
46
|
+
createContext,
|
|
47
|
+
useCallback,
|
|
48
|
+
useContext,
|
|
49
|
+
useMemo,
|
|
50
|
+
useRef,
|
|
51
|
+
useState
|
|
52
|
+
} from "react";
|
|
53
|
+
import { css } from "@cerberus-design/styled-system/css";
|
|
54
|
+
import { hstack, vstack } from "@cerberus-design/styled-system/patterns";
|
|
55
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
56
|
+
var PromptModalContext = createContext(null);
|
|
57
|
+
function PromptModal(props) {
|
|
58
|
+
const { modalRef, show, close } = useModal();
|
|
59
|
+
const resolveRef = useRef(null);
|
|
60
|
+
const [content, setContent] = useState(null);
|
|
61
|
+
const [inputValue, setInputValue] = useState("");
|
|
62
|
+
const focusTrap = trapFocus(modalRef);
|
|
63
|
+
const PromptIcon = $cerberusIcons.promptModal;
|
|
64
|
+
const isValid = useMemo(
|
|
65
|
+
() => inputValue === content?.key,
|
|
66
|
+
[inputValue, content]
|
|
67
|
+
);
|
|
68
|
+
const palette = useMemo(
|
|
69
|
+
() => content?.kind === "destructive" ? "danger" : "action",
|
|
70
|
+
[content]
|
|
71
|
+
);
|
|
72
|
+
const handleChange = useCallback(
|
|
73
|
+
(e) => {
|
|
74
|
+
setInputValue(e.currentTarget.value);
|
|
75
|
+
},
|
|
76
|
+
[content]
|
|
77
|
+
);
|
|
78
|
+
const handleChoice = useCallback(
|
|
79
|
+
(e) => {
|
|
80
|
+
const target = e.currentTarget;
|
|
81
|
+
if (target.value === "true") {
|
|
82
|
+
resolveRef.current?.(inputValue);
|
|
83
|
+
}
|
|
84
|
+
close();
|
|
85
|
+
},
|
|
86
|
+
[inputValue, close]
|
|
87
|
+
);
|
|
88
|
+
const handleShow = useCallback(
|
|
89
|
+
(options) => {
|
|
90
|
+
return new Promise((resolve) => {
|
|
91
|
+
setContent({ ...options, kind: options.kind || "non-destructive" });
|
|
92
|
+
show();
|
|
93
|
+
resolveRef.current = resolve;
|
|
94
|
+
});
|
|
95
|
+
},
|
|
96
|
+
[show]
|
|
97
|
+
);
|
|
98
|
+
const value = useMemo(
|
|
99
|
+
() => ({
|
|
100
|
+
show: handleShow
|
|
101
|
+
}),
|
|
102
|
+
[handleShow]
|
|
103
|
+
);
|
|
104
|
+
return /* @__PURE__ */ jsxs(PromptModalContext.Provider, { value, children: [
|
|
105
|
+
props.children,
|
|
106
|
+
/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(Modal, { onKeyDown: focusTrap, ref: modalRef, children: [
|
|
107
|
+
/* @__PURE__ */ jsxs(ModalHeader, { children: [
|
|
108
|
+
/* @__PURE__ */ jsx(
|
|
109
|
+
Show,
|
|
110
|
+
{
|
|
111
|
+
when: palette === "danger",
|
|
112
|
+
fallback: /* @__PURE__ */ jsx(ModalIcon, { palette: "action", children: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }) }),
|
|
113
|
+
children: /* @__PURE__ */ jsx(ModalIcon, { palette: "danger", children: /* @__PURE__ */ jsx(PromptIcon, { size: 24 }) })
|
|
114
|
+
}
|
|
115
|
+
),
|
|
116
|
+
/* @__PURE__ */ jsx(ModalHeading, { children: content?.heading }),
|
|
117
|
+
/* @__PURE__ */ jsx(ModalDescription, { children: content?.description })
|
|
118
|
+
] }),
|
|
119
|
+
/* @__PURE__ */ jsx(
|
|
120
|
+
"div",
|
|
121
|
+
{
|
|
122
|
+
className: vstack({
|
|
123
|
+
alignItems: "flex-start",
|
|
124
|
+
mt: "4",
|
|
125
|
+
mb: "8"
|
|
126
|
+
}),
|
|
127
|
+
children: /* @__PURE__ */ jsxs(Field, { invalid: !isValid, children: [
|
|
128
|
+
/* @__PURE__ */ jsxs(Label, { htmlFor: "confirm", size: "md", children: [
|
|
129
|
+
"Type",
|
|
130
|
+
/* @__PURE__ */ jsx(
|
|
131
|
+
"strong",
|
|
132
|
+
{
|
|
133
|
+
className: css({
|
|
134
|
+
textTransform: "uppercase"
|
|
135
|
+
}),
|
|
136
|
+
children: content?.key
|
|
137
|
+
}
|
|
138
|
+
),
|
|
139
|
+
"to confirm"
|
|
140
|
+
] }),
|
|
141
|
+
/* @__PURE__ */ jsx(
|
|
142
|
+
Input,
|
|
143
|
+
{
|
|
144
|
+
id: "confirm",
|
|
145
|
+
name: "confirm",
|
|
146
|
+
onChange: handleChange,
|
|
147
|
+
type: "text"
|
|
148
|
+
}
|
|
149
|
+
)
|
|
150
|
+
] })
|
|
151
|
+
}
|
|
152
|
+
),
|
|
153
|
+
/* @__PURE__ */ jsxs(
|
|
154
|
+
"div",
|
|
155
|
+
{
|
|
156
|
+
className: hstack({
|
|
157
|
+
justifyContent: "stretch",
|
|
158
|
+
gap: "4"
|
|
159
|
+
}),
|
|
160
|
+
children: [
|
|
161
|
+
/* @__PURE__ */ jsx(
|
|
162
|
+
Button,
|
|
163
|
+
{
|
|
164
|
+
autoFocus: true,
|
|
165
|
+
className: css({
|
|
166
|
+
w: "1/2"
|
|
167
|
+
}),
|
|
168
|
+
disabled: !isValid,
|
|
169
|
+
name: "confirm",
|
|
170
|
+
onClick: handleChoice,
|
|
171
|
+
palette,
|
|
172
|
+
value: "true",
|
|
173
|
+
children: content?.actionText
|
|
174
|
+
}
|
|
175
|
+
),
|
|
176
|
+
/* @__PURE__ */ jsx(
|
|
177
|
+
Button,
|
|
178
|
+
{
|
|
179
|
+
className: css({
|
|
180
|
+
w: "1/2"
|
|
181
|
+
}),
|
|
182
|
+
name: "cancel",
|
|
183
|
+
onClick: handleChoice,
|
|
184
|
+
usage: "outlined",
|
|
185
|
+
value: "false",
|
|
186
|
+
children: content?.cancelText
|
|
187
|
+
}
|
|
188
|
+
)
|
|
189
|
+
]
|
|
190
|
+
}
|
|
191
|
+
)
|
|
192
|
+
] }) })
|
|
193
|
+
] });
|
|
194
|
+
}
|
|
195
|
+
function usePromptModal() {
|
|
196
|
+
const context = useContext(PromptModalContext);
|
|
197
|
+
if (context === null) {
|
|
198
|
+
throw new Error("usePromptModal must be used within a PromptModal Provider");
|
|
199
|
+
}
|
|
200
|
+
return context;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
export {
|
|
204
|
+
PromptModal,
|
|
205
|
+
usePromptModal
|
|
206
|
+
};
|
|
207
|
+
//# sourceMappingURL=chunk-WWG5QWXY.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-design/styled-system/css'\nimport { hstack, vstack } from '@cerberus-design/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-7KJIZIAU.js";
|
|
4
4
|
|
|
5
5
|
// src/components/TabList.tsx
|
|
6
6
|
import { cx } from "@cerberus/styled-system/css";
|
|
@@ -8,7 +8,7 @@ import { hstack } from "@cerberus/styled-system/patterns";
|
|
|
8
8
|
import { jsx } from "react/jsx-runtime";
|
|
9
9
|
function TabList(props) {
|
|
10
10
|
const { description, ...nativeProps } = props;
|
|
11
|
-
const { id } = useTabsContext();
|
|
11
|
+
const { id, styles } = useTabsContext();
|
|
12
12
|
return /* @__PURE__ */ jsx(
|
|
13
13
|
"div",
|
|
14
14
|
{
|
|
@@ -17,11 +17,9 @@ function TabList(props) {
|
|
|
17
17
|
className: cx(
|
|
18
18
|
nativeProps.className,
|
|
19
19
|
hstack({
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
w: "full"
|
|
24
|
-
})
|
|
20
|
+
gap: "0"
|
|
21
|
+
}),
|
|
22
|
+
styles.tabList
|
|
25
23
|
),
|
|
26
24
|
id: id ?? nativeProps.id
|
|
27
25
|
}
|
|
@@ -31,4 +29,4 @@ function TabList(props) {
|
|
|
31
29
|
export {
|
|
32
30
|
TabList
|
|
33
31
|
};
|
|
34
|
-
//# sourceMappingURL=chunk-
|
|
32
|
+
//# sourceMappingURL=chunk-X2JMXTBH.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/TabList.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\n/**\n * This module provides a TabList component.\n * @module\n */\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\n * @example\n * ```tsx\n * <TabList description=\"Button details\">\n * <Tab id=\"overview\">Overview</Tab>\n * <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * ```\n */\nexport function TabList(props: PropsWithChildren<TabListProps>) {\n const { description, ...nativeProps } = props\n const { id } = useTabsContext()\n\n return (\n <div\n {...nativeProps}\n aria-describedby={description}\n className={cx(\n nativeProps.className,\n hstack({\n
|
|
1
|
+
{"version":3,"sources":["../../src/components/TabList.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { useTabsContext } from '../context/tabs'\n\n/**\n * This module provides a TabList component.\n * @module\n */\n\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n description: string\n}\n\n/**\n * The TabList component provides a container for tab elements.\n * @param description - a description of what the tab list contains\n * @example\n * ```tsx\n * <TabList description=\"Button details\">\n * <Tab id=\"overview\">Overview</Tab>\n * <Tab id=\"guidelines\">Guidelines</Tab>\n * </TabList>\n * ```\n */\nexport function TabList(props: PropsWithChildren<TabListProps>) {\n const { description, ...nativeProps } = props\n const { id, styles } = useTabsContext()\n\n return (\n <div\n {...nativeProps}\n aria-describedby={description}\n className={cx(\n nativeProps.className,\n hstack({\n gap: '0',\n }),\n styles.tabList,\n )}\n id={id ?? nativeProps.id}\n />\n )\n}\n"],"mappings":";;;;;AAEA,SAAS,UAAU;AACnB,SAAS,cAAc;AA6BnB;AALG,SAAS,QAAQ,OAAwC;AAC9D,QAAM,EAAE,aAAa,GAAG,YAAY,IAAI;AACxC,QAAM,EAAE,IAAI,OAAO,IAAI,eAAe;AAEtC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA,IAAI,MAAM,YAAY;AAAA;AAAA,EACxB;AAEJ;","names":[]}
|
|
@@ -9,7 +9,7 @@ import { iconButton, tag } from "@cerberus/styled-system/recipes";
|
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
10
|
function Tag(props) {
|
|
11
11
|
const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props;
|
|
12
|
-
const palette = props?.palette ?? "
|
|
12
|
+
const palette = props?.palette ?? "page";
|
|
13
13
|
const isClosable = Boolean(onClick);
|
|
14
14
|
const shape = isClosable ? "pill" : initShape;
|
|
15
15
|
const closableStyles = isClosable ? closableCss : "";
|
|
@@ -55,4 +55,4 @@ var closableCss = css({
|
|
|
55
55
|
export {
|
|
56
56
|
Tag
|
|
57
57
|
};
|
|
58
|
-
//# sourceMappingURL=chunk-
|
|
58
|
+
//# sourceMappingURL=chunk-Z6IWNVPN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Tag.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { Close } from '@cerberus/icons'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { iconButton, tag } from '@cerberus/styled-system/recipes'\nimport type { RecipeVariantProps } from '@cerberus/styled-system/types'\n\n/**\n * This module contains the tag component.\n * @module\n */\n\nexport type TagRecipeProps = RecipeVariantProps<typeof tag>\n\nexport type StaticTagProps = HTMLAttributes<HTMLSpanElement> &\n TagRecipeProps & {\n onClick?: never\n }\n\nexport type ClickableTagProps = HTMLAttributes<HTMLSpanElement> & {\n gradient?: never\n palette?: never\n onClick: () => void\n shape: 'pill'\n usage: 'filled'\n}\n\nexport type TagProps = StaticTagProps | ClickableTagProps\n\n/**\n * The Tag component is used to display a meta descriptions.\n * @definition [Tag docs](https://cerberus.digitalu.design/react/tags)\n * @example\n * ```tsx\n * <Tag>Tag</Tag>\n * ```\n */\nexport function Tag(props: PropsWithChildren<TagProps>): JSX.Element {\n const { shape: initShape, gradient, onClick, usage, ...nativeProps } = props\n const palette = props?.palette ?? 'page'\n const isClosable = Boolean(onClick)\n const shape = isClosable ? 'pill' : initShape\n const closableStyles = isClosable ? closableCss : ''\n\n return (\n <span\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tag({\n gradient,\n palette,\n shape,\n usage,\n }),\n closableStyles,\n )}\n >\n {props.children}\n\n <Show when={isClosable}>\n <button\n aria-label=\"Close\"\n className={iconButton({\n palette: 'action',\n usage: 'filled',\n size: 'sm',\n })}\n onClick={onClick}\n >\n <Close />\n </button>\n </Show>\n </span>\n )\n}\n\nconst closableCss = css({\n bgColor: 'action.bg.active',\n color: 'action.text.initial',\n paddingInlineEnd: '0',\n})\n"],"mappings":";;;;;AACA,SAAS,aAAa;AAEtB,SAAS,KAAK,UAAU;AACxB,SAAS,YAAY,WAAW;AAyC5B,SAyBM,KAzBN;AARG,SAAS,IAAI,OAAiD;AACnE,QAAM,EAAE,OAAO,WAAW,UAAU,SAAS,OAAO,GAAG,YAAY,IAAI;AACvE,QAAM,UAAU,OAAO,WAAW;AAClC,QAAM,aAAa,QAAQ,OAAO;AAClC,QAAM,QAAQ,aAAa,SAAS;AACpC,QAAM,iBAAiB,aAAa,cAAc;AAElD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,IAAI;AAAA,UACF;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MAEC;AAAA,cAAM;AAAA,QAEP,oBAAC,QAAK,MAAM,YACV;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,WAAW;AAAA,cACpB,SAAS;AAAA,cACT,OAAO;AAAA,cACP,MAAM;AAAA,YACR,CAAC;AAAA,YACD;AAAA,YAEA,8BAAC,SAAM;AAAA;AAAA,QACT,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAM,cAAc,IAAI;AAAA,EACtB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,kBAAkB;AACpB,CAAC;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
Input
|
|
4
|
-
} from "../chunk-
|
|
5
|
-
import "../chunk-ZAU4JVLL.js";
|
|
4
|
+
} from "../chunk-5GEC53G7.js";
|
|
6
5
|
import "../chunk-4O4QFF4S.js";
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
6
|
+
import "../chunk-ZAU4JVLL.js";
|
|
7
|
+
import "../chunk-6TXQZ3PB.js";
|
|
8
|
+
import "../chunk-C45DY4VE.js";
|
|
9
9
|
export {
|
|
10
10
|
Input
|
|
11
11
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import {
|
|
3
3
|
Toggle
|
|
4
|
-
} from "../chunk-
|
|
4
|
+
} from "../chunk-TAZI77TP.js";
|
|
5
5
|
import "../chunk-ZAU4JVLL.js";
|
|
6
|
-
import "../chunk-
|
|
7
|
-
import "../chunk-
|
|
6
|
+
import "../chunk-6TXQZ3PB.js";
|
|
7
|
+
import "../chunk-C45DY4VE.js";
|
|
8
8
|
export {
|
|
9
9
|
Toggle
|
|
10
10
|
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
ConfirmModal,
|
|
4
|
+
useConfirmModal
|
|
5
|
+
} from "../chunk-TAVCJ54A.js";
|
|
6
|
+
import "../chunk-4CAT3FHV.js";
|
|
7
|
+
import "../chunk-TPFNVGYA.js";
|
|
8
|
+
import "../chunk-UPODPCRD.js";
|
|
9
|
+
import "../chunk-2F5TB2EV.js";
|
|
10
|
+
import "../chunk-OGSAAB6K.js";
|
|
11
|
+
import "../chunk-G3JEWPLM.js";
|
|
12
|
+
import "../chunk-2ATICEW3.js";
|
|
13
|
+
import "../chunk-4O4QFF4S.js";
|
|
14
|
+
import "../chunk-JIZQFTW6.js";
|
|
15
|
+
import "../chunk-6TXQZ3PB.js";
|
|
16
|
+
import "../chunk-C45DY4VE.js";
|
|
17
|
+
import "../chunk-C5HLLGME.js";
|
|
18
|
+
export {
|
|
19
|
+
ConfirmModal,
|
|
20
|
+
useConfirmModal
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=confirm-modal.js.map
|