@cerberus-design/react 0.14.1 → 0.14.2-next-a928afd
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/README.md +4 -4
- package/build/legacy/_tsup-dts-rollup.d.cts +4 -3
- package/build/legacy/components/Accordion.cjs +174 -7
- package/build/legacy/components/Accordion.cjs.map +1 -1
- package/build/legacy/components/AccordionItemGroup.cjs +179 -12
- package/build/legacy/components/AccordionItemGroup.cjs.map +1 -1
- package/build/legacy/components/Admonition.cjs +1 -0
- package/build/legacy/components/Admonition.cjs.map +1 -1
- package/build/legacy/components/Avatar.cjs +1 -0
- package/build/legacy/components/Avatar.cjs.map +1 -1
- package/build/legacy/components/Checkbox.cjs +1 -0
- package/build/legacy/components/Checkbox.cjs.map +1 -1
- package/build/legacy/components/DatePicker.client.cjs +1 -0
- package/build/legacy/components/DatePicker.client.cjs.map +1 -1
- package/build/legacy/components/DatePicker.server.cjs +1 -0
- package/build/legacy/components/DatePicker.server.cjs.map +1 -1
- package/build/legacy/components/FileStatus.cjs +1 -0
- package/build/legacy/components/FileStatus.cjs.map +1 -1
- package/build/legacy/components/FileUploader.cjs +1 -0
- package/build/legacy/components/FileUploader.cjs.map +1 -1
- package/build/legacy/components/Input.cjs +1 -0
- package/build/legacy/components/Input.cjs.map +1 -1
- package/build/legacy/components/Notification.cjs +1 -0
- package/build/legacy/components/Notification.cjs.map +1 -1
- package/build/legacy/components/Select.cjs +1 -0
- package/build/legacy/components/Select.cjs.map +1 -1
- package/build/legacy/components/Tag.cjs +1 -0
- package/build/legacy/components/Tag.cjs.map +1 -1
- package/build/legacy/components/Text.cjs +1 -1
- package/build/legacy/components/Text.cjs.map +1 -1
- package/build/legacy/components/Toggle.cjs +1 -0
- package/build/legacy/components/Toggle.cjs.map +1 -1
- package/build/legacy/config/cerbIcons.cjs +1 -0
- package/build/legacy/config/cerbIcons.cjs.map +1 -1
- package/build/legacy/config/defineIcons.cjs +1 -0
- package/build/legacy/config/defineIcons.cjs.map +1 -1
- package/build/legacy/context/confirm-modal.cjs +1 -0
- package/build/legacy/context/confirm-modal.cjs.map +1 -1
- package/build/legacy/context/cta-modal.cjs +1 -0
- package/build/legacy/context/cta-modal.cjs.map +1 -1
- package/build/legacy/context/notification-center.cjs +1 -0
- package/build/legacy/context/notification-center.cjs.map +1 -1
- package/build/legacy/context/prompt-modal.cjs +1 -0
- package/build/legacy/context/prompt-modal.cjs.map +1 -1
- package/build/legacy/index.cjs +139 -136
- package/build/legacy/index.cjs.map +1 -1
- package/build/modern/_tsup-dts-rollup.d.ts +4 -3
- package/build/modern/{chunk-77B4HFKT.js → chunk-5OVH3INN.js} +3 -3
- package/build/modern/{chunk-T6U7AKKP.js → chunk-6BH5J5GF.js} +3 -3
- package/build/modern/{chunk-IP5VFOPZ.js → chunk-BC5SZDYY.js} +2 -2
- package/build/modern/{chunk-O7QVCF3H.js → chunk-BVCXVZAF.js} +3 -3
- package/build/modern/{chunk-5KHU6MM5.js → chunk-CRII2HNX.js} +2 -1
- package/build/modern/chunk-CRII2HNX.js.map +1 -0
- package/build/modern/{chunk-M73ECA25.js → chunk-CVTON5DQ.js} +2 -2
- package/build/modern/{chunk-GI6CSUU4.js → chunk-FXLLRVAM.js} +3 -3
- package/build/modern/{chunk-F4LTOZAN.js → chunk-HKJMLWVP.js} +2 -2
- package/build/modern/{chunk-HP4ZN473.js → chunk-JJZQGR7A.js} +2 -2
- package/build/modern/{chunk-RIZGWERR.js → chunk-KPUYKHLW.js} +2 -2
- package/build/modern/{chunk-F7XWOSN3.js → chunk-KWJ5FKX7.js} +2 -2
- package/build/modern/{chunk-BU5JK37R.js → chunk-PVIMOXSO.js} +2 -2
- package/build/modern/{chunk-XVU2NQCW.js → chunk-QK7R2XJM.js} +2 -2
- package/build/modern/{chunk-DDOTCGGA.js → chunk-QMF5ZNDG.js} +2 -2
- package/build/modern/{chunk-4IMOKN2D.js → chunk-QQOWWMZ3.js} +3 -3
- package/build/modern/{chunk-2ZNIYPDV.js → chunk-RU5LOXWI.js} +2 -2
- package/build/modern/chunk-RU5LOXWI.js.map +1 -0
- package/build/modern/{chunk-W2LSPRQ3.js → chunk-T2JOPPGL.js} +2 -2
- package/build/modern/{chunk-34E3UFFB.js → chunk-TJCFYL5W.js} +6 -2
- package/build/modern/chunk-TJCFYL5W.js.map +1 -0
- package/build/modern/{chunk-F7EWTOML.js → chunk-U36UZJGZ.js} +2 -2
- package/build/modern/{chunk-S25RHYZV.js → chunk-XOROL3JY.js} +2 -2
- package/build/modern/{chunk-BHSYQCDV.js → chunk-XXWR7UGH.js} +4 -4
- package/build/modern/components/Accordion.js +5 -1
- package/build/modern/components/AccordionItemGroup.js +6 -2
- package/build/modern/components/Admonition.js +4 -4
- package/build/modern/components/Avatar.js +3 -3
- package/build/modern/components/Checkbox.js +3 -3
- package/build/modern/components/DatePicker.client.js +4 -4
- package/build/modern/components/DatePicker.server.js +3 -3
- package/build/modern/components/FileStatus.js +4 -4
- package/build/modern/components/FileUploader.js +4 -4
- package/build/modern/components/Input.js +3 -3
- package/build/modern/components/Notification.js +3 -3
- package/build/modern/components/Select.js +3 -3
- package/build/modern/components/Tag.js +3 -3
- package/build/modern/components/Text.js +1 -1
- package/build/modern/components/Toggle.js +3 -3
- package/build/modern/config/cerbIcons.js +1 -1
- package/build/modern/config/defineIcons.js +2 -2
- package/build/modern/context/confirm-modal.js +4 -4
- package/build/modern/context/cta-modal.js +4 -4
- package/build/modern/context/notification-center.js +4 -4
- package/build/modern/context/prompt-modal.js +5 -5
- package/build/modern/index.js +21 -21
- package/package.json +8 -5
- package/src/components/Accordion.tsx +2 -1
- package/src/components/Text.tsx +9 -5
- package/src/config/cerbIcons.ts +2 -0
- package/build/modern/chunk-2ZNIYPDV.js.map +0 -1
- package/build/modern/chunk-34E3UFFB.js.map +0 -1
- package/build/modern/chunk-5KHU6MM5.js.map +0 -1
- /package/build/modern/{chunk-77B4HFKT.js.map → chunk-5OVH3INN.js.map} +0 -0
- /package/build/modern/{chunk-T6U7AKKP.js.map → chunk-6BH5J5GF.js.map} +0 -0
- /package/build/modern/{chunk-IP5VFOPZ.js.map → chunk-BC5SZDYY.js.map} +0 -0
- /package/build/modern/{chunk-O7QVCF3H.js.map → chunk-BVCXVZAF.js.map} +0 -0
- /package/build/modern/{chunk-M73ECA25.js.map → chunk-CVTON5DQ.js.map} +0 -0
- /package/build/modern/{chunk-GI6CSUU4.js.map → chunk-FXLLRVAM.js.map} +0 -0
- /package/build/modern/{chunk-F4LTOZAN.js.map → chunk-HKJMLWVP.js.map} +0 -0
- /package/build/modern/{chunk-HP4ZN473.js.map → chunk-JJZQGR7A.js.map} +0 -0
- /package/build/modern/{chunk-RIZGWERR.js.map → chunk-KPUYKHLW.js.map} +0 -0
- /package/build/modern/{chunk-F7XWOSN3.js.map → chunk-KWJ5FKX7.js.map} +0 -0
- /package/build/modern/{chunk-BU5JK37R.js.map → chunk-PVIMOXSO.js.map} +0 -0
- /package/build/modern/{chunk-XVU2NQCW.js.map → chunk-QK7R2XJM.js.map} +0 -0
- /package/build/modern/{chunk-DDOTCGGA.js.map → chunk-QMF5ZNDG.js.map} +0 -0
- /package/build/modern/{chunk-4IMOKN2D.js.map → chunk-QQOWWMZ3.js.map} +0 -0
- /package/build/modern/{chunk-W2LSPRQ3.js.map → chunk-T2JOPPGL.js.map} +0 -0
- /package/build/modern/{chunk-F7EWTOML.js.map → chunk-U36UZJGZ.js.map} +0 -0
- /package/build/modern/{chunk-S25RHYZV.js.map → chunk-XOROL3JY.js.map} +0 -0
- /package/build/modern/{chunk-BHSYQCDV.js.map → chunk-XXWR7UGH.js.map} +0 -0
package/README.md
CHANGED
|
@@ -5,13 +5,13 @@ This is the React component library for Cerberus.
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
-
pnpm add @cerberus
|
|
8
|
+
pnpm add @cerberus/react
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
13
|
```typescript
|
|
14
|
-
import { Button } from '@cerberus
|
|
14
|
+
import { Button } from '@cerberus/react'
|
|
15
15
|
|
|
16
16
|
function BasicExample() {
|
|
17
17
|
return (
|
|
@@ -25,7 +25,7 @@ function BasicExample() {
|
|
|
25
25
|
### Basic Customization
|
|
26
26
|
|
|
27
27
|
```typescript
|
|
28
|
-
import { Button } from '@cerberus
|
|
28
|
+
import { Button } from '@cerberus/react'
|
|
29
29
|
|
|
30
30
|
function BasicExample() {
|
|
31
31
|
return (
|
|
@@ -41,7 +41,7 @@ function BasicExample() {
|
|
|
41
41
|
You can use [Panda-CSS](https://panda-css.com/) to customize the styles of the components.
|
|
42
42
|
|
|
43
43
|
```typescript
|
|
44
|
-
import { Button } from '@cerberus
|
|
44
|
+
import { Button } from '@cerberus/react'
|
|
45
45
|
import { css } from '../styled-system/css'
|
|
46
46
|
|
|
47
47
|
function CustomButton() {
|
|
@@ -10,7 +10,6 @@ import { applyModifiers } from '@dnd-kit/core';
|
|
|
10
10
|
import { AutoScrollActivator } from '@dnd-kit/core';
|
|
11
11
|
import { AutoScrollOptions } from '@dnd-kit/core';
|
|
12
12
|
import { AvatarVariantProps } from '@cerberus/styled-system/recipes';
|
|
13
|
-
import { BoxProps } from '@cerberus-design/styled-system/jsx';
|
|
14
13
|
import { ButtonHTMLAttributes } from 'react';
|
|
15
14
|
import { ButtonVariantProps } from '@cerberus/styled-system/recipes';
|
|
16
15
|
import { CancelDrop } from '@dnd-kit/core';
|
|
@@ -112,6 +111,7 @@ import { PointerSensorOptions } from '@dnd-kit/core';
|
|
|
112
111
|
import { PointerSensorProps } from '@dnd-kit/core';
|
|
113
112
|
import { pointerWithin } from '@dnd-kit/core';
|
|
114
113
|
import { PortalProps as PortalProps_2 } from '@ark-ui/react';
|
|
114
|
+
import { PProps } from '@cerberus/styled-system/jsx';
|
|
115
115
|
import type { Pretty } from '@cerberus/styled-system/types';
|
|
116
116
|
import { ProgressBarVariantProps } from '@cerberus/styled-system/recipes';
|
|
117
117
|
import { PropsWithChildren } from 'react';
|
|
@@ -1056,6 +1056,7 @@ export { DefaultThemes }
|
|
|
1056
1056
|
export { DefaultThemes as DefaultThemes_alias_1 }
|
|
1057
1057
|
|
|
1058
1058
|
export declare interface DefinedIcons {
|
|
1059
|
+
accordionIndicator?: IconType;
|
|
1059
1060
|
avatar?: IconType;
|
|
1060
1061
|
calendar?: IconType;
|
|
1061
1062
|
calendarPrev?: IconType;
|
|
@@ -1581,7 +1582,7 @@ export { getScrollableAncestors }
|
|
|
1581
1582
|
|
|
1582
1583
|
/**
|
|
1583
1584
|
* This module exports a component for rendering text utilizing the styled-system JSX utility.
|
|
1584
|
-
* @module @cerberus
|
|
1585
|
+
* @module @cerberus/react/Text
|
|
1585
1586
|
*/
|
|
1586
1587
|
declare type Headings = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
1587
1588
|
export { Headings }
|
|
@@ -3091,7 +3092,7 @@ declare type TextElements = 'p' | 'strong' | 'em' | 'small' | 'span';
|
|
|
3091
3092
|
export { TextElements }
|
|
3092
3093
|
export { TextElements as TextElements_alias_1 }
|
|
3093
3094
|
|
|
3094
|
-
declare interface TextProps extends
|
|
3095
|
+
declare interface TextProps extends PProps, HTMLAttributes<HTMLParagraphElement> {
|
|
3095
3096
|
/**
|
|
3096
3097
|
* The element to render as. Defaults to 'p'.
|
|
3097
3098
|
*/
|
|
@@ -28,14 +28,180 @@ __export(Accordion_exports, {
|
|
|
28
28
|
});
|
|
29
29
|
module.exports = __toCommonJS(Accordion_exports);
|
|
30
30
|
var import_react = require("@ark-ui/react");
|
|
31
|
-
var import_icons = require("@cerberus/icons");
|
|
32
31
|
var import_css = require("@cerberus/styled-system/css");
|
|
33
32
|
var import_recipes = require("@cerberus/styled-system/recipes");
|
|
33
|
+
|
|
34
|
+
// src/config/cerbIcons.ts
|
|
35
|
+
var import_icons = require("@cerberus/icons");
|
|
36
|
+
|
|
37
|
+
// src/config/icons/checkbox.icons.tsx
|
|
34
38
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
39
|
+
function CheckmarkIcon(props) {
|
|
40
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
41
|
+
"svg",
|
|
42
|
+
{
|
|
43
|
+
"aria-hidden": "true",
|
|
44
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
45
|
+
fill: "none",
|
|
46
|
+
role: "img",
|
|
47
|
+
viewBox: "0 0 24 24",
|
|
48
|
+
...props,
|
|
49
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
50
|
+
"path",
|
|
51
|
+
{
|
|
52
|
+
fill: "currentColor",
|
|
53
|
+
d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
|
|
54
|
+
}
|
|
55
|
+
)
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
function IndeterminateIcon(props) {
|
|
60
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
61
|
+
"svg",
|
|
62
|
+
{
|
|
63
|
+
"aria-hidden": "true",
|
|
64
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
65
|
+
role: "img",
|
|
66
|
+
fill: "none",
|
|
67
|
+
viewBox: "0 0 24 24",
|
|
68
|
+
...props,
|
|
69
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// src/components/AnimatingUploadIcon.tsx
|
|
75
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
76
|
+
function AnimatingUploadIcon(props) {
|
|
77
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
78
|
+
"svg",
|
|
79
|
+
{
|
|
80
|
+
"aria-hidden": "true",
|
|
81
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
82
|
+
width: props.size ?? "1em",
|
|
83
|
+
height: props.size ?? "1em",
|
|
84
|
+
viewBox: "0 0 24 24",
|
|
85
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
86
|
+
"g",
|
|
87
|
+
{
|
|
88
|
+
fill: "none",
|
|
89
|
+
stroke: "currentColor",
|
|
90
|
+
strokeLinecap: "square",
|
|
91
|
+
strokeLinejoin: "round",
|
|
92
|
+
strokeWidth: 1.5,
|
|
93
|
+
children: [
|
|
94
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
95
|
+
"path",
|
|
96
|
+
{
|
|
97
|
+
"data-name": "animating-trail",
|
|
98
|
+
strokeDasharray: "2 4",
|
|
99
|
+
strokeDashoffset: 6,
|
|
100
|
+
d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
|
|
101
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
102
|
+
"animate",
|
|
103
|
+
{
|
|
104
|
+
attributeName: "stroke-dashoffset",
|
|
105
|
+
dur: "0.45s",
|
|
106
|
+
repeatCount: "indefinite",
|
|
107
|
+
values: "6;0"
|
|
108
|
+
}
|
|
109
|
+
)
|
|
110
|
+
}
|
|
111
|
+
),
|
|
112
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
113
|
+
"path",
|
|
114
|
+
{
|
|
115
|
+
"data-name": "half-circle",
|
|
116
|
+
strokeDasharray: 32,
|
|
117
|
+
strokeDashoffset: 32,
|
|
118
|
+
d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
|
|
119
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
120
|
+
"animate",
|
|
121
|
+
{
|
|
122
|
+
fill: "freeze",
|
|
123
|
+
attributeName: "stroke-dashoffset",
|
|
124
|
+
begin: "0.075s",
|
|
125
|
+
dur: "0.3s",
|
|
126
|
+
values: "32;0"
|
|
127
|
+
}
|
|
128
|
+
)
|
|
129
|
+
}
|
|
130
|
+
),
|
|
131
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
132
|
+
"svg",
|
|
133
|
+
{
|
|
134
|
+
"aria-hidden": "true",
|
|
135
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
136
|
+
width: "0.8em",
|
|
137
|
+
height: "0.8em",
|
|
138
|
+
x: "27%",
|
|
139
|
+
y: "27%",
|
|
140
|
+
viewBox: "0 0 24 24",
|
|
141
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
142
|
+
"polygon",
|
|
143
|
+
{
|
|
144
|
+
fill: "currentColor",
|
|
145
|
+
stroke: "currentColor",
|
|
146
|
+
strokeWidth: 0.8,
|
|
147
|
+
opacity: "1",
|
|
148
|
+
points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
|
|
149
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
150
|
+
"animate",
|
|
151
|
+
{
|
|
152
|
+
fill: "freeze",
|
|
153
|
+
attributeName: "opacity",
|
|
154
|
+
values: "1;0;1",
|
|
155
|
+
dur: "2s",
|
|
156
|
+
repeatCount: "indefinite"
|
|
157
|
+
}
|
|
158
|
+
)
|
|
159
|
+
}
|
|
160
|
+
)
|
|
161
|
+
}
|
|
162
|
+
)
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
)
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
// src/config/cerbIcons.ts
|
|
171
|
+
var defaultIcons = {
|
|
172
|
+
accordionIndicator: import_icons.ChevronDown,
|
|
173
|
+
avatar: import_icons.UserFilled,
|
|
174
|
+
calendar: import_icons.Calendar,
|
|
175
|
+
calendarPrev: import_icons.ChevronLeft,
|
|
176
|
+
calendarNext: import_icons.ChevronRight,
|
|
177
|
+
checkbox: CheckmarkIcon,
|
|
178
|
+
close: import_icons.Close,
|
|
179
|
+
confirmModal: import_icons.Information,
|
|
180
|
+
delete: import_icons.TrashCan,
|
|
181
|
+
promptModal: import_icons.Information,
|
|
182
|
+
waitingFileUploader: import_icons.CloudUpload,
|
|
183
|
+
fileUploader: AnimatingUploadIcon,
|
|
184
|
+
indeterminate: IndeterminateIcon,
|
|
185
|
+
infoNotification: import_icons.Information,
|
|
186
|
+
successNotification: import_icons.CheckmarkOutline,
|
|
187
|
+
warningNotification: import_icons.WarningAlt,
|
|
188
|
+
dangerNotification: import_icons.WarningFilled,
|
|
189
|
+
invalid: import_icons.WarningFilled,
|
|
190
|
+
invalidAlt: import_icons.Warning,
|
|
191
|
+
redo: import_icons.Restart,
|
|
192
|
+
selectArrow: import_icons.ChevronDown,
|
|
193
|
+
toggleChecked: import_icons.Checkmark
|
|
194
|
+
};
|
|
195
|
+
|
|
196
|
+
// src/config/defineIcons.ts
|
|
197
|
+
var $cerberusIcons = defaultIcons;
|
|
198
|
+
|
|
199
|
+
// src/components/Accordion.tsx
|
|
200
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
35
201
|
function Accordion(props) {
|
|
36
202
|
const { size, className, ...rootProps } = props;
|
|
37
203
|
const styles = (0, import_recipes.accordion)({ size });
|
|
38
|
-
return /* @__PURE__ */ (0,
|
|
204
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
39
205
|
import_react.Accordion.Root,
|
|
40
206
|
{
|
|
41
207
|
collapsible: true,
|
|
@@ -47,7 +213,7 @@ function Accordion(props) {
|
|
|
47
213
|
function AccordionItem(props) {
|
|
48
214
|
const { size, ...itemProps } = props;
|
|
49
215
|
const styles = (0, import_recipes.accordion)({ size });
|
|
50
|
-
return /* @__PURE__ */ (0,
|
|
216
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
51
217
|
import_react.Accordion.Item,
|
|
52
218
|
{
|
|
53
219
|
...itemProps,
|
|
@@ -58,7 +224,7 @@ function AccordionItem(props) {
|
|
|
58
224
|
function AccordionItemTrigger(props) {
|
|
59
225
|
const { size, ...triggerProps } = props;
|
|
60
226
|
const styles = (0, import_recipes.accordion)({ size });
|
|
61
|
-
return /* @__PURE__ */ (0,
|
|
227
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
62
228
|
import_react.Accordion.ItemTrigger,
|
|
63
229
|
{
|
|
64
230
|
...triggerProps,
|
|
@@ -70,19 +236,20 @@ function AccordionItemIndicator(props) {
|
|
|
70
236
|
const { size, ...indicatorProps } = props;
|
|
71
237
|
const styles = (0, import_recipes.accordion)({ size });
|
|
72
238
|
const iconSize = size === "sm" ? 16 : "24";
|
|
73
|
-
|
|
239
|
+
const { accordionIndicator: ChevronDown2 } = $cerberusIcons;
|
|
240
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
74
241
|
import_react.Accordion.ItemIndicator,
|
|
75
242
|
{
|
|
76
243
|
...indicatorProps,
|
|
77
244
|
className: (0, import_css.cx)(indicatorProps.className, styles.itemIndicator),
|
|
78
|
-
children: /* @__PURE__ */ (0,
|
|
245
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronDown2, { size: iconSize })
|
|
79
246
|
}
|
|
80
247
|
);
|
|
81
248
|
}
|
|
82
249
|
function AccordionItemContent(props) {
|
|
83
250
|
const { size, ...contentProps } = props;
|
|
84
251
|
const styles = (0, import_recipes.accordion)({ size });
|
|
85
|
-
return /* @__PURE__ */ (0,
|
|
252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
86
253
|
import_react.Accordion.ItemContent,
|
|
87
254
|
{
|
|
88
255
|
...contentProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/Accordion.tsx"],"sourcesContent":["import { Accordion as ArkAccordion } from '@ark-ui/react'\nimport { ChevronDown } from '@cerberus/icons'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n accordion,\n type AccordionVariantProps,\n} from '@cerberus/styled-system/recipes'\n\nexport type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps\n\n/**\n * The context provider for the Accordion family.\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItemGroup heading=\"Item 1 heading\" value=\"one\">\n * This is the content\n * </AccordionItemGroup>\n * </Accordion>\n * ```\n */\nexport function Accordion(props: AccordionProps) {\n const { size, className, ...rootProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.Root\n collapsible\n className={cx(className, styles.root)}\n {...rootProps}\n />\n )\n}\n\ntype AccordionItemProps = ArkAccordion.ItemProps & AccordionVariantProps\n\n/**\n * The item for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItem(props: AccordionItemProps) {\n const { size, ...itemProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.Item\n {...itemProps}\n className={cx(itemProps.className, styles.item)}\n />\n )\n}\n\nexport type AccordionItemTriggerProps = ArkAccordion.ItemTriggerProps &\n AccordionVariantProps\n\n/**\n * The trigger for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItemTrigger(props: AccordionItemTriggerProps) {\n const { size, ...triggerProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.ItemTrigger\n {...triggerProps}\n className={cx(triggerProps.className, styles.itemTrigger)}\n />\n )\n}\n\nexport type AccordionItemIndicatorProps = ArkAccordion.ItemIndicatorProps &\n AccordionVariantProps\n\n/**\n * The indicator for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemIndicator(props: AccordionItemIndicatorProps) {\n const { size, ...indicatorProps } = props\n const styles = accordion({ size })\n const iconSize = size === 'sm' ? 16 : '24'\n\n return (\n <ArkAccordion.ItemIndicator\n {...indicatorProps}\n className={cx(indicatorProps.className, styles.itemIndicator)}\n >\n <ChevronDown size={iconSize} />\n </ArkAccordion.ItemIndicator>\n )\n}\n\nexport type AccordionItemContentProps = ArkAccordion.ItemContentProps &\n AccordionVariantProps\n\n/**\n * The content for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemContent(props: AccordionItemContentProps) {\n const { size, ...contentProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.ItemContent\n {...contentProps}\n className={cx(contentProps.className, styles.itemContent)}\n />\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0C;AAC1C,mBAA4B;AAC5B,iBAAmB;AACnB,qBAGO;AAoBH;AAJG,SAAS,UAAU,OAAuB;AAC/C,QAAM,EAAE,MAAM,WAAW,GAAG,UAAU,IAAI;AAC1C,QAAM,aAAS,0BAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAAA,UAAa;AAAA,IAAb;AAAA,MACC,aAAW;AAAA,MACX,eAAW,eAAG,WAAW,OAAO,IAAI;AAAA,MACnC,GAAG;AAAA;AAAA,EACN;AAEJ;AAqBO,SAAS,cAAc,OAA2B;AACvD,QAAM,EAAE,MAAM,GAAG,UAAU,IAAI;AAC/B,QAAM,aAAS,0BAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAAA,UAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,UAAU,WAAW,OAAO,IAAI;AAAA;AAAA,EAChD;AAEJ;AAsBO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,aAAS,0BAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAAA,UAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,aAAa,WAAW,OAAO,WAAW;AAAA;AAAA,EAC1D;AAEJ;AAsBO,SAAS,uBAAuB,OAAoC;AACzE,QAAM,EAAE,MAAM,GAAG,eAAe,IAAI;AACpC,QAAM,aAAS,0BAAU,EAAE,KAAK,CAAC;AACjC,QAAM,WAAW,SAAS,OAAO,KAAK;AAEtC,SACE;AAAA,IAAC,aAAAA,UAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,eAAe,WAAW,OAAO,aAAa;AAAA,MAE5D,sDAAC,4BAAY,MAAM,UAAU;AAAA;AAAA,EAC/B;AAEJ;AAsBO,SAAS,qBAAqB,OAAkC;AACrE,QAAM,EAAE,MAAM,GAAG,aAAa,IAAI;AAClC,QAAM,aAAS,0BAAU,EAAE,KAAK,CAAC;AACjC,SACE;AAAA,IAAC,aAAAA,UAAa;AAAA,IAAb;AAAA,MACE,GAAG;AAAA,MACJ,eAAW,eAAG,aAAa,WAAW,OAAO,WAAW;AAAA;AAAA,EAC1D;AAEJ;","names":["ArkAccordion"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/Accordion.tsx","../../../src/config/cerbIcons.ts","../../../src/config/icons/checkbox.icons.tsx","../../../src/components/AnimatingUploadIcon.tsx","../../../src/config/defineIcons.ts"],"sourcesContent":["import { Accordion as ArkAccordion } from '@ark-ui/react'\nimport { cx } from '@cerberus/styled-system/css'\nimport {\n accordion,\n type AccordionVariantProps,\n} from '@cerberus/styled-system/recipes'\nimport { $cerberusIcons } from '../config/defineIcons'\n\nexport type AccordionProps = ArkAccordion.RootProps & AccordionVariantProps\n\n/**\n * The context provider for the Accordion family.\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItemGroup heading=\"Item 1 heading\" value=\"one\">\n * This is the content\n * </AccordionItemGroup>\n * </Accordion>\n * ```\n */\nexport function Accordion(props: AccordionProps) {\n const { size, className, ...rootProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.Root\n collapsible\n className={cx(className, styles.root)}\n {...rootProps}\n />\n )\n}\n\ntype AccordionItemProps = ArkAccordion.ItemProps & AccordionVariantProps\n\n/**\n * The item for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItem(props: AccordionItemProps) {\n const { size, ...itemProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.Item\n {...itemProps}\n className={cx(itemProps.className, styles.item)}\n />\n )\n}\n\nexport type AccordionItemTriggerProps = ArkAccordion.ItemTriggerProps &\n AccordionVariantProps\n\n/**\n * The trigger for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n */\nexport function AccordionItemTrigger(props: AccordionItemTriggerProps) {\n const { size, ...triggerProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.ItemTrigger\n {...triggerProps}\n className={cx(triggerProps.className, styles.itemTrigger)}\n />\n )\n}\n\nexport type AccordionItemIndicatorProps = ArkAccordion.ItemIndicatorProps &\n AccordionVariantProps\n\n/**\n * The indicator for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemIndicator(props: AccordionItemIndicatorProps) {\n const { size, ...indicatorProps } = props\n const styles = accordion({ size })\n const iconSize = size === 'sm' ? 16 : '24'\n const { accordionIndicator: ChevronDown } = $cerberusIcons\n\n return (\n <ArkAccordion.ItemIndicator\n {...indicatorProps}\n className={cx(indicatorProps.className, styles.itemIndicator)}\n >\n <ChevronDown size={iconSize} />\n </ArkAccordion.ItemIndicator>\n )\n}\n\nexport type AccordionItemContentProps = ArkAccordion.ItemContentProps &\n AccordionVariantProps\n\n/**\n * The content for the Accordion component.\n * @definition [ARK docs](https://ark-ui.com/react/docs/components/accordion)\n * @definition [Accordion docs](https://cerberus.digitalu.design/react/accordion)\n * @example\n * ```tsx\n * <Accordion>\n * <AccordionItem value=\"one\">\n * <AccordionTrigger>\n * Accordion Item 1\n * <AccordionIndicator />\n * </AccordionTrigger>\n * <AccordionContent>Accordion Item 1 content</AccordionContent>\n * </AccordionItem>\n * </Accordion>\n * ```\n * */\nexport function AccordionItemContent(props: AccordionItemContentProps) {\n const { size, ...contentProps } = props\n const styles = accordion({ size })\n return (\n <ArkAccordion.ItemContent\n {...contentProps}\n className={cx(contentProps.className, styles.itemContent)}\n />\n )\n}\n","import {\n Calendar,\n Checkmark,\n CheckmarkOutline,\n ChevronDown,\n ChevronLeft,\n ChevronRight,\n Close,\n CloudUpload,\n Information,\n Restart,\n TrashCan,\n UserFilled,\n Warning,\n WarningAlt,\n WarningFilled,\n type CarbonIconType,\n} from '@cerberus/icons'\nimport type { ElementType } from 'react'\nimport { CheckmarkIcon, IndeterminateIcon } from './icons/checkbox.icons'\nimport { AnimatingUploadIcon } from '../components/AnimatingUploadIcon'\n\nexport type IconType = CarbonIconType | ElementType\n\nexport interface DefinedIcons {\n accordionIndicator?: IconType\n avatar?: IconType\n calendar?: IconType\n calendarPrev?: IconType\n calendarNext?: IconType\n checkbox?: IconType\n close?: IconType\n confirmModal?: IconType\n delete?: IconType\n promptModal?: IconType\n waitingFileUploader?: IconType\n fileUploader?: IconType\n indeterminate?: IconType\n infoNotification?: IconType\n successNotification?: IconType\n warningNotification?: IconType\n dangerNotification?: IconType\n invalid: IconType\n invalidAlt?: IconType\n redo?: IconType\n selectArrow?: IconType\n toggleChecked?: IconType\n}\n\nexport const defaultIcons: DefinedIcons = {\n accordionIndicator: ChevronDown,\n avatar: UserFilled,\n calendar: Calendar,\n calendarPrev: ChevronLeft,\n calendarNext: ChevronRight,\n checkbox: CheckmarkIcon,\n close: Close,\n confirmModal: Information,\n delete: TrashCan,\n promptModal: Information,\n waitingFileUploader: CloudUpload,\n fileUploader: AnimatingUploadIcon,\n indeterminate: IndeterminateIcon,\n infoNotification: Information,\n successNotification: CheckmarkOutline,\n warningNotification: WarningAlt,\n dangerNotification: WarningFilled,\n invalid: WarningFilled,\n invalidAlt: Warning,\n redo: Restart,\n selectArrow: ChevronDown,\n toggleChecked: Checkmark,\n}\n","import type { SVGProps } from 'react'\n\n/**\n * This module contains substitute icons for the Checkbox component.\n * @module\n */\n\nexport type CheckboxIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Checkmark icon for Checkbox component\n */\nexport function CheckmarkIcon(props: CheckboxIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n role=\"img\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path\n fill=\"currentColor\"\n d=\"M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z\"\n />\n </svg>\n )\n}\n\nexport type IndeterminateIconProps = SVGProps<SVGSVGElement>\n\n/**\n * Indeterminate icon for Checkbox component\n */\nexport function IndeterminateIcon(props: IndeterminateIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n role=\"img\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n {...props}\n >\n <path fill=\"currentColor\" d=\"M4 11h16v2.667H4z\" />\n </svg>\n )\n}\n","import { type CarbonIconProps } from '@cerberus/icons'\n\n/**\n * This module contains an animating icon to use for the FileStatus component.\n * @module\n */\n\nexport type AnimatingUploadIconProps = CarbonIconProps\n\nexport function AnimatingUploadIcon(props: AnimatingUploadIconProps) {\n return (\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width={props.size ?? '1em'}\n height={props.size ?? '1em'}\n viewBox=\"0 0 24 24\"\n >\n <g\n fill=\"none\"\n stroke=\"currentColor\"\n strokeLinecap=\"square\"\n strokeLinejoin=\"round\"\n strokeWidth={1.5}\n >\n <path\n data-name=\"animating-trail\"\n strokeDasharray=\"2 4\"\n strokeDashoffset={6}\n d=\"M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9\"\n >\n <animate\n attributeName=\"stroke-dashoffset\"\n dur=\"0.45s\"\n repeatCount=\"indefinite\"\n values=\"6;0\"\n ></animate>\n </path>\n\n <path\n data-name=\"half-circle\"\n strokeDasharray={32}\n strokeDashoffset={32}\n d=\"M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9\"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"stroke-dashoffset\"\n begin=\"0.075s\"\n dur=\"0.3s\"\n values=\"32;0\"\n ></animate>\n </path>\n\n <svg\n aria-hidden=\"true\"\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"0.8em\"\n height=\"0.8em\"\n x=\"27%\"\n y=\"27%\"\n viewBox=\"0 0 24 24\"\n >\n <polygon\n fill=\"currentColor\"\n stroke=\"currentColor\"\n strokeWidth={0.8}\n opacity=\"1\"\n points=\"3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 \"\n >\n <animate\n fill=\"freeze\"\n attributeName=\"opacity\"\n values=\"1;0;1\"\n dur=\"2s\"\n repeatCount=\"indefinite\"\n ></animate>\n </polygon>\n </svg>\n </g>\n </svg>\n )\n}\n","import { defaultIcons, type DefinedIcons } from './cerbIcons'\n\nfunction _validateIconsProperties(icons: DefinedIcons) {\n if (!icons.invalid) {\n throw new Error(\n 'The an invalid property must be defined in your custom icons library.',\n )\n }\n}\n\nexport function defineIcons(icons: DefinedIcons): Required<DefinedIcons> {\n _validateIconsProperties(icons)\n $cerberusIcons = {\n ...defaultIcons,\n ...icons,\n } as Required<DefinedIcons>\n return $cerberusIcons\n}\n\n// Default icons\n\nexport let $cerberusIcons = defaultIcons as Required<DefinedIcons>\n"],"mappings":"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","names":["import_jsx_runtime","import_jsx_runtime","ArkAccordion","ChevronDown"]}
|
|
@@ -37,14 +37,180 @@ function Show(props) {
|
|
|
37
37
|
|
|
38
38
|
// src/components/Accordion.tsx
|
|
39
39
|
var import_react2 = require("@ark-ui/react");
|
|
40
|
-
var import_icons = require("@cerberus/icons");
|
|
41
40
|
var import_css = require("@cerberus/styled-system/css");
|
|
42
41
|
var import_recipes = require("@cerberus/styled-system/recipes");
|
|
42
|
+
|
|
43
|
+
// src/config/cerbIcons.ts
|
|
44
|
+
var import_icons = require("@cerberus/icons");
|
|
45
|
+
|
|
46
|
+
// src/config/icons/checkbox.icons.tsx
|
|
43
47
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
48
|
+
function CheckmarkIcon(props) {
|
|
49
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
50
|
+
"svg",
|
|
51
|
+
{
|
|
52
|
+
"aria-hidden": "true",
|
|
53
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
54
|
+
fill: "none",
|
|
55
|
+
role: "img",
|
|
56
|
+
viewBox: "0 0 24 24",
|
|
57
|
+
...props,
|
|
58
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
+
"path",
|
|
60
|
+
{
|
|
61
|
+
fill: "currentColor",
|
|
62
|
+
d: "M9.714 18 4 12.335l1.818-1.764 3.896 3.824L18.181 6 20 7.803 9.714 18Z"
|
|
63
|
+
}
|
|
64
|
+
)
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
function IndeterminateIcon(props) {
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
"svg",
|
|
71
|
+
{
|
|
72
|
+
"aria-hidden": "true",
|
|
73
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
74
|
+
role: "img",
|
|
75
|
+
fill: "none",
|
|
76
|
+
viewBox: "0 0 24 24",
|
|
77
|
+
...props,
|
|
78
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { fill: "currentColor", d: "M4 11h16v2.667H4z" })
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
// src/components/AnimatingUploadIcon.tsx
|
|
84
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
85
|
+
function AnimatingUploadIcon(props) {
|
|
86
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
87
|
+
"svg",
|
|
88
|
+
{
|
|
89
|
+
"aria-hidden": "true",
|
|
90
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
91
|
+
width: props.size ?? "1em",
|
|
92
|
+
height: props.size ?? "1em",
|
|
93
|
+
viewBox: "0 0 24 24",
|
|
94
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
95
|
+
"g",
|
|
96
|
+
{
|
|
97
|
+
fill: "none",
|
|
98
|
+
stroke: "currentColor",
|
|
99
|
+
strokeLinecap: "square",
|
|
100
|
+
strokeLinejoin: "round",
|
|
101
|
+
strokeWidth: 1.5,
|
|
102
|
+
children: [
|
|
103
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
104
|
+
"path",
|
|
105
|
+
{
|
|
106
|
+
"data-name": "animating-trail",
|
|
107
|
+
strokeDasharray: "2 4",
|
|
108
|
+
strokeDashoffset: 6,
|
|
109
|
+
d: "M12 21c-4.97 0 -9 -4.03 -9 -9c0 -4.97 4.03 -9 9 -9",
|
|
110
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
111
|
+
"animate",
|
|
112
|
+
{
|
|
113
|
+
attributeName: "stroke-dashoffset",
|
|
114
|
+
dur: "0.45s",
|
|
115
|
+
repeatCount: "indefinite",
|
|
116
|
+
values: "6;0"
|
|
117
|
+
}
|
|
118
|
+
)
|
|
119
|
+
}
|
|
120
|
+
),
|
|
121
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
122
|
+
"path",
|
|
123
|
+
{
|
|
124
|
+
"data-name": "half-circle",
|
|
125
|
+
strokeDasharray: 32,
|
|
126
|
+
strokeDashoffset: 32,
|
|
127
|
+
d: "M12 3c4.97 0 9 4.03 9 9c0 4.97 -4.03 9 -9 9",
|
|
128
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
129
|
+
"animate",
|
|
130
|
+
{
|
|
131
|
+
fill: "freeze",
|
|
132
|
+
attributeName: "stroke-dashoffset",
|
|
133
|
+
begin: "0.075s",
|
|
134
|
+
dur: "0.3s",
|
|
135
|
+
values: "32;0"
|
|
136
|
+
}
|
|
137
|
+
)
|
|
138
|
+
}
|
|
139
|
+
),
|
|
140
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
141
|
+
"svg",
|
|
142
|
+
{
|
|
143
|
+
"aria-hidden": "true",
|
|
144
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
145
|
+
width: "0.8em",
|
|
146
|
+
height: "0.8em",
|
|
147
|
+
x: "27%",
|
|
148
|
+
y: "27%",
|
|
149
|
+
viewBox: "0 0 24 24",
|
|
150
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
151
|
+
"polygon",
|
|
152
|
+
{
|
|
153
|
+
fill: "currentColor",
|
|
154
|
+
stroke: "currentColor",
|
|
155
|
+
strokeWidth: 0.8,
|
|
156
|
+
opacity: "1",
|
|
157
|
+
points: "3.7,6.7 7.5,2.9 7.5,15 8.5,15 8.5,2.9 12.3,6.7 13,6 8,1 3,6 ",
|
|
158
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
159
|
+
"animate",
|
|
160
|
+
{
|
|
161
|
+
fill: "freeze",
|
|
162
|
+
attributeName: "opacity",
|
|
163
|
+
values: "1;0;1",
|
|
164
|
+
dur: "2s",
|
|
165
|
+
repeatCount: "indefinite"
|
|
166
|
+
}
|
|
167
|
+
)
|
|
168
|
+
}
|
|
169
|
+
)
|
|
170
|
+
}
|
|
171
|
+
)
|
|
172
|
+
]
|
|
173
|
+
}
|
|
174
|
+
)
|
|
175
|
+
}
|
|
176
|
+
);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// src/config/cerbIcons.ts
|
|
180
|
+
var defaultIcons = {
|
|
181
|
+
accordionIndicator: import_icons.ChevronDown,
|
|
182
|
+
avatar: import_icons.UserFilled,
|
|
183
|
+
calendar: import_icons.Calendar,
|
|
184
|
+
calendarPrev: import_icons.ChevronLeft,
|
|
185
|
+
calendarNext: import_icons.ChevronRight,
|
|
186
|
+
checkbox: CheckmarkIcon,
|
|
187
|
+
close: import_icons.Close,
|
|
188
|
+
confirmModal: import_icons.Information,
|
|
189
|
+
delete: import_icons.TrashCan,
|
|
190
|
+
promptModal: import_icons.Information,
|
|
191
|
+
waitingFileUploader: import_icons.CloudUpload,
|
|
192
|
+
fileUploader: AnimatingUploadIcon,
|
|
193
|
+
indeterminate: IndeterminateIcon,
|
|
194
|
+
infoNotification: import_icons.Information,
|
|
195
|
+
successNotification: import_icons.CheckmarkOutline,
|
|
196
|
+
warningNotification: import_icons.WarningAlt,
|
|
197
|
+
dangerNotification: import_icons.WarningFilled,
|
|
198
|
+
invalid: import_icons.WarningFilled,
|
|
199
|
+
invalidAlt: import_icons.Warning,
|
|
200
|
+
redo: import_icons.Restart,
|
|
201
|
+
selectArrow: import_icons.ChevronDown,
|
|
202
|
+
toggleChecked: import_icons.Checkmark
|
|
203
|
+
};
|
|
204
|
+
|
|
205
|
+
// src/config/defineIcons.ts
|
|
206
|
+
var $cerberusIcons = defaultIcons;
|
|
207
|
+
|
|
208
|
+
// src/components/Accordion.tsx
|
|
209
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
44
210
|
function AccordionItem(props) {
|
|
45
211
|
const { size, ...itemProps } = props;
|
|
46
212
|
const styles = (0, import_recipes.accordion)({ size });
|
|
47
|
-
return /* @__PURE__ */ (0,
|
|
213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
48
214
|
import_react2.Accordion.Item,
|
|
49
215
|
{
|
|
50
216
|
...itemProps,
|
|
@@ -55,7 +221,7 @@ function AccordionItem(props) {
|
|
|
55
221
|
function AccordionItemTrigger(props) {
|
|
56
222
|
const { size, ...triggerProps } = props;
|
|
57
223
|
const styles = (0, import_recipes.accordion)({ size });
|
|
58
|
-
return /* @__PURE__ */ (0,
|
|
224
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
59
225
|
import_react2.Accordion.ItemTrigger,
|
|
60
226
|
{
|
|
61
227
|
...triggerProps,
|
|
@@ -67,19 +233,20 @@ function AccordionItemIndicator(props) {
|
|
|
67
233
|
const { size, ...indicatorProps } = props;
|
|
68
234
|
const styles = (0, import_recipes.accordion)({ size });
|
|
69
235
|
const iconSize = size === "sm" ? 16 : "24";
|
|
70
|
-
|
|
236
|
+
const { accordionIndicator: ChevronDown2 } = $cerberusIcons;
|
|
237
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
71
238
|
import_react2.Accordion.ItemIndicator,
|
|
72
239
|
{
|
|
73
240
|
...indicatorProps,
|
|
74
241
|
className: (0, import_css.cx)(indicatorProps.className, styles.itemIndicator),
|
|
75
|
-
children: /* @__PURE__ */ (0,
|
|
242
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronDown2, { size: iconSize })
|
|
76
243
|
}
|
|
77
244
|
);
|
|
78
245
|
}
|
|
79
246
|
function AccordionItemContent(props) {
|
|
80
247
|
const { size, ...contentProps } = props;
|
|
81
248
|
const styles = (0, import_recipes.accordion)({ size });
|
|
82
|
-
return /* @__PURE__ */ (0,
|
|
249
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
83
250
|
import_react2.Accordion.ItemContent,
|
|
84
251
|
{
|
|
85
252
|
...contentProps,
|
|
@@ -90,7 +257,7 @@ function AccordionItemContent(props) {
|
|
|
90
257
|
|
|
91
258
|
// src/components/AccordionItemGroup.tsx
|
|
92
259
|
var import_css2 = require("@cerberus/styled-system/css");
|
|
93
|
-
var
|
|
260
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
94
261
|
function AccordionItemGroup(props) {
|
|
95
262
|
const {
|
|
96
263
|
size,
|
|
@@ -103,13 +270,13 @@ function AccordionItemGroup(props) {
|
|
|
103
270
|
gap: "md",
|
|
104
271
|
justifyContent: "flex-start"
|
|
105
272
|
} : void 0;
|
|
106
|
-
return /* @__PURE__ */ (0,
|
|
107
|
-
/* @__PURE__ */ (0,
|
|
108
|
-
/* @__PURE__ */ (0,
|
|
273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AccordionItem, { ...itemProps, children: [
|
|
274
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(AccordionItemTrigger, { className: (0, import_css2.css)(triggerStyles), size, children: [
|
|
275
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: indicatorPosition === "start", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AccordionItemIndicator, { size }) }),
|
|
109
276
|
heading,
|
|
110
|
-
/* @__PURE__ */ (0,
|
|
277
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Show, { when: indicatorPosition === "end", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AccordionItemIndicator, { size }) })
|
|
111
278
|
] }),
|
|
112
|
-
/* @__PURE__ */ (0,
|
|
279
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AccordionItemContent, { size, children })
|
|
113
280
|
] });
|
|
114
281
|
}
|
|
115
282
|
// Annotate the CommonJS export names for ESM import in node:
|