@cerberus-design/react 0.7.4-next-02f723e → 0.7.4-next-f357b4f
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/legacy/_tsup-dts-rollup.d.ts +140 -1
- package/build/legacy/{chunk-NWMNEJGU.js → chunk-3C2DJSEE.js} +3 -3
- package/build/legacy/chunk-3C2DJSEE.js.map +1 -0
- package/build/legacy/chunk-A5WYZVUR.js +28 -0
- package/build/legacy/chunk-A5WYZVUR.js.map +1 -0
- package/build/legacy/{chunk-SINTHADQ.js → chunk-HW76XVA3.js} +3 -3
- package/build/legacy/chunk-HW76XVA3.js.map +1 -0
- package/build/legacy/chunk-KFJKK2WX.js +13 -0
- package/build/legacy/chunk-KFJKK2WX.js.map +1 -0
- package/build/legacy/{chunk-BYDTAFCU.js → chunk-LF2QFS5S.js} +4 -4
- package/build/legacy/chunk-LF2QFS5S.js.map +1 -0
- package/build/legacy/chunk-N3FUF4TB.js +12 -0
- package/build/legacy/chunk-N3FUF4TB.js.map +1 -0
- package/build/legacy/chunk-PJ3744I6.js +24 -0
- package/build/legacy/chunk-PJ3744I6.js.map +1 -0
- package/build/legacy/{chunk-X5JR5LSC.js → chunk-SMCEFK6Q.js} +4 -4
- package/build/legacy/chunk-SMCEFK6Q.js.map +1 -0
- package/build/legacy/chunk-XREC5IJE.js +24 -0
- package/build/legacy/chunk-XREC5IJE.js.map +1 -0
- package/build/legacy/{chunk-I5FPKT7H.js → chunk-XRED74C2.js} +7 -7
- package/build/legacy/chunk-XRED74C2.js.map +1 -0
- package/build/legacy/components/FileUploader.js +1 -1
- package/build/legacy/components/Notification.js +1 -1
- package/build/legacy/components/NotificationDescription.js +1 -1
- package/build/legacy/components/NotificationHeading.js +1 -1
- package/build/legacy/components/Table.js +9 -0
- package/build/legacy/components/Table.js.map +1 -0
- package/build/legacy/components/Tbody.js +7 -0
- package/build/legacy/components/Tbody.js.map +1 -0
- package/build/legacy/components/Td.js +7 -0
- package/build/legacy/components/Td.js.map +1 -0
- package/build/legacy/components/Th.js +7 -0
- package/build/legacy/components/Th.js.map +1 -0
- package/build/legacy/components/Thead.js +7 -0
- package/build/legacy/components/Thead.js.map +1 -0
- package/build/legacy/context/notification-center.js +4 -4
- package/build/legacy/index.js +37 -15
- package/build/legacy/index.js.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +140 -1
- package/build/modern/{chunk-NWMNEJGU.js → chunk-3C2DJSEE.js} +3 -3
- package/build/modern/chunk-3C2DJSEE.js.map +1 -0
- package/build/modern/{chunk-U5QWMMKZ.js → chunk-4N2L357B.js} +4 -4
- package/build/modern/chunk-4N2L357B.js.map +1 -0
- package/build/modern/chunk-A5WYZVUR.js +28 -0
- package/build/modern/chunk-A5WYZVUR.js.map +1 -0
- package/build/modern/{chunk-SINTHADQ.js → chunk-HW76XVA3.js} +3 -3
- package/build/modern/chunk-HW76XVA3.js.map +1 -0
- package/build/modern/{chunk-3YORUZIQ.js → chunk-IOG6XIR5.js} +4 -4
- package/build/modern/chunk-IOG6XIR5.js.map +1 -0
- package/build/modern/chunk-KFJKK2WX.js +13 -0
- package/build/modern/chunk-KFJKK2WX.js.map +1 -0
- package/build/modern/chunk-N3FUF4TB.js +12 -0
- package/build/modern/chunk-N3FUF4TB.js.map +1 -0
- package/build/modern/chunk-PJ3744I6.js +24 -0
- package/build/modern/chunk-PJ3744I6.js.map +1 -0
- package/build/modern/{chunk-NZWANWYC.js → chunk-UE5DPEKB.js} +7 -7
- package/build/modern/chunk-UE5DPEKB.js.map +1 -0
- package/build/modern/chunk-XREC5IJE.js +24 -0
- package/build/modern/chunk-XREC5IJE.js.map +1 -0
- package/build/modern/components/FileUploader.js +1 -1
- package/build/modern/components/Notification.js +1 -1
- package/build/modern/components/NotificationDescription.js +1 -1
- package/build/modern/components/NotificationHeading.js +1 -1
- package/build/modern/components/Table.js +9 -0
- package/build/modern/components/Table.js.map +1 -0
- package/build/modern/components/Tbody.js +7 -0
- package/build/modern/components/Tbody.js.map +1 -0
- package/build/modern/components/Td.js +7 -0
- package/build/modern/components/Td.js.map +1 -0
- package/build/modern/components/Th.js +7 -0
- package/build/modern/components/Th.js.map +1 -0
- package/build/modern/components/Thead.js +7 -0
- package/build/modern/components/Thead.js.map +1 -0
- package/build/modern/context/notification-center.js +4 -4
- package/build/modern/index.js +37 -15
- package/build/modern/index.js.map +1 -1
- package/package.json +2 -2
- package/src/components/FileUploader.tsx +3 -3
- package/src/components/Notification.tsx +3 -3
- package/src/components/NotificationDescription.tsx +2 -2
- package/src/components/NotificationHeading.tsx +2 -2
- package/src/components/Table.tsx +58 -0
- package/src/components/Tbody.tsx +31 -0
- package/src/components/Td.tsx +34 -0
- package/src/components/Th.tsx +26 -0
- package/src/components/Thead.tsx +24 -0
- package/src/context/notification-center.tsx +3 -3
- package/src/index.ts +5 -0
- package/build/legacy/chunk-BYDTAFCU.js.map +0 -1
- package/build/legacy/chunk-I5FPKT7H.js.map +0 -1
- package/build/legacy/chunk-NWMNEJGU.js.map +0 -1
- package/build/legacy/chunk-SINTHADQ.js.map +0 -1
- package/build/legacy/chunk-X5JR5LSC.js.map +0 -1
- package/build/modern/chunk-3YORUZIQ.js.map +0 -1
- package/build/modern/chunk-NWMNEJGU.js.map +0 -1
- package/build/modern/chunk-NZWANWYC.js.map +0 -1
- package/build/modern/chunk-SINTHADQ.js.map +0 -1
- package/build/modern/chunk-U5QWMMKZ.js.map +0 -1
|
@@ -81,7 +81,7 @@ import { MouseEvent as MouseEvent_2 } from 'react';
|
|
|
81
81
|
import { MouseSensor } from '@dnd-kit/core';
|
|
82
82
|
import { MouseSensorOptions } from '@dnd-kit/core';
|
|
83
83
|
import { MutableRefObject } from 'react';
|
|
84
|
-
import { NotificationVariantProps } from '@cerberus
|
|
84
|
+
import { NotificationVariantProps } from '@cerberus/styled-system/recipes';
|
|
85
85
|
import { Over } from '@dnd-kit/core';
|
|
86
86
|
import { PointerActivationConstraint } from '@dnd-kit/core';
|
|
87
87
|
import { PointerEventHandlers } from '@dnd-kit/core';
|
|
@@ -109,9 +109,13 @@ import { SensorOptions } from '@dnd-kit/core';
|
|
|
109
109
|
import { SensorProps } from '@dnd-kit/core';
|
|
110
110
|
import { SensorResponse } from '@dnd-kit/core';
|
|
111
111
|
import { Sensors } from '@dnd-kit/core';
|
|
112
|
+
import type { TableHTMLAttributes } from 'react';
|
|
112
113
|
import { TabsVariantProps } from '@cerberus/styled-system/recipes';
|
|
113
114
|
import { tag } from '@cerberus/styled-system/recipes';
|
|
115
|
+
import { TbodyVariantProps } from '@cerberus/styled-system/recipes';
|
|
116
|
+
import { TdVariantProps } from '@cerberus/styled-system/recipes';
|
|
114
117
|
import type { TextareaHTMLAttributes } from 'react';
|
|
118
|
+
import { ThVariantProps } from '@cerberus/styled-system/recipes';
|
|
115
119
|
import { ToggleVariantProps } from '@cerberus/styled-system/recipes';
|
|
116
120
|
import { TouchSensor } from '@dnd-kit/core';
|
|
117
121
|
import { TouchSensorOptions } from '@dnd-kit/core';
|
|
@@ -1079,6 +1083,31 @@ declare function Tab(props: TabProps): JSX_2.Element;
|
|
|
1079
1083
|
export { Tab }
|
|
1080
1084
|
export { Tab as Tab_alias_1 }
|
|
1081
1085
|
|
|
1086
|
+
/**
|
|
1087
|
+
* The Table component is used to render a table.
|
|
1088
|
+
* @definition [Table docs](https://cerberus.digitalu.design/react/table)
|
|
1089
|
+
* @prop caption - An easy to understand description of the table.
|
|
1090
|
+
* @example
|
|
1091
|
+
* ```tsx
|
|
1092
|
+
* <Table caption="Basic Table">
|
|
1093
|
+
* {children}
|
|
1094
|
+
* </Table>
|
|
1095
|
+
* ```
|
|
1096
|
+
*/
|
|
1097
|
+
declare function Table(props: PropsWithChildren<TableProps>): JSX_2.Element;
|
|
1098
|
+
export { Table }
|
|
1099
|
+
export { Table as Table_alias_1 }
|
|
1100
|
+
|
|
1101
|
+
/**
|
|
1102
|
+
* This module contains the table component.
|
|
1103
|
+
* @module
|
|
1104
|
+
*/
|
|
1105
|
+
declare interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
|
|
1106
|
+
caption: string;
|
|
1107
|
+
}
|
|
1108
|
+
export { TableProps }
|
|
1109
|
+
export { TableProps as TableProps_alias_1 }
|
|
1110
|
+
|
|
1082
1111
|
/**
|
|
1083
1112
|
* The TabList component provides a container for tab elements.
|
|
1084
1113
|
* @param description - a description of what the tab list contains
|
|
@@ -1211,6 +1240,52 @@ declare type TagRecipeProps = RecipeVariantProps_2<typeof tag>;
|
|
|
1211
1240
|
export { TagRecipeProps }
|
|
1212
1241
|
export { TagRecipeProps as TagRecipeProps_alias_1 }
|
|
1213
1242
|
|
|
1243
|
+
/**
|
|
1244
|
+
* The TBody component is used to render a table body.
|
|
1245
|
+
* @definition [Table docs](https://cerberus.digitalu.design/react/table)
|
|
1246
|
+
* @example
|
|
1247
|
+
* ```tsx
|
|
1248
|
+
* <TBody>
|
|
1249
|
+
* {children}
|
|
1250
|
+
* </TBody>
|
|
1251
|
+
* ```
|
|
1252
|
+
*/
|
|
1253
|
+
declare function Tbody(props: TbodyProps): JSX_2.Element;
|
|
1254
|
+
export { Tbody }
|
|
1255
|
+
export { Tbody as Tbody_alias_1 }
|
|
1256
|
+
|
|
1257
|
+
declare type TbodyBaseProps = TableHTMLAttributes<HTMLTableSectionElement>;
|
|
1258
|
+
export { TbodyBaseProps }
|
|
1259
|
+
export { TbodyBaseProps as TbodyBaseProps_alias_1 }
|
|
1260
|
+
|
|
1261
|
+
declare type TbodyProps = TbodyBaseProps & TbodyVariantProps;
|
|
1262
|
+
export { TbodyProps }
|
|
1263
|
+
export { TbodyProps as TbodyProps_alias_1 }
|
|
1264
|
+
|
|
1265
|
+
/**
|
|
1266
|
+
* Styles for the Th component
|
|
1267
|
+
* @definition [Table docs](https://cerberus.digitalu.design/react/table)
|
|
1268
|
+
* @example
|
|
1269
|
+
* ```tsx
|
|
1270
|
+
* <Td>Data cell</Td>
|
|
1271
|
+
* ```
|
|
1272
|
+
*/
|
|
1273
|
+
declare function Td(props: TdProps): JSX_2.Element;
|
|
1274
|
+
export { Td }
|
|
1275
|
+
export { Td as Td_alias_1 }
|
|
1276
|
+
|
|
1277
|
+
/**
|
|
1278
|
+
* Th component for the Td component
|
|
1279
|
+
* @module
|
|
1280
|
+
*/
|
|
1281
|
+
declare type TdBaseProps = TableHTMLAttributes<HTMLTableCellElement>;
|
|
1282
|
+
export { TdBaseProps }
|
|
1283
|
+
export { TdBaseProps as TdBaseProps_alias_1 }
|
|
1284
|
+
|
|
1285
|
+
declare type TdProps = TdBaseProps & TdVariantProps;
|
|
1286
|
+
export { TdProps }
|
|
1287
|
+
export { TdProps as TdProps_alias_1 }
|
|
1288
|
+
|
|
1214
1289
|
/**
|
|
1215
1290
|
* A component that allows the user to input large blocks of text.
|
|
1216
1291
|
* @description https://github.com/omnifed/cerberus/blob/main/packages/react/src/components/Textarea.tsx
|
|
@@ -1234,6 +1309,48 @@ declare type TextareaProps = InputRecipeProps & TextareaBaseProps;
|
|
|
1234
1309
|
export { TextareaProps }
|
|
1235
1310
|
export { TextareaProps as TextareaProps_alias_1 }
|
|
1236
1311
|
|
|
1312
|
+
/**
|
|
1313
|
+
* Styles for the Th component
|
|
1314
|
+
* @definition [Table docs](https://cerberus.digitalu.design/react/table)
|
|
1315
|
+
* @example
|
|
1316
|
+
* ```tsx
|
|
1317
|
+
* <Th>Header 1</Th>
|
|
1318
|
+
* ```
|
|
1319
|
+
*/
|
|
1320
|
+
declare function Th(props: ThProps): JSX_2.Element;
|
|
1321
|
+
export { Th }
|
|
1322
|
+
export { Th as Th_alias_1 }
|
|
1323
|
+
|
|
1324
|
+
/**
|
|
1325
|
+
* Th component for the Table component
|
|
1326
|
+
* @module
|
|
1327
|
+
*/
|
|
1328
|
+
declare type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement>;
|
|
1329
|
+
export { ThBaseProps }
|
|
1330
|
+
export { ThBaseProps as ThBaseProps_alias_1 }
|
|
1331
|
+
|
|
1332
|
+
/**
|
|
1333
|
+
* The Thead component is used to render a table header.
|
|
1334
|
+
* @definition [Table docs](https://cerberus.digitalu.design/react/table)
|
|
1335
|
+
* @example
|
|
1336
|
+
* ```tsx
|
|
1337
|
+
* <Thead>
|
|
1338
|
+
* {children}
|
|
1339
|
+
* </Thead>
|
|
1340
|
+
* ```
|
|
1341
|
+
*/
|
|
1342
|
+
declare function Thead(props: TheadProps): JSX_2.Element;
|
|
1343
|
+
export { Thead }
|
|
1344
|
+
export { Thead as Thead_alias_1 }
|
|
1345
|
+
|
|
1346
|
+
/**
|
|
1347
|
+
* This module contains the Thead component.
|
|
1348
|
+
* @module
|
|
1349
|
+
*/
|
|
1350
|
+
declare type TheadProps = TableHTMLAttributes<HTMLTableSectionElement>;
|
|
1351
|
+
export { TheadProps }
|
|
1352
|
+
export { TheadProps as TheadProps_alias_1 }
|
|
1353
|
+
|
|
1237
1354
|
declare const THEME_KEY = "cerberus-theme";
|
|
1238
1355
|
export { THEME_KEY }
|
|
1239
1356
|
export { THEME_KEY as THEME_KEY_alias_1 }
|
|
@@ -1260,6 +1377,10 @@ declare function ThemeProvider(props: PropsWithChildren<unknown>): JSX.Element;
|
|
|
1260
1377
|
export { ThemeProvider }
|
|
1261
1378
|
export { ThemeProvider as ThemeProvider_alias_1 }
|
|
1262
1379
|
|
|
1380
|
+
declare type ThProps = ThBaseProps & ThVariantProps;
|
|
1381
|
+
export { ThProps }
|
|
1382
|
+
export { ThProps as ThProps_alias_1 }
|
|
1383
|
+
|
|
1263
1384
|
declare function Toggle(props: ToggleProps): JSX_2.Element;
|
|
1264
1385
|
export { Toggle }
|
|
1265
1386
|
export { Toggle as Toggle_alias_1 }
|
|
@@ -1287,6 +1408,20 @@ export { TouchSensor }
|
|
|
1287
1408
|
|
|
1288
1409
|
export { TouchSensorOptions }
|
|
1289
1410
|
|
|
1411
|
+
/**
|
|
1412
|
+
* The Tr component is used to render a table row.
|
|
1413
|
+
* @definition [Table docs](https://cerberus.digitalu.design/react/table)
|
|
1414
|
+
* @example
|
|
1415
|
+
* ```tsx
|
|
1416
|
+
* <Tr>
|
|
1417
|
+
* {children}
|
|
1418
|
+
* </Tr>
|
|
1419
|
+
* ```
|
|
1420
|
+
*/
|
|
1421
|
+
declare function Tr(props: PropsWithChildren<TrProps>): JSX_2.Element;
|
|
1422
|
+
export { Tr }
|
|
1423
|
+
export { Tr as Tr_alias_1 }
|
|
1424
|
+
|
|
1290
1425
|
export { Translate }
|
|
1291
1426
|
|
|
1292
1427
|
declare function trapFocus(modalRef: RefObject<HTMLDialogElement>): KeyboardEventHandler<HTMLDialogElement>;
|
|
@@ -1295,6 +1430,10 @@ export { trapFocus as trapFocus_alias_1 }
|
|
|
1295
1430
|
|
|
1296
1431
|
export { TraversalOrder }
|
|
1297
1432
|
|
|
1433
|
+
declare type TrProps = TableHTMLAttributes<HTMLTableRowElement>;
|
|
1434
|
+
export { TrProps }
|
|
1435
|
+
export { TrProps as TrProps_alias_1 }
|
|
1436
|
+
|
|
1298
1437
|
export { UniqueIdentifier }
|
|
1299
1438
|
|
|
1300
1439
|
declare function useConfirmModal(): ConfirmModalValue;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// src/components/NotificationHeading.tsx
|
|
2
|
-
import { cx } from "@cerberus
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
3
|
import {
|
|
4
4
|
notification
|
|
5
|
-
} from "@cerberus
|
|
5
|
+
} from "@cerberus/styled-system/recipes";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
function NotificationHeading(props) {
|
|
8
8
|
const { palette, ...nativeProps } = props;
|
|
@@ -13,4 +13,4 @@ function NotificationHeading(props) {
|
|
|
13
13
|
export {
|
|
14
14
|
NotificationHeading
|
|
15
15
|
};
|
|
16
|
-
//# sourceMappingURL=chunk-
|
|
16
|
+
//# sourceMappingURL=chunk-3C2DJSEE.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/NotificationHeading.tsx"],"sourcesContent":["/**\n * This module exports the NotificationHeading component.\n * @module\n */\n\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationHeadingProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationHeadingProps = BaseNotificationHeadingProps &\n NotificationVariantProps\n\n/**\n * The NotificationHeading component is used to render the heading of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationHeading(props: NotificationHeadingProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p className={cx(nativeProps.className, styles.heading)} {...nativeProps} />\n )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,oBAAoB,OAAiC;AACnE,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE,oBAAC,OAAE,WAAW,GAAG,YAAY,WAAW,OAAO,OAAO,GAAI,GAAG,aAAa;AAE9E;","names":[]}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
// src/components/Table.tsx
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { table } from "@cerberus/styled-system/recipes";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
function Table(props) {
|
|
6
|
+
const { caption, children, ...nativeProps } = props;
|
|
7
|
+
const styles = table();
|
|
8
|
+
return /* @__PURE__ */ jsx("div", { className: styles.container, children: /* @__PURE__ */ jsxs(
|
|
9
|
+
"table",
|
|
10
|
+
{
|
|
11
|
+
...nativeProps,
|
|
12
|
+
className: cx(nativeProps.className, styles.table),
|
|
13
|
+
children: [
|
|
14
|
+
/* @__PURE__ */ jsx("caption", { className: styles.caption, children: caption }),
|
|
15
|
+
children
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
) });
|
|
19
|
+
}
|
|
20
|
+
function Tr(props) {
|
|
21
|
+
return /* @__PURE__ */ jsx("tr", { ...props });
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
export {
|
|
25
|
+
Table,
|
|
26
|
+
Tr
|
|
27
|
+
};
|
|
28
|
+
//# sourceMappingURL=chunk-A5WYZVUR.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Table.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { table } from '@cerberus/styled-system/recipes'\nimport type { PropsWithChildren, TableHTMLAttributes } from 'react'\n\n/**\n * This module contains the table component.\n * @module\n */\n\nexport interface TableProps extends TableHTMLAttributes<HTMLTableElement> {\n caption: string\n}\n\n/**\n * The Table component is used to render a table.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @prop caption - An easy to understand description of the table.\n * @example\n * ```tsx\n * <Table caption=\"Basic Table\">\n * {children}\n * </Table>\n * ```\n */\nexport function Table(props: PropsWithChildren<TableProps>) {\n const { caption, children, ...nativeProps } = props\n const styles = table()\n\n return (\n <div className={styles.container}>\n <table\n {...nativeProps}\n className={cx(nativeProps.className, styles.table)}\n >\n <caption className={styles.caption}>{caption}</caption>\n {children}\n </table>\n </div>\n )\n}\n\n// We only provide this for consistency with the rest of the components\n\nexport type TrProps = TableHTMLAttributes<HTMLTableRowElement>\n\n/**\n * The Tr component is used to render a table row.\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Tr>\n * {children}\n * </Tr>\n * ```\n */\nexport function Tr(props: PropsWithChildren<TrProps>) {\n return <tr {...props} />\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,aAAa;AA6BhB,SAIE,KAJF;AANC,SAAS,MAAM,OAAsC;AAC1D,QAAM,EAAE,SAAS,UAAU,GAAG,YAAY,IAAI;AAC9C,QAAM,SAAS,MAAM;AAErB,SACE,oBAAC,SAAI,WAAW,OAAO,WACrB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,GAAG,YAAY,WAAW,OAAO,KAAK;AAAA,MAEjD;AAAA,4BAAC,aAAQ,WAAW,OAAO,SAAU,mBAAQ;AAAA,QAC5C;AAAA;AAAA;AAAA,EACH,GACF;AAEJ;AAgBO,SAAS,GAAG,OAAmC;AACpD,SAAO,oBAAC,QAAI,GAAG,OAAO;AACxB;","names":[]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
// src/components/NotificationDescription.tsx
|
|
2
|
-
import { cx } from "@cerberus
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
3
|
import {
|
|
4
4
|
notification
|
|
5
|
-
} from "@cerberus
|
|
5
|
+
} from "@cerberus/styled-system/recipes";
|
|
6
6
|
import { jsx } from "react/jsx-runtime";
|
|
7
7
|
function NotificationDescription(props) {
|
|
8
8
|
const { palette, ...nativeProps } = props;
|
|
@@ -19,4 +19,4 @@ function NotificationDescription(props) {
|
|
|
19
19
|
export {
|
|
20
20
|
NotificationDescription
|
|
21
21
|
};
|
|
22
|
-
//# sourceMappingURL=chunk-
|
|
22
|
+
//# sourceMappingURL=chunk-HW76XVA3.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/NotificationDescription.tsx"],"sourcesContent":["/**\n * This module exports the NotificationDescription component.\n * @module\n */\n\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport type { HTMLAttributes } from 'react'\n\nexport interface BaseNotificationDescriptionProps\n extends HTMLAttributes<HTMLParagraphElement> {}\nexport type NotificationDescriptionProps = BaseNotificationDescriptionProps &\n NotificationVariantProps\n\n/**\n * The NotificationDescription component is used to render the description of a notification.\n * @param props - The anything a HTMLParagraphElement can accept.\n */\nexport function NotificationDescription(props: NotificationDescriptionProps) {\n const { palette, ...nativeProps } = props\n const styles = notification({ palette })\n return (\n <p\n className={cx(nativeProps.className, styles.description)}\n {...nativeProps}\n />\n )\n}\n"],"mappings":";AAKA,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,OAEK;AAgBH;AAJG,SAAS,wBAAwB,OAAqC;AAC3E,QAAM,EAAE,SAAS,GAAG,YAAY,IAAI;AACpC,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,YAAY,WAAW,OAAO,WAAW;AAAA,MACtD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// src/components/Th.tsx
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { th } from "@cerberus/styled-system/recipes";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
function Th(props) {
|
|
6
|
+
const { size, ...nativeProps } = props;
|
|
7
|
+
return /* @__PURE__ */ jsx("th", { ...nativeProps, className: cx(nativeProps.className, th({ size })) });
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export {
|
|
11
|
+
Th
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=chunk-KFJKK2WX.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Th.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { th, type ThVariantProps } from '@cerberus/styled-system/recipes'\nimport type { TableHTMLAttributes } from 'react'\n\n/**\n * Th component for the Table component\n * @module\n */\n\nexport type ThBaseProps = TableHTMLAttributes<HTMLTableCellElement>\nexport type ThProps = ThBaseProps & ThVariantProps\n\n/**\n * Styles for the Th component\n * @definition [Table docs](https://cerberus.digitalu.design/react/table)\n * @example\n * ```tsx\n * <Th>Header 1</Th>\n * ```\n */\nexport function Th(props: ThProps) {\n const { size, ...nativeProps } = props\n return (\n <th {...nativeProps} className={cx(nativeProps.className, th({ size }))} />\n )\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,UAA+B;AAsBpC;AAHG,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE,oBAAC,QAAI,GAAG,aAAa,WAAW,GAAG,YAAY,WAAW,GAAG,EAAE,KAAK,CAAC,CAAC,GAAG;AAE7E;","names":[]}
|
|
@@ -6,11 +6,11 @@ import {
|
|
|
6
6
|
} from "./chunk-BEYPMC73.js";
|
|
7
7
|
|
|
8
8
|
// src/components/Notification.tsx
|
|
9
|
-
import { cx } from "@cerberus
|
|
10
|
-
import { hstack, vstack } from "@cerberus
|
|
9
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
10
|
+
import { hstack, vstack } from "@cerberus/styled-system/patterns";
|
|
11
11
|
import {
|
|
12
12
|
notification
|
|
13
|
-
} from "@cerberus
|
|
13
|
+
} from "@cerberus/styled-system/recipes";
|
|
14
14
|
import {
|
|
15
15
|
useRef
|
|
16
16
|
} from "react";
|
|
@@ -73,4 +73,4 @@ function Notification(props) {
|
|
|
73
73
|
export {
|
|
74
74
|
Notification
|
|
75
75
|
};
|
|
76
|
-
//# sourceMappingURL=chunk-
|
|
76
|
+
//# sourceMappingURL=chunk-LF2QFS5S.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Notification.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { hstack, vstack } from '@cerberus/styled-system/patterns'\nimport {\n notification,\n type NotificationVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport {\n useRef,\n type DialogHTMLAttributes,\n type PropsWithChildren,\n type MouseEvent,\n} from 'react'\nimport { Close } from '@cerberus/icons'\nimport { $cerberusIcons } from '../config/defineIcons'\nimport type { IconType } from '../config/cerbIcons'\nimport { trapFocus } from '../aria-helpers/trap-focus.aria'\n\n/**\n * This module exports the Notification component.\n * @module\n */\n\nfunction MatchNotificationIcon(props: NotificationVariantProps) {\n const palette = props.palette || 'info'\n const key = `${palette}Notification` as keyof typeof $cerberusIcons\n const Icon = $cerberusIcons[key] as IconType\n return <Icon />\n}\n\nexport interface NotificationBaseProps\n extends Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose'> {\n id: string\n onClose?: (e: MouseEvent<HTMLButtonElement>) => void\n}\nexport type NotificationProps = NotificationBaseProps & NotificationVariantProps\n\n/**\n * The info notification component.\n * @param props - The component props.\n * @returns The info notification component.\n * @example\n * ```tsx\n * <Notification id=\"info:1\" open>\n * <NotificationHeading>Info Notification</NotificationHeading>\n * <NotificationDescription>\n * This is a description with a <a href=\"#\">link</a> in the message.\n * </NotificationDescription>\n * </Notification>\n * ```\n */\nexport function Notification(props: PropsWithChildren<NotificationProps>) {\n const { children, palette, onClose, ...nativeProps } = props\n const ref = useRef<HTMLDialogElement>(null)\n const onKeyDown = trapFocus(ref)\n const styles = notification({ palette })\n\n return (\n <dialog\n {...nativeProps}\n className={cx(\n nativeProps.className,\n hstack({\n position: 'relative',\n gap: '4',\n }),\n styles.dialog,\n )}\n onKeyDown={onKeyDown}\n ref={ref}\n role=\"alert\"\n >\n <span className={styles.icon}>\n <MatchNotificationIcon palette={palette} />\n </span>\n\n <div\n className={vstack({\n alignItems: 'flex-start',\n gap: '0',\n py: '2',\n })}\n >\n {children}\n </div>\n\n <button\n aria-label=\"Close\"\n className={styles.close}\n onClick={onClose}\n value={props.id}\n >\n <Close />\n </button>\n </dialog>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAC/B;AAAA,EACE;AAAA,OAEK;AACP;AAAA,EACE;AAAA,OAIK;AACP,SAAS,aAAa;AAcb,cA+BL,YA/BK;AAJT,SAAS,sBAAsB,OAAiC;AAC9D,QAAM,UAAU,MAAM,WAAW;AACjC,QAAM,MAAM,GAAG,OAAO;AACtB,QAAM,OAAO,eAAe,GAAG;AAC/B,SAAO,oBAAC,QAAK;AACf;AAuBO,SAAS,aAAa,OAA6C;AACxE,QAAM,EAAE,UAAU,SAAS,SAAS,GAAG,YAAY,IAAI;AACvD,QAAM,MAAM,OAA0B,IAAI;AAC1C,QAAM,YAAY,UAAU,GAAG;AAC/B,QAAM,SAAS,aAAa,EAAE,QAAQ,CAAC;AAEvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,OAAO;AAAA,UACL,UAAU;AAAA,UACV,KAAK;AAAA,QACP,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAK;AAAA,MAEL;AAAA,4BAAC,UAAK,WAAW,OAAO,MACtB,8BAAC,yBAAsB,SAAkB,GAC3C;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,OAAO;AAAA,cAChB,YAAY;AAAA,cACZ,KAAK;AAAA,cACL,IAAI;AAAA,YACN,CAAC;AAAA,YAEA;AAAA;AAAA,QACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,cAAW;AAAA,YACX,WAAW,OAAO;AAAA,YAClB,SAAS;AAAA,YACT,OAAO,MAAM;AAAA,YAEb,8BAAC,SAAM;AAAA;AAAA,QACT;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
// src/components/Thead.tsx
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { thead } from "@cerberus/styled-system/recipes";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
function Thead(props) {
|
|
6
|
+
return /* @__PURE__ */ jsx("thead", { ...props, className: cx(props.className, thead()) });
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export {
|
|
10
|
+
Thead
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=chunk-N3FUF4TB.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/Thead.tsx"],"sourcesContent":["import { cx } from '@cerberus/styled-system/css'\nimport { thead } from '@cerberus/styled-system/recipes'\nimport type { TableHTMLAttributes } from 'react'\n\n/**\n * This module contains the Thead component.\n * @module\n */\n\nexport type TheadProps = TableHTMLAttributes<HTMLTableSectionElement>\n\n/**\n * The Thead component is used to render a table header.\n * @definition [Table docs](https://cerberus.digitalu.design/react/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,SAAS,UAAU;AACnB,SAAS,aAAa;AAqBb;AADF,SAAS,MAAM,OAAmB;AACvC,SAAO,oBAAC,WAAO,GAAG,OAAO,WAAW,GAAG,MAAM,WAAW,MAAM,CAAC,GAAG;AACpE;","names":[]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// src/components/Tbody.tsx
|
|
2
|
+
import { tbody } from "@cerberus/styled-system/recipes";
|
|
3
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
function Tbody(props) {
|
|
6
|
+
const { decoration, ...nativeProps } = props;
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"tbody",
|
|
9
|
+
{
|
|
10
|
+
...nativeProps,
|
|
11
|
+
className: cx(
|
|
12
|
+
nativeProps.className,
|
|
13
|
+
tbody({
|
|
14
|
+
decoration
|
|
15
|
+
})
|
|
16
|
+
)
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export {
|
|
22
|
+
Tbody
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=chunk-PJ3744I6.js.map
|
|
@@ -0,0 +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'\nimport type { TableHTMLAttributes } from 'react'\n\nexport type TbodyBaseProps = TableHTMLAttributes<HTMLTableSectionElement>\nexport type TbodyProps = TbodyBaseProps & TbodyVariantProps\n\n/**\n * The TBody component is used to render a table body.\n * @definition [Table docs](https://cerberus.digitalu.design/react/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,SAAS,aAAqC;AAC9C,SAAS,UAAU;AAmBf;AAHG,SAAS,MAAM,OAAmB;AACvC,QAAM,EAAE,YAAY,GAAG,YAAY,IAAI;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,MAAM;AAAA,UACJ;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -6,9 +6,9 @@ import {
|
|
|
6
6
|
} from "./chunk-BEYPMC73.js";
|
|
7
7
|
|
|
8
8
|
// src/components/FileUploader.tsx
|
|
9
|
-
import { cx } from "@cerberus
|
|
10
|
-
import { circle, vstack } from "@cerberus
|
|
11
|
-
import { fileUploader, modalIcon } from "@cerberus
|
|
9
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
10
|
+
import { circle, vstack } from "@cerberus/styled-system/patterns";
|
|
11
|
+
import { fileUploader, modalIcon } from "@cerberus/styled-system/recipes";
|
|
12
12
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
13
13
|
function FileUploader(props) {
|
|
14
14
|
var _a;
|
|
@@ -60,4 +60,4 @@ function FileUploader(props) {
|
|
|
60
60
|
export {
|
|
61
61
|
FileUploader
|
|
62
62
|
};
|
|
63
|
-
//# sourceMappingURL=chunk-
|
|
63
|
+
//# sourceMappingURL=chunk-SMCEFK6Q.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/components/FileUploader.tsx"],"sourcesContent":["'use client'\n\nimport { cx } from '@cerberus/styled-system/css'\nimport { circle, vstack } from '@cerberus/styled-system/patterns'\nimport { type InputHTMLAttributes } from 'react'\nimport { Show } from './Show'\nimport { fileUploader, modalIcon } from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\nexport interface FileUploaderProps\n extends InputHTMLAttributes<HTMLInputElement> {\n heading?: string\n name: string\n}\n\nexport function FileUploader(props: FileUploaderProps) {\n const styles = fileUploader()\n const Icon = $cerberusIcons.fileUploader\n\n return (\n <div\n className={cx(\n vstack({\n justify: 'center',\n }),\n styles.container,\n )}\n >\n <span className={cx(styles.icon, modalIcon(), circle())}>\n <Icon />\n </span>\n\n <label\n className={cx(\n vstack({\n justify: 'center',\n }),\n styles.label,\n )}\n htmlFor={props.name}\n >\n <Show when={Boolean(props.heading)}>\n <p className={styles.heading}>{props.heading}</p>\n </Show>\n Import {props.accept?.replace(',', ', ')} files\n <p className={styles.description}>Or click to upload</p>\n <input\n {...props}\n className={cx(props.className, styles.input)}\n type=\"file\"\n />\n </label>\n </div>\n )\n}\n"],"mappings":";;;;;;;;AAEA,SAAS,UAAU;AACnB,SAAS,QAAQ,cAAc;AAG/B,SAAS,cAAc,iBAAiB;AAuBhC,cAGF,YAHE;AAdD,SAAS,aAAa,OAA0B;AAfvD;AAgBE,QAAM,SAAS,aAAa;AAC5B,QAAM,OAAO,eAAe;AAE5B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT,OAAO;AAAA,UACL,SAAS;AAAA,QACX,CAAC;AAAA,QACD,OAAO;AAAA,MACT;AAAA,MAEA;AAAA,4BAAC,UAAK,WAAW,GAAG,OAAO,MAAM,UAAU,GAAG,OAAO,CAAC,GACpD,8BAAC,QAAK,GACR;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT,OAAO;AAAA,gBACL,SAAS;AAAA,cACX,CAAC;AAAA,cACD,OAAO;AAAA,YACT;AAAA,YACA,SAAS,MAAM;AAAA,YAEf;AAAA,kCAAC,QAAK,MAAM,QAAQ,MAAM,OAAO,GAC/B,8BAAC,OAAE,WAAW,OAAO,SAAU,gBAAM,SAAQ,GAC/C;AAAA,cAAO;AAAA,eACC,WAAM,WAAN,mBAAc,QAAQ,KAAK;AAAA,cAAM;AAAA,cACzC,oBAAC,OAAE,WAAW,OAAO,aAAa,gCAAkB;AAAA,cACpD;AAAA,gBAAC;AAAA;AAAA,kBACE,GAAG;AAAA,kBACJ,WAAW,GAAG,MAAM,WAAW,OAAO,KAAK;AAAA,kBAC3C,MAAK;AAAA;AAAA,cACP;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
// src/components/Td.tsx
|
|
2
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
3
|
+
import { td } from "@cerberus/styled-system/recipes";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
function Td(props) {
|
|
6
|
+
const { size, ...nativeProps } = props;
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
8
|
+
"td",
|
|
9
|
+
{
|
|
10
|
+
...nativeProps,
|
|
11
|
+
className: cx(
|
|
12
|
+
nativeProps.className,
|
|
13
|
+
td({
|
|
14
|
+
size
|
|
15
|
+
})
|
|
16
|
+
)
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export {
|
|
22
|
+
Td
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=chunk-XREC5IJE.js.map
|
|
@@ -0,0 +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'\nimport type { TableHTMLAttributes } from 'react'\n\n/**\n * Th component for the Td component\n * @module\n */\n\nexport type TdBaseProps = TableHTMLAttributes<HTMLTableCellElement>\nexport type TdProps = TdBaseProps & TdVariantProps\n\n/**\n * Styles for the Th component\n * @definition [Table docs](https://cerberus.digitalu.design/react/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,SAAS,UAAU;AACnB,SAAS,UAA+B;AAsBpC;AAHG,SAAS,GAAG,OAAgB;AACjC,QAAM,EAAE,MAAM,GAAG,YAAY,IAAI;AACjC,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT,YAAY;AAAA,QACZ,GAAG;AAAA,UACD;AAAA,QACF,CAAC;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;","names":[]}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
Notification
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-LF2QFS5S.js";
|
|
4
4
|
import {
|
|
5
5
|
NotificationDescription
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-HW76XVA3.js";
|
|
7
7
|
import {
|
|
8
8
|
NotificationHeading
|
|
9
|
-
} from "./chunk-
|
|
9
|
+
} from "./chunk-3C2DJSEE.js";
|
|
10
10
|
import {
|
|
11
11
|
Portal
|
|
12
12
|
} from "./chunk-4CAT3FHV.js";
|
|
@@ -25,9 +25,9 @@ import {
|
|
|
25
25
|
useMemo,
|
|
26
26
|
useState
|
|
27
27
|
} from "react";
|
|
28
|
-
import { animateIn, vstack } from "@cerberus
|
|
29
|
-
import { notification } from "@cerberus
|
|
30
|
-
import { cx } from "@cerberus
|
|
28
|
+
import { animateIn, vstack } from "@cerberus/styled-system/patterns";
|
|
29
|
+
import { notification } from "@cerberus/styled-system/recipes";
|
|
30
|
+
import { cx } from "@cerberus/styled-system/css";
|
|
31
31
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
32
32
|
var NotificationsContext = createContext(null);
|
|
33
33
|
function NotificationCenter(props) {
|
|
@@ -119,4 +119,4 @@ export {
|
|
|
119
119
|
NotificationCenter,
|
|
120
120
|
useNotificationCenter
|
|
121
121
|
};
|
|
122
|
-
//# sourceMappingURL=chunk-
|
|
122
|
+
//# sourceMappingURL=chunk-XRED74C2.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/context/notification-center.tsx"],"sourcesContent":["'use client'\n\nimport {\n createContext,\n useCallback,\n useContext,\n useMemo,\n useState,\n type MouseEvent,\n type PropsWithChildren,\n type ReactNode,\n} from 'react'\nimport { Show } from '../components/Show'\nimport { NotificationHeading } from '../components/NotificationHeading'\nimport { NotificationDescription } from '../components/NotificationDescription'\nimport { Notification } from '../components/Notification'\nimport { animateIn, vstack } from '@cerberus/styled-system/patterns'\nimport { Portal, type PortalProps } from '../components/Portal'\nimport { notification } from '@cerberus/styled-system/recipes'\nimport { Button } from '../components/Button'\nimport { cx } from '@cerberus/styled-system/css'\n\n/**\n * This module provides a context and hook for notifications.\n * @module\n */\n\nexport interface NotifyOptions {\n palette: 'info' | 'success' | 'warning' | 'danger'\n heading: string\n id?: string\n description?: ReactNode\n onClose?: () => void\n}\n\nexport interface NotificationsValue {\n notify: (options: NotifyOptions) => void\n}\n\nconst NotificationsContext = createContext<NotificationsValue | null>(null)\n\nexport interface NotificationsProviderProps extends PortalProps {}\n\n/**\n * Provides a notification center to the app.\n * @example\n * ```tsx\n * // Wrap the Provider around the root of the feature.\n * <Notifications>\n * <SomeFeatureSection />\n * </Notifications>\n *\n * // Use the hook to show a notification.\n * const notify = useNotifications()\n *\n * const handleClick = useCallback(() => {\n * notify({\n * palette: 'info',\n * heading: 'New feature!',\n * description: 'We have added a new feature to the app.',\n * })\n * }, [notify])\n * ```\n */\nexport function NotificationCenter(\n props: PropsWithChildren<NotificationsProviderProps>,\n) {\n const [activeNotifications, setActiveNotifications] = useState<\n NotifyOptions[]\n >([])\n const styles = notification()\n\n const handleNotify = useCallback((options: NotifyOptions) => {\n setActiveNotifications((prev) => {\n const id = `${options.palette}:${prev.length + 1}`\n return [...prev, { ...options, id }]\n })\n }, [])\n\n const handleClose = useCallback((e: MouseEvent<HTMLButtonElement>) => {\n const target = e.currentTarget as HTMLButtonElement\n setActiveNotifications((prev) => {\n const item = prev.find((option) => option.id === target.value)\n if (item?.onClose) item.onClose()\n return prev.filter((option) => option.id !== target.value)\n })\n }, [])\n\n const handleCloseAll = useCallback(() => {\n setActiveNotifications((prev) => {\n prev.forEach((item) => {\n if (item.onClose) item.onClose()\n })\n return []\n })\n }, [])\n\n const value = useMemo(\n () => ({\n notify: handleNotify,\n }),\n [handleNotify],\n )\n\n // For some reason, the vstack pattern alignItems is not registering here.\n // So we are forcing it with the style prop.\n\n return (\n <NotificationsContext.Provider value={value}>\n {props.children}\n\n <Show when={activeNotifications.length > 0}>\n <Portal container={props.container}>\n <div className={styles.center}>\n <Show when={activeNotifications.length >= 4}>\n <Button\n className={cx(styles.closeAll, animateIn())}\n onClick={handleCloseAll}\n palette=\"action\"\n shape=\"rounded\"\n size=\"sm\"\n usage=\"text\"\n >\n Close all\n </Button>\n </Show>\n <div\n className={vstack({\n alignItems: 'flex-end',\n gap: '4',\n })}\n style={{\n alignItems: 'flex-end',\n }}\n >\n {activeNotifications.map((option) => (\n <Notification\n id={option.id!}\n key={option.id}\n onClose={handleClose}\n open\n palette={option.palette}\n >\n <NotificationHeading palette={option.palette}>\n {option.heading}\n </NotificationHeading>\n <NotificationDescription palette={option.palette}>\n {option.description}\n </NotificationDescription>\n </Notification>\n ))}\n </div>\n </div>\n </Portal>\n </Show>\n </NotificationsContext.Provider>\n )\n}\n\n/**\n * The hook to use the NotificationCenter.\n * @returns The notify method to trigger a notification.\n * @example\n * ```tsx\n * const {notify} = useNotificationCenter()\n * notify({\n * palette: 'info',\n * heading: 'New feature',\n * description: 'We have added a new feature to the app.',\n * })\n * ```\n */\nexport function useNotificationCenter(): NotificationsValue {\n const context = useContext(NotificationsContext)\n if (!context) {\n throw new Error(\n 'useNotificationCenter must be used within a NotificationsProvider',\n )\n }\n return context\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AAKP,SAAS,WAAW,cAAc;AAElC,SAAS,oBAAoB;AAE7B,SAAS,UAAU;AA+FL,cAqBE,YArBF;AA5Ed,IAAM,uBAAuB,cAAyC,IAAI;AAyBnE,SAAS,mBACd,OACA;AACA,QAAM,CAAC,qBAAqB,sBAAsB,IAAI,SAEpD,CAAC,CAAC;AACJ,QAAM,SAAS,aAAa;AAE5B,QAAM,eAAe,YAAY,CAAC,YAA2B;AAC3D,2BAAuB,CAAC,SAAS;AAC/B,YAAM,KAAK,GAAG,QAAQ,OAAO,IAAI,KAAK,SAAS,CAAC;AAChD,aAAO,CAAC,GAAG,MAAM,EAAE,GAAG,SAAS,GAAG,CAAC;AAAA,IACrC,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,cAAc,YAAY,CAAC,MAAqC;AACpE,UAAM,SAAS,EAAE;AACjB,2BAAuB,CAAC,SAAS;AAC/B,YAAM,OAAO,KAAK,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAC7D,UAAI,6BAAM,QAAS,MAAK,QAAQ;AAChC,aAAO,KAAK,OAAO,CAAC,WAAW,OAAO,OAAO,OAAO,KAAK;AAAA,IAC3D,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,iBAAiB,YAAY,MAAM;AACvC,2BAAuB,CAAC,SAAS;AAC/B,WAAK,QAAQ,CAAC,SAAS;AACrB,YAAI,KAAK,QAAS,MAAK,QAAQ;AAAA,MACjC,CAAC;AACD,aAAO,CAAC;AAAA,IACV,CAAC;AAAA,EACH,GAAG,CAAC,CAAC;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAKA,SACE,qBAAC,qBAAqB,UAArB,EAA8B,OAC5B;AAAA,UAAM;AAAA,IAEP,oBAAC,QAAK,MAAM,oBAAoB,SAAS,GACvC,8BAAC,UAAO,WAAW,MAAM,WACvB,+BAAC,SAAI,WAAW,OAAO,QACrB;AAAA,0BAAC,QAAK,MAAM,oBAAoB,UAAU,GACxC;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,OAAO,UAAU,UAAU,CAAC;AAAA,UAC1C,SAAS;AAAA,UACT,SAAQ;AAAA,UACR,OAAM;AAAA,UACN,MAAK;AAAA,UACL,OAAM;AAAA,UACP;AAAA;AAAA,MAED,GACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,OAAO;AAAA,YAChB,YAAY;AAAA,YACZ,KAAK;AAAA,UACP,CAAC;AAAA,UACD,OAAO;AAAA,YACL,YAAY;AAAA,UACd;AAAA,UAEC,8BAAoB,IAAI,CAAC,WACxB;AAAA,YAAC;AAAA;AAAA,cACC,IAAI,OAAO;AAAA,cAEX,SAAS;AAAA,cACT,MAAI;AAAA,cACJ,SAAS,OAAO;AAAA,cAEhB;AAAA,oCAAC,uBAAoB,SAAS,OAAO,SAClC,iBAAO,SACV;AAAA,gBACA,oBAAC,2BAAwB,SAAS,OAAO,SACtC,iBAAO,aACV;AAAA;AAAA;AAAA,YAVK,OAAO;AAAA,UAWd,CACD;AAAA;AAAA,MACH;AAAA,OACF,GACF,GACF;AAAA,KACF;AAEJ;AAeO,SAAS,wBAA4C;AAC1D,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import {
|
|
3
3
|
NotificationCenter,
|
|
4
4
|
useNotificationCenter
|
|
5
|
-
} from "../chunk-
|
|
6
|
-
import "../chunk-
|
|
7
|
-
import "../chunk-
|
|
8
|
-
import "../chunk-
|
|
5
|
+
} from "../chunk-XRED74C2.js";
|
|
6
|
+
import "../chunk-LF2QFS5S.js";
|
|
7
|
+
import "../chunk-HW76XVA3.js";
|
|
8
|
+
import "../chunk-3C2DJSEE.js";
|
|
9
9
|
import "../chunk-4CAT3FHV.js";
|
|
10
10
|
import "../chunk-2ATICEW3.js";
|
|
11
11
|
import "../chunk-4O4QFF4S.js";
|