@cerberus-design/react 0.11.1-next-c28b077 → 0.12.0-next-c2bae7a
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 +143 -30
- package/build/legacy/components/Menu.cjs +82 -0
- package/build/legacy/components/Menu.cjs.map +1 -0
- package/build/legacy/components/NavMenuLink.cjs.map +1 -1
- package/build/legacy/components/NavMenuList.cjs.map +1 -1
- package/build/legacy/components/NavMenuTrigger.cjs.map +1 -1
- package/build/legacy/components/Tbody.cjs.map +1 -1
- package/build/legacy/components/Td.cjs.map +1 -1
- package/build/legacy/components/Th.cjs +1 -0
- package/build/legacy/components/Th.cjs.map +1 -1
- package/build/legacy/components/Thead.cjs.map +1 -1
- package/build/legacy/context/navMenu.cjs.map +1 -1
- package/build/legacy/index.cjs +400 -344
- package/build/legacy/index.cjs.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +143 -30
- package/build/modern/{chunk-HPM2XRWT.js → chunk-3R4TIF2X.js} +1 -1
- package/build/modern/{chunk-HPM2XRWT.js.map → chunk-3R4TIF2X.js.map} +1 -1
- package/build/modern/{chunk-O75QAT4Z.js → chunk-6WS765J3.js} +1 -1
- package/build/modern/chunk-6WS765J3.js.map +1 -0
- package/build/modern/{chunk-PJGUYNKD.js → chunk-CSEHDNMJ.js} +4 -4
- package/build/modern/{chunk-OWKN5IV7.js → chunk-PM7CWT3N.js} +2 -2
- package/build/modern/chunk-PM7CWT3N.js.map +1 -0
- package/build/modern/chunk-RUR5MV54.js +52 -0
- package/build/modern/chunk-RUR5MV54.js.map +1 -0
- package/build/modern/{chunk-CO4BKT7K.js → chunk-SGKHA4EB.js} +1 -1
- package/build/modern/chunk-SGKHA4EB.js.map +1 -0
- package/build/modern/{chunk-JVIFMN67.js → chunk-T6LS5P5W.js} +4 -4
- package/build/modern/{chunk-5V5MBSM3.js → chunk-UZVQ4INR.js} +2 -2
- package/build/modern/chunk-UZVQ4INR.js.map +1 -0
- package/build/modern/{chunk-C7UVOGPZ.js → chunk-VP5ERLAY.js} +4 -4
- package/build/modern/{chunk-KBBASJIY.js → chunk-WPVDQRRF.js} +1 -1
- package/build/modern/chunk-WPVDQRRF.js.map +1 -0
- package/build/modern/{chunk-PKY46RRA.js → chunk-Y6QQCRQV.js} +1 -1
- package/build/modern/{chunk-PKY46RRA.js.map → chunk-Y6QQCRQV.js.map} +1 -1
- package/build/modern/{chunk-PKQTTFWA.js → chunk-ZR37P4NZ.js} +1 -1
- package/build/modern/{chunk-PKQTTFWA.js.map → chunk-ZR37P4NZ.js.map} +1 -1
- package/build/modern/components/Menu.js +19 -0
- package/build/modern/components/Menu.js.map +1 -0
- package/build/modern/components/NavMenuLink.js +1 -1
- package/build/modern/components/NavMenuList.js +2 -2
- package/build/modern/components/NavMenuTrigger.js +2 -2
- package/build/modern/components/Tbody.js +1 -1
- package/build/modern/components/Td.js +1 -1
- package/build/modern/components/Th.js +2 -1
- package/build/modern/components/Thead.js +1 -1
- package/build/modern/context/confirm-modal.js +2 -2
- package/build/modern/context/cta-modal.js +2 -2
- package/build/modern/context/navMenu.js +1 -1
- package/build/modern/context/prompt-modal.js +2 -2
- package/build/modern/index.js +39 -23
- package/build/modern/index.js.map +1 -1
- package/package.json +3 -2
- package/src/components/Menu.tsx +244 -0
- package/src/components/NavMenuLink.tsx +1 -11
- package/src/components/NavMenuList.tsx +1 -3
- package/src/components/NavMenuTrigger.tsx +1 -10
- package/src/components/Tbody.tsx +1 -2
- package/src/components/Td.tsx +1 -2
- package/src/components/Th.tsx +4 -2
- package/src/components/Thead.tsx +1 -2
- package/src/context/navMenu.tsx +1 -2
- package/src/index.ts +1 -0
- package/build/modern/chunk-5V5MBSM3.js.map +0 -1
- package/build/modern/chunk-CO4BKT7K.js.map +0 -1
- package/build/modern/chunk-KBBASJIY.js.map +0 -1
- package/build/modern/chunk-O75QAT4Z.js.map +0 -1
- package/build/modern/chunk-OWKN5IV7.js.map +0 -1
- /package/build/modern/{chunk-PJGUYNKD.js.map → chunk-CSEHDNMJ.js.map} +0 -0
- /package/build/modern/{chunk-JVIFMN67.js.map → chunk-T6LS5P5W.js.map} +0 -0
- /package/build/modern/{chunk-C7UVOGPZ.js.map → chunk-VP5ERLAY.js.map} +0 -0
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
|
|
1
3
|
import { Activator } from '@dnd-kit/core';
|
|
2
4
|
import { Activators } from '@dnd-kit/core';
|
|
3
5
|
import { Active } from '@dnd-kit/core';
|
|
@@ -80,6 +82,7 @@ import { LabelVariantProps } from '@cerberus/styled-system/recipes';
|
|
|
80
82
|
import { MeasuringConfiguration } from '@dnd-kit/core';
|
|
81
83
|
import { MeasuringFrequency } from '@dnd-kit/core';
|
|
82
84
|
import { MeasuringStrategy } from '@dnd-kit/core';
|
|
85
|
+
import { Menu as Menu_2 } from '@ark-ui/react';
|
|
83
86
|
import { Modifier } from '@dnd-kit/core';
|
|
84
87
|
import { Modifiers } from '@dnd-kit/core';
|
|
85
88
|
import { MouseEvent as MouseEvent_2 } from 'react';
|
|
@@ -1035,9 +1038,7 @@ export { getClientRect }
|
|
|
1035
1038
|
export { getFirstCollision }
|
|
1036
1039
|
|
|
1037
1040
|
/**
|
|
1038
|
-
*
|
|
1039
|
-
* @param position - The position of the NavMenuList.
|
|
1040
|
-
* @returns The position of the NavMenuList.
|
|
1041
|
+
* @deprecated use the {@link Menu} family instead
|
|
1041
1042
|
*/
|
|
1042
1043
|
declare function getPosition(position: Positions): GetPositionResult;
|
|
1043
1044
|
export { getPosition }
|
|
@@ -1260,6 +1261,138 @@ export { MeasuringFrequency }
|
|
|
1260
1261
|
|
|
1261
1262
|
export { MeasuringStrategy }
|
|
1262
1263
|
|
|
1264
|
+
/**
|
|
1265
|
+
* The root Menu component which controls the menu.
|
|
1266
|
+
* @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
|
|
1267
|
+
* @example
|
|
1268
|
+
* ```tsx
|
|
1269
|
+
* <Menu>
|
|
1270
|
+
* <MenuTrigger>Trigger</MenuTrigger>
|
|
1271
|
+
* </Menu>
|
|
1272
|
+
*/
|
|
1273
|
+
declare const Menu: (props: Menu_2.RootProps) => JSX_2.Element;
|
|
1274
|
+
export { Menu }
|
|
1275
|
+
export { Menu as Menu_alias_1 }
|
|
1276
|
+
|
|
1277
|
+
/**
|
|
1278
|
+
* The MenuContent component is the container for the menu items.
|
|
1279
|
+
* @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
|
|
1280
|
+
* @example
|
|
1281
|
+
* ```tsx
|
|
1282
|
+
* <Menu>
|
|
1283
|
+
* <MenuTrigger>
|
|
1284
|
+
* <Button>Trigger</Button>
|
|
1285
|
+
* </MenuTrigger>
|
|
1286
|
+
* <MenuContent>
|
|
1287
|
+
* <MenuItem value="item_1">Item 1</MenuItem>
|
|
1288
|
+
* <MenuItem value="item_2">Item 2</MenuItem>
|
|
1289
|
+
* </MenuContent>
|
|
1290
|
+
* </Menu>
|
|
1291
|
+
*/
|
|
1292
|
+
declare function MenuContent(props: Menu_2.ContentProps): JSX_2.Element;
|
|
1293
|
+
export { MenuContent }
|
|
1294
|
+
export { MenuContent as MenuContent_alias_1 }
|
|
1295
|
+
|
|
1296
|
+
/**
|
|
1297
|
+
* The MenuItemGroupLabel component is the label for a group of menu items.
|
|
1298
|
+
* @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
|
|
1299
|
+
* @example
|
|
1300
|
+
* ```tsx
|
|
1301
|
+
* <Menu>
|
|
1302
|
+
* <MenuTrigger>
|
|
1303
|
+
* <Button>Trigger</Button>
|
|
1304
|
+
* </MenuTrigger>
|
|
1305
|
+
* <MenuContent>
|
|
1306
|
+
* <MenuItemGroup>
|
|
1307
|
+
* <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>
|
|
1308
|
+
* <MenuItem value="item_1">Item 1</MenuItem>
|
|
1309
|
+
* <MenuItem value="item_2">Item 2</MenuItem>
|
|
1310
|
+
* </MenuItemGroup>
|
|
1311
|
+
* </MenuContent>
|
|
1312
|
+
* </Menu>
|
|
1313
|
+
*/
|
|
1314
|
+
declare function MenuGroupLabel(props: Menu_2.ItemGroupLabelProps): JSX_2.Element;
|
|
1315
|
+
export { MenuGroupLabel }
|
|
1316
|
+
export { MenuGroupLabel as MenuGroupLabel_alias_1 }
|
|
1317
|
+
|
|
1318
|
+
/**
|
|
1319
|
+
* The MenuItem component is a single item in the menu.
|
|
1320
|
+
* @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
|
|
1321
|
+
* @example
|
|
1322
|
+
* ```tsx
|
|
1323
|
+
* <Menu>
|
|
1324
|
+
* <MenuTrigger>
|
|
1325
|
+
* <Button>Trigger</Button>
|
|
1326
|
+
* </MenuTrigger>
|
|
1327
|
+
* <MenuContent>
|
|
1328
|
+
* <MenuItem value="item_1">Item 1</MenuItem>
|
|
1329
|
+
* <MenuItem value="item_2">Item 2</MenuItem>
|
|
1330
|
+
* </MenuContent>
|
|
1331
|
+
* </Menu>
|
|
1332
|
+
*/
|
|
1333
|
+
declare function MenuItem(props: Menu_2.ItemProps): JSX_2.Element;
|
|
1334
|
+
export { MenuItem }
|
|
1335
|
+
export { MenuItem as MenuItem_alias_1 }
|
|
1336
|
+
|
|
1337
|
+
/**
|
|
1338
|
+
* The MenuItemGroup component is a group of menu items.
|
|
1339
|
+
* @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
|
|
1340
|
+
* @example
|
|
1341
|
+
* ```tsx
|
|
1342
|
+
* <Menu>
|
|
1343
|
+
* <MenuTrigger>
|
|
1344
|
+
* <Button>Trigger</Button>
|
|
1345
|
+
* </MenuTrigger>
|
|
1346
|
+
* <MenuContent>
|
|
1347
|
+
* <MenuItemGroup>
|
|
1348
|
+
* <MenuItem value="item_1">Item 1</MenuItem>
|
|
1349
|
+
* <MenuItem value="item_2">Item 2</MenuItem>
|
|
1350
|
+
* </MenuItemGroup>
|
|
1351
|
+
* </MenuContent>
|
|
1352
|
+
* </Menu>
|
|
1353
|
+
*/
|
|
1354
|
+
declare const MenuItemGroup: ForwardRefExoticComponent<Menu_2.ItemGroupProps & RefAttributes<HTMLDivElement>>;
|
|
1355
|
+
export { MenuItemGroup }
|
|
1356
|
+
export { MenuItemGroup as MenuItemGroup_alias_1 }
|
|
1357
|
+
|
|
1358
|
+
/**
|
|
1359
|
+
* The MenuSeparator component is a visual divider between menu items.
|
|
1360
|
+
* @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
|
|
1361
|
+
* @example
|
|
1362
|
+
* ```tsx
|
|
1363
|
+
* <Menu>
|
|
1364
|
+
* <MenuTrigger>
|
|
1365
|
+
* <Button>Trigger</Button>
|
|
1366
|
+
* </MenuTrigger>
|
|
1367
|
+
* <MenuContent>
|
|
1368
|
+
* <MenuItemGroup>
|
|
1369
|
+
* <MenuGroupLabel>Group Label</MenuGroupLabel>
|
|
1370
|
+
* <MenuSeparator />
|
|
1371
|
+
* <MenuItem value="item_1">Item 1</MenuItem>
|
|
1372
|
+
* <MenuItem value="item_2">Item 2</MenuItem>
|
|
1373
|
+
* </MenuItemGroup>
|
|
1374
|
+
* </MenuContent>
|
|
1375
|
+
* </Menu>
|
|
1376
|
+
*/
|
|
1377
|
+
declare function MenuSeparator(props: Menu_2.SeparatorProps): JSX_2.Element;
|
|
1378
|
+
export { MenuSeparator }
|
|
1379
|
+
export { MenuSeparator as MenuSeparator_alias_1 }
|
|
1380
|
+
|
|
1381
|
+
/**
|
|
1382
|
+
* The MenuTrigger component opens/closes the Menu.
|
|
1383
|
+
* @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)
|
|
1384
|
+
* @example
|
|
1385
|
+
* ```tsx
|
|
1386
|
+
* <Menu>
|
|
1387
|
+
* <MenuTrigger>
|
|
1388
|
+
* <Button>Trigger</Button>
|
|
1389
|
+
* </MenuTrigger>
|
|
1390
|
+
* </Menu>
|
|
1391
|
+
*/
|
|
1392
|
+
declare function MenuTrigger(props: Menu_2.TriggerProps): JSX_2.Element;
|
|
1393
|
+
export { MenuTrigger }
|
|
1394
|
+
export { MenuTrigger as MenuTrigger_alias_1 }
|
|
1395
|
+
|
|
1263
1396
|
/**
|
|
1264
1397
|
* The Modal component is the root element for a customizable modal.
|
|
1265
1398
|
* @see https://cerberus.digitalu.design/react/modal
|
|
@@ -1371,8 +1504,7 @@ export { MouseSensor }
|
|
|
1371
1504
|
export { MouseSensorOptions }
|
|
1372
1505
|
|
|
1373
1506
|
/**
|
|
1374
|
-
*
|
|
1375
|
-
* @see https://cerberus.digitalu.design/react/nav-menu
|
|
1507
|
+
* @deprecated use the {@link Menu} family instead
|
|
1376
1508
|
*/
|
|
1377
1509
|
declare function NavMenu(props: PropsWithChildren): JSX.Element;
|
|
1378
1510
|
export { NavMenu }
|
|
@@ -1400,17 +1532,7 @@ export { NavMenuContextValue }
|
|
|
1400
1532
|
export { NavMenuContextValue as NavMenuContextValue_alias_1 }
|
|
1401
1533
|
|
|
1402
1534
|
/**
|
|
1403
|
-
*
|
|
1404
|
-
* @see https://cerberus.digitalu.design/react/nav-menu
|
|
1405
|
-
* @example
|
|
1406
|
-
* ```tsx
|
|
1407
|
-
* <NavMenu>
|
|
1408
|
-
* <NavMenuList id="nav-menu-list" position="bottom">
|
|
1409
|
-
* <NavMenuLink href="/home">Home</NavMenuLink>
|
|
1410
|
-
* <NavMenuLink href="/about">About</NavMenuLink>
|
|
1411
|
-
* </NavMenuList>
|
|
1412
|
-
* </NavMenu>
|
|
1413
|
-
* ```
|
|
1535
|
+
* @deprecated use the {@link Menu} family instead
|
|
1414
1536
|
*/
|
|
1415
1537
|
declare function NavMenuLink(props: NavMenuLinkProps): JSX.Element;
|
|
1416
1538
|
export { NavMenuLink }
|
|
@@ -1469,16 +1591,7 @@ export { NavMenuRef }
|
|
|
1469
1591
|
export { NavMenuRef as NavMenuRef_alias_1 }
|
|
1470
1592
|
|
|
1471
1593
|
/**
|
|
1472
|
-
*
|
|
1473
|
-
* @definition [NavMenu Docs](https://cerberus.digitalu.design/react/nav-menu)
|
|
1474
|
-
* @example
|
|
1475
|
-
* ```tsx
|
|
1476
|
-
* <NavMenu>
|
|
1477
|
-
* <NavMenuTrigger controls="nav-menu-list">
|
|
1478
|
-
* Menu
|
|
1479
|
-
* </NavMenuTrigger>
|
|
1480
|
-
* </NavMenu>
|
|
1481
|
-
* ```
|
|
1594
|
+
* @deprecated use the {@link Menu} family instead
|
|
1482
1595
|
*/
|
|
1483
1596
|
declare function NavMenuTrigger(props: NavMenuTriggerProps): JSX.Element;
|
|
1484
1597
|
export { NavMenuTrigger }
|
|
@@ -2362,7 +2475,7 @@ export { Tbody as Tbody_alias_1 }
|
|
|
2362
2475
|
* This module provides a TBody component.
|
|
2363
2476
|
* @module
|
|
2364
2477
|
*/
|
|
2365
|
-
declare type TbodyBaseProps =
|
|
2478
|
+
declare type TbodyBaseProps = JSX.IntrinsicElements['tbody'];
|
|
2366
2479
|
export { TbodyBaseProps }
|
|
2367
2480
|
export { TbodyBaseProps as TbodyBaseProps_alias_1 }
|
|
2368
2481
|
|
|
@@ -2387,7 +2500,7 @@ export { Td as Td_alias_1 }
|
|
|
2387
2500
|
* Th component for the Td component
|
|
2388
2501
|
* @module
|
|
2389
2502
|
*/
|
|
2390
|
-
declare type TdBaseProps =
|
|
2503
|
+
declare type TdBaseProps = JSX.IntrinsicElements['td'];
|
|
2391
2504
|
export { TdBaseProps }
|
|
2392
2505
|
export { TdBaseProps as TdBaseProps_alias_1 }
|
|
2393
2506
|
|
|
@@ -2448,7 +2561,7 @@ export { Th as Th_alias_1 }
|
|
|
2448
2561
|
* Th component for the Table component
|
|
2449
2562
|
* @module
|
|
2450
2563
|
*/
|
|
2451
|
-
declare type ThBaseProps =
|
|
2564
|
+
declare type ThBaseProps = JSX.IntrinsicElements['th'] & {
|
|
2452
2565
|
/**
|
|
2453
2566
|
* Converts the Th into a actionable button. Called when the user clicks on
|
|
2454
2567
|
* the Th.
|
|
@@ -2477,7 +2590,7 @@ export { Thead as Thead_alias_1 }
|
|
|
2477
2590
|
* This module contains the Thead component.
|
|
2478
2591
|
* @module
|
|
2479
2592
|
*/
|
|
2480
|
-
declare type TheadProps =
|
|
2593
|
+
declare type TheadProps = JSX.IntrinsicElements['thead'];
|
|
2481
2594
|
export { TheadProps }
|
|
2482
2595
|
export { TheadProps as TheadProps_alias_1 }
|
|
2483
2596
|
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/components/Menu.tsx
|
|
21
|
+
var Menu_exports = {};
|
|
22
|
+
__export(Menu_exports, {
|
|
23
|
+
Menu: () => Menu,
|
|
24
|
+
MenuContent: () => MenuContent,
|
|
25
|
+
MenuGroupLabel: () => MenuGroupLabel,
|
|
26
|
+
MenuItem: () => MenuItem,
|
|
27
|
+
MenuItemGroup: () => MenuItemGroup,
|
|
28
|
+
MenuSeparator: () => MenuSeparator,
|
|
29
|
+
MenuTrigger: () => MenuTrigger
|
|
30
|
+
});
|
|
31
|
+
module.exports = __toCommonJS(Menu_exports);
|
|
32
|
+
var import_react = require("@ark-ui/react");
|
|
33
|
+
var import_recipes = require("@cerberus/styled-system/recipes");
|
|
34
|
+
var import_css = require("@cerberus/styled-system/css");
|
|
35
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
+
var menuStyles = (0, import_recipes.menu)();
|
|
37
|
+
var Menu = import_react.Menu.Root;
|
|
38
|
+
function MenuTrigger(props) {
|
|
39
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Menu.Trigger, { ...props, asChild: true });
|
|
40
|
+
}
|
|
41
|
+
function MenuContent(props) {
|
|
42
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Menu.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
43
|
+
import_react.Menu.Content,
|
|
44
|
+
{
|
|
45
|
+
...props,
|
|
46
|
+
className: (0, import_css.cx)(props.className, menuStyles.content)
|
|
47
|
+
}
|
|
48
|
+
) });
|
|
49
|
+
}
|
|
50
|
+
function MenuItem(props) {
|
|
51
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Menu.Item, { ...props, className: (0, import_css.cx)(props.className, menuStyles.item) });
|
|
52
|
+
}
|
|
53
|
+
var MenuItemGroup = import_react.Menu.ItemGroup;
|
|
54
|
+
function MenuGroupLabel(props) {
|
|
55
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
56
|
+
import_react.Menu.ItemGroupLabel,
|
|
57
|
+
{
|
|
58
|
+
...props,
|
|
59
|
+
className: (0, import_css.cx)(props.className, menuStyles.itemGroupLabel)
|
|
60
|
+
}
|
|
61
|
+
);
|
|
62
|
+
}
|
|
63
|
+
function MenuSeparator(props) {
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
65
|
+
import_react.Menu.Separator,
|
|
66
|
+
{
|
|
67
|
+
...props,
|
|
68
|
+
className: (0, import_css.cx)(props.className, menuStyles.separator)
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
73
|
+
0 && (module.exports = {
|
|
74
|
+
Menu,
|
|
75
|
+
MenuContent,
|
|
76
|
+
MenuGroupLabel,
|
|
77
|
+
MenuItem,
|
|
78
|
+
MenuItemGroup,
|
|
79
|
+
MenuSeparator,
|
|
80
|
+
MenuTrigger
|
|
81
|
+
});
|
|
82
|
+
//# sourceMappingURL=Menu.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Menu.tsx"],"sourcesContent":["import { Menu as ArkMenu } from '@ark-ui/react'\nimport { menu } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module contains the Menu component family.\n * @module Menu\n */\n\nconst menuStyles = menu()\n\n/**\n * The root Menu component which controls the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n * <MenuTrigger>Trigger</MenuTrigger>\n * </Menu>\n */\nexport const Menu = ArkMenu.Root\n\n/**\n * The MenuTrigger component opens/closes the Menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n * <MenuTrigger>\n * <Button>Trigger</Button>\n * </MenuTrigger>\n * </Menu>\n */\nexport function MenuTrigger(props: ArkMenu.TriggerProps) {\n return <ArkMenu.Trigger {...props} asChild />\n}\n\n/**\n * The MenuContent component is the container for the menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n * <MenuTrigger>\n * <Button>Trigger</Button>\n * </MenuTrigger>\n * <MenuContent>\n * <MenuItem value=\"item_1\">Item 1</MenuItem>\n * <MenuItem value=\"item_2\">Item 2</MenuItem>\n * </MenuContent>\n * </Menu>\n */\nexport function MenuContent(props: ArkMenu.ContentProps) {\n return (\n <ArkMenu.Positioner>\n <ArkMenu.Content\n {...props}\n className={cx(props.className, menuStyles.content)}\n />\n </ArkMenu.Positioner>\n )\n}\n\n/**\n * The MenuItem component is a single item in the menu.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n * <MenuTrigger>\n * <Button>Trigger</Button>\n * </MenuTrigger>\n * <MenuContent>\n * <MenuItem value=\"item_1\">Item 1</MenuItem>\n * <MenuItem value=\"item_2\">Item 2</MenuItem>\n * </MenuContent>\n * </Menu>\n */\nexport function MenuItem(props: ArkMenu.ItemProps) {\n return (\n <ArkMenu.Item {...props} className={cx(props.className, menuStyles.item)} />\n )\n}\n\n/**\n * The MenuItemGroup component is a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n * <MenuTrigger>\n * <Button>Trigger</Button>\n * </MenuTrigger>\n * <MenuContent>\n * <MenuItemGroup>\n * <MenuItem value=\"item_1\">Item 1</MenuItem>\n * <MenuItem value=\"item_2\">Item 2</MenuItem>\n * </MenuItemGroup>\n * </MenuContent>\n * </Menu>\n */\nexport const MenuItemGroup = ArkMenu.ItemGroup\n\n/**\n * The MenuItemGroupLabel component is the label for a group of menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n * <MenuTrigger>\n * <Button>Trigger</Button>\n * </MenuTrigger>\n * <MenuContent>\n * <MenuItemGroup>\n * <MenuItemGroupLabel>Group Label</MenuItemGroupLabel>\n * <MenuItem value=\"item_1\">Item 1</MenuItem>\n * <MenuItem value=\"item_2\">Item 2</MenuItem>\n * </MenuItemGroup>\n * </MenuContent>\n * </Menu>\n */\nexport function MenuGroupLabel(props: ArkMenu.ItemGroupLabelProps) {\n return (\n <ArkMenu.ItemGroupLabel\n {...props}\n className={cx(props.className, menuStyles.itemGroupLabel)}\n />\n )\n}\n\n/**\n * The MenuSeparator component is a visual divider between menu items.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n * <MenuTrigger>\n * <Button>Trigger</Button>\n * </MenuTrigger>\n * <MenuContent>\n * <MenuItemGroup>\n * <MenuGroupLabel>Group Label</MenuGroupLabel>\n * <MenuSeparator />\n * <MenuItem value=\"item_1\">Item 1</MenuItem>\n * <MenuItem value=\"item_2\">Item 2</MenuItem>\n * </MenuItemGroup>\n * </MenuContent>\n * </Menu>\n */\nexport function MenuSeparator(props: ArkMenu.SeparatorProps) {\n return (\n <ArkMenu.Separator\n {...props}\n className={cx(props.className, menuStyles.separator)}\n />\n )\n}\n\n/**\n * The MenuCheckboxItem component is a menu item with a checkbox.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n * <MenuTrigger>\n * <Button>Trigger</Button>\n * </MenuTrigger>\n * <MenuContent>\n * <MenuCheckboxItem\n * checked={checked}\n * onCheckedChange={setChecked}\n * value=\"checked\"\n * >\n * <MenuItemIndicator>✅</MenuItemIndicator>\n * <MenuItemText>Check me</MenuItemText>\n * </MenuCheckboxItem>\n * </MenuContent>\n */\n// export function MenuCheckboxItem(props: ArkMenu.CheckboxItemProps) {\n// return (\n// <ArkMenu.CheckboxItem\n// {...props}\n// className={cx(props.className, menuStyles.item)}\n// />\n// )\n// }\n\n/**\n * The MenuItemText component is the text for a grouped menu item.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n * <MenuTrigger>\n * <Button>Trigger</Button>\n * </MenuTrigger>\n * <MenuContent>\n * <MenuCheckboxItem\n * checked={checked}\n * onCheckedChange={setChecked}\n * value=\"checked\"\n * >\n * <MenuItemText>Item 1</MenuItemText>\n * </MenuCheckboxItem>\n * </MenuContent>\n * </Menu>\n */\n// export function MenuItemText(props: ArkMenu.ItemTextProps) {\n// return (\n// <ArkMenu.ItemText\n// {...props}\n// className={cx(props.className, menuStyles.itemText)}\n// />\n// )\n// }\n\n/**\n * The MenuItemIndicator component is the indicator for a grouped menu item.\n * @definition [Cerberus docs](https://cerberus.digitalu.design/react/menu)\n * @example\n * ```tsx\n * <Menu>\n * <MenuTrigger>\n * <Button>Trigger</Button>\n * </MenuTrigger>\n * <MenuContent>\n * <MenuCheckboxItem\n * checked={checked}\n * onCheckedChange={setChecked}\n * value=\"checked\"\n * >\n * <MenuItemIndicator>✅</MenuItemIndicator>\n * <MenuItemText>Check me</MenuItemText>\n * </MenuCheckboxItem>\n * </MenuContent>\n */\n// export function MenuItemIndicator(props: ArkMenu.ItemIndicatorProps) {\n// return (\n// <ArkMenu.ItemIndicator\n// {...props}\n// className={cx(props.className, menuStyles.itemIndicator)}\n// />\n// )\n// }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,qBAAqB;AACrB,iBAAmB;AAgCV;AAzBT,IAAM,iBAAa,qBAAK;AAWjB,IAAM,OAAO,aAAAA,KAAQ;AAarB,SAAS,YAAY,OAA6B;AACvD,SAAO,4CAAC,aAAAA,KAAQ,SAAR,EAAiB,GAAG,OAAO,SAAO,MAAC;AAC7C;AAiBO,SAAS,YAAY,OAA6B;AACvD,SACE,4CAAC,aAAAA,KAAQ,YAAR,EACC;AAAA,IAAC,aAAAA,KAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,MAAM,WAAW,WAAW,OAAO;AAAA;AAAA,EACnD,GACF;AAEJ;AAiBO,SAAS,SAAS,OAA0B;AACjD,SACE,4CAAC,aAAAA,KAAQ,MAAR,EAAc,GAAG,OAAO,eAAW,eAAG,MAAM,WAAW,WAAW,IAAI,GAAG;AAE9E;AAmBO,IAAM,gBAAgB,aAAAA,KAAQ;AAoB9B,SAAS,eAAe,OAAoC;AACjE,SACE;AAAA,IAAC,aAAAA,KAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,MAAM,WAAW,WAAW,cAAc;AAAA;AAAA,EAC1D;AAEJ;AAqBO,SAAS,cAAc,OAA+B;AAC3D,SACE;AAAA,IAAC,aAAAA,KAAQ;AAAA,IAAR;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,MAAM,WAAW,WAAW,SAAS;AAAA;AAAA,EACrD;AAEJ;","names":["ArkMenu"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NavMenuLink.tsx","../../../src/components/Show.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuLink component.\n * @module\n */\n\nexport interface NavMenuLinkProps\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * The element type to render as. Recommended to use for Next apps with the\n * `Link` component.\n */\n as?: ElementType\n}\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NavMenuLink.tsx","../../../src/components/Show.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, ElementType } from 'react'\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { Show } from './Show'\n\n/**\n * This module contains the NavMenuLink component.\n * @module\n */\n\nexport interface NavMenuLinkProps\n extends AnchorHTMLAttributes<HTMLAnchorElement> {\n /**\n * The element type to render as. Recommended to use for Next apps with the\n * `Link` component.\n */\n as?: ElementType\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\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;AACA,iBAAwB;;;ACCxB,mBAAgE;AA4BzD,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,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ADHU;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/NavMenuList.tsx","../../../src/context/navMenu.tsx","../../../src/components/Show.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\n/**\n * This module contains the NavMenuList component.\n * @module\n */\n\ninterface GetPositionResult {\n /**\n * The left position of the element.\n */\n left: string\n /**\n * The right position of the element.\n */\n right: string\n /**\n * The top position of the element.\n */\n top: string\n /**\n * The bottom position of the element.\n */\n bottom: string\n}\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NavMenuList.tsx","../../../src/context/navMenu.tsx","../../../src/components/Show.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\n/**\n * This module contains the NavMenuList component.\n * @module\n */\n\ninterface GetPositionResult {\n /**\n * The left position of the element.\n */\n left: string\n /**\n * The right position of the element.\n */\n right: string\n /**\n * The top position of the element.\n */\n top: string\n /**\n * The bottom position of the element.\n */\n bottom: string\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\n */\nexport function getPosition(position: Positions): GetPositionResult {\n const defaultPositions = {\n left: 'auto',\n right: 'auto',\n top: 'auto',\n bottom: 'auto',\n }\n switch (position) {\n case 'right':\n return { ...defaultPositions, top: '0%', left: '105%' }\n case 'left':\n return { ...defaultPositions, top: '0%', right: '105%' }\n case 'bottom':\n return { ...defaultPositions, top: '110%' }\n case 'top':\n return { ...defaultPositions, bottom: '110%' }\n default:\n return defaultPositions\n }\n}\n\nconst navListStyles = vstack({\n alignItems: 'flex-start',\n bgColor: 'page.surface.100',\n boxShadow: 'lg',\n gap: '2',\n opacity: '0',\n p: '4',\n position: 'absolute',\n rounded: 'md',\n zIndex: 'dropdown',\n _motionSafe: {\n animationName: 'zoomIn',\n animationDelay: '100ms',\n animationDuration: '150ms',\n animationFillMode: 'both',\n animationTimingFunction: 'ease-in-out',\n },\n _positionBottom: {\n transformOrigin: 'top left',\n },\n _positionTop: {\n transformOrigin: 'bottom left',\n },\n _positionLeft: {\n transformOrigin: 'top right',\n },\n _positionRight: {\n transformOrigin: 'top left',\n },\n})\n\nexport interface NavMenuListProps extends HTMLAttributes<HTMLUListElement> {\n /**\n * The unique identifier for the NavMenuList. Required for accessibility.\n */\n id: string\n /**\n * The position of the NavMenuList.\n * @type 'top' | 'right' | 'bottom' | 'left'\n * @default 'bottom'\n */\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 * @see https://cerberus.digitalu.design/react/nav-menu\n *\n * @example\n * ```tsx\n * <NavMenu>\n * <NavMenuList id=\"nav-menu-list\" position=\"bottom\">\n * <NavMenuLink href=\"/home\">Home</NavMenuLink>\n * <NavMenuLink href=\"/about\">About</NavMenuLink>\n * </NavMenuList>\n * </NavMenu>\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","'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\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n /**\n * The ref for the trigger button.\n */\n triggerRef: NavTriggerRef | null\n /**\n * The ref for the menu.\n */\n menuRef: NavMenuRef | null\n /**\n * Whether the menu is expanded.\n */\n expanded: boolean\n /**\n * Called when the menu button is clicked.\n */\n onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * @deprecated use the {@link Menu} family instead\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\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\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;AAAA;AAEA,IAAAA,gBAA6C;AAC7C,IAAAC,cAAmB;AACnB,sBAAuB;;;ACFvB,iBAAoB;AACpB,mBASO;AAuDD;AA1BN,IAAM,qBAAiB,4BAA0C,IAAI;AAyC9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;ACtFA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AFwFM,IAAAC,sBAAA;AA1FC,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;AA8BM,SAAS,YAAY,OAAsC;AAChE,QAAM,EAAE,UAAU,GAAG,YAAY,IAAI;AACrC,QAAM,EAAE,SAAS,SAAS,IAAI,kBAAkB;AAChD,QAAM,qBAAiB;AAAA,IACrB,MAAM,YAAY,YAAY,QAAQ;AAAA,IACtC,CAAC,QAAQ;AAAA,EACX;AAEA,SACE,6CAAC,QAAK,MAAM,UACV;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,iBAAe,YAAY;AAAA,MAC3B,eAAW,gBAAG,YAAY,WAAW,aAAa;AAAA,MAClD,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,EACT,GACF;AAEJ;","names":["import_react","import_css","import_react","import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/NavMenuTrigger.tsx","../../../src/aria-helpers/nav-menu.aria.ts","../../../src/context/navMenu.tsx","../../../src/components/Show.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\n/**\n * This module contains the NavMenuTrigger component.\n * @module\n */\n\nexport interface NavMenuTriggerProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonProps,\n NavTriggerAriaValues {\n /**\n * The element type to render as. Recommended to use for an IconButton trigger vs a standard Button.\n * @default 'button'\n * @example\n * ```tsx\n * <NavMenuTrigger as={IconButton} href=\"/home\" />\n * ```\n */\n as?: ElementType\n}\n\n/**\n *
|
|
1
|
+
{"version":3,"sources":["../../../src/components/NavMenuTrigger.tsx","../../../src/aria-helpers/nav-menu.aria.ts","../../../src/context/navMenu.tsx","../../../src/components/Show.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\n/**\n * This module contains the NavMenuTrigger component.\n * @module\n */\n\nexport interface NavMenuTriggerProps\n extends ButtonHTMLAttributes<HTMLButtonElement>,\n ButtonProps,\n NavTriggerAriaValues {\n /**\n * The element type to render as. Recommended to use for an IconButton trigger vs a standard Button.\n * @default 'button'\n * @example\n * ```tsx\n * <NavMenuTrigger as={IconButton} href=\"/home\" />\n * ```\n */\n as?: ElementType\n}\n\n/**\n * @deprecated use the {@link Menu} family instead\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","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","'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\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n /**\n * The ref for the trigger button.\n */\n triggerRef: NavTriggerRef | null\n /**\n * The ref for the menu.\n */\n menuRef: NavMenuRef | null\n /**\n * Whether the menu is expanded.\n */\n expanded: boolean\n /**\n * Called when the menu button is clicked.\n */\n onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * @deprecated use the {@link Menu} family instead\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\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\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","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\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,IAAAA,gBAKO;AACP,IAAAC,cAAmB;AACnB,qBAAuB;;;ACChB,SAAS,sBACd,QACsB;AACtB,SAAO;AAAA,IACL,CAAC,eAAe,GAAG,OAAO;AAAA,IAC1B,CAAC,eAAe,GAAG,OAAO,YAAY;AAAA,EACxC;AACF;;;ACfA,iBAAoB;AACpB,mBASO;AAuDD;AA1BN,IAAM,qBAAiB,4BAA0C,IAAI;AAyC9D,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;;;ACtFA,IAAAC,gBAAgE;AA4BzD,SAAS,KAAK,OAAgD;AACnE,QAAM,EAAE,MAAM,UAAU,SAAS,IAAI;AACrC,QAAM,gBAAY,uBAAQ,MAAM,QAAQ,OAAO,CAAC,IAAI,CAAC;AAErD,aAAO,uBAAQ,MAAM;AACnB,QAAI,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;AHkCQ,IAAAC,sBAAA;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,kBAAc;AAAA,IAClB,CAAC,MAAqC;AACpC,UAAI,QAAS,QAAO,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":["import_react","import_css","import_react","import_jsx_runtime"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Tbody.tsx"],"sourcesContent":["import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Tbody.tsx"],"sourcesContent":["import { tbody, type TbodyVariantProps } from '@cerberus/styled-system/recipes'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a TBody component.\n * @module\n */\n\nexport type TbodyBaseProps = JSX.IntrinsicElements['tbody']\nexport type TbodyProps = TbodyBaseProps & TbodyVariantProps\n\n/**\n * The TBody component is used to render a table body.\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <TBody>\n * {children}\n * </TBody>\n * ```\n */\nexport function Tbody(props: TbodyProps) {\n const { decoration, ...nativeProps } = props\n return (\n <tbody\n {...nativeProps}\n className={cx(\n nativeProps.className,\n tbody({\n decoration,\n }),\n )}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8C;AAC9C,iBAAmB;AAwBf;AAHG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,YAAY,GAAG,YAAY,IAAI;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,sBAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Td.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { td, type TdVariantProps } from '@cerberus/styled-system/recipes'\
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Td.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { td, type TdVariantProps } from '@cerberus/styled-system/recipes'\n\n/**\n * Th component for the Td component\n * @module\n */\n\nexport type TdBaseProps = JSX.IntrinsicElements['td']\nexport type TdProps = TdBaseProps & TdVariantProps\n\n/**\n * Styles for the Th component\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Td>Data cell</Td>\n * ```\n */\nexport function Td(props: TdProps) {\n const { size, ...nativeProps } = props\n return (\n <td\n {...nativeProps}\n className={cx(\n nativeProps.className,\n td({\n size,\n }),\n )}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAwC;AAsBpC;AAHG,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,QACT,YAAY;AAAA,YACZ,mBAAG;AAAA,UACD;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Th.tsx","../../../src/components/Show.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Th.tsx","../../../src/components/Show.tsx"],"sourcesContent":["'use client'\n\nimport { css, cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { MouseEvent } from 'react'\nimport { Show } from './Show'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = JSX.IntrinsicElements['th'] & {\n /**\n * Converts the Th into a actionable button. Called when the user clicks on\n * the Th.\n */\n onClick?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n * @example\n * ```tsx\n * <Th onClick={handleClick}>\n * Names\n * <SortIcon />\n * </Th>\n * ```\n */\nexport function Th(props: ThProps) {\n const { size, onClick, ...nativeProps } = props\n return (\n <Show\n when={Boolean(onClick)}\n fallback={\n <th\n {...nativeProps}\n className={cx(nativeProps.className, th({ size }))}\n />\n }\n >\n <th {...nativeProps}>\n <button\n className={cx(\n nativeProps.className,\n th({ size }),\n css({\n alignItems: 'center',\n display: 'inline-flex',\n justifyContent: 'space-between',\n userSelect: 'none',\n w: 'full',\n _hover: {\n bgColor: 'page.bg.100',\n },\n }),\n )}\n onClick={onClick}\n >\n {props.children}\n </button>\n </th>\n </Show>\n )\n}\n","'use client'\n\nimport { useMemo, type PropsWithChildren, type ReactNode } from 'react'\n\n/**\n * This module contains the Show component.\n * @module\n */\n\nexport interface ShowProps {\n /**\n * The condition to render memoized children or the fallback content.\n */\n when: boolean | null | undefined\n /**\n * The children to render when the condition is false.\n */\n fallback?: ReactNode\n}\n\n/**\n * Conditionally render a memoized version of the children or optional fallback\n * content.\n * @see https://cerberus.digitalu.design/react/show\n * @example\n * ```tsx\n * <Show when={isLoggedIn} fallback={<Navigate to=\"/login\" />}>\n * <Dashboard />\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,iBAAwB;AACxB,qBAAwC;;;ACDxC,mBAAgE;AA4BzD,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,UAAW,QAAO;AACtB,WAAO,YAAY;AAAA,EACrB,GAAG,CAAC,WAAW,UAAU,QAAQ,CAAC;AACpC;;;ADKQ;AAND,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,SAAS,GAAG,YAAY,IAAI;AAC1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,QAAQ,OAAO;AAAA,MACrB,UACE;AAAA,QAAC;AAAA;AAAA,UACE,GAAG;AAAA,UACJ,eAAW,eAAG,YAAY,eAAW,mBAAG,EAAE,KAAK,CAAC,CAAC;AAAA;AAAA,MACnD;AAAA,MAGF,sDAAC,QAAI,GAAG,aACN;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,YACT,YAAY;AAAA,gBACZ,mBAAG,EAAE,KAAK,CAAC;AAAA,gBACX,gBAAI;AAAA,cACF,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,gBAAgB;AAAA,cAChB,YAAY;AAAA,cACZ,GAAG;AAAA,cACH,QAAQ;AAAA,gBACN,SAAS;AAAA,cACX;AAAA,YACF,CAAC;AAAA,UACH;AAAA,UACA;AAAA,UAEC,gBAAM;AAAA;AAAA,MACT,GACF;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Thead.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { thead } from '@cerberus/styled-system/recipes'\
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Thead.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { thead } from '@cerberus/styled-system/recipes'\n\n/**\n * This module contains the Thead component.\n * @module\n */\n\nexport type TheadProps = JSX.IntrinsicElements['thead']\n\n/**\n * The Thead component is used to render a table header.\n * @see https://cerberus.digitalu.design/react/table\n * @memberof module:Table\n * @example\n * ```tsx\n * <Thead>\n * {children}\n * </Thead>\n * ```\n */\nexport function Thead(props: TheadProps) {\n return <thead {...props} className={cx(props.className, thead())} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAmB;AACnB,qBAAsB;AAqBb;AADF,SAAS,MAAM,OAAmB;AACvC,SAAO,4CAAC,WAAO,GAAG,OAAO,eAAW,eAAG,MAAM,eAAW,sBAAM,CAAC,GAAG;AACpE;","names":[]}
|
|
@@ -1 +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\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n /**\n * The ref for the trigger button.\n */\n triggerRef: NavTriggerRef | null\n /**\n * The ref for the menu.\n */\n menuRef: NavMenuRef | null\n /**\n * Whether the menu is expanded.\n */\n expanded: boolean\n /**\n * Called when the menu button is clicked.\n */\n onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n *
|
|
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\n/**\n * This module provides a context and hook for the nav menu.\n * @module NavMenu\n */\n\nexport type NavTriggerRef = RefObject<HTMLButtonElement>\nexport type NavMenuRef = RefObject<HTMLUListElement>\n\nexport interface NavMenuContextValue {\n /**\n * The ref for the trigger button.\n */\n triggerRef: NavTriggerRef | null\n /**\n * The ref for the menu.\n */\n menuRef: NavMenuRef | null\n /**\n * Whether the menu is expanded.\n */\n expanded: boolean\n /**\n * Called when the menu button is clicked.\n */\n onToggle: () => void\n}\n\nconst NavMenuContext = createContext<NavMenuContextValue | null>(null)\n\n/**\n * @deprecated use the {@link Menu} family instead\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\n/**\n * Used to access the nav menu context.\n * @returns The nav menu context.\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;AAuDD;AA1BN,IAAM,qBAAiB,4BAA0C,IAAI;AAK9D,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;AAMO,SAAS,oBAAyC;AACvD,QAAM,cAAU,yBAAW,cAAc;AACzC,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,kDAAkD;AAAA,EACpE;AACA,SAAO;AACT;","names":[]}
|