@cerberus-design/react 0.1.1 → 0.1.2-next-606dce0
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/aria-helpers/nav-menu.aria.js +3 -7
- package/build/legacy/aria-helpers/nav-menu.aria.js.map +1 -1
- package/build/legacy/chunk-55J6XMHW.js +1 -0
- package/build/legacy/chunk-6YEAMVRY.js +82 -0
- package/build/legacy/chunk-6YEAMVRY.js.map +1 -0
- package/build/legacy/chunk-BPIYUAYS.js +26 -0
- package/build/legacy/chunk-BPIYUAYS.js.map +1 -0
- package/build/legacy/chunk-JA4IX7GN.js +48 -0
- package/build/legacy/chunk-JA4IX7GN.js.map +1 -0
- package/build/legacy/chunk-JF76VIL3.js +12 -0
- package/build/legacy/chunk-JF76VIL3.js.map +1 -0
- package/build/legacy/chunk-KETL4ZJK.js +33 -0
- package/build/legacy/chunk-KETL4ZJK.js.map +1 -0
- package/build/legacy/chunk-KJUCHZHV.js +51 -0
- package/build/legacy/chunk-KJUCHZHV.js.map +1 -0
- package/build/legacy/chunk-R4H3352X.js +16 -0
- package/build/legacy/chunk-R4H3352X.js.map +1 -0
- package/build/legacy/chunk-SXXWC6UD.js +83 -0
- package/build/legacy/chunk-SXXWC6UD.js.map +1 -0
- package/build/legacy/chunk-WSQTX34C.js +86 -0
- package/build/legacy/chunk-WSQTX34C.js.map +1 -0
- package/build/legacy/chunk-XFWARXLU.js +26 -0
- package/build/legacy/chunk-XFWARXLU.js.map +1 -0
- package/build/legacy/components/Button.js +2 -26
- package/build/legacy/components/Button.js.map +1 -1
- package/build/legacy/components/IconButton.js +2 -64
- package/build/legacy/components/IconButton.js.map +1 -1
- package/build/legacy/components/NavMenuLink.js +3 -43
- package/build/legacy/components/NavMenuLink.js.map +1 -1
- package/build/legacy/components/NavMenuList.js +5 -103
- package/build/legacy/components/NavMenuList.js.map +1 -1
- package/build/legacy/components/NavMenuTrigger.js +5 -77
- package/build/legacy/components/NavMenuTrigger.js.map +1 -1
- package/build/legacy/components/Show.js +3 -12
- package/build/legacy/components/Show.js.map +1 -1
- package/build/legacy/context/field.js +3 -27
- package/build/legacy/context/field.js.map +1 -1
- package/build/legacy/context/navMenu.js +3 -45
- package/build/legacy/context/navMenu.js.map +1 -1
- package/build/legacy/context/theme.js +6 -21
- package/build/legacy/context/theme.js.map +1 -1
- package/build/legacy/hooks/useTheme.js +2 -56
- package/build/legacy/hooks/useTheme.js.map +1 -1
- package/build/legacy/index.js +57 -13
- package/build/legacy/index.js.map +1 -1
- package/build/legacy/types.js +1 -0
- package/build/modern/aria-helpers/nav-menu.aria.js +3 -7
- package/build/modern/aria-helpers/nav-menu.aria.js.map +1 -1
- package/build/modern/chunk-55J6XMHW.js +1 -0
- package/build/modern/chunk-6YEAMVRY.js +82 -0
- package/build/modern/chunk-6YEAMVRY.js.map +1 -0
- package/build/modern/chunk-BPIYUAYS.js +26 -0
- package/build/modern/chunk-BPIYUAYS.js.map +1 -0
- package/build/modern/chunk-JA4IX7GN.js +48 -0
- package/build/modern/chunk-JA4IX7GN.js.map +1 -0
- package/build/modern/chunk-JF76VIL3.js +12 -0
- package/build/modern/chunk-JF76VIL3.js.map +1 -0
- package/build/modern/chunk-KETL4ZJK.js +33 -0
- package/build/modern/chunk-KETL4ZJK.js.map +1 -0
- package/build/modern/chunk-KJUCHZHV.js +51 -0
- package/build/modern/chunk-KJUCHZHV.js.map +1 -0
- package/build/modern/chunk-R4H3352X.js +16 -0
- package/build/modern/chunk-R4H3352X.js.map +1 -0
- package/build/modern/chunk-SXXWC6UD.js +83 -0
- package/build/modern/chunk-SXXWC6UD.js.map +1 -0
- package/build/modern/chunk-WSQTX34C.js +86 -0
- package/build/modern/chunk-WSQTX34C.js.map +1 -0
- package/build/modern/chunk-XFWARXLU.js +26 -0
- package/build/modern/chunk-XFWARXLU.js.map +1 -0
- package/build/modern/components/Button.js +2 -26
- package/build/modern/components/Button.js.map +1 -1
- package/build/modern/components/IconButton.js +2 -64
- package/build/modern/components/IconButton.js.map +1 -1
- package/build/modern/components/NavMenuLink.js +3 -43
- package/build/modern/components/NavMenuLink.js.map +1 -1
- package/build/modern/components/NavMenuList.js +5 -103
- package/build/modern/components/NavMenuList.js.map +1 -1
- package/build/modern/components/NavMenuTrigger.js +5 -77
- package/build/modern/components/NavMenuTrigger.js.map +1 -1
- package/build/modern/components/Show.js +3 -12
- package/build/modern/components/Show.js.map +1 -1
- package/build/modern/context/field.js +3 -27
- package/build/modern/context/field.js.map +1 -1
- package/build/modern/context/navMenu.js +3 -45
- package/build/modern/context/navMenu.js.map +1 -1
- package/build/modern/context/theme.js +6 -21
- package/build/modern/context/theme.js.map +1 -1
- package/build/modern/hooks/useTheme.js +2 -56
- package/build/modern/hooks/useTheme.js.map +1 -1
- package/build/modern/index.js +57 -13
- package/build/modern/index.js.map +1 -1
- package/build/modern/types.js +1 -0
- package/package.json +5 -12
- package/src/components/Button.tsx +2 -2
- package/src/components/IconButton.tsx +2 -2
- package/src/components/NavMenuLink.tsx +1 -1
- package/src/components/NavMenuList.tsx +2 -2
- package/src/components/NavMenuTrigger.tsx +2 -2
- package/build/legacy/_tsup-dts-rollup.d.cts +0 -254
- package/build/legacy/aria-helpers/nav-menu.aria.cjs +0 -36
- package/build/legacy/aria-helpers/nav-menu.aria.cjs.map +0 -1
- package/build/legacy/aria-helpers/nav-menu.aria.d.cts +0 -2
- package/build/legacy/chunk-2EH5BYDL.js +0 -108
- package/build/legacy/chunk-2EH5BYDL.js.map +0 -1
- package/build/legacy/chunk-KMSZ2GAN.js +0 -332
- package/build/legacy/chunk-KMSZ2GAN.js.map +0 -1
- package/build/legacy/chunk-WX6UE7PC.js +0 -51
- package/build/legacy/chunk-WX6UE7PC.js.map +0 -1
- package/build/legacy/components/Button.cjs +0 -472
- package/build/legacy/components/Button.cjs.map +0 -1
- package/build/legacy/components/Button.d.cts +0 -2
- package/build/legacy/components/IconButton.cjs +0 -470
- package/build/legacy/components/IconButton.cjs.map +0 -1
- package/build/legacy/components/IconButton.d.cts +0 -3
- package/build/legacy/components/NavMenuLink.cjs +0 -346
- package/build/legacy/components/NavMenuLink.cjs.map +0 -1
- package/build/legacy/components/NavMenuLink.d.cts +0 -2
- package/build/legacy/components/NavMenuList.cjs +0 -427
- package/build/legacy/components/NavMenuList.cjs.map +0 -1
- package/build/legacy/components/NavMenuList.d.cts +0 -3
- package/build/legacy/components/NavMenuTrigger.cjs +0 -520
- package/build/legacy/components/NavMenuTrigger.cjs.map +0 -1
- package/build/legacy/components/NavMenuTrigger.d.cts +0 -2
- package/build/legacy/components/Show.cjs +0 -41
- package/build/legacy/components/Show.cjs.map +0 -1
- package/build/legacy/components/Show.d.cts +0 -2
- package/build/legacy/context/field.cjs +0 -55
- package/build/legacy/context/field.cjs.map +0 -1
- package/build/legacy/context/field.d.cts +0 -3
- package/build/legacy/context/navMenu.cjs +0 -70
- package/build/legacy/context/navMenu.cjs.map +0 -1
- package/build/legacy/context/navMenu.d.cts +0 -5
- package/build/legacy/context/theme.cjs +0 -56
- package/build/legacy/context/theme.cjs.map +0 -1
- package/build/legacy/context/theme.d.cts +0 -8
- package/build/legacy/global.d.cjs +0 -2
- package/build/legacy/global.d.d.cts +0 -1
- package/build/legacy/global.d.d.ts +0 -1
- package/build/legacy/global.d.js +0 -1
- package/build/legacy/hooks/useTheme.cjs +0 -77
- package/build/legacy/hooks/useTheme.cjs.map +0 -1
- package/build/legacy/hooks/useTheme.d.cts +0 -1
- package/build/legacy/index.cjs +0 -47
- package/build/legacy/index.cjs.map +0 -1
- package/build/legacy/index.d.cts +0 -34
- package/build/legacy/types.cjs +0 -19
- package/build/legacy/types.cjs.map +0 -1
- package/build/legacy/types.d.cts +0 -1
- package/build/modern/_tsup-dts-rollup.d.cts +0 -254
- package/build/modern/aria-helpers/nav-menu.aria.cjs +0 -36
- package/build/modern/aria-helpers/nav-menu.aria.cjs.map +0 -1
- package/build/modern/aria-helpers/nav-menu.aria.d.cts +0 -2
- package/build/modern/chunk-BLNT5VLF.js +0 -108
- package/build/modern/chunk-BLNT5VLF.js.map +0 -1
- package/build/modern/chunk-JHIMPIXK.js +0 -51
- package/build/modern/chunk-JHIMPIXK.js.map +0 -1
- package/build/modern/chunk-X3GZABU6.js +0 -332
- package/build/modern/chunk-X3GZABU6.js.map +0 -1
- package/build/modern/components/Button.cjs +0 -472
- package/build/modern/components/Button.cjs.map +0 -1
- package/build/modern/components/Button.d.cts +0 -2
- package/build/modern/components/IconButton.cjs +0 -470
- package/build/modern/components/IconButton.cjs.map +0 -1
- package/build/modern/components/IconButton.d.cts +0 -3
- package/build/modern/components/NavMenuLink.cjs +0 -346
- package/build/modern/components/NavMenuLink.cjs.map +0 -1
- package/build/modern/components/NavMenuLink.d.cts +0 -2
- package/build/modern/components/NavMenuList.cjs +0 -427
- package/build/modern/components/NavMenuList.cjs.map +0 -1
- package/build/modern/components/NavMenuList.d.cts +0 -3
- package/build/modern/components/NavMenuTrigger.cjs +0 -520
- package/build/modern/components/NavMenuTrigger.cjs.map +0 -1
- package/build/modern/components/NavMenuTrigger.d.cts +0 -2
- package/build/modern/components/Show.cjs +0 -41
- package/build/modern/components/Show.cjs.map +0 -1
- package/build/modern/components/Show.d.cts +0 -2
- package/build/modern/context/field.cjs +0 -55
- package/build/modern/context/field.cjs.map +0 -1
- package/build/modern/context/field.d.cts +0 -3
- package/build/modern/context/navMenu.cjs +0 -70
- package/build/modern/context/navMenu.cjs.map +0 -1
- package/build/modern/context/navMenu.d.cts +0 -5
- package/build/modern/context/theme.cjs +0 -56
- package/build/modern/context/theme.cjs.map +0 -1
- package/build/modern/context/theme.d.cts +0 -8
- package/build/modern/global.d.cjs +0 -2
- package/build/modern/global.d.cjs.map +0 -1
- package/build/modern/global.d.d.cts +0 -1
- package/build/modern/global.d.d.ts +0 -1
- package/build/modern/global.d.js +0 -1
- package/build/modern/global.d.js.map +0 -1
- package/build/modern/hooks/useTheme.cjs +0 -77
- package/build/modern/hooks/useTheme.cjs.map +0 -1
- package/build/modern/hooks/useTheme.d.cts +0 -1
- package/build/modern/index.cjs +0 -47
- package/build/modern/index.cjs.map +0 -1
- package/build/modern/index.d.cts +0 -34
- package/build/modern/types.cjs +0 -19
- package/build/modern/types.cjs.map +0 -1
- package/build/modern/types.d.cts +0 -1
- package/src/global.d.ts +0 -19
- /package/build/legacy/{global.d.cjs.map → chunk-55J6XMHW.js.map} +0 -0
- /package/build/{legacy/global.d.js.map → modern/chunk-55J6XMHW.js.map} +0 -0
|
@@ -1,10 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
["aria-controls"]: values.controls,
|
|
5
|
-
["aria-expanded"]: values.expanded ?? false
|
|
6
|
-
};
|
|
7
|
-
}
|
|
1
|
+
import {
|
|
2
|
+
createNavTriggerProps
|
|
3
|
+
} from "../chunk-JF76VIL3.js";
|
|
8
4
|
export {
|
|
9
5
|
createNavTriggerProps
|
|
10
6
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
//# sourceMappingURL=chunk-55J6XMHW.js.map
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import {
|
|
2
|
+
createNavTriggerProps
|
|
3
|
+
} from "./chunk-JF76VIL3.js";
|
|
4
|
+
import {
|
|
5
|
+
useNavMenuContext
|
|
6
|
+
} from "./chunk-KJUCHZHV.js";
|
|
7
|
+
import {
|
|
8
|
+
Show
|
|
9
|
+
} from "./chunk-R4H3352X.js";
|
|
10
|
+
|
|
11
|
+
// src/components/NavMenuTrigger.tsx
|
|
12
|
+
import {
|
|
13
|
+
useCallback
|
|
14
|
+
} from "react";
|
|
15
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
16
|
+
import { button } from "@cerberus/styled-system/recipes";
|
|
17
|
+
import { jsx } from "react/jsx-runtime";
|
|
18
|
+
function NavMenuTrigger(props) {
|
|
19
|
+
const {
|
|
20
|
+
as,
|
|
21
|
+
palette,
|
|
22
|
+
usage,
|
|
23
|
+
shape,
|
|
24
|
+
controls,
|
|
25
|
+
expanded: propsExpanded,
|
|
26
|
+
onClick,
|
|
27
|
+
...nativeProps
|
|
28
|
+
} = props;
|
|
29
|
+
const { triggerRef, onToggle, expanded } = useNavMenuContext();
|
|
30
|
+
const ariaProps = createNavTriggerProps({
|
|
31
|
+
controls,
|
|
32
|
+
expanded: propsExpanded ?? expanded
|
|
33
|
+
});
|
|
34
|
+
const hasAs = Boolean(as);
|
|
35
|
+
const AsSub = as;
|
|
36
|
+
const handleClick = useCallback(
|
|
37
|
+
(e) => {
|
|
38
|
+
if (onClick)
|
|
39
|
+
return onClick(e);
|
|
40
|
+
onToggle();
|
|
41
|
+
},
|
|
42
|
+
[onClick, onToggle]
|
|
43
|
+
);
|
|
44
|
+
return /* @__PURE__ */ jsx(
|
|
45
|
+
Show,
|
|
46
|
+
{
|
|
47
|
+
when: hasAs,
|
|
48
|
+
fallback: /* @__PURE__ */ jsx(
|
|
49
|
+
"button",
|
|
50
|
+
{
|
|
51
|
+
...nativeProps,
|
|
52
|
+
...ariaProps,
|
|
53
|
+
className: cx(
|
|
54
|
+
nativeProps.className,
|
|
55
|
+
button({
|
|
56
|
+
palette,
|
|
57
|
+
usage,
|
|
58
|
+
shape
|
|
59
|
+
})
|
|
60
|
+
),
|
|
61
|
+
onClick: handleClick,
|
|
62
|
+
ref: triggerRef,
|
|
63
|
+
children: props.children
|
|
64
|
+
}
|
|
65
|
+
),
|
|
66
|
+
children: hasAs && /* @__PURE__ */ jsx(
|
|
67
|
+
AsSub,
|
|
68
|
+
{
|
|
69
|
+
...nativeProps,
|
|
70
|
+
...ariaProps,
|
|
71
|
+
onClick: handleClick,
|
|
72
|
+
ref: triggerRef
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export {
|
|
80
|
+
NavMenuTrigger
|
|
81
|
+
};
|
|
82
|
+
//# sourceMappingURL=chunk-6YEAMVRY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/NavMenuTrigger.tsx"],"sourcesContent":["'use client'\n\nimport {\n useCallback,\n type ButtonHTMLAttributes,\n type ElementType,\n type MouseEvent,\n} from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\nimport {\n createNavTriggerProps,\n type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { useNavMenuContext } from '../context/navMenu'\nimport type { ButtonProps } from './Button'\nimport { Show } from './Show'\n\nexport interface NavMenuTriggerProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonProps,\n NavTriggerAriaValues {\n as?: ElementType\n}\n\n/**\n * A component that allows the user to trigger a navigation menu.\n * @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)\n * @example\n * ```tsx\n * <NavMenu>\n * <NavMenuTrigger controls=\"nav-menu-list\">\n * Menu\n * </NavMenuTrigger>\n * </NavMenu>\n * ```\n */\nexport function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element {\n const {\n as,\n palette,\n usage,\n shape,\n controls,\n expanded: propsExpanded,\n onClick,\n ...nativeProps\n } = props\n const { triggerRef, onToggle, expanded } = useNavMenuContext()\n const ariaProps = createNavTriggerProps({\n controls,\n expanded: propsExpanded ?? expanded,\n })\n const hasAs = Boolean(as)\n const AsSub: ElementType = as!\n\n const handleClick = useCallback(\n (e: MouseEvent<HTMLButtonElement>) => {\n if (onClick) return onClick(e)\n onToggle()\n },\n [onClick, onToggle],\n )\n\n return (\n <Show\n when={hasAs}\n fallback={\n <button\n {...nativeProps}\n {...ariaProps}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n }),\n )}\n onClick={handleClick}\n ref={triggerRef}\n >\n {props.children}\n </button>\n }\n >\n {hasAs && (\n <AsSub\n {...nativeProps}\n {...ariaProps}\n onClick={handleClick}\n ref={triggerRef}\n />\n )}\n </Show>\n )\n}\n"],"mappings":";;;;;;;;;;;AAEA;AAAA,EACE;AAAA,OAIK;AACP,SAAS,UAAU;AACnB,SAAS,cAAc;AA2Df;AA/BD,SAAS,eAAe,OAAyC;AACtE,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AACJ,QAAM,EAAE,YAAY,UAAU,SAAS,IAAI,kBAAkB;AAC7D,QAAM,YAAY,sBAAsB;AAAA,IACtC;AAAA,IACA,UAAU,iBAAiB;AAAA,EAC7B,CAAC;AACD,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,QAAM,cAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI;AAAS,eAAO,QAAQ,CAAC;AAC7B,eAAS;AAAA,IACX;AAAA,IACA,CAAC,SAAS,QAAQ;AAAA,EACpB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,WAAW;AAAA,YACT,YAAY;AAAA,YACZ,OAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,SAAS;AAAA,UACT,KAAK;AAAA,UAEJ,gBAAM;AAAA;AAAA,MACT;AAAA,MAGD,mBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,KAAK;AAAA;AAAA,MACP;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
// src/components/IconButton.tsx
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { iconButton } from "@cerberus/styled-system/recipes";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
function IconButton(props) {
|
|
6
|
+
const { ariaLabel, palette, usage, ...nativeProps } = props;
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"button",
|
|
9
|
+
{
|
|
10
|
+
...nativeProps,
|
|
11
|
+
"aria-label": ariaLabel ?? "Icon Button",
|
|
12
|
+
className: cx(
|
|
13
|
+
nativeProps.className,
|
|
14
|
+
iconButton({
|
|
15
|
+
palette,
|
|
16
|
+
usage
|
|
17
|
+
})
|
|
18
|
+
)
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export {
|
|
24
|
+
IconButton
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=chunk-BPIYUAYS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/IconButton.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { iconButton } from '@cerberus/styled-system/recipes'\nimport type { ButtonProps } from './Button'\n\n/**\n * This module contains the Icon Button component.\n * @module\n */\n\nexport type IconButtonUsage = Exclude<ButtonProps['usage'], 'outline'>\nexport interface IconButtonProps\n extends ButtonHTMLAttributes<HTMLButtonElement> {\n ariaLabel: string\n palette?: ButtonProps['palette']\n usage?: IconButtonUsage\n shape?: 'circle'\n}\n\n/**\n * A component that allows the user to perform actions using an icon\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/IconButton.tsx\n */\nexport function IconButton(props: IconButtonProps): JSX.Element {\n const { ariaLabel, palette, usage, ...nativeProps } = props\n return (\n <button\n {...nativeProps}\n aria-label={ariaLabel ?? 'Icon Button'}\n className={cx(\n nativeProps.className,\n iconButton({\n palette,\n usage,\n }),\n )}\n />\n )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAwBvB;AAHG,SAAS,WAAW,OAAqC;AAC9D,QAAM,EAAE,WAAW,SAAS,OAAO,GAAG,YAAY,IAAI;AACtD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import {
|
|
2
|
+
Show
|
|
3
|
+
} from "./chunk-R4H3352X.js";
|
|
4
|
+
|
|
5
|
+
// src/components/NavMenuLink.tsx
|
|
6
|
+
import { css, cx } from "@cerberus/styled-system/css";
|
|
7
|
+
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
function NavMenuLink(props) {
|
|
9
|
+
const { as, ...nativeProps } = props;
|
|
10
|
+
const hasAs = Boolean(as);
|
|
11
|
+
const AsSub = as;
|
|
12
|
+
return /* @__PURE__ */ jsx(
|
|
13
|
+
"li",
|
|
14
|
+
{
|
|
15
|
+
className: css({
|
|
16
|
+
w: "full"
|
|
17
|
+
}),
|
|
18
|
+
children: /* @__PURE__ */ jsx(
|
|
19
|
+
Show,
|
|
20
|
+
{
|
|
21
|
+
when: hasAs,
|
|
22
|
+
fallback: /* @__PURE__ */ jsx(
|
|
23
|
+
"a",
|
|
24
|
+
{
|
|
25
|
+
...nativeProps,
|
|
26
|
+
className: cx(
|
|
27
|
+
nativeProps.className,
|
|
28
|
+
css({
|
|
29
|
+
color: "action.navigation.initial",
|
|
30
|
+
textStyle: "link",
|
|
31
|
+
_hover: {
|
|
32
|
+
color: "action.navigation.hover"
|
|
33
|
+
}
|
|
34
|
+
})
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
),
|
|
38
|
+
children: hasAs && /* @__PURE__ */ jsx(AsSub, { ...nativeProps })
|
|
39
|
+
}
|
|
40
|
+
)
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export {
|
|
46
|
+
NavMenuLink
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=chunk-JA4IX7GN.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\nexport interface NavMenuLinkProps\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n as?: ElementType\n}\n\nexport function NavMenuLink(props: NavMenuLinkProps): JSX.Element {\n const { as, ...nativeProps } = props\n const hasAs = Boolean(as)\n const AsSub: ElementType = as!\n\n return (\n <li\n className={css({\n w: 'full',\n })}\n >\n <Show\n when={hasAs}\n fallback={\n <a\n {...nativeProps}\n className={cx(\n nativeProps.className,\n css({\n color: 'action.navigation.initial',\n textStyle: 'link',\n _hover: {\n color: 'action.navigation.hover',\n },\n }),\n )}\n />\n }\n >\n {hasAs && <AsSub {...nativeProps} />}\n </Show>\n </li>\n )\n}\n"],"mappings":";;;;;AACA,SAAS,KAAK,UAAU;AAsBd;AAdH,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,IAAI,GAAG,YAAY,IAAI;AAC/B,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,GAAG;AAAA,MACL,CAAC;AAAA,MAED;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,UACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG;AAAA,cACJ,WAAW;AAAA,gBACT,YAAY;AAAA,gBACZ,IAAI;AAAA,kBACF,OAAO;AAAA,kBACP,WAAW;AAAA,kBACX,QAAQ;AAAA,oBACN,OAAO;AAAA,kBACT;AAAA,gBACF,CAAC;AAAA,cACH;AAAA;AAAA,UACF;AAAA,UAGD,mBAAS,oBAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// src/aria-helpers/nav-menu.aria.ts
|
|
2
|
+
function createNavTriggerProps(values) {
|
|
3
|
+
return {
|
|
4
|
+
["aria-controls"]: values.controls,
|
|
5
|
+
["aria-expanded"]: values.expanded ?? false
|
|
6
|
+
};
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export {
|
|
10
|
+
createNavTriggerProps
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=chunk-JF76VIL3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/aria-helpers/nav-menu.aria.ts"],"sourcesContent":["export interface NavTriggerAriaValues {\n controls: string\n expanded?: boolean\n}\n\ninterface NavTriggerAriaReturn {\n ['aria-controls']: string\n ['aria-expanded']: boolean\n}\n\nexport function createNavTriggerProps(\n values: NavTriggerAriaValues,\n): NavTriggerAriaReturn {\n return {\n ['aria-controls']: values.controls,\n ['aria-expanded']: values.expanded ?? false,\n }\n}\n"],"mappings":";AAUO,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;","names":[]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// src/context/field.tsx
|
|
2
|
+
import {
|
|
3
|
+
createContext,
|
|
4
|
+
useContext,
|
|
5
|
+
useMemo
|
|
6
|
+
} from "react";
|
|
7
|
+
import { jsx } from "react/jsx-runtime";
|
|
8
|
+
var FieldContext = createContext(null);
|
|
9
|
+
function Field(props) {
|
|
10
|
+
const value = useMemo(
|
|
11
|
+
() => ({
|
|
12
|
+
disabled: props.disabled,
|
|
13
|
+
readonly: props.readonly,
|
|
14
|
+
required: props.required,
|
|
15
|
+
invalid: props.invalid
|
|
16
|
+
}),
|
|
17
|
+
[props.disabled, props.readonly, props.required, props.invalid]
|
|
18
|
+
);
|
|
19
|
+
return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children: props.children });
|
|
20
|
+
}
|
|
21
|
+
function useFieldContext() {
|
|
22
|
+
const context = useContext(FieldContext);
|
|
23
|
+
if (!context) {
|
|
24
|
+
throw new Error("useFieldContext must be used within a Field Provider.");
|
|
25
|
+
}
|
|
26
|
+
return context;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export {
|
|
30
|
+
Field,
|
|
31
|
+
useFieldContext
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=chunk-KETL4ZJK.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/context/field.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useContext,\n useMemo,\n type PropsWithChildren,\n} from 'react'\n\nexport interface FieldContextValue {\n disabled?: boolean\n readonly?: boolean\n required?: boolean\n invalid?: boolean\n}\n\nconst FieldContext = createContext<FieldContextValue | null>(null)\n\nexport function Field(\n props: PropsWithChildren<FieldContextValue>,\n): JSX.Element {\n const value = useMemo(\n () => ({\n disabled: props.disabled,\n readonly: props.readonly,\n required: props.required,\n invalid: props.invalid,\n }),\n [props.disabled, props.readonly, props.required, props.invalid],\n )\n\n return (\n <FieldContext.Provider value={value}>\n {props.children}\n </FieldContext.Provider>\n )\n}\n\nexport function useFieldContext(): FieldContextValue {\n const context = useContext(FieldContext)\n if (!context) {\n throw new Error('useFieldContext must be used within a Field Provider.')\n }\n return context\n}\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAyBH;AAhBJ,IAAM,eAAe,cAAwC,IAAI;AAE1D,SAAS,MACd,OACa;AACb,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,UAAU,MAAM;AAAA,MAChB,SAAS,MAAM;AAAA,IACjB;AAAA,IACA,CAAC,MAAM,UAAU,MAAM,UAAU,MAAM,UAAU,MAAM,OAAO;AAAA,EAChE;AAEA,SACE,oBAAC,aAAa,UAAb,EAAsB,OACpB,gBAAM,UACT;AAEJ;AAEO,SAAS,kBAAqC;AACnD,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,uDAAuD;AAAA,EACzE;AACA,SAAO;AACT;","names":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
// src/context/navMenu.tsx
|
|
2
|
+
import { css } from "@cerberus/styled-system/css";
|
|
3
|
+
import {
|
|
4
|
+
createContext,
|
|
5
|
+
useCallback,
|
|
6
|
+
useContext,
|
|
7
|
+
useMemo,
|
|
8
|
+
useRef,
|
|
9
|
+
useState
|
|
10
|
+
} from "react";
|
|
11
|
+
import { jsx } from "react/jsx-runtime";
|
|
12
|
+
var NavMenuContext = createContext(null);
|
|
13
|
+
function NavMenu(props) {
|
|
14
|
+
const triggerRef = useRef(null);
|
|
15
|
+
const menuRef = useRef(null);
|
|
16
|
+
const [expanded, setExpanded] = useState(false);
|
|
17
|
+
const handleToggle = useCallback(() => {
|
|
18
|
+
setExpanded((prev) => !prev);
|
|
19
|
+
}, []);
|
|
20
|
+
const value = useMemo(
|
|
21
|
+
() => ({
|
|
22
|
+
triggerRef,
|
|
23
|
+
menuRef,
|
|
24
|
+
expanded,
|
|
25
|
+
onToggle: handleToggle
|
|
26
|
+
}),
|
|
27
|
+
[expanded, handleToggle]
|
|
28
|
+
);
|
|
29
|
+
return /* @__PURE__ */ jsx(NavMenuContext.Provider, { value, children: /* @__PURE__ */ jsx(
|
|
30
|
+
"nav",
|
|
31
|
+
{
|
|
32
|
+
className: css({
|
|
33
|
+
position: "relative"
|
|
34
|
+
}),
|
|
35
|
+
children: props.children
|
|
36
|
+
}
|
|
37
|
+
) });
|
|
38
|
+
}
|
|
39
|
+
function useNavMenuContext() {
|
|
40
|
+
const context = useContext(NavMenuContext);
|
|
41
|
+
if (!context) {
|
|
42
|
+
throw new Error("useNavMenuContext must be used within a NavMenu.");
|
|
43
|
+
}
|
|
44
|
+
return context;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
export {
|
|
48
|
+
NavMenu,
|
|
49
|
+
useNavMenuContext
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=chunk-KJUCHZHV.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from '@cerberus/styled-system/css'\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useRef,\n useState,\n type PropsWithChildren,\n type RefObject,\n} from 'react'\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n triggerRef: NavTriggerRef | null\n menuRef: NavMenuRef | null\n expanded: boolean\n onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\nexport function NavMenu(props: PropsWithChildren): JSX.Element {\n const triggerRef = useRef<HTMLButtonElement>(null)\n const menuRef = useRef<HTMLUListElement>(null)\n const [expanded, setExpanded] = useState<boolean>(false)\n\n const handleToggle = useCallback(() => {\n setExpanded((prev) => !prev)\n }, [])\n\n const value = useMemo(\n () => ({\n triggerRef,\n menuRef,\n expanded,\n onToggle: handleToggle,\n }),\n [expanded, handleToggle],\n )\n\n return (\n <NavMenuContext.Provider value={value}>\n <nav\n className={css({\n position: 'relative',\n })}\n >\n {props.children}\n </nav>\n </NavMenuContext.Provider>\n )\n}\n\nexport function useNavMenuContext(): NavMenuContextValue {\n const context = useContext(NavMenuContext)\n if (!context) {\n throw new Error('useNavMenuContext must be used within a NavMenu.')\n }\n return context\n}\n"],"mappings":";AAEA,SAAS,WAAW;AACpB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAmCD;AAvBN,IAAM,iBAAiB,cAA0C,IAAI;AAE9D,SAAS,QAAQ,OAAuC;AAC7D,QAAM,aAAa,OAA0B,IAAI;AACjD,QAAM,UAAU,OAAyB,IAAI;AAC7C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAkB,KAAK;AAEvD,QAAM,eAAe,YAAY,MAAM;AACrC,gBAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AAEA,SACE,oBAAC,eAAe,UAAf,EAAwB,OACvB;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,IAAI;AAAA,QACb,UAAU;AAAA,MACZ,CAAC;AAAA,MAEA,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAEO,SAAS,oBAAyC;AACvD,QAAM,UAAU,WAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;","names":[]}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// src/components/Show.tsx
|
|
2
|
+
import { useMemo } from "react";
|
|
3
|
+
function Show(props) {
|
|
4
|
+
const { when, children, fallback } = props;
|
|
5
|
+
const condition = useMemo(() => when ?? false, [when]);
|
|
6
|
+
return useMemo(() => {
|
|
7
|
+
if (condition)
|
|
8
|
+
return children;
|
|
9
|
+
return fallback ?? null;
|
|
10
|
+
}, [condition, children, fallback]);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export {
|
|
14
|
+
Show
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=chunk-R4H3352X.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\nexport interface ShowProps {\n when: boolean | null | undefined\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render its children or an optional fallback component\n * based on the SolidJS component.\n * @definition [Show docs](https://cerberus.digitalu.design/react/show)\n * @example\n * ```tsx\n * <Show when={condition}>\n * <div>Content</div>\n * </Show>\n */\nexport function Show(props: PropsWithChildren<ShowProps>): ReactNode {\n const { when, children, fallback } = props\n const condition = useMemo(() => when ?? false, [when])\n\n return useMemo(() => {\n if (condition) return children\n return fallback ?? null\n }, [condition, children, fallback])\n}\n"],"mappings":";AAEA,SAAS,eAAuD;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,YAAY,QAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,SAAO,QAAQ,MAAM;AACnB,QAAI;AAAW,aAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;","names":[]}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
// src/hooks/useTheme.ts
|
|
2
|
+
import {
|
|
3
|
+
useCallback,
|
|
4
|
+
useEffect,
|
|
5
|
+
useLayoutEffect,
|
|
6
|
+
useMemo,
|
|
7
|
+
useState
|
|
8
|
+
} from "react";
|
|
9
|
+
|
|
10
|
+
// src/context/theme.tsx
|
|
11
|
+
import { createContext, useContext } from "react";
|
|
12
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
|
+
var THEME_KEY = "cerberus-theme";
|
|
14
|
+
var MODE_KEY = "cerberus-mode";
|
|
15
|
+
var ThemeContext = createContext(
|
|
16
|
+
null
|
|
17
|
+
);
|
|
18
|
+
function ThemeProvider(props) {
|
|
19
|
+
const state = useTheme();
|
|
20
|
+
return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: state, children: props.children });
|
|
21
|
+
}
|
|
22
|
+
function useThemeContext() {
|
|
23
|
+
const context = useContext(ThemeContext);
|
|
24
|
+
if (!context) {
|
|
25
|
+
throw new Error("useThemeContext must be used within a ThemeProvider");
|
|
26
|
+
}
|
|
27
|
+
return context;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// src/hooks/useTheme.ts
|
|
31
|
+
function useTheme(defaultTheme = "cerberus", defaultColorMode = "light") {
|
|
32
|
+
const [theme, setTheme] = useState(defaultTheme);
|
|
33
|
+
const [colorMode, setColorMode] = useState(defaultColorMode);
|
|
34
|
+
const handleThemeChange = useCallback((newTheme) => {
|
|
35
|
+
setTheme(newTheme);
|
|
36
|
+
localStorage.setItem(THEME_KEY, newTheme);
|
|
37
|
+
}, []);
|
|
38
|
+
const handleColorModeChange = useCallback(() => {
|
|
39
|
+
setColorMode((prev) => {
|
|
40
|
+
const newMode = prev === "light" ? "dark" : "light";
|
|
41
|
+
localStorage.setItem(MODE_KEY, newMode);
|
|
42
|
+
return newMode;
|
|
43
|
+
});
|
|
44
|
+
}, []);
|
|
45
|
+
useLayoutEffect(() => {
|
|
46
|
+
const theme2 = localStorage.getItem(THEME_KEY);
|
|
47
|
+
if (theme2) {
|
|
48
|
+
setTheme(theme2);
|
|
49
|
+
}
|
|
50
|
+
}, []);
|
|
51
|
+
useLayoutEffect(() => {
|
|
52
|
+
const mode = localStorage.getItem(MODE_KEY);
|
|
53
|
+
if (mode) {
|
|
54
|
+
setColorMode(mode);
|
|
55
|
+
}
|
|
56
|
+
}, []);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
const root = document.documentElement;
|
|
59
|
+
root.dataset.theme = theme;
|
|
60
|
+
}, [theme]);
|
|
61
|
+
useEffect(() => {
|
|
62
|
+
const root = document.documentElement;
|
|
63
|
+
root.dataset.colorMode = colorMode;
|
|
64
|
+
}, [colorMode]);
|
|
65
|
+
return useMemo(
|
|
66
|
+
() => ({
|
|
67
|
+
theme,
|
|
68
|
+
mode: colorMode,
|
|
69
|
+
updateTheme: handleThemeChange,
|
|
70
|
+
updateMode: handleColorModeChange
|
|
71
|
+
}),
|
|
72
|
+
[theme, colorMode, handleThemeChange, handleColorModeChange]
|
|
73
|
+
);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
export {
|
|
77
|
+
useTheme,
|
|
78
|
+
THEME_KEY,
|
|
79
|
+
MODE_KEY,
|
|
80
|
+
ThemeProvider,
|
|
81
|
+
useThemeContext
|
|
82
|
+
};
|
|
83
|
+
//# sourceMappingURL=chunk-SXXWC6UD.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/hooks/useTheme.ts","../../src/context/theme.tsx"],"sourcesContent":["'use client'\n\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useState,\n} from 'react'\nimport {\n MODE_KEY,\n THEME_KEY,\n type ColorModes,\n type CustomThemes,\n type DefaultThemes,\n type ThemeContextValue,\n} from '../context/theme'\n\nexport function useTheme<C extends string = DefaultThemes>(\n defaultTheme: CustomThemes<C> = 'cerberus',\n defaultColorMode: ColorModes = 'light',\n): ThemeContextValue<C> {\n const [theme, setTheme] = useState<CustomThemes<C>>(defaultTheme)\n const [colorMode, setColorMode] = useState<ColorModes>(defaultColorMode)\n\n const handleThemeChange = useCallback((newTheme: CustomThemes<C>) => {\n setTheme(newTheme)\n localStorage.setItem(THEME_KEY, newTheme)\n }, [])\n\n const handleColorModeChange = useCallback(() => {\n setColorMode((prev) => {\n const newMode = prev === 'light' ? 'dark' : 'light'\n localStorage.setItem(MODE_KEY, newMode)\n return newMode\n })\n }, [])\n\n useLayoutEffect(() => {\n const theme = localStorage.getItem(THEME_KEY)\n if (theme) {\n setTheme(theme as CustomThemes<C>)\n }\n }, [])\n\n useLayoutEffect(() => {\n const mode = localStorage.getItem(MODE_KEY)\n if (mode) {\n setColorMode(mode as ColorModes)\n }\n }, [])\n\n useEffect(() => {\n const root = document.documentElement\n root.dataset.theme = theme\n }, [theme])\n\n useEffect(() => {\n const root = document.documentElement\n root.dataset.colorMode = colorMode\n }, [colorMode])\n\n return useMemo(\n () => ({\n theme,\n mode: colorMode,\n updateTheme: handleThemeChange,\n updateMode: handleColorModeChange,\n }),\n [theme, colorMode, handleThemeChange, handleColorModeChange],\n )\n}\n","'use client'\n\nimport { createContext, useContext, type PropsWithChildren } from 'react'\nimport { useTheme } from '../hooks/useTheme'\n\nexport type DefaultThemes = 'cerberus'\nexport type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K\nexport type ColorModes = 'light' | 'dark'\n\nexport interface ThemeContextValue<T extends string = DefaultThemes> {\n theme: CustomThemes<T>\n mode: ColorModes\n updateTheme: (theme: T) => void\n updateMode: () => void\n}\n\nexport const THEME_KEY = 'cerberus-theme'\nexport const MODE_KEY = 'cerberus-mode'\n\nconst ThemeContext = createContext<ThemeContextValue<DefaultThemes> | null>(\n null,\n)\n\n/**\n * A context provider that allows the user to set the theme and mode of the application.\n * @example\n * ```tsx\n * <ThemeProvider>\n * <App />\n * </ThemeProvider>\n * ```\n */\nexport function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element {\n const state = useTheme()\n return (\n <ThemeContext.Provider value={state}>\n {props.children}\n </ThemeContext.Provider>\n )\n}\n\nexport function useThemeContext(): ThemeContextValue<DefaultThemes> {\n const context = useContext(ThemeContext)\n if (!context) {\n throw new Error('useThemeContext must be used within a ThemeProvider')\n }\n return context\n}\n"],"mappings":";AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;;;ACNP,SAAS,eAAe,kBAA0C;AAiC9D;AAnBG,IAAM,YAAY;AAClB,IAAM,WAAW;AAExB,IAAM,eAAe;AAAA,EACnB;AACF;AAWO,SAAS,cAAc,OAAgD;AAC5E,QAAM,QAAQ,SAAS;AACvB,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,OAC3B,gBAAM,UACT;AAEJ;AAEO,SAAS,kBAAoD;AAClE,QAAM,UAAU,WAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;;;AD7BO,SAAS,SACd,eAAgC,YAChC,mBAA+B,SACT;AACtB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA0B,YAAY;AAChE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAqB,gBAAgB;AAEvE,QAAM,oBAAoB,YAAY,CAAC,aAA8B;AACnE,aAAS,QAAQ;AACjB,iBAAa,QAAQ,WAAW,QAAQ;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAwB,YAAY,MAAM;AAC9C,iBAAa,CAAC,SAAS;AACrB,YAAM,UAAU,SAAS,UAAU,SAAS;AAC5C,mBAAa,QAAQ,UAAU,OAAO;AACtC,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,kBAAgB,MAAM;AACpB,UAAMA,SAAQ,aAAa,QAAQ,SAAS;AAC5C,QAAIA,QAAO;AACT,eAASA,MAAwB;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,kBAAgB,MAAM;AACpB,UAAM,OAAO,aAAa,QAAQ,QAAQ;AAC1C,QAAI,MAAM;AACR,mBAAa,IAAkB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,YAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,QAAQ;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAEV,YAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,YAAY;AAAA,EAC3B,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,aAAa;AAAA,MACb,YAAY;AAAA,IACd;AAAA,IACA,CAAC,OAAO,WAAW,mBAAmB,qBAAqB;AAAA,EAC7D;AACF;","names":["theme"]}
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import {
|
|
2
|
+
useNavMenuContext
|
|
3
|
+
} from "./chunk-KJUCHZHV.js";
|
|
4
|
+
import {
|
|
5
|
+
Show
|
|
6
|
+
} from "./chunk-R4H3352X.js";
|
|
7
|
+
|
|
8
|
+
// src/components/NavMenuList.tsx
|
|
9
|
+
import { useMemo } from "react";
|
|
10
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
11
|
+
import { vstack } from "@cerberus/styled-system/patterns";
|
|
12
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
|
+
function getPosition(position) {
|
|
14
|
+
const defaultPositions = {
|
|
15
|
+
left: "auto",
|
|
16
|
+
right: "auto",
|
|
17
|
+
top: "auto",
|
|
18
|
+
bottom: "auto"
|
|
19
|
+
};
|
|
20
|
+
switch (position) {
|
|
21
|
+
case "right":
|
|
22
|
+
return { ...defaultPositions, top: "0%", left: "105%" };
|
|
23
|
+
case "left":
|
|
24
|
+
return { ...defaultPositions, top: "0%", right: "105%" };
|
|
25
|
+
case "bottom":
|
|
26
|
+
return { ...defaultPositions, top: "110%" };
|
|
27
|
+
case "top":
|
|
28
|
+
return { ...defaultPositions, bottom: "110%" };
|
|
29
|
+
default:
|
|
30
|
+
return defaultPositions;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
var navListStyles = vstack({
|
|
34
|
+
alignItems: "flex-start",
|
|
35
|
+
bgColor: "neutral.surface.100",
|
|
36
|
+
boxShadow: "lg",
|
|
37
|
+
gap: "2",
|
|
38
|
+
opacity: "0",
|
|
39
|
+
p: "4",
|
|
40
|
+
position: "absolute",
|
|
41
|
+
rounded: "md",
|
|
42
|
+
zIndex: "dropdown",
|
|
43
|
+
_motionSafe: {
|
|
44
|
+
animationName: "zoomIn",
|
|
45
|
+
animationDelay: "100ms",
|
|
46
|
+
animationDuration: "150ms",
|
|
47
|
+
animationFillMode: "both",
|
|
48
|
+
animationTimingFunction: "ease-in-out"
|
|
49
|
+
},
|
|
50
|
+
_positionBottom: {
|
|
51
|
+
transformOrigin: "top left"
|
|
52
|
+
},
|
|
53
|
+
_positionTop: {
|
|
54
|
+
transformOrigin: "bottom left"
|
|
55
|
+
},
|
|
56
|
+
_positionLeft: {
|
|
57
|
+
transformOrigin: "top right"
|
|
58
|
+
},
|
|
59
|
+
_positionRight: {
|
|
60
|
+
transformOrigin: "top left"
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
function NavMenuList(props) {
|
|
64
|
+
const { position, ...nativeProps } = props;
|
|
65
|
+
const { menuRef, expanded } = useNavMenuContext();
|
|
66
|
+
const locationStyles = useMemo(
|
|
67
|
+
() => getPosition(position ?? "bottom"),
|
|
68
|
+
[position]
|
|
69
|
+
);
|
|
70
|
+
return /* @__PURE__ */ jsx(Show, { when: expanded, children: /* @__PURE__ */ jsx(
|
|
71
|
+
"ul",
|
|
72
|
+
{
|
|
73
|
+
...nativeProps,
|
|
74
|
+
"data-position": position ?? "bottom",
|
|
75
|
+
className: cx(nativeProps.className, navListStyles),
|
|
76
|
+
ref: menuRef,
|
|
77
|
+
style: locationStyles
|
|
78
|
+
}
|
|
79
|
+
) });
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
export {
|
|
83
|
+
getPosition,
|
|
84
|
+
NavMenuList
|
|
85
|
+
};
|
|
86
|
+
//# sourceMappingURL=chunk-WSQTX34C.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: 'neutral.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,26 @@
|
|
|
1
|
+
// src/components/Button.tsx
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { button } from "@cerberus/styled-system/recipes";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
function Button(props) {
|
|
6
|
+
const { palette, usage, shape, ...nativeProps } = props;
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"button",
|
|
9
|
+
{
|
|
10
|
+
...nativeProps,
|
|
11
|
+
className: cx(
|
|
12
|
+
nativeProps.className,
|
|
13
|
+
button({
|
|
14
|
+
palette,
|
|
15
|
+
usage,
|
|
16
|
+
shape
|
|
17
|
+
})
|
|
18
|
+
)
|
|
19
|
+
}
|
|
20
|
+
);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export {
|
|
24
|
+
Button
|
|
25
|
+
};
|
|
26
|
+
//# sourceMappingURL=chunk-XFWARXLU.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus/styled-system/css'\nimport { button } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Button component.\n * @module\n */\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n palette?: 'action' | 'danger'\n usage?: 'filled' | 'outline' | 'text'\n shape?: 'sharp' | 'rounded'\n}\n\n/**\n * A component that allows the user to perform actions\n * @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx\n */\nexport function Button(props: ButtonProps): JSX.Element {\n const { palette, usage, shape, ...nativeProps } = props\n return (\n <button\n {...nativeProps}\n className={cx(\n nativeProps.className,\n button({\n palette,\n usage,\n shape,\n }),\n )}\n />\n )\n}\n"],"mappings":";AACA,SAAS,UAAU;AACnB,SAAS,cAAc;AAoBnB;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,30 +1,6 @@
|
|
|
1
1
|
import {
|
|
2
|
-
|
|
3
|
-
} from "../chunk-
|
|
4
|
-
import "../chunk-2EH5BYDL.js";
|
|
5
|
-
import {
|
|
6
|
-
cx
|
|
7
|
-
} from "../chunk-KMSZ2GAN.js";
|
|
8
|
-
|
|
9
|
-
// src/components/Button.tsx
|
|
10
|
-
import { jsx } from "react/jsx-runtime";
|
|
11
|
-
function Button(props) {
|
|
12
|
-
const { palette, usage, shape, ...nativeProps } = props;
|
|
13
|
-
return /* @__PURE__ */ jsx(
|
|
14
|
-
"button",
|
|
15
|
-
{
|
|
16
|
-
...nativeProps,
|
|
17
|
-
className: cx(
|
|
18
|
-
nativeProps.className,
|
|
19
|
-
button({
|
|
20
|
-
palette,
|
|
21
|
-
usage,
|
|
22
|
-
shape
|
|
23
|
-
})
|
|
24
|
-
)
|
|
25
|
-
}
|
|
26
|
-
);
|
|
27
|
-
}
|
|
2
|
+
Button
|
|
3
|
+
} from "../chunk-XFWARXLU.js";
|
|
28
4
|
export {
|
|
29
5
|
Button
|
|
30
6
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":[
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|