@cerberus-design/react 0.6.1-next-0345599 → 0.6.1-next-1315bf2
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 +147 -3
- 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-3CBN7U25.js → chunk-3TYUA4C7.js} +6 -3
- package/build/legacy/chunk-3TYUA4C7.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-5RA3ZIXA.js} +2 -2
- package/build/legacy/{chunk-5XNLWIZO.js → chunk-EVEEQRH6.js} +2 -2
- package/build/legacy/chunk-EVEEQRH6.js.map +1 -0
- package/build/{modern/chunk-HE3HFKYU.js → legacy/chunk-JJGZRBIR.js} +2 -2
- package/build/legacy/{chunk-HE3HFKYU.js.map → chunk-JJGZRBIR.js.map} +1 -1
- package/build/legacy/chunk-KESKDLX6.js +30 -0
- package/build/legacy/chunk-KESKDLX6.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-SCAVVE6E.js +16 -0
- package/build/legacy/chunk-SCAVVE6E.js.map +1 -0
- package/build/legacy/{chunk-734PGVLT.js → chunk-VLVKNEA5.js} +2 -2
- package/build/legacy/chunk-VULPMZUW.js +18 -0
- package/build/legacy/chunk-VULPMZUW.js.map +1 -0
- package/build/legacy/chunk-YRUUO4AP.js +166 -0
- package/build/legacy/chunk-YRUUO4AP.js.map +1 -0
- package/build/legacy/components/FeatureFlag.js +10 -0
- package/build/legacy/components/FeatureFlag.js.map +1 -0
- package/build/legacy/components/Input.js +3 -3
- package/build/legacy/components/Label.js +1 -1
- 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/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 +16 -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/index.js +50 -26
- package/build/modern/_tsup-dts-rollup.d.ts +147 -3
- 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-3CBN7U25.js → chunk-3TYUA4C7.js} +6 -3
- package/build/modern/chunk-3TYUA4C7.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-5RA3ZIXA.js} +2 -2
- package/build/modern/chunk-BVK6GEDZ.js +164 -0
- package/build/modern/chunk-BVK6GEDZ.js.map +1 -0
- package/build/modern/chunk-JIZQFTW6.js +29 -0
- package/build/modern/chunk-JIZQFTW6.js.map +1 -0
- package/build/{legacy/chunk-HE3HFKYU.js → modern/chunk-JJGZRBIR.js} +2 -2
- package/build/modern/{chunk-HE3HFKYU.js.map → chunk-JJGZRBIR.js.map} +1 -1
- 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-SCAVVE6E.js +16 -0
- package/build/modern/chunk-SCAVVE6E.js.map +1 -0
- package/build/modern/{chunk-734PGVLT.js → chunk-VLVKNEA5.js} +2 -2
- package/build/modern/chunk-VULPMZUW.js +18 -0
- package/build/modern/chunk-VULPMZUW.js.map +1 -0
- 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 +3 -3
- package/build/modern/components/Label.js +1 -1
- 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/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 +16 -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/index.js +50 -26
- 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/NavMenuList.tsx +1 -1
- package/src/components/Portal.tsx +22 -0
- package/src/components/Tag.tsx +1 -1
- package/src/config/cerbIcons.ts +9 -2
- package/src/config/defineIcons.ts +6 -3
- package/src/context/confirm-modal.tsx +205 -0
- package/src/context/feature-flags.tsx +60 -0
- package/src/index.ts +5 -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-G2QMBSK5.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-G2QMBSK5.js.map +0 -1
- package/build/modern/chunk-SLIOCQBZ.js.map +0 -1
- /package/build/legacy/{chunk-X4YQ27D5.js.map → chunk-5RA3ZIXA.js.map} +0 -0
- /package/build/legacy/{chunk-734PGVLT.js.map → chunk-VLVKNEA5.js.map} +0 -0
- /package/build/modern/{chunk-X4YQ27D5.js.map → chunk-5RA3ZIXA.js.map} +0 -0
- /package/build/modern/{chunk-734PGVLT.js.map → chunk-VLVKNEA5.js.map} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
2
|
defaultIcons
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-SCAVVE6E.js";
|
|
4
4
|
|
|
5
5
|
// src/config/defineIcons.ts
|
|
6
6
|
function _validateIconsProperties(icons) {
|
|
@@ -12,7 +12,10 @@ function _validateIconsProperties(icons) {
|
|
|
12
12
|
}
|
|
13
13
|
function defineIcons(icons) {
|
|
14
14
|
_validateIconsProperties(icons);
|
|
15
|
-
$cerberusIcons =
|
|
15
|
+
$cerberusIcons = {
|
|
16
|
+
...defaultIcons,
|
|
17
|
+
...icons
|
|
18
|
+
};
|
|
16
19
|
return $cerberusIcons;
|
|
17
20
|
}
|
|
18
21
|
var $cerberusIcons = defaultIcons;
|
|
@@ -21,4 +24,4 @@ export {
|
|
|
21
24
|
defineIcons,
|
|
22
25
|
$cerberusIcons
|
|
23
26
|
};
|
|
24
|
-
//# sourceMappingURL=chunk-
|
|
27
|
+
//# sourceMappingURL=chunk-3TYUA4C7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/config/defineIcons.ts"],"sourcesContent":["import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n"],"mappings":";;;;;AAEA,SAAS,yBAAyB,OAAqB;AACrD,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEO,SAAS,YAAY,OAA6C;AACvE,2BAAyB,KAAK;AAC9B,mBAAiB;AAAA,IACf,GAAG;AAAA,IACH,GAAG;AAAA,EACL;AACA,SAAO;AACT;AAIO,IAAI,iBAAiB;","names":[]}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// src/components/Portal.tsx
|
|
2
|
+
import { createPortal } from "react-dom";
|
|
3
|
+
function Portal(props) {
|
|
4
|
+
const container = props.container || document.body;
|
|
5
|
+
return createPortal(props.children, container, props.key);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export {
|
|
9
|
+
Portal
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=chunk-4CAT3FHV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Portal.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * This module is the Portal component.\n * @module\n */\n\nexport interface PortalProps {\n container?: Element | DocumentFragment\n key?: null | string\n}\n\n/**\n * The Portal component is used to render children into a DOM node that exists outside the DOM hierarchy of the parent component.\n * @param container - The props for the Portal component.\n * @returns ReactPortal\n */\nexport function Portal(props: PropsWithChildren<PortalProps>) {\n const container = props.container || document.body\n return createPortal(props.children, container, props.key)\n}\n"],"mappings":";AACA,SAAS,oBAAoB;AAiBtB,SAAS,OAAO,OAAuC;AAC5D,QAAM,YAAY,MAAM,aAAa,SAAS;AAC9C,SAAO,aAAa,MAAM,UAAU,WAAW,MAAM,GAAG;AAC1D;","names":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
// src/context/feature-flags.tsx
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
var FeatureFlagContext = createContext(null);
|
|
5
|
+
function FeatureFlags(props) {
|
|
6
|
+
return /* @__PURE__ */ jsx(FeatureFlagContext.Provider, { value: props.flags, children: props.children });
|
|
7
|
+
}
|
|
8
|
+
function useFeatureFlags(key) {
|
|
9
|
+
const context = useContext(FeatureFlagContext);
|
|
10
|
+
if (context === null) {
|
|
11
|
+
throw new Error(
|
|
12
|
+
"useFeatureFlag must be used within a FeatureFlags Provider"
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
return context[key] ?? false;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export {
|
|
19
|
+
FeatureFlags,
|
|
20
|
+
useFeatureFlags
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=chunk-4M3EUP57.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/context/feature-flags.tsx"],"sourcesContent":["'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\n\n/**\n * This module provides a context and hook for feature flags.\n * @module\n */\n\nexport interface FeatureFlagValue {\n [key: string]: boolean\n}\n\nconst FeatureFlagContext = createContext<FeatureFlagValue | null>(null)\n\nexport interface FeatureFlagProviderProps {\n flags: FeatureFlagValue\n}\n\n/**\n * Provides feature flags to the application.\n * @param flags - The flags data for the provider.\n * @example\n * ```tsx\n * // This should be a JSON file or a server response.\n * const flags = {\n * featureOne: true,\n * featureTwo: false\n * }\n *\n * // Wrap the Provider around the root of your application.\n * <FeatureFlags flags={flags}>\n * <FeatureFlag flag=\"featureOne\">\n * This is visible.\n * </FeatureFlag>\n * <FeatureFlag flag=\"featureTwo\">\n * This is hidden.\n * </FeatureFlag>\n * </FeatureFlags>\n * ```\n */\nexport function FeatureFlags(\n props: PropsWithChildren<FeatureFlagProviderProps>,\n) {\n return (\n <FeatureFlagContext.Provider value={props.flags}>\n {props.children}\n </FeatureFlagContext.Provider>\n )\n}\n\nexport function useFeatureFlags(key: string): boolean {\n const context = useContext(FeatureFlagContext)\n if (context === null) {\n throw new Error(\n 'useFeatureFlag must be used within a FeatureFlags Provider',\n )\n }\n return context[key] ?? false\n}\n"],"mappings":";AAEA,SAAS,eAAe,kBAA0C;AA2C9D;AAhCJ,IAAM,qBAAqB,cAAuC,IAAI;AA4B/D,SAAS,aACd,OACA;AACA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,MAAM,OACvC,gBAAM,UACT;AAEJ;AAEO,SAAS,gBAAgB,KAAsB;AACpD,QAAM,UAAU,WAAW,kBAAkB;AAC7C,MAAI,YAAY,MAAM;AACpB,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO,QAAQ,GAAG,KAAK;AACzB;","names":[]}
|
|
@@ -6,7 +6,7 @@ import {
|
|
|
6
6
|
} from "./chunk-4O4QFF4S.js";
|
|
7
7
|
import {
|
|
8
8
|
$cerberusIcons
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-3TYUA4C7.js";
|
|
10
10
|
|
|
11
11
|
// src/components/Input.tsx
|
|
12
12
|
import { input } from "@cerberus/styled-system/recipes";
|
|
@@ -39,4 +39,4 @@ function Input(props) {
|
|
|
39
39
|
export {
|
|
40
40
|
Input
|
|
41
41
|
};
|
|
42
|
-
//# sourceMappingURL=chunk-
|
|
42
|
+
//# sourceMappingURL=chunk-5RA3ZIXA.js.map
|
|
@@ -0,0 +1,164 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Portal
|
|
3
|
+
} from "./chunk-4CAT3FHV.js";
|
|
4
|
+
import {
|
|
5
|
+
Button
|
|
6
|
+
} from "./chunk-2ATICEW3.js";
|
|
7
|
+
import {
|
|
8
|
+
Show
|
|
9
|
+
} from "./chunk-4O4QFF4S.js";
|
|
10
|
+
import {
|
|
11
|
+
trapFocus
|
|
12
|
+
} from "./chunk-JIZQFTW6.js";
|
|
13
|
+
import {
|
|
14
|
+
$cerberusIcons
|
|
15
|
+
} from "./chunk-3TYUA4C7.js";
|
|
16
|
+
|
|
17
|
+
// src/context/confirm-modal.tsx
|
|
18
|
+
import {
|
|
19
|
+
createContext,
|
|
20
|
+
useCallback,
|
|
21
|
+
useContext,
|
|
22
|
+
useMemo,
|
|
23
|
+
useRef,
|
|
24
|
+
useState
|
|
25
|
+
} from "react";
|
|
26
|
+
import { css, cx } from "@cerberus-design/styled-system/css";
|
|
27
|
+
import { circle, hstack, vstack } from "@cerberus-design/styled-system/patterns";
|
|
28
|
+
import {
|
|
29
|
+
confirmModal
|
|
30
|
+
} from "@cerberus-design/styled-system/recipes";
|
|
31
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
32
|
+
var ConfirmModalContext = createContext(null);
|
|
33
|
+
function ConfirmModal(props) {
|
|
34
|
+
const dialogRef = useRef(null);
|
|
35
|
+
const resolveRef = useRef(null);
|
|
36
|
+
const [content, setContent] = useState(null);
|
|
37
|
+
const focusTrap = trapFocus(dialogRef);
|
|
38
|
+
const palette = useMemo(
|
|
39
|
+
() => content?.kind === "destructive" ? "danger" : "action",
|
|
40
|
+
[content]
|
|
41
|
+
);
|
|
42
|
+
const styles = confirmModal({ palette });
|
|
43
|
+
const handleChoice = useCallback((e) => {
|
|
44
|
+
const target = e.currentTarget;
|
|
45
|
+
if (target.value === "true") {
|
|
46
|
+
resolveRef.current?.(true);
|
|
47
|
+
}
|
|
48
|
+
resolveRef.current?.(false);
|
|
49
|
+
dialogRef?.current?.close();
|
|
50
|
+
}, []);
|
|
51
|
+
const handleShow = useCallback((options) => {
|
|
52
|
+
return new Promise((resolve) => {
|
|
53
|
+
setContent({ ...options, kind: options.kind || "non-destructive" });
|
|
54
|
+
dialogRef?.current?.showModal();
|
|
55
|
+
resolveRef.current = resolve;
|
|
56
|
+
});
|
|
57
|
+
}, []);
|
|
58
|
+
const value = useMemo(
|
|
59
|
+
() => ({
|
|
60
|
+
show: handleShow
|
|
61
|
+
}),
|
|
62
|
+
[handleShow]
|
|
63
|
+
);
|
|
64
|
+
return /* @__PURE__ */ jsxs(ConfirmModalContext.Provider, { value, children: [
|
|
65
|
+
props.children,
|
|
66
|
+
/* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs("dialog", { className: styles.dialog, onKeyDown: focusTrap, ref: dialogRef, children: [
|
|
67
|
+
/* @__PURE__ */ jsxs(
|
|
68
|
+
"div",
|
|
69
|
+
{
|
|
70
|
+
className: vstack({
|
|
71
|
+
alignItems: "flex-start",
|
|
72
|
+
gap: "4",
|
|
73
|
+
mb: "8"
|
|
74
|
+
}),
|
|
75
|
+
children: [
|
|
76
|
+
/* @__PURE__ */ jsx(ConfirmModalIcon, { palette }),
|
|
77
|
+
/* @__PURE__ */ jsx("h2", { className: styles.heading, children: content?.heading }),
|
|
78
|
+
/* @__PURE__ */ jsx("p", { className: styles.description, children: content?.description })
|
|
79
|
+
]
|
|
80
|
+
}
|
|
81
|
+
),
|
|
82
|
+
/* @__PURE__ */ jsxs(
|
|
83
|
+
"div",
|
|
84
|
+
{
|
|
85
|
+
className: hstack({
|
|
86
|
+
justifyContent: "stretch",
|
|
87
|
+
gap: "4"
|
|
88
|
+
}),
|
|
89
|
+
children: [
|
|
90
|
+
/* @__PURE__ */ jsx(
|
|
91
|
+
Button,
|
|
92
|
+
{
|
|
93
|
+
autoFocus: true,
|
|
94
|
+
className: css({
|
|
95
|
+
w: "1/2"
|
|
96
|
+
}),
|
|
97
|
+
name: "confirm",
|
|
98
|
+
onClick: handleChoice,
|
|
99
|
+
palette,
|
|
100
|
+
value: "true",
|
|
101
|
+
children: content?.actionText
|
|
102
|
+
}
|
|
103
|
+
),
|
|
104
|
+
/* @__PURE__ */ jsx(
|
|
105
|
+
Button,
|
|
106
|
+
{
|
|
107
|
+
className: css({
|
|
108
|
+
w: "1/2"
|
|
109
|
+
}),
|
|
110
|
+
name: "cancel",
|
|
111
|
+
onClick: handleChoice,
|
|
112
|
+
usage: "outlined",
|
|
113
|
+
value: "false",
|
|
114
|
+
children: content?.cancelText
|
|
115
|
+
}
|
|
116
|
+
)
|
|
117
|
+
]
|
|
118
|
+
}
|
|
119
|
+
)
|
|
120
|
+
] }) })
|
|
121
|
+
] });
|
|
122
|
+
}
|
|
123
|
+
function ConfirmModalIcon(props) {
|
|
124
|
+
const InfoIcon = $cerberusIcons.confirmModal;
|
|
125
|
+
return /* @__PURE__ */ jsx(
|
|
126
|
+
Show,
|
|
127
|
+
{
|
|
128
|
+
when: props.palette === "danger",
|
|
129
|
+
fallback: /* @__PURE__ */ jsx("div", { className: cx(confirmModal().icon, circle()), children: /* @__PURE__ */ jsx(InfoIcon, {}) }),
|
|
130
|
+
children: /* @__PURE__ */ jsx(
|
|
131
|
+
"div",
|
|
132
|
+
{
|
|
133
|
+
className: cx(
|
|
134
|
+
confirmModal({
|
|
135
|
+
palette: "danger"
|
|
136
|
+
}).icon,
|
|
137
|
+
circle({
|
|
138
|
+
bgColor: "danger.surface.initial"
|
|
139
|
+
})
|
|
140
|
+
),
|
|
141
|
+
style: {
|
|
142
|
+
color: "var(--cerberus-colors-danger-text-100)"
|
|
143
|
+
},
|
|
144
|
+
children: /* @__PURE__ */ jsx(InfoIcon, {})
|
|
145
|
+
}
|
|
146
|
+
)
|
|
147
|
+
}
|
|
148
|
+
);
|
|
149
|
+
}
|
|
150
|
+
function useConfirmModal() {
|
|
151
|
+
const context = useContext(ConfirmModalContext);
|
|
152
|
+
if (context === null) {
|
|
153
|
+
throw new Error(
|
|
154
|
+
"useConfirmModal must be used within a ConfirmModal Provider"
|
|
155
|
+
);
|
|
156
|
+
}
|
|
157
|
+
return context;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
export {
|
|
161
|
+
ConfirmModal,
|
|
162
|
+
useConfirmModal
|
|
163
|
+
};
|
|
164
|
+
//# sourceMappingURL=chunk-BVK6GEDZ.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, cx } from '@cerberus-design/styled-system/css'\nimport { circle, hstack, vstack } from '@cerberus-design/styled-system/patterns'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport {\n confirmModal,\n type ConfirmModalVariantProps,\n} from '@cerberus-design/styled-system/recipes'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\nimport { Show } from '../components/Show'\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 dialogRef = useRef<HTMLDialogElement>(null)\n const resolveRef = useRef<ShowResult>(null)\n const [content, setContent] = useState<ShowConfirmModalOptions | null>(null)\n const focusTrap = trapFocus(dialogRef)\n\n const palette = useMemo(\n () => (content?.kind === 'destructive' ? 'danger' : 'action'),\n [content],\n )\n const styles = confirmModal({ palette })\n\n const handleChoice = useCallback((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 dialogRef?.current?.close()\n }, [])\n\n const handleShow = useCallback((options: ShowConfirmModalOptions) => {\n return new Promise<boolean>((resolve) => {\n setContent({ ...options, kind: options.kind || 'non-destructive' })\n dialogRef?.current?.showModal()\n resolveRef.current = resolve\n })\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 <dialog className={styles.dialog} onKeyDown={focusTrap} ref={dialogRef}>\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '4',\n mb: '8',\n })}\n >\n <ConfirmModalIcon palette={palette} />\n <h2 className={styles.heading}>{content?.heading}</h2>\n <p className={styles.description}>{content?.description}</p>\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 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 </dialog>\n </Portal>\n </ConfirmModalContext.Provider>\n )\n}\n\n// This is to help show the variant styles for the icon since Panda is\n// not syncing correctly for the danger variant.\nfunction ConfirmModalIcon(props: ConfirmModalVariantProps) {\n const InfoIcon = $cerberusIcons.confirmModal\n return (\n <Show\n when={props.palette === 'danger'}\n fallback={\n <div className={cx(confirmModal().icon, circle())}>\n <InfoIcon />\n </div>\n }\n >\n <div\n className={cx(\n confirmModal({\n palette: 'danger',\n }).icon,\n circle({\n bgColor: 'danger.surface.initial',\n }),\n )}\n style={{\n color: 'var(--cerberus-colors-danger-text-100)',\n }}\n >\n <InfoIcon />\n </div>\n </Show>\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":[]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
// src/aria-helpers/trap-focus.aria.ts
|
|
2
|
+
function trapFocus(modalRef) {
|
|
3
|
+
const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
|
|
4
|
+
const focusable = Array.from(
|
|
5
|
+
modalRef.current?.querySelectorAll(focusableElements) ?? []
|
|
6
|
+
);
|
|
7
|
+
const firstFocusable = focusable[0];
|
|
8
|
+
const lastFocusable = focusable[focusable.length - 1];
|
|
9
|
+
return function handleKeyDown(event) {
|
|
10
|
+
if (event.key === "Tab") {
|
|
11
|
+
if (event.shiftKey) {
|
|
12
|
+
if (document.activeElement === firstFocusable) {
|
|
13
|
+
lastFocusable.focus();
|
|
14
|
+
event.preventDefault();
|
|
15
|
+
}
|
|
16
|
+
} else {
|
|
17
|
+
if (document.activeElement === lastFocusable) {
|
|
18
|
+
firstFocusable.focus();
|
|
19
|
+
event.preventDefault();
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export {
|
|
27
|
+
trapFocus
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=chunk-JIZQFTW6.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/aria-helpers/trap-focus.aria.ts"],"sourcesContent":["import type { KeyboardEvent, KeyboardEventHandler, RefObject } from 'react'\n\nexport function trapFocus(\n modalRef: RefObject<HTMLDialogElement>,\n): KeyboardEventHandler<HTMLDialogElement> {\n const focusableElements =\n 'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])'\n const focusable = Array.from(\n modalRef.current?.querySelectorAll(focusableElements) ?? [],\n )\n const firstFocusable = focusable[0] as HTMLElement\n const lastFocusable = focusable[focusable.length - 1] as HTMLElement\n\n return function handleKeyDown(event: KeyboardEvent<HTMLDialogElement>) {\n if (event.key === 'Tab') {\n if (event.shiftKey) {\n if (document.activeElement === firstFocusable) {\n lastFocusable.focus()\n event.preventDefault()\n }\n } else {\n if (document.activeElement === lastFocusable) {\n firstFocusable.focus()\n event.preventDefault()\n }\n }\n }\n }\n}\n"],"mappings":";AAEO,SAAS,UACd,UACyC;AACzC,QAAM,oBACJ;AACF,QAAM,YAAY,MAAM;AAAA,IACtB,SAAS,SAAS,iBAAiB,iBAAiB,KAAK,CAAC;AAAA,EAC5D;AACA,QAAM,iBAAiB,UAAU,CAAC;AAClC,QAAM,gBAAgB,UAAU,UAAU,SAAS,CAAC;AAEpD,SAAO,SAAS,cAAc,OAAyC;AACrE,QAAI,MAAM,QAAQ,OAAO;AACvB,UAAI,MAAM,UAAU;AAClB,YAAI,SAAS,kBAAkB,gBAAgB;AAC7C,wBAAc,MAAM;AACpB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF,OAAO;AACL,YAAI,SAAS,kBAAkB,eAAe;AAC5C,yBAAe,MAAM;AACrB,gBAAM,eAAe;AAAA,QACvB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
|
|
@@ -32,7 +32,7 @@ function Label(props) {
|
|
|
32
32
|
"span",
|
|
33
33
|
{
|
|
34
34
|
className: css({
|
|
35
|
-
color: "
|
|
35
|
+
color: "page.text.100",
|
|
36
36
|
fontSize: "inherit"
|
|
37
37
|
}),
|
|
38
38
|
children: "(required)"
|
|
@@ -46,4 +46,4 @@ function Label(props) {
|
|
|
46
46
|
export {
|
|
47
47
|
Label
|
|
48
48
|
};
|
|
49
|
-
//# sourceMappingURL=chunk-
|
|
49
|
+
//# sourceMappingURL=chunk-JJGZRBIR.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n htmlFor: string\n hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n * <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n const { hidden, size, ...nativeProps } = props\n const { required, disabled } = useFieldContext()\n const usage = hidden ? 'hidden' : 'visible'\n\n return (\n <label\n {...nativeProps}\n data-disabled={disabled}\n className={cx(\n nativeProps.className,\n label({ size, usage }),\n hstack({\n justify: 'space-between',\n }),\n )}\n >\n {props.children}\n <Show when={required}>\n <span\n className={css({\n color: '
|
|
1
|
+
{"version":3,"sources":["../../src/components/Label.tsx"],"sourcesContent":["'use client'\n\nimport type { HTMLAttributes, PropsWithChildren } from 'react'\nimport { label } from '@cerberus/styled-system/recipes'\nimport { css, cx, type RecipeVariantProps } from '@cerberus/styled-system/css'\nimport { hstack } from '@cerberus/styled-system/patterns'\nimport { useFieldContext } from '../context/field'\nimport { Show } from './Show'\n\n/**\n * This module contains the Label component.\n * @module\n */\n\nexport type LabelRecipeProps = RecipeVariantProps<typeof label>\nexport interface LabelBaseProps extends HTMLAttributes<HTMLLabelElement> {\n htmlFor: string\n hidden?: boolean\n}\nexport type LabelProps = LabelBaseProps & LabelRecipeProps\n\n/**\n * A screen ready friendly label component.\n * @definition [ARIA Forms](https://www.a11yproject.com/checklist/#forms)\n * @definition [Label docs](https://cerberus.digitalu.design/react/label)\n * @example\n * ```tsx\n * <Field required>\n * <Label htmlFor=\"test\">Test Label</Label>\n * </Field>\n * ```\n */\nexport function Label(props: PropsWithChildren<LabelProps>) {\n const { hidden, size, ...nativeProps } = props\n const { required, disabled } = useFieldContext()\n const usage = hidden ? 'hidden' : 'visible'\n\n return (\n <label\n {...nativeProps}\n data-disabled={disabled}\n className={cx(\n nativeProps.className,\n label({ size, usage }),\n hstack({\n justify: 'space-between',\n }),\n )}\n >\n {props.children}\n <Show when={required}>\n <span\n className={css({\n color: 'page.text.100',\n fontSize: 'inherit',\n })}\n >\n (required)\n </span>\n </Show>\n </label>\n )\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,aAAa;AACtB,SAAS,KAAK,UAAmC;AACjD,SAAS,cAAc;AAiCnB,SAaI,KAbJ;AANG,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,QAAQ,MAAM,GAAG,YAAY,IAAI;AACzC,QAAM,EAAE,UAAU,SAAS,IAAI,gBAAgB;AAC/C,QAAM,QAAQ,SAAS,WAAW;AAElC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe;AAAA,MACf,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM,EAAE,MAAM,MAAM,CAAC;AAAA,QACrB,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,MACH;AAAA,MAEC;AAAA,cAAM;AAAA,QACP,oBAAC,QAAK,MAAM,UACV;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,IAAI;AAAA,cACb,OAAO;AAAA,cACP,UAAU;AAAA,YACZ,CAAC;AAAA,YACF;AAAA;AAAA,QAED,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -32,7 +32,7 @@ function getPosition(position) {
|
|
|
32
32
|
}
|
|
33
33
|
var navListStyles = vstack({
|
|
34
34
|
alignItems: "flex-start",
|
|
35
|
-
bgColor: "
|
|
35
|
+
bgColor: "page.surface.100",
|
|
36
36
|
boxShadow: "lg",
|
|
37
37
|
gap: "2",
|
|
38
38
|
opacity: "0",
|
|
@@ -83,4 +83,4 @@ export {
|
|
|
83
83
|
getPosition,
|
|
84
84
|
NavMenuList
|
|
85
85
|
};
|
|
86
|
-
//# sourceMappingURL=chunk-
|
|
86
|
+
//# sourceMappingURL=chunk-PMCYXRAH.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { vstack } from '@cerberus/styled-system/patterns'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { Positions } from '../types'\nimport { Show } from './Show'\n\ninterface GetPositionResult {\n left: string\n right: string\n top: string\n bottom: string\n}\n\nexport function getPosition(position: Positions): GetPositionResult {\n const defaultPositions = {\n left: 'auto',\n right: 'auto',\n top: 'auto',\n bottom: 'auto',\n }\n switch (position) {\n case 'right':\n return { ...defaultPositions, top: '0%', left: '105%' }\n case 'left':\n return { ...defaultPositions, top: '0%', right: '105%' }\n case 'bottom':\n return { ...defaultPositions, top: '110%' }\n case 'top':\n return { ...defaultPositions, bottom: '110%' }\n default:\n return defaultPositions\n }\n}\n\nconst navListStyles = vstack({\n alignItems: 'flex-start',\n bgColor: 'page.surface.100',\n boxShadow: 'lg',\n gap: '2',\n opacity: '0',\n p: '4',\n position: 'absolute',\n rounded: 'md',\n zIndex: 'dropdown',\n _motionSafe: {\n animationName: 'zoomIn',\n animationDelay: '100ms',\n animationDuration: '150ms',\n animationFillMode: 'both',\n animationTimingFunction: 'ease-in-out',\n },\n _positionBottom: {\n transformOrigin: 'top left',\n },\n _positionTop: {\n transformOrigin: 'bottom left',\n },\n _positionLeft: {\n transformOrigin: 'top right',\n },\n _positionRight: {\n transformOrigin: 'top left',\n },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n id: string\n position?: Positions\n}\n\n/**\n * A component that allows the user to display a menu of navigation links.\n * @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n *\n * @example\n * ```tsx\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n * <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * ```\n **/\nexport function NavMenuList(props: NavMenuListProps): JSX.Element {\n const { position, ...nativeProps } = props\n const { menuRef, expanded } = useNavMenuContext()\n const locationStyles = useMemo(\n () => getPosition(position ?? 'bottom'),\n [position],\n )\n\n return (\n <Show when={expanded}>\n <ul\n {...nativeProps}\n data-position={position ?? 'bottom'}\n className={cx(nativeProps.className, navListStyles)}\n ref={menuRef}\n style={locationStyles}\n />\n </Show>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,eAAoC;AAC7C,SAAS,UAAU;AACnB,SAAS,cAAc;AA4FjB;AAhFC,SAAS,YAAY,UAAwC;AAClE,QAAM,mBAAmB;AAAA,IACvB,MAAM;AAAA,IACN,OAAO;AAAA,IACP,KAAK;AAAA,IACL,QAAQ;AAAA,EACV;AACA,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,MAAM,OAAO;AAAA,IACxD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,MAAM,OAAO,OAAO;AAAA,IACzD,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,KAAK,OAAO;AAAA,IAC5C,KAAK;AACH,aAAO,EAAE,GAAG,kBAAkB,QAAQ,OAAO;AAAA,IAC/C;AACE,aAAO;AAAA,EACX;AACF;AAEA,IAAM,gBAAgB,OAAO;AAAA,EAC3B,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,WAAW;AAAA,EACX,KAAK;AAAA,EACL,SAAS;AAAA,EACT,GAAG;AAAA,EACH,UAAU;AAAA,EACV,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AAAA,IACX,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,IACnB,mBAAmB;AAAA,IACnB,yBAAyB;AAAA,EAC3B;AAAA,EACA,iBAAiB;AAAA,IACf,iBAAiB;AAAA,EACnB;AAAA,EACA,cAAc;AAAA,IACZ,iBAAiB;AAAA,EACnB;AAAA,EACA,eAAe;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EACA,gBAAgB;AAAA,IACd,iBAAiB;AAAA,EACnB;AACF,CAAC;AAoBM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,iBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,oBAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,WAAW,GAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// src/config/cerbIcons.ts
|
|
2
|
+
import {
|
|
3
|
+
Checkmark,
|
|
4
|
+
Information,
|
|
5
|
+
WarningFilled
|
|
6
|
+
} from "@cerberus/icons";
|
|
7
|
+
var defaultIcons = {
|
|
8
|
+
confirmModal: Information,
|
|
9
|
+
invalid: WarningFilled,
|
|
10
|
+
toggleChecked: Checkmark
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export {
|
|
14
|
+
defaultIcons
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=chunk-SCAVVE6E.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/config/cerbIcons.ts"],"sourcesContent":["import {\n Checkmark,\n Information,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\n\nexport interface DefinedIcons {\n confirmModal?: CarbonIconType | ElementType\n invalid: CarbonIconType | ElementType\n toggleChecked?: CarbonIconType | ElementType\n}\n\nexport const defaultIcons: DefinedIcons = {\n confirmModal: Information,\n invalid: WarningFilled,\n toggleChecked: Checkmark,\n}\n"],"mappings":";AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AASA,IAAM,eAA6B;AAAA,EACxC,cAAc;AAAA,EACd,SAAS;AAAA,EACT,eAAe;AACjB;","names":[]}
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-ZAU4JVLL.js";
|
|
4
4
|
import {
|
|
5
5
|
$cerberusIcons
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-3TYUA4C7.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-VLVKNEA5.js.map
|
|
@@ -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":[]}
|
|
@@ -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-
|
|
4
|
+
} from "../chunk-5RA3ZIXA.js";
|
|
5
5
|
import "../chunk-ZAU4JVLL.js";
|
|
6
6
|
import "../chunk-4O4QFF4S.js";
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
7
|
+
import "../chunk-3TYUA4C7.js";
|
|
8
|
+
import "../chunk-SCAVVE6E.js";
|
|
9
9
|
export {
|
|
10
10
|
Input
|
|
11
11
|
};
|
|
@@ -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-VLVKNEA5.js";
|
|
5
5
|
import "../chunk-ZAU4JVLL.js";
|
|
6
|
-
import "../chunk-
|
|
7
|
-
import "../chunk-
|
|
6
|
+
import "../chunk-3TYUA4C7.js";
|
|
7
|
+
import "../chunk-SCAVVE6E.js";
|
|
8
8
|
export {
|
|
9
9
|
Toggle
|
|
10
10
|
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
ConfirmModal,
|
|
4
|
+
useConfirmModal
|
|
5
|
+
} from "../chunk-BVK6GEDZ.js";
|
|
6
|
+
import "../chunk-4CAT3FHV.js";
|
|
7
|
+
import "../chunk-2ATICEW3.js";
|
|
8
|
+
import "../chunk-4O4QFF4S.js";
|
|
9
|
+
import "../chunk-JIZQFTW6.js";
|
|
10
|
+
import "../chunk-3TYUA4C7.js";
|
|
11
|
+
import "../chunk-SCAVVE6E.js";
|
|
12
|
+
export {
|
|
13
|
+
ConfirmModal,
|
|
14
|
+
useConfirmModal
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=confirm-modal.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|