@cerberus-design/react 0.0.1-next-0a882b5 → 0.0.1-next-22a25ae
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/legacy/_tsup-dts-rollup.d.cts +57 -24
- package/build/legacy/_tsup-dts-rollup.d.ts +57 -24
- package/build/legacy/aria-helpers/nav-menu.aria.cjs.map +1 -1
- package/build/legacy/aria-helpers/nav-menu.aria.js.map +1 -1
- package/build/legacy/components/Button.cjs.map +1 -1
- package/build/legacy/components/Button.js.map +1 -1
- package/build/legacy/components/NavMenuLink.cjs.map +1 -1
- package/build/legacy/components/NavMenuLink.js.map +1 -1
- package/build/legacy/components/NavMenuList.cjs.map +1 -1
- package/build/legacy/components/NavMenuList.js.map +1 -1
- package/build/legacy/components/NavMenuTrigger.cjs.map +1 -1
- package/build/legacy/components/NavMenuTrigger.js.map +1 -1
- package/build/legacy/components/Show.cjs.map +1 -1
- package/build/legacy/components/Show.js.map +1 -1
- package/build/legacy/context/navMenu.cjs.map +1 -1
- package/build/legacy/context/navMenu.js.map +1 -1
- package/build/legacy/context/theme.cjs.map +1 -1
- package/build/legacy/context/theme.js.map +1 -1
- package/build/legacy/hooks/useTheme.cjs.map +1 -1
- package/build/legacy/hooks/useTheme.js.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.cts +57 -24
- package/build/modern/_tsup-dts-rollup.d.ts +57 -24
- package/build/modern/aria-helpers/nav-menu.aria.cjs.map +1 -1
- package/build/modern/aria-helpers/nav-menu.aria.js.map +1 -1
- package/build/modern/components/Button.cjs.map +1 -1
- package/build/modern/components/Button.js.map +1 -1
- package/build/modern/components/NavMenuLink.cjs.map +1 -1
- package/build/modern/components/NavMenuLink.js.map +1 -1
- package/build/modern/components/NavMenuList.cjs.map +1 -1
- package/build/modern/components/NavMenuList.js.map +1 -1
- package/build/modern/components/NavMenuTrigger.cjs.map +1 -1
- package/build/modern/components/NavMenuTrigger.js.map +1 -1
- package/build/modern/components/Show.cjs.map +1 -1
- package/build/modern/components/Show.js.map +1 -1
- package/build/modern/context/navMenu.cjs.map +1 -1
- package/build/modern/context/navMenu.js.map +1 -1
- package/build/modern/context/theme.cjs.map +1 -1
- package/build/modern/context/theme.js.map +1 -1
- package/build/modern/hooks/useTheme.cjs.map +1 -1
- package/build/modern/hooks/useTheme.js.map +1 -1
- package/package.json +2 -2
- package/src/aria-helpers/nav-menu.aria.ts +8 -1
- package/src/components/Button.tsx +1 -1
- package/src/components/NavMenuLink.tsx +1 -1
- package/src/components/NavMenuList.tsx +22 -4
- package/src/components/NavMenuTrigger.tsx +10 -2
- package/src/components/Show.tsx +7 -2
- package/src/context/navMenu.tsx +2 -2
- package/src/context/theme.tsx +11 -2
- package/src/hooks/useTheme.ts +2 -1
|
@@ -2,7 +2,6 @@ import type { AnchorHTMLAttributes } from 'react';
|
|
|
2
2
|
import { ButtonHTMLAttributes } from 'react';
|
|
3
3
|
import { ElementType } from 'react';
|
|
4
4
|
import { HTMLAttributes } from 'react';
|
|
5
|
-
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
6
5
|
import { PropsWithChildren } from 'react';
|
|
7
6
|
import { ReactNode } from 'react';
|
|
8
7
|
import { RefObject } from 'react';
|
|
@@ -11,7 +10,7 @@ import { RefObject } from 'react';
|
|
|
11
10
|
* A component that allows the user to perform actions
|
|
12
11
|
* @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx
|
|
13
12
|
*/
|
|
14
|
-
declare function Button(props: ButtonProps):
|
|
13
|
+
declare function Button(props: ButtonProps): JSX.Element;
|
|
15
14
|
export { Button }
|
|
16
15
|
export { Button as Button_alias_1 }
|
|
17
16
|
|
|
@@ -27,10 +26,7 @@ declare type ColorModes = 'light' | 'dark';
|
|
|
27
26
|
export { ColorModes }
|
|
28
27
|
export { ColorModes as ColorModes_alias_1 }
|
|
29
28
|
|
|
30
|
-
declare function createNavTriggerProps(values: NavTriggerAriaValues):
|
|
31
|
-
"aria-controls": string;
|
|
32
|
-
"aria-expanded": boolean;
|
|
33
|
-
};
|
|
29
|
+
declare function createNavTriggerProps(values: NavTriggerAriaValues): NavTriggerAriaReturn;
|
|
34
30
|
export { createNavTriggerProps }
|
|
35
31
|
export { createNavTriggerProps as createNavTriggerProps_alias_1 }
|
|
36
32
|
|
|
@@ -42,20 +38,22 @@ declare type DefaultThemes = 'cerberus';
|
|
|
42
38
|
export { DefaultThemes }
|
|
43
39
|
export { DefaultThemes as DefaultThemes_alias_1 }
|
|
44
40
|
|
|
45
|
-
declare function getPosition(position: Positions):
|
|
41
|
+
declare function getPosition(position: Positions): GetPositionResult;
|
|
42
|
+
export { getPosition }
|
|
43
|
+
export { getPosition as getPosition_alias_1 }
|
|
44
|
+
|
|
45
|
+
declare interface GetPositionResult {
|
|
46
46
|
left: string;
|
|
47
47
|
right: string;
|
|
48
48
|
top: string;
|
|
49
49
|
bottom: string;
|
|
50
|
-
}
|
|
51
|
-
export { getPosition }
|
|
52
|
-
export { getPosition as getPosition_alias_1 }
|
|
50
|
+
}
|
|
53
51
|
|
|
54
52
|
declare const MODE_KEY = "cerberus-mode";
|
|
55
53
|
export { MODE_KEY }
|
|
56
54
|
export { MODE_KEY as MODE_KEY_alias_1 }
|
|
57
55
|
|
|
58
|
-
declare function NavMenu(props: PropsWithChildren):
|
|
56
|
+
declare function NavMenu(props: PropsWithChildren): JSX.Element;
|
|
59
57
|
export { NavMenu }
|
|
60
58
|
export { NavMenu as NavMenu_alias_1 }
|
|
61
59
|
|
|
@@ -68,7 +66,7 @@ declare interface NavMenuContextValue {
|
|
|
68
66
|
export { NavMenuContextValue }
|
|
69
67
|
export { NavMenuContextValue as NavMenuContextValue_alias_1 }
|
|
70
68
|
|
|
71
|
-
declare function NavMenuLink(props: NavMenuLinkProps):
|
|
69
|
+
declare function NavMenuLink(props: NavMenuLinkProps): JSX.Element;
|
|
72
70
|
export { NavMenuLink }
|
|
73
71
|
export { NavMenuLink as NavMenuLink_alias_1 }
|
|
74
72
|
|
|
@@ -78,7 +76,20 @@ declare interface NavMenuLinkProps extends AnchorHTMLAttributes<HTMLAnchorElemen
|
|
|
78
76
|
export { NavMenuLinkProps }
|
|
79
77
|
export { NavMenuLinkProps as NavMenuLinkProps_alias_1 }
|
|
80
78
|
|
|
81
|
-
|
|
79
|
+
/**
|
|
80
|
+
* A component that allows the user to display a menu of navigation links.
|
|
81
|
+
* @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)
|
|
82
|
+
* @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```tsx
|
|
86
|
+
* <NavMenuList id="nav-menu-list" position="bottom">
|
|
87
|
+
* <NavMenuLink href="/home">Home</NavMenuLink>
|
|
88
|
+
* <NavMenuLink href="/about">About</NavMenuLink>
|
|
89
|
+
* </NavMenuList>
|
|
90
|
+
* ```
|
|
91
|
+
**/
|
|
92
|
+
declare function NavMenuList(props: NavMenuListProps): JSX.Element;
|
|
82
93
|
export { NavMenuList }
|
|
83
94
|
export { NavMenuList as NavMenuList_alias_1 }
|
|
84
95
|
|
|
@@ -95,9 +106,17 @@ export { NavMenuRef as NavMenuRef_alias_1 }
|
|
|
95
106
|
|
|
96
107
|
/**
|
|
97
108
|
* A component that allows the user to trigger a navigation menu.
|
|
98
|
-
* @
|
|
109
|
+
* @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
|
|
110
|
+
* @example
|
|
111
|
+
* ```tsx
|
|
112
|
+
* <NavMenu>
|
|
113
|
+
* <NavMenuTrigger controls="nav-menu-list">
|
|
114
|
+
* Menu
|
|
115
|
+
* </NavMenuTrigger>
|
|
116
|
+
* </NavMenu>
|
|
117
|
+
* ```
|
|
99
118
|
*/
|
|
100
|
-
declare function NavMenuTrigger(props: NavMenuTriggerProps):
|
|
119
|
+
declare function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element;
|
|
101
120
|
export { NavMenuTrigger }
|
|
102
121
|
export { NavMenuTrigger as NavMenuTrigger_alias_1 }
|
|
103
122
|
|
|
@@ -107,6 +126,11 @@ declare interface NavMenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonEle
|
|
|
107
126
|
export { NavMenuTriggerProps }
|
|
108
127
|
export { NavMenuTriggerProps as NavMenuTriggerProps_alias_1 }
|
|
109
128
|
|
|
129
|
+
declare interface NavTriggerAriaReturn {
|
|
130
|
+
['aria-controls']: string;
|
|
131
|
+
['aria-expanded']: boolean;
|
|
132
|
+
}
|
|
133
|
+
|
|
110
134
|
declare interface NavTriggerAriaValues {
|
|
111
135
|
controls: string;
|
|
112
136
|
expanded?: boolean;
|
|
@@ -125,7 +149,12 @@ export { Positions as Positions_alias_1 }
|
|
|
125
149
|
/**
|
|
126
150
|
* Conditionally render its children or an optional fallback component
|
|
127
151
|
* based on the SolidJS component.
|
|
128
|
-
* @
|
|
152
|
+
* @definition [Show docs](https://cerberus.digitalu.design/react/show)
|
|
153
|
+
* @example
|
|
154
|
+
* ```tsx
|
|
155
|
+
* <Show when={condition}>
|
|
156
|
+
* <div>Content</div>
|
|
157
|
+
* </Show>
|
|
129
158
|
*/
|
|
130
159
|
declare function Show(props: PropsWithChildren<ShowProps>): ReactNode;
|
|
131
160
|
export { Show }
|
|
@@ -142,7 +171,7 @@ declare const THEME_KEY = "cerberus-theme";
|
|
|
142
171
|
export { THEME_KEY }
|
|
143
172
|
export { THEME_KEY as THEME_KEY_alias_1 }
|
|
144
173
|
|
|
145
|
-
declare interface ThemeContextValue<T extends DefaultThemes> {
|
|
174
|
+
declare interface ThemeContextValue<T extends string = DefaultThemes> {
|
|
146
175
|
theme: CustomThemes<T>;
|
|
147
176
|
mode: ColorModes;
|
|
148
177
|
updateTheme: (theme: T) => void;
|
|
@@ -151,7 +180,16 @@ declare interface ThemeContextValue<T extends DefaultThemes> {
|
|
|
151
180
|
export { ThemeContextValue }
|
|
152
181
|
export { ThemeContextValue as ThemeContextValue_alias_1 }
|
|
153
182
|
|
|
154
|
-
|
|
183
|
+
/**
|
|
184
|
+
* A context provider that allows the user to set the theme and mode of the application.
|
|
185
|
+
* @example
|
|
186
|
+
* ```tsx
|
|
187
|
+
* <ThemeProvider>
|
|
188
|
+
* <App />
|
|
189
|
+
* </ThemeProvider>
|
|
190
|
+
* ```
|
|
191
|
+
*/
|
|
192
|
+
declare function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element;
|
|
155
193
|
export { ThemeProvider }
|
|
156
194
|
export { ThemeProvider as ThemeProvider_alias_1 }
|
|
157
195
|
|
|
@@ -159,12 +197,7 @@ declare function useNavMenuContext(): NavMenuContextValue;
|
|
|
159
197
|
export { useNavMenuContext }
|
|
160
198
|
export { useNavMenuContext as useNavMenuContext_alias_1 }
|
|
161
199
|
|
|
162
|
-
declare function useTheme<C extends string = DefaultThemes>(defaultTheme?: CustomThemes<C>, defaultColorMode?: ColorModes):
|
|
163
|
-
theme: CustomThemes<C>;
|
|
164
|
-
mode: ColorModes;
|
|
165
|
-
updateTheme: (newTheme: CustomThemes<C>) => void;
|
|
166
|
-
updateMode: () => void;
|
|
167
|
-
};
|
|
200
|
+
declare function useTheme<C extends string = DefaultThemes>(defaultTheme?: CustomThemes<C>, defaultColorMode?: ColorModes): ThemeContextValue<C>;
|
|
168
201
|
export { useTheme }
|
|
169
202
|
export { useTheme as useTheme_alias_1 }
|
|
170
203
|
|
|
@@ -2,7 +2,6 @@ import type { AnchorHTMLAttributes } from 'react';
|
|
|
2
2
|
import { ButtonHTMLAttributes } from 'react';
|
|
3
3
|
import { ElementType } from 'react';
|
|
4
4
|
import { HTMLAttributes } from 'react';
|
|
5
|
-
import { JSX as JSX_2 } from 'react/jsx-runtime';
|
|
6
5
|
import { PropsWithChildren } from 'react';
|
|
7
6
|
import { ReactNode } from 'react';
|
|
8
7
|
import { RefObject } from 'react';
|
|
@@ -11,7 +10,7 @@ import { RefObject } from 'react';
|
|
|
11
10
|
* A component that allows the user to perform actions
|
|
12
11
|
* @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Button.tsx
|
|
13
12
|
*/
|
|
14
|
-
declare function Button(props: ButtonProps):
|
|
13
|
+
declare function Button(props: ButtonProps): JSX.Element;
|
|
15
14
|
export { Button }
|
|
16
15
|
export { Button as Button_alias_1 }
|
|
17
16
|
|
|
@@ -27,10 +26,7 @@ declare type ColorModes = 'light' | 'dark';
|
|
|
27
26
|
export { ColorModes }
|
|
28
27
|
export { ColorModes as ColorModes_alias_1 }
|
|
29
28
|
|
|
30
|
-
declare function createNavTriggerProps(values: NavTriggerAriaValues):
|
|
31
|
-
"aria-controls": string;
|
|
32
|
-
"aria-expanded": boolean;
|
|
33
|
-
};
|
|
29
|
+
declare function createNavTriggerProps(values: NavTriggerAriaValues): NavTriggerAriaReturn;
|
|
34
30
|
export { createNavTriggerProps }
|
|
35
31
|
export { createNavTriggerProps as createNavTriggerProps_alias_1 }
|
|
36
32
|
|
|
@@ -42,20 +38,22 @@ declare type DefaultThemes = 'cerberus';
|
|
|
42
38
|
export { DefaultThemes }
|
|
43
39
|
export { DefaultThemes as DefaultThemes_alias_1 }
|
|
44
40
|
|
|
45
|
-
declare function getPosition(position: Positions):
|
|
41
|
+
declare function getPosition(position: Positions): GetPositionResult;
|
|
42
|
+
export { getPosition }
|
|
43
|
+
export { getPosition as getPosition_alias_1 }
|
|
44
|
+
|
|
45
|
+
declare interface GetPositionResult {
|
|
46
46
|
left: string;
|
|
47
47
|
right: string;
|
|
48
48
|
top: string;
|
|
49
49
|
bottom: string;
|
|
50
|
-
}
|
|
51
|
-
export { getPosition }
|
|
52
|
-
export { getPosition as getPosition_alias_1 }
|
|
50
|
+
}
|
|
53
51
|
|
|
54
52
|
declare const MODE_KEY = "cerberus-mode";
|
|
55
53
|
export { MODE_KEY }
|
|
56
54
|
export { MODE_KEY as MODE_KEY_alias_1 }
|
|
57
55
|
|
|
58
|
-
declare function NavMenu(props: PropsWithChildren):
|
|
56
|
+
declare function NavMenu(props: PropsWithChildren): JSX.Element;
|
|
59
57
|
export { NavMenu }
|
|
60
58
|
export { NavMenu as NavMenu_alias_1 }
|
|
61
59
|
|
|
@@ -68,7 +66,7 @@ declare interface NavMenuContextValue {
|
|
|
68
66
|
export { NavMenuContextValue }
|
|
69
67
|
export { NavMenuContextValue as NavMenuContextValue_alias_1 }
|
|
70
68
|
|
|
71
|
-
declare function NavMenuLink(props: NavMenuLinkProps):
|
|
69
|
+
declare function NavMenuLink(props: NavMenuLinkProps): JSX.Element;
|
|
72
70
|
export { NavMenuLink }
|
|
73
71
|
export { NavMenuLink as NavMenuLink_alias_1 }
|
|
74
72
|
|
|
@@ -78,7 +76,20 @@ declare interface NavMenuLinkProps extends AnchorHTMLAttributes<HTMLAnchorElemen
|
|
|
78
76
|
export { NavMenuLinkProps }
|
|
79
77
|
export { NavMenuLinkProps as NavMenuLinkProps_alias_1 }
|
|
80
78
|
|
|
81
|
-
|
|
79
|
+
/**
|
|
80
|
+
* A component that allows the user to display a menu of navigation links.
|
|
81
|
+
* @definition [Disclosure Nav](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/)
|
|
82
|
+
* @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```tsx
|
|
86
|
+
* <NavMenuList id="nav-menu-list" position="bottom">
|
|
87
|
+
* <NavMenuLink href="/home">Home</NavMenuLink>
|
|
88
|
+
* <NavMenuLink href="/about">About</NavMenuLink>
|
|
89
|
+
* </NavMenuList>
|
|
90
|
+
* ```
|
|
91
|
+
**/
|
|
92
|
+
declare function NavMenuList(props: NavMenuListProps): JSX.Element;
|
|
82
93
|
export { NavMenuList }
|
|
83
94
|
export { NavMenuList as NavMenuList_alias_1 }
|
|
84
95
|
|
|
@@ -95,9 +106,17 @@ export { NavMenuRef as NavMenuRef_alias_1 }
|
|
|
95
106
|
|
|
96
107
|
/**
|
|
97
108
|
* A component that allows the user to trigger a navigation menu.
|
|
98
|
-
* @
|
|
109
|
+
* @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
|
|
110
|
+
* @example
|
|
111
|
+
* ```tsx
|
|
112
|
+
* <NavMenu>
|
|
113
|
+
* <NavMenuTrigger controls="nav-menu-list">
|
|
114
|
+
* Menu
|
|
115
|
+
* </NavMenuTrigger>
|
|
116
|
+
* </NavMenu>
|
|
117
|
+
* ```
|
|
99
118
|
*/
|
|
100
|
-
declare function NavMenuTrigger(props: NavMenuTriggerProps):
|
|
119
|
+
declare function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element;
|
|
101
120
|
export { NavMenuTrigger }
|
|
102
121
|
export { NavMenuTrigger as NavMenuTrigger_alias_1 }
|
|
103
122
|
|
|
@@ -107,6 +126,11 @@ declare interface NavMenuTriggerProps extends ButtonHTMLAttributes<HTMLButtonEle
|
|
|
107
126
|
export { NavMenuTriggerProps }
|
|
108
127
|
export { NavMenuTriggerProps as NavMenuTriggerProps_alias_1 }
|
|
109
128
|
|
|
129
|
+
declare interface NavTriggerAriaReturn {
|
|
130
|
+
['aria-controls']: string;
|
|
131
|
+
['aria-expanded']: boolean;
|
|
132
|
+
}
|
|
133
|
+
|
|
110
134
|
declare interface NavTriggerAriaValues {
|
|
111
135
|
controls: string;
|
|
112
136
|
expanded?: boolean;
|
|
@@ -125,7 +149,12 @@ export { Positions as Positions_alias_1 }
|
|
|
125
149
|
/**
|
|
126
150
|
* Conditionally render its children or an optional fallback component
|
|
127
151
|
* based on the SolidJS component.
|
|
128
|
-
* @
|
|
152
|
+
* @definition [Show docs](https://cerberus.digitalu.design/react/show)
|
|
153
|
+
* @example
|
|
154
|
+
* ```tsx
|
|
155
|
+
* <Show when={condition}>
|
|
156
|
+
* <div>Content</div>
|
|
157
|
+
* </Show>
|
|
129
158
|
*/
|
|
130
159
|
declare function Show(props: PropsWithChildren<ShowProps>): ReactNode;
|
|
131
160
|
export { Show }
|
|
@@ -142,7 +171,7 @@ declare const THEME_KEY = "cerberus-theme";
|
|
|
142
171
|
export { THEME_KEY }
|
|
143
172
|
export { THEME_KEY as THEME_KEY_alias_1 }
|
|
144
173
|
|
|
145
|
-
declare interface ThemeContextValue<T extends DefaultThemes> {
|
|
174
|
+
declare interface ThemeContextValue<T extends string = DefaultThemes> {
|
|
146
175
|
theme: CustomThemes<T>;
|
|
147
176
|
mode: ColorModes;
|
|
148
177
|
updateTheme: (theme: T) => void;
|
|
@@ -151,7 +180,16 @@ declare interface ThemeContextValue<T extends DefaultThemes> {
|
|
|
151
180
|
export { ThemeContextValue }
|
|
152
181
|
export { ThemeContextValue as ThemeContextValue_alias_1 }
|
|
153
182
|
|
|
154
|
-
|
|
183
|
+
/**
|
|
184
|
+
* A context provider that allows the user to set the theme and mode of the application.
|
|
185
|
+
* @example
|
|
186
|
+
* ```tsx
|
|
187
|
+
* <ThemeProvider>
|
|
188
|
+
* <App />
|
|
189
|
+
* </ThemeProvider>
|
|
190
|
+
* ```
|
|
191
|
+
*/
|
|
192
|
+
declare function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element;
|
|
155
193
|
export { ThemeProvider }
|
|
156
194
|
export { ThemeProvider as ThemeProvider_alias_1 }
|
|
157
195
|
|
|
@@ -159,12 +197,7 @@ declare function useNavMenuContext(): NavMenuContextValue;
|
|
|
159
197
|
export { useNavMenuContext }
|
|
160
198
|
export { useNavMenuContext as useNavMenuContext_alias_1 }
|
|
161
199
|
|
|
162
|
-
declare function useTheme<C extends string = DefaultThemes>(defaultTheme?: CustomThemes<C>, defaultColorMode?: ColorModes):
|
|
163
|
-
theme: CustomThemes<C>;
|
|
164
|
-
mode: ColorModes;
|
|
165
|
-
updateTheme: (newTheme: CustomThemes<C>) => void;
|
|
166
|
-
updateMode: () => void;
|
|
167
|
-
};
|
|
200
|
+
declare function useTheme<C extends string = DefaultThemes>(defaultTheme?: CustomThemes<C>, defaultColorMode?: ColorModes): ThemeContextValue<C>;
|
|
168
201
|
export { useTheme }
|
|
169
202
|
export { useTheme as useTheme_alias_1 }
|
|
170
203
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/aria-helpers/nav-menu.aria.ts"],"sourcesContent":["export interface NavTriggerAriaValues {\n controls: string\n expanded?: boolean\n}\n\nexport function createNavTriggerProps(values: NavTriggerAriaValues) {\n return {\n ['aria-controls']: values.controls,\n ['aria-expanded']: values.expanded ?? false,\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUO,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/aria-helpers/nav-menu.aria.ts"],"sourcesContent":["export interface NavTriggerAriaValues {\n controls: string\n expanded?: boolean\n}\n\nexport function createNavTriggerProps(values: NavTriggerAriaValues) {\n return {\n ['aria-controls']: values.controls,\n ['aria-expanded']: values.expanded ?? false,\n }\n}\n"],"mappings":";
|
|
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":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { button } from '@cerberus-design/styled-system/recipes'\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) {\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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAmB;AACnB,qBAAuB;AAenB;AAHG,SAAS,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { button } from '@cerberus-design/styled-system/recipes'\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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,iBAAmB;AACnB,qBAAuB;AAenB;AAHG,SAAS,OAAO,OAAiC;AACtD,QAAM,EAAE,SAAS,OAAO,OAAO,GAAG,YAAY,IAAI;AAClD,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,uBAAO;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { button } from '@cerberus-design/styled-system/recipes'\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) {\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;AAenB;AAHG,SAAS,OAAO,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Button.tsx"],"sourcesContent":["import type { ButtonHTMLAttributes } from 'react'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { button } from '@cerberus-design/styled-system/recipes'\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;AAenB;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 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus-design/styled-system/css'\n\nexport interface NavMenuLinkProps\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n as?: ElementType\n}\n\nexport function NavMenuLink(props: NavMenuLinkProps) {\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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAqB;AACrB,iBAAwB;AAqBd;AAdH,SAAS,YAAY,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus-design/styled-system/css'\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":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAqB;AACrB,iBAAwB;AAqBd;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,eAAW,gBAAI;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,eAAW;AAAA,gBACT,YAAY;AAAA,oBACZ,gBAAI;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,4CAAC,SAAO,GAAG,aAAa;AAAA;AAAA,MACpC;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus-design/styled-system/css'\n\nexport interface NavMenuLinkProps\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n as?: ElementType\n}\n\nexport function NavMenuLink(props: NavMenuLinkProps) {\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,YAAY;AACrB,SAAS,KAAK,UAAU;AAqBd;AAdH,SAAS,YAAY,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NavMenuLink.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { Show } from './Show'\nimport { css, cx } from '@cerberus-design/styled-system/css'\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,YAAY;AACrB,SAAS,KAAK,UAAU;AAqBd;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":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { useNavMenuContext } from '../context/navMenu'\nimport { Show } from './Show'\nimport type { Positions } from '../types'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { vstack } from '@cerberus-design/styled-system/patterns'\n\nexport function getPosition(position: Positions) {\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\
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { useNavMenuContext } from '../context/navMenu'\nimport { Show } from './Show'\nimport type { Positions } from '../types'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { vstack } from '@cerberus-design/styled-system/patterns'\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAA6C;AAC7C,qBAAkC;AAClC,kBAAqB;AAErB,iBAAmB;AACnB,sBAAuB;AAyFjB;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,oBAAgB,wBAAO;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,QAAI,kCAAkB;AAChD,QAAM,qBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,4CAAC,oBAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,eAAW,eAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { useNavMenuContext } from '../context/navMenu'\nimport { Show } from './Show'\nimport type { Positions } from '../types'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { vstack } from '@cerberus-design/styled-system/patterns'\n\nexport function getPosition(position: Positions) {\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\
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NavMenuList.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type HTMLAttributes } from 'react'\nimport { useNavMenuContext } from '../context/navMenu'\nimport { Show } from './Show'\nimport type { Positions } from '../types'\nimport { cx } from '@cerberus-design/styled-system/css'\nimport { vstack } from '@cerberus-design/styled-system/patterns'\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,yBAAyB;AAClC,SAAS,YAAY;AAErB,SAAS,UAAU;AACnB,SAAS,cAAc;AAyFjB;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":[]}
|
|
@@ -1 +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-design/styled-system/css'\nimport { button } from '@cerberus-design/styled-system/recipes'\nimport {\n createNavTriggerProps,\n type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { Show } from './Show'\nimport type { ButtonProps } from './Button'\nimport { useNavMenuContext } from '../context/navMenu'\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 * @
|
|
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-design/styled-system/css'\nimport { button } from '@cerberus-design/styled-system/recipes'\nimport {\n createNavTriggerProps,\n type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { Show } from './Show'\nimport type { ButtonProps } from './Button'\nimport { useNavMenuContext } from '../context/navMenu'\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAKO;AACP,iBAAmB;AACnB,qBAAuB;AACvB,sBAGO;AACP,kBAAqB;AAErB,qBAAkC;AAoD1B;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,QAAI,kCAAkB;AAC7D,QAAM,gBAAY,uCAAsB;AAAA,IACtC;AAAA,IACA,UAAU,iBAAiB;AAAA,EAC7B,CAAC;AACD,QAAM,QAAQ,QAAQ,EAAE;AACxB,QAAM,QAAqB;AAE3B,QAAM,kBAAc;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,eAAW;AAAA,YACT,YAAY;AAAA,gBACZ,uBAAO;AAAA,cACL;AAAA,cACA;AAAA,cACA;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA,SAAS;AAAA,UACT,KAAK;AAAA,UAEJ,gBAAM;AAAA;AAAA,MACT;AAAA,MAGD,mBACC;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACH,GAAG;AAAA,UACJ,SAAS;AAAA,UACT,KAAK;AAAA;AAAA,MACP;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
|
|
@@ -1 +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-design/styled-system/css'\nimport { button } from '@cerberus-design/styled-system/recipes'\nimport {\n createNavTriggerProps,\n type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { Show } from './Show'\nimport type { ButtonProps } from './Button'\nimport { useNavMenuContext } from '../context/navMenu'\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 * @
|
|
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-design/styled-system/css'\nimport { button } from '@cerberus-design/styled-system/recipes'\nimport {\n createNavTriggerProps,\n type NavTriggerAriaValues,\n} from '../aria-helpers/nav-menu.aria'\nimport { Show } from './Show'\nimport type { ButtonProps } from './Button'\nimport { useNavMenuContext } from '../context/navMenu'\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;AACvB;AAAA,EACE;AAAA,OAEK;AACP,SAAS,YAAY;AAErB,SAAS,yBAAyB;AAoD1B;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":[]}
|
|
@@ -1 +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 * @
|
|
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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAgE;AAiBzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,sBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,sBAAQ,MAAM;AACnB,QAAI;AAAW,aAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;","names":[]}
|
|
@@ -1 +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 * @
|
|
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":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from '@cerberus-design/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) {\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() {\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,mBASO;AAmCD;AAvBN,IAAM,qBAAiB,4BAA0C,IAAI;AAE9D,SAAS,QAAQ,
|
|
1
|
+
{"version":3,"sources":["../../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from '@cerberus-design/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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,iBAAoB;AACpB,mBASO;AAmCD;AAvBN,IAAM,qBAAiB,4BAA0C,IAAI;AAE9D,SAAS,QAAQ,OAAuC;AAC7D,QAAM,iBAAa,qBAA0B,IAAI;AACjD,QAAM,cAAU,qBAAyB,IAAI;AAC7C,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAkB,KAAK;AAEvD,QAAM,mBAAe,0BAAY,MAAM;AACrC,gBAAY,CAAC,SAAS,CAAC,IAAI;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,YAAQ;AAAA,IACZ,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,CAAC,UAAU,YAAY;AAAA,EACzB;AAEA,SACE,4CAAC,eAAe,UAAf,EAAwB,OACvB;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,gBAAI;AAAA,QACb,UAAU;AAAA,MACZ,CAAC;AAAA,MAEA,gBAAM;AAAA;AAAA,EACT,GACF;AAEJ;AAEO,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from '@cerberus-design/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) {\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() {\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,
|
|
1
|
+
{"version":3,"sources":["../../../src/context/navMenu.tsx"],"sourcesContent":["'use client'\n\nimport { css } from '@cerberus-design/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":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/context/theme.tsx"],"sourcesContent":["'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 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\nexport function ThemeProvider(props: PropsWithChildren<unknown>) {\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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkE;AAClE,sBAAyB;
|
|
1
|
+
{"version":3,"sources":["../../../src/context/theme.tsx"],"sourcesContent":["'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":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAAkE;AAClE,sBAAyB;AAgCrB;AAnBG,IAAM,YAAY;AAClB,IAAM,WAAW;AAExB,IAAM,mBAAe;AAAA,EACnB;AACF;AAWO,SAAS,cAAc,OAAgD;AAC5E,QAAM,YAAQ,0BAAS;AACvB,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAO,OAC3B,gBAAM,UACT;AAEJ;AAEO,SAAS,kBAAoD;AAClE,QAAM,cAAU,yBAAW,YAAY;AACvC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,qDAAqD;AAAA,EACvE;AACA,SAAO;AACT;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/context/theme.tsx"],"sourcesContent":["'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 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\nexport function ThemeProvider(props: PropsWithChildren<unknown>) {\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,SAAS,eAAe,kBAA0C;AAClE,SAAS,gBAAgB;
|
|
1
|
+
{"version":3,"sources":["../../../src/context/theme.tsx"],"sourcesContent":["'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,SAAS,eAAe,kBAA0C;AAClE,SAAS,gBAAgB;AAgCrB;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;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useTheme.ts"],"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} from '../context/theme'\n\nexport function useTheme<C extends string = DefaultThemes>(\n defaultTheme: CustomThemes<C> = 'cerberus',\n defaultColorMode: ColorModes = 'light',\n) {\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAMO;AACP,
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useTheme.ts"],"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,mBAMO;AACP,mBAOO;AAEA,SAAS,SACd,eAAgC,YAChC,mBAA+B,SACT;AACtB,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAA0B,YAAY;AAChE,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAqB,gBAAgB;AAEvE,QAAM,wBAAoB,0BAAY,CAAC,aAA8B;AACnE,aAAS,QAAQ;AACjB,iBAAa,QAAQ,wBAAW,QAAQ;AAAA,EAC1C,GAAG,CAAC,CAAC;AAEL,QAAM,4BAAwB,0BAAY,MAAM;AAC9C,iBAAa,CAAC,SAAS;AACrB,YAAM,UAAU,SAAS,UAAU,SAAS;AAC5C,mBAAa,QAAQ,uBAAU,OAAO;AACtC,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AACpB,UAAMA,SAAQ,aAAa,QAAQ,sBAAS;AAC5C,QAAIA,QAAO;AACT,eAASA,MAAwB;AAAA,IACnC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,oCAAgB,MAAM;AACpB,UAAM,OAAO,aAAa,QAAQ,qBAAQ;AAC1C,QAAI,MAAM;AACR,mBAAa,IAAkB;AAAA,IACjC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,8BAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,QAAQ;AAAA,EACvB,GAAG,CAAC,KAAK,CAAC;AAEV,8BAAU,MAAM;AACd,UAAM,OAAO,SAAS;AACtB,SAAK,QAAQ,YAAY;AAAA,EAC3B,GAAG,CAAC,SAAS,CAAC;AAEd,aAAO;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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/hooks/useTheme.ts"],"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} from '../context/theme'\n\nexport function useTheme<C extends string = DefaultThemes>(\n defaultTheme: CustomThemes<C> = 'cerberus',\n defaultColorMode: ColorModes = 'light',\n) {\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"],"mappings":";;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,
|
|
1
|
+
{"version":3,"sources":["../../../src/hooks/useTheme.ts"],"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"],"mappings":";;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAKK;AAEA,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"]}
|