@ttoss/components 2.11.7 → 2.12.0
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/dist/LockedOverlay/index.d.ts +151 -0
- package/dist/NotificationsMenu/index.d.ts +17 -2
- package/dist/esm/LockedOverlay/index.js +316 -0
- package/dist/esm/NotificationCard/index.js +154 -2
- package/dist/esm/NotificationsMenu/index.js +182 -28
- package/dist/esm/SpotlightCard/index.js +1 -1
- package/package.json +7 -3
- package/dist/esm/chunk-5NIRZ3X3.js +0 -156
|
@@ -0,0 +1,151 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ButtonProps, ThemeUIStyleObject, Theme } from '@ttoss/ui';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
|
|
5
|
+
type LockedOverlayAction = {
|
|
6
|
+
/**
|
|
7
|
+
* Label text for the button
|
|
8
|
+
*/
|
|
9
|
+
label: string;
|
|
10
|
+
/**
|
|
11
|
+
* Icon identifier from @ttoss/react-icons
|
|
12
|
+
*/
|
|
13
|
+
icon?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Button variant
|
|
16
|
+
*/
|
|
17
|
+
variant: 'primary' | 'accent' | 'secondary';
|
|
18
|
+
/**
|
|
19
|
+
* Click handler for the button
|
|
20
|
+
*/
|
|
21
|
+
onClick: () => void;
|
|
22
|
+
};
|
|
23
|
+
type LockedOverlayProps = {
|
|
24
|
+
/**
|
|
25
|
+
* Controls the overlay visibility
|
|
26
|
+
*/
|
|
27
|
+
isOpen: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Optional close handler. If not provided, overlay cannot be closed by user interaction
|
|
30
|
+
*/
|
|
31
|
+
onRequestClose?: () => void;
|
|
32
|
+
/**
|
|
33
|
+
* Header configuration for the SpotlightCard
|
|
34
|
+
*/
|
|
35
|
+
header: {
|
|
36
|
+
/**
|
|
37
|
+
* Icon identifier from @ttoss/react-icons
|
|
38
|
+
*/
|
|
39
|
+
icon: string;
|
|
40
|
+
/**
|
|
41
|
+
* Title text for the header
|
|
42
|
+
*/
|
|
43
|
+
title: string;
|
|
44
|
+
/**
|
|
45
|
+
* Description text for the header
|
|
46
|
+
*/
|
|
47
|
+
description: string;
|
|
48
|
+
/**
|
|
49
|
+
* Visual variant for the SpotlightCard
|
|
50
|
+
* @default 'primary'
|
|
51
|
+
*/
|
|
52
|
+
variant?: 'primary' | 'accent';
|
|
53
|
+
};
|
|
54
|
+
/**
|
|
55
|
+
* Optional first button to display in the SpotlightCard header
|
|
56
|
+
*/
|
|
57
|
+
firstButton?: ButtonProps | React.ReactNode;
|
|
58
|
+
/**
|
|
59
|
+
* Optional second button to display in the SpotlightCard header
|
|
60
|
+
*/
|
|
61
|
+
secondButton?: ButtonProps | React.ReactNode;
|
|
62
|
+
/**
|
|
63
|
+
* Content to be rendered in the overlay body
|
|
64
|
+
*/
|
|
65
|
+
children: React.ReactNode;
|
|
66
|
+
/**
|
|
67
|
+
* Optional list of actions to render as buttons in the footer
|
|
68
|
+
*/
|
|
69
|
+
actions?: LockedOverlayAction[];
|
|
70
|
+
/**
|
|
71
|
+
* Optional style overrides for the overlay and content container
|
|
72
|
+
*/
|
|
73
|
+
sx?: ThemeUIStyleObject<Theme<object>>;
|
|
74
|
+
/**
|
|
75
|
+
* Optional z-index value to control overlay stacking order.
|
|
76
|
+
* The overlay will appear above the parent container content.
|
|
77
|
+
* @default 1
|
|
78
|
+
*
|
|
79
|
+
* zIndex hierarchy reference:
|
|
80
|
+
* - modal: 1400
|
|
81
|
+
* - overlay: 1300 (sidebar layouts use this value)
|
|
82
|
+
* - dropdown: 1000
|
|
83
|
+
* - sticky: 1100
|
|
84
|
+
* - banner: 1200
|
|
85
|
+
*/
|
|
86
|
+
zIndex?: string | number;
|
|
87
|
+
};
|
|
88
|
+
/**
|
|
89
|
+
* LockedOverlay is a component for blocking and displaying locked features or restricted content
|
|
90
|
+
* within a specific container.
|
|
91
|
+
*
|
|
92
|
+
* This component renders as an absolutely positioned overlay that blocks the parent container's content.
|
|
93
|
+
* The parent container must have `position: relative` for proper positioning.
|
|
94
|
+
*
|
|
95
|
+
* Unlike a modal, this component blocks only its parent container, not the entire viewport,
|
|
96
|
+
* making it ideal for blocking specific sections like Layout.Main, Layout.Main.Body, etc.
|
|
97
|
+
*
|
|
98
|
+
* @example
|
|
99
|
+
* ```tsx
|
|
100
|
+
* // Parent container must have position: relative
|
|
101
|
+
* <Layout.Main sx={{ position: 'relative' }}>
|
|
102
|
+
* <LockedOverlay
|
|
103
|
+
* isOpen={isOpen}
|
|
104
|
+
* onRequestClose={() => setIsOpen(false)}
|
|
105
|
+
* header={{
|
|
106
|
+
* icon: "fluent:lock-closed-24-filled",
|
|
107
|
+
* title: "Premium Feature",
|
|
108
|
+
* description: "Available in Pro plan only",
|
|
109
|
+
* variant: "primary"
|
|
110
|
+
* }}
|
|
111
|
+
* actions={[
|
|
112
|
+
* {
|
|
113
|
+
* label: "Upgrade Now",
|
|
114
|
+
* icon: "fluent-emoji-high-contrast:sparkles",
|
|
115
|
+
* variant: "primary",
|
|
116
|
+
* onClick: handleUpgrade
|
|
117
|
+
* },
|
|
118
|
+
* {
|
|
119
|
+
* label: "Learn More",
|
|
120
|
+
* icon: "fluent:arrow-right-16-regular",
|
|
121
|
+
* variant: "accent",
|
|
122
|
+
* onClick: handleLearnMore
|
|
123
|
+
* }
|
|
124
|
+
* ]}
|
|
125
|
+
* >
|
|
126
|
+
* <Text>This feature is only available for Pro users.</Text>
|
|
127
|
+
* </LockedOverlay>
|
|
128
|
+
* </Layout.Main>
|
|
129
|
+
* ```
|
|
130
|
+
*
|
|
131
|
+
* @example
|
|
132
|
+
* ```tsx
|
|
133
|
+
* // Blocking a specific section with custom zIndex
|
|
134
|
+
* <Box sx={{ position: 'relative' }}>
|
|
135
|
+
* <LockedOverlay
|
|
136
|
+
* isOpen={isOpen}
|
|
137
|
+
* zIndex={10}
|
|
138
|
+
* header={{
|
|
139
|
+
* icon: "fluent:lock-closed-24-filled",
|
|
140
|
+
* title: "Feature Locked",
|
|
141
|
+
* description: "Unlock this feature"
|
|
142
|
+
* }}
|
|
143
|
+
* >
|
|
144
|
+
* <Text>Content here</Text>
|
|
145
|
+
* </LockedOverlay>
|
|
146
|
+
* </Box>
|
|
147
|
+
* ```
|
|
148
|
+
*/
|
|
149
|
+
declare const LockedOverlay: ({ isOpen, onRequestClose, header, firstButton, secondButton, children, actions, sx, zIndex, }: LockedOverlayProps) => react_jsx_runtime.JSX.Element | null;
|
|
150
|
+
|
|
151
|
+
export { LockedOverlay };
|
|
@@ -1,6 +1,21 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
|
|
4
|
+
type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
|
|
5
|
+
type NotificationAction = {
|
|
6
|
+
action?: 'open_url';
|
|
7
|
+
url?: string;
|
|
8
|
+
label?: string;
|
|
9
|
+
};
|
|
10
|
+
type NotificationCardProps = {
|
|
11
|
+
type: NotificationType;
|
|
12
|
+
title?: string | React.ReactNode;
|
|
13
|
+
message: string | React.ReactNode;
|
|
14
|
+
actions?: NotificationAction[];
|
|
15
|
+
caption?: string | React.ReactNode;
|
|
16
|
+
tags?: string[] | React.ReactNode;
|
|
17
|
+
onClose?: () => void;
|
|
18
|
+
};
|
|
4
19
|
|
|
5
20
|
type Notification = NotificationCardProps & {
|
|
6
21
|
id: string;
|
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { __name } from "../chunk-V4MHYKRI.js";
|
|
4
|
+
|
|
5
|
+
// src/components/LockedOverlay/LockedOverlay.tsx
|
|
6
|
+
import { Icon as Icon2 } from "@ttoss/react-icons";
|
|
7
|
+
import { Button as Button2, Card as Card2, Flex as Flex2 } from "@ttoss/ui";
|
|
8
|
+
|
|
9
|
+
// src/components/SpotlightCard/SpotlightCard.tsx
|
|
10
|
+
import { Icon } from "@ttoss/react-icons";
|
|
11
|
+
import { Box, Button, Card, Flex, keyframes, Text } from "@ttoss/ui";
|
|
12
|
+
import * as React2 from "react";
|
|
13
|
+
var SpotlightCard = /* @__PURE__ */__name(({
|
|
14
|
+
icon,
|
|
15
|
+
title,
|
|
16
|
+
badge,
|
|
17
|
+
description,
|
|
18
|
+
firstButton,
|
|
19
|
+
secondButton,
|
|
20
|
+
variant = "accent"
|
|
21
|
+
}) => {
|
|
22
|
+
const gradientFlow = keyframes({
|
|
23
|
+
"0%": {
|
|
24
|
+
backgroundPosition: "0% 50%"
|
|
25
|
+
},
|
|
26
|
+
"50%": {
|
|
27
|
+
backgroundPosition: "100% 50%"
|
|
28
|
+
},
|
|
29
|
+
"100%": {
|
|
30
|
+
backgroundPosition: "0% 50%"
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
const hasButtons = !!firstButton || !!secondButton;
|
|
34
|
+
const isAccent = variant === "accent";
|
|
35
|
+
const textColorToken = isAccent ? "action.text.accent.default" : "action.text.primary.default";
|
|
36
|
+
const iconColorToken = isAccent ? "action.text.accent.default" : "display.text.accent.default";
|
|
37
|
+
const iconBgToken = isAccent ? "rgba(255,255,255,0.3)" : "action.background.secondary.default";
|
|
38
|
+
const badgeBgToken = isAccent ? "action.background.primary.default" : "action.background.accent.default";
|
|
39
|
+
const badgeTextToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
|
|
40
|
+
const btnPrimaryVariant = isAccent ? "primary" : "accent";
|
|
41
|
+
const btnPrimaryColorToken = isAccent ? "action.text.primary.default" : "action.text.accent.default";
|
|
42
|
+
const btnSecondaryColorToken = textColorToken;
|
|
43
|
+
const btnSecondaryBorderColorToken = isAccent ? "currentColor" : "display.border.muted.default";
|
|
44
|
+
const renderButton = /* @__PURE__ */__name((prop, config) => {
|
|
45
|
+
if (!prop) return null;
|
|
46
|
+
if (/* @__PURE__ */React2.isValidElement(prop)) return prop;
|
|
47
|
+
if (typeof prop !== "object") return prop;
|
|
48
|
+
const {
|
|
49
|
+
sx,
|
|
50
|
+
...rest
|
|
51
|
+
} = prop;
|
|
52
|
+
const {
|
|
53
|
+
variant: defaultVariant,
|
|
54
|
+
textColor,
|
|
55
|
+
styles = {}
|
|
56
|
+
} = config;
|
|
57
|
+
return /* @__PURE__ */React2.createElement(Button, {
|
|
58
|
+
variant: defaultVariant,
|
|
59
|
+
sx: {
|
|
60
|
+
display: "flex",
|
|
61
|
+
alignItems: "center",
|
|
62
|
+
justifyContent: "center",
|
|
63
|
+
gap: "2",
|
|
64
|
+
px: "6",
|
|
65
|
+
py: "3",
|
|
66
|
+
fontSize: "15px",
|
|
67
|
+
fontWeight: "bold",
|
|
68
|
+
whiteSpace: "nowrap",
|
|
69
|
+
transition: "all 0.2s",
|
|
70
|
+
color: textColor,
|
|
71
|
+
...styles,
|
|
72
|
+
...sx
|
|
73
|
+
},
|
|
74
|
+
...rest
|
|
75
|
+
});
|
|
76
|
+
}, "renderButton");
|
|
77
|
+
return /* @__PURE__ */React2.createElement(Card, {
|
|
78
|
+
sx: {
|
|
79
|
+
display: "flex",
|
|
80
|
+
flexDirection: ["row"],
|
|
81
|
+
flexWrap: "nowrap",
|
|
82
|
+
alignItems: "center",
|
|
83
|
+
justifyContent: "space-between",
|
|
84
|
+
background: /* @__PURE__ */__name(t => {
|
|
85
|
+
const theme = t;
|
|
86
|
+
const bgStart = isAccent ? theme.colors?.action?.background?.accent?.default : theme.colors?.action?.background?.primary?.default;
|
|
87
|
+
const bgMiddle = isAccent ? theme.colors?.action?.background?.accent?.active : theme.colors?.action?.background?.secondary?.default;
|
|
88
|
+
if (isAccent) {
|
|
89
|
+
return `linear-gradient(270deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%),
|
|
90
|
+
linear-gradient(0deg, ${bgStart}, ${bgStart})`;
|
|
91
|
+
}
|
|
92
|
+
return `linear-gradient(270deg, ${bgStart}, ${bgMiddle}, ${bgStart})`;
|
|
93
|
+
}, "background"),
|
|
94
|
+
backgroundSize: isAccent ? "200% 100%, auto" : "400% 400%",
|
|
95
|
+
animation: `${gradientFlow} 6s ease infinite`,
|
|
96
|
+
width: "100%",
|
|
97
|
+
minHeight: "104px",
|
|
98
|
+
borderRadius: "xl",
|
|
99
|
+
boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
|
|
100
|
+
py: "7",
|
|
101
|
+
px: "8",
|
|
102
|
+
gap: "5",
|
|
103
|
+
color: textColorToken,
|
|
104
|
+
overflow: "hidden",
|
|
105
|
+
borderWidth: "1px",
|
|
106
|
+
borderStyle: "solid",
|
|
107
|
+
borderColor: isAccent ? "transparent" : "display.border.muted.default"
|
|
108
|
+
},
|
|
109
|
+
"data-testid": "spotlight-card"
|
|
110
|
+
}, /* @__PURE__ */React2.createElement(Flex, {
|
|
111
|
+
sx: {
|
|
112
|
+
alignItems: "center",
|
|
113
|
+
gap: "5",
|
|
114
|
+
flex: 1,
|
|
115
|
+
minWidth: 0
|
|
116
|
+
}
|
|
117
|
+
}, /* @__PURE__ */React2.createElement(Box, {
|
|
118
|
+
sx: {
|
|
119
|
+
width: 64,
|
|
120
|
+
height: 64,
|
|
121
|
+
borderRadius: "2xl",
|
|
122
|
+
backgroundColor: iconBgToken,
|
|
123
|
+
display: "flex",
|
|
124
|
+
alignItems: "center",
|
|
125
|
+
justifyContent: "center",
|
|
126
|
+
flexShrink: 0,
|
|
127
|
+
color: iconColorToken
|
|
128
|
+
}
|
|
129
|
+
}, /* @__PURE__ */React2.createElement(Icon, {
|
|
130
|
+
icon,
|
|
131
|
+
width: 32
|
|
132
|
+
})), /* @__PURE__ */React2.createElement(Box, {
|
|
133
|
+
sx: {
|
|
134
|
+
minWidth: 0
|
|
135
|
+
}
|
|
136
|
+
}, /* @__PURE__ */React2.createElement(Text, {
|
|
137
|
+
as: "div",
|
|
138
|
+
sx: {
|
|
139
|
+
fontFamily: "mono",
|
|
140
|
+
// Tamanho da fonte aumentado para dar mais presença ao OneClick
|
|
141
|
+
fontSize: "32px",
|
|
142
|
+
lineHeight: 1.1,
|
|
143
|
+
color: "inherit",
|
|
144
|
+
whiteSpace: "nowrap",
|
|
145
|
+
display: "flex",
|
|
146
|
+
alignItems: "center",
|
|
147
|
+
gap: "3"
|
|
148
|
+
}
|
|
149
|
+
}, title, badge && /* @__PURE__ */React2.createElement(Box, {
|
|
150
|
+
as: "span",
|
|
151
|
+
sx: {
|
|
152
|
+
backgroundColor: badgeBgToken,
|
|
153
|
+
color: badgeTextToken,
|
|
154
|
+
fontFamily: "mono",
|
|
155
|
+
fontWeight: "bold",
|
|
156
|
+
fontSize: "11px",
|
|
157
|
+
lineHeight: 1,
|
|
158
|
+
paddingX: "6px",
|
|
159
|
+
paddingY: "3px",
|
|
160
|
+
borderRadius: "md",
|
|
161
|
+
textTransform: "uppercase",
|
|
162
|
+
letterSpacing: "0.05em",
|
|
163
|
+
display: "inline-flex",
|
|
164
|
+
alignItems: "center",
|
|
165
|
+
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
|
|
166
|
+
transform: "translateY(3px)"
|
|
167
|
+
}
|
|
168
|
+
}, badge)), /* @__PURE__ */React2.createElement(Text, {
|
|
169
|
+
as: "div",
|
|
170
|
+
sx: {
|
|
171
|
+
fontFamily: "body",
|
|
172
|
+
fontWeight: 400,
|
|
173
|
+
fontSize: "16px",
|
|
174
|
+
color: "inherit",
|
|
175
|
+
opacity: 0.9,
|
|
176
|
+
mt: "1",
|
|
177
|
+
overflow: "hidden",
|
|
178
|
+
textOverflow: "ellipsis",
|
|
179
|
+
display: "-webkit-box",
|
|
180
|
+
WebkitLineClamp: 2,
|
|
181
|
+
WebkitBoxOrient: "vertical"
|
|
182
|
+
}
|
|
183
|
+
}, description))), hasButtons && /* @__PURE__ */React2.createElement(Flex, {
|
|
184
|
+
sx: {
|
|
185
|
+
gap: "4",
|
|
186
|
+
alignItems: "center",
|
|
187
|
+
flexShrink: 0,
|
|
188
|
+
ml: "auto"
|
|
189
|
+
}
|
|
190
|
+
}, renderButton(firstButton, {
|
|
191
|
+
variant: btnPrimaryVariant,
|
|
192
|
+
textColor: btnPrimaryColorToken,
|
|
193
|
+
styles: {
|
|
194
|
+
":hover": {
|
|
195
|
+
transform: "translateY(-1px)"
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}), renderButton(secondButton, {
|
|
199
|
+
variant: "secondary",
|
|
200
|
+
textColor: btnSecondaryColorToken,
|
|
201
|
+
styles: {
|
|
202
|
+
backgroundColor: "transparent",
|
|
203
|
+
borderWidth: "1px",
|
|
204
|
+
borderStyle: "solid",
|
|
205
|
+
borderColor: btnSecondaryBorderColorToken,
|
|
206
|
+
opacity: isAccent ? 0.6 : 1,
|
|
207
|
+
cursor: "pointer",
|
|
208
|
+
":hover": {
|
|
209
|
+
backgroundColor: "rgba(255,255,255,0.2)",
|
|
210
|
+
opacity: 1,
|
|
211
|
+
borderColor: btnSecondaryBorderColorToken
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
})));
|
|
215
|
+
}, "SpotlightCard");
|
|
216
|
+
SpotlightCard.displayName = "SpotlightCard";
|
|
217
|
+
|
|
218
|
+
// src/components/LockedOverlay/LockedOverlay.tsx
|
|
219
|
+
var LockedOverlay = /* @__PURE__ */__name(({
|
|
220
|
+
isOpen,
|
|
221
|
+
onRequestClose,
|
|
222
|
+
header,
|
|
223
|
+
firstButton,
|
|
224
|
+
secondButton,
|
|
225
|
+
children,
|
|
226
|
+
actions,
|
|
227
|
+
sx,
|
|
228
|
+
zIndex = 1
|
|
229
|
+
}) => {
|
|
230
|
+
const content = /* @__PURE__ */React.createElement(Card2, {
|
|
231
|
+
className: "lockedoverlay-card",
|
|
232
|
+
role: "dialog",
|
|
233
|
+
"aria-modal": true,
|
|
234
|
+
sx: {
|
|
235
|
+
width: "full",
|
|
236
|
+
maxWidth: "620px",
|
|
237
|
+
borderRadius: "lg",
|
|
238
|
+
overflow: "auto",
|
|
239
|
+
border: "none",
|
|
240
|
+
boxShadow: "none"
|
|
241
|
+
}
|
|
242
|
+
}, /* @__PURE__ */React.createElement(Flex2, {
|
|
243
|
+
sx: {
|
|
244
|
+
width: "full",
|
|
245
|
+
paddingX: "6",
|
|
246
|
+
paddingY: "4"
|
|
247
|
+
}
|
|
248
|
+
}, /* @__PURE__ */React.createElement(SpotlightCard, {
|
|
249
|
+
icon: header.icon,
|
|
250
|
+
title: header.title,
|
|
251
|
+
description: header.description,
|
|
252
|
+
variant: header.variant || "primary",
|
|
253
|
+
firstButton,
|
|
254
|
+
secondButton
|
|
255
|
+
})), /* @__PURE__ */React.createElement(Card2.Body, {
|
|
256
|
+
sx: {
|
|
257
|
+
px: ["5", "7"],
|
|
258
|
+
py: ["6", "7"],
|
|
259
|
+
gap: "6",
|
|
260
|
+
width: "full"
|
|
261
|
+
}
|
|
262
|
+
}, children, actions && actions.length > 0 && /* @__PURE__ */React.createElement(Card2.Footer, null, /* @__PURE__ */React.createElement(Flex2, {
|
|
263
|
+
className: "lockedoverlay-footer",
|
|
264
|
+
sx: {
|
|
265
|
+
flexDirection: "column",
|
|
266
|
+
gap: "4",
|
|
267
|
+
alignItems: "center",
|
|
268
|
+
width: "full",
|
|
269
|
+
paddingX: "6",
|
|
270
|
+
marginTop: "8"
|
|
271
|
+
}
|
|
272
|
+
}, actions.map((action, index) => {
|
|
273
|
+
return /* @__PURE__ */React.createElement(Button2, {
|
|
274
|
+
key: index,
|
|
275
|
+
variant: action.variant,
|
|
276
|
+
onClick: action.onClick,
|
|
277
|
+
sx: {
|
|
278
|
+
width: "full",
|
|
279
|
+
justifyContent: "center"
|
|
280
|
+
}
|
|
281
|
+
}, action.icon && /* @__PURE__ */React.createElement(Icon2, {
|
|
282
|
+
icon: action.icon
|
|
283
|
+
}), action.label);
|
|
284
|
+
})))));
|
|
285
|
+
if (!isOpen) {
|
|
286
|
+
return null;
|
|
287
|
+
}
|
|
288
|
+
return /* @__PURE__ */React.createElement(Flex2, {
|
|
289
|
+
"data-testid": "lockedoverlay-overlay",
|
|
290
|
+
onClick: /* @__PURE__ */__name(() => {
|
|
291
|
+
return onRequestClose?.();
|
|
292
|
+
}, "onClick"),
|
|
293
|
+
sx: {
|
|
294
|
+
position: "absolute",
|
|
295
|
+
inset: 0,
|
|
296
|
+
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
297
|
+
display: "flex",
|
|
298
|
+
justifyContent: "center",
|
|
299
|
+
alignItems: "center",
|
|
300
|
+
zIndex,
|
|
301
|
+
...sx
|
|
302
|
+
}
|
|
303
|
+
}, /* @__PURE__ */React.createElement(Flex2, {
|
|
304
|
+
onClick: /* @__PURE__ */__name(event => {
|
|
305
|
+
event.stopPropagation();
|
|
306
|
+
}, "onClick"),
|
|
307
|
+
sx: {
|
|
308
|
+
width: "full",
|
|
309
|
+
maxWidth: ["95%", "90%", "620px"],
|
|
310
|
+
maxHeight: "90%",
|
|
311
|
+
justifyContent: "center",
|
|
312
|
+
overflow: "auto"
|
|
313
|
+
}
|
|
314
|
+
}, content));
|
|
315
|
+
}, "LockedOverlay");
|
|
316
|
+
export { LockedOverlay };
|
|
@@ -1,4 +1,156 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import {
|
|
3
|
-
|
|
2
|
+
import { __name } from "../chunk-V4MHYKRI.js";
|
|
3
|
+
|
|
4
|
+
// src/components/NotificationCard/NotificationCard.tsx
|
|
5
|
+
import { Icon } from "@ttoss/react-icons";
|
|
6
|
+
import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
|
|
7
|
+
import * as React from "react";
|
|
8
|
+
var NotificationCard = /* @__PURE__ */__name(props => {
|
|
9
|
+
const sxMap = {
|
|
10
|
+
success: {
|
|
11
|
+
card: {
|
|
12
|
+
backgroundColor: "feedback.background.positive.default",
|
|
13
|
+
borderColor: "feedback.border.positive.default"
|
|
14
|
+
}
|
|
15
|
+
},
|
|
16
|
+
error: {
|
|
17
|
+
card: {
|
|
18
|
+
backgroundColor: "feedback.background.negative.default",
|
|
19
|
+
borderColor: "feedback.border.negative.default"
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
warning: {
|
|
23
|
+
card: {
|
|
24
|
+
backgroundColor: "feedback.background.caution.default",
|
|
25
|
+
borderColor: "feedback.border.caution.default"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
info: {
|
|
29
|
+
card: {
|
|
30
|
+
backgroundColor: "feedback.background.primary.default",
|
|
31
|
+
borderColor: "feedback.border.primary.default"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
neutral: {
|
|
35
|
+
card: {
|
|
36
|
+
backgroundColor: "feedback.background.primary.default",
|
|
37
|
+
borderColor: "feedback.border.primary.default"
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
const icon = {
|
|
42
|
+
success: "success-circle",
|
|
43
|
+
error: "error",
|
|
44
|
+
warning: "warning-alt",
|
|
45
|
+
info: "info",
|
|
46
|
+
neutral: "info"
|
|
47
|
+
};
|
|
48
|
+
const hasCaption = Boolean(props.caption);
|
|
49
|
+
const hasActions = Boolean(props.actions && props.actions.length > 0);
|
|
50
|
+
const hasTitle = Boolean(props.title);
|
|
51
|
+
const shouldCenterVerticallyWithoutTitle = !hasCaption && !hasActions && !hasTitle;
|
|
52
|
+
const shouldCenterVerticallyWithTitle = !hasCaption && !hasActions && hasTitle;
|
|
53
|
+
const shouldAddMinHeight = !hasCaption && !hasActions;
|
|
54
|
+
return /* @__PURE__ */React.createElement(Card, {
|
|
55
|
+
sx: {
|
|
56
|
+
...sxMap[props.type].card,
|
|
57
|
+
width: "full"
|
|
58
|
+
}
|
|
59
|
+
}, props.title && /* @__PURE__ */React.createElement(Card.Title, {
|
|
60
|
+
sx: {
|
|
61
|
+
display: "flex",
|
|
62
|
+
justifyContent: "space-between",
|
|
63
|
+
alignItems: "center",
|
|
64
|
+
fontSize: ["md", "xl"],
|
|
65
|
+
paddingY: ["1", "2", "4"],
|
|
66
|
+
paddingX: ["2", "4", "8"]
|
|
67
|
+
}
|
|
68
|
+
}, /* @__PURE__ */React.createElement(Text, {
|
|
69
|
+
sx: {
|
|
70
|
+
display: "inline-flex",
|
|
71
|
+
alignItems: "flex-start",
|
|
72
|
+
gap: "2",
|
|
73
|
+
flexDirection: "row",
|
|
74
|
+
flexWrap: "wrap"
|
|
75
|
+
}
|
|
76
|
+
}, /* @__PURE__ */React.createElement(Box, {
|
|
77
|
+
sx: {
|
|
78
|
+
display: "flex",
|
|
79
|
+
alignItems: "center",
|
|
80
|
+
gap: "2"
|
|
81
|
+
}
|
|
82
|
+
}, /* @__PURE__ */React.createElement(Icon, {
|
|
83
|
+
icon: icon[props.type]
|
|
84
|
+
}), props.title), props.tags && (Array.isArray(props.tags) ? props.tags.length > 0 : true) && (Array.isArray(props.tags) ? props.tags.map((tag, index) => {
|
|
85
|
+
return /* @__PURE__ */React.createElement(Tag, {
|
|
86
|
+
key: index
|
|
87
|
+
}, tag);
|
|
88
|
+
}) : /* @__PURE__ */React.createElement(Tag, null, props.tags))), props.onClose && /* @__PURE__ */React.createElement(Box, {
|
|
89
|
+
sx: {
|
|
90
|
+
marginLeft: "auto"
|
|
91
|
+
}
|
|
92
|
+
}, /* @__PURE__ */React.createElement(CloseButton, {
|
|
93
|
+
onClick: props.onClose
|
|
94
|
+
}))), /* @__PURE__ */React.createElement(Card.Body, {
|
|
95
|
+
sx: {
|
|
96
|
+
...sxMap[props.type].card,
|
|
97
|
+
display: "flex",
|
|
98
|
+
flexDirection: "column",
|
|
99
|
+
gap: "2",
|
|
100
|
+
paddingY: ["1", "2", "4"],
|
|
101
|
+
paddingX: ["2", "4", "8"]
|
|
102
|
+
}
|
|
103
|
+
}, /* @__PURE__ */React.createElement(Box, {
|
|
104
|
+
sx: {
|
|
105
|
+
display: "flex",
|
|
106
|
+
justifyContent: "space-between",
|
|
107
|
+
minHeight: shouldAddMinHeight ? "40px" : "auto",
|
|
108
|
+
alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
|
|
109
|
+
width: "100%",
|
|
110
|
+
gap: "4"
|
|
111
|
+
}
|
|
112
|
+
}, /* @__PURE__ */React.createElement(Box, {
|
|
113
|
+
sx: {
|
|
114
|
+
flex: 1
|
|
115
|
+
}
|
|
116
|
+
}, /* @__PURE__ */React.createElement(Text, {
|
|
117
|
+
sx: {
|
|
118
|
+
fontSize: ["sm", "md"]
|
|
119
|
+
}
|
|
120
|
+
}, props.message))), props.actions && props.actions.length > 0 && /* @__PURE__ */React.createElement(Box, {
|
|
121
|
+
sx: {
|
|
122
|
+
display: "flex",
|
|
123
|
+
flexDirection: "column",
|
|
124
|
+
gap: 2,
|
|
125
|
+
mt: 2
|
|
126
|
+
}
|
|
127
|
+
}, props.actions.map((action, index) => {
|
|
128
|
+
return action.action === "open_url" ? /* @__PURE__ */React.createElement(Link, {
|
|
129
|
+
key: index,
|
|
130
|
+
href: action.url,
|
|
131
|
+
target: "_blank",
|
|
132
|
+
rel: "noopener noreferrer",
|
|
133
|
+
sx: {
|
|
134
|
+
color: "action.text.accent.default",
|
|
135
|
+
cursor: "pointer"
|
|
136
|
+
}
|
|
137
|
+
}, action.label || "Acessar") : null;
|
|
138
|
+
})), props.caption && /* @__PURE__ */React.createElement(Box, {
|
|
139
|
+
sx: {
|
|
140
|
+
whiteSpace: "nowrap",
|
|
141
|
+
mt: 6
|
|
142
|
+
}
|
|
143
|
+
}, /* @__PURE__ */React.createElement(Text, {
|
|
144
|
+
sx: {
|
|
145
|
+
fontSize: "xs",
|
|
146
|
+
color: "text.secondary"
|
|
147
|
+
}
|
|
148
|
+
}, props.caption)), !props.title && props.onClose && /* @__PURE__ */React.createElement(Box, {
|
|
149
|
+
sx: {
|
|
150
|
+
alignSelf: "flex-end"
|
|
151
|
+
}
|
|
152
|
+
}, /* @__PURE__ */React.createElement(CloseButton, {
|
|
153
|
+
onClick: props.onClose
|
|
154
|
+
}))));
|
|
155
|
+
}, "NotificationCard");
|
|
4
156
|
export { NotificationCard };
|
|
@@ -1,11 +1,165 @@
|
|
|
1
1
|
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { NotificationCard } from "../chunk-5NIRZ3X3.js";
|
|
3
2
|
import { __name } from "../chunk-V4MHYKRI.js";
|
|
4
3
|
|
|
5
4
|
// src/components/NotificationsMenu/NotificationsMenu.tsx
|
|
5
|
+
import { Icon as Icon2 } from "@ttoss/react-icons";
|
|
6
|
+
import { Box as Box2, Button, Card as Card2, Flex, IconButton, Text as Text2 } from "@ttoss/ui";
|
|
7
|
+
import * as React2 from "react";
|
|
8
|
+
|
|
9
|
+
// src/components/NotificationCard/NotificationCard.tsx
|
|
6
10
|
import { Icon } from "@ttoss/react-icons";
|
|
7
|
-
import { Box,
|
|
11
|
+
import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
|
|
8
12
|
import * as React from "react";
|
|
13
|
+
var NotificationCard = /* @__PURE__ */__name(props => {
|
|
14
|
+
const sxMap = {
|
|
15
|
+
success: {
|
|
16
|
+
card: {
|
|
17
|
+
backgroundColor: "feedback.background.positive.default",
|
|
18
|
+
borderColor: "feedback.border.positive.default"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
error: {
|
|
22
|
+
card: {
|
|
23
|
+
backgroundColor: "feedback.background.negative.default",
|
|
24
|
+
borderColor: "feedback.border.negative.default"
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
warning: {
|
|
28
|
+
card: {
|
|
29
|
+
backgroundColor: "feedback.background.caution.default",
|
|
30
|
+
borderColor: "feedback.border.caution.default"
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
info: {
|
|
34
|
+
card: {
|
|
35
|
+
backgroundColor: "feedback.background.primary.default",
|
|
36
|
+
borderColor: "feedback.border.primary.default"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
neutral: {
|
|
40
|
+
card: {
|
|
41
|
+
backgroundColor: "feedback.background.primary.default",
|
|
42
|
+
borderColor: "feedback.border.primary.default"
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const icon = {
|
|
47
|
+
success: "success-circle",
|
|
48
|
+
error: "error",
|
|
49
|
+
warning: "warning-alt",
|
|
50
|
+
info: "info",
|
|
51
|
+
neutral: "info"
|
|
52
|
+
};
|
|
53
|
+
const hasCaption = Boolean(props.caption);
|
|
54
|
+
const hasActions = Boolean(props.actions && props.actions.length > 0);
|
|
55
|
+
const hasTitle = Boolean(props.title);
|
|
56
|
+
const shouldCenterVerticallyWithoutTitle = !hasCaption && !hasActions && !hasTitle;
|
|
57
|
+
const shouldCenterVerticallyWithTitle = !hasCaption && !hasActions && hasTitle;
|
|
58
|
+
const shouldAddMinHeight = !hasCaption && !hasActions;
|
|
59
|
+
return /* @__PURE__ */React.createElement(Card, {
|
|
60
|
+
sx: {
|
|
61
|
+
...sxMap[props.type].card,
|
|
62
|
+
width: "full"
|
|
63
|
+
}
|
|
64
|
+
}, props.title && /* @__PURE__ */React.createElement(Card.Title, {
|
|
65
|
+
sx: {
|
|
66
|
+
display: "flex",
|
|
67
|
+
justifyContent: "space-between",
|
|
68
|
+
alignItems: "center",
|
|
69
|
+
fontSize: ["md", "xl"],
|
|
70
|
+
paddingY: ["1", "2", "4"],
|
|
71
|
+
paddingX: ["2", "4", "8"]
|
|
72
|
+
}
|
|
73
|
+
}, /* @__PURE__ */React.createElement(Text, {
|
|
74
|
+
sx: {
|
|
75
|
+
display: "inline-flex",
|
|
76
|
+
alignItems: "flex-start",
|
|
77
|
+
gap: "2",
|
|
78
|
+
flexDirection: "row",
|
|
79
|
+
flexWrap: "wrap"
|
|
80
|
+
}
|
|
81
|
+
}, /* @__PURE__ */React.createElement(Box, {
|
|
82
|
+
sx: {
|
|
83
|
+
display: "flex",
|
|
84
|
+
alignItems: "center",
|
|
85
|
+
gap: "2"
|
|
86
|
+
}
|
|
87
|
+
}, /* @__PURE__ */React.createElement(Icon, {
|
|
88
|
+
icon: icon[props.type]
|
|
89
|
+
}), props.title), props.tags && (Array.isArray(props.tags) ? props.tags.length > 0 : true) && (Array.isArray(props.tags) ? props.tags.map((tag, index) => {
|
|
90
|
+
return /* @__PURE__ */React.createElement(Tag, {
|
|
91
|
+
key: index
|
|
92
|
+
}, tag);
|
|
93
|
+
}) : /* @__PURE__ */React.createElement(Tag, null, props.tags))), props.onClose && /* @__PURE__ */React.createElement(Box, {
|
|
94
|
+
sx: {
|
|
95
|
+
marginLeft: "auto"
|
|
96
|
+
}
|
|
97
|
+
}, /* @__PURE__ */React.createElement(CloseButton, {
|
|
98
|
+
onClick: props.onClose
|
|
99
|
+
}))), /* @__PURE__ */React.createElement(Card.Body, {
|
|
100
|
+
sx: {
|
|
101
|
+
...sxMap[props.type].card,
|
|
102
|
+
display: "flex",
|
|
103
|
+
flexDirection: "column",
|
|
104
|
+
gap: "2",
|
|
105
|
+
paddingY: ["1", "2", "4"],
|
|
106
|
+
paddingX: ["2", "4", "8"]
|
|
107
|
+
}
|
|
108
|
+
}, /* @__PURE__ */React.createElement(Box, {
|
|
109
|
+
sx: {
|
|
110
|
+
display: "flex",
|
|
111
|
+
justifyContent: "space-between",
|
|
112
|
+
minHeight: shouldAddMinHeight ? "40px" : "auto",
|
|
113
|
+
alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
|
|
114
|
+
width: "100%",
|
|
115
|
+
gap: "4"
|
|
116
|
+
}
|
|
117
|
+
}, /* @__PURE__ */React.createElement(Box, {
|
|
118
|
+
sx: {
|
|
119
|
+
flex: 1
|
|
120
|
+
}
|
|
121
|
+
}, /* @__PURE__ */React.createElement(Text, {
|
|
122
|
+
sx: {
|
|
123
|
+
fontSize: ["sm", "md"]
|
|
124
|
+
}
|
|
125
|
+
}, props.message))), props.actions && props.actions.length > 0 && /* @__PURE__ */React.createElement(Box, {
|
|
126
|
+
sx: {
|
|
127
|
+
display: "flex",
|
|
128
|
+
flexDirection: "column",
|
|
129
|
+
gap: 2,
|
|
130
|
+
mt: 2
|
|
131
|
+
}
|
|
132
|
+
}, props.actions.map((action, index) => {
|
|
133
|
+
return action.action === "open_url" ? /* @__PURE__ */React.createElement(Link, {
|
|
134
|
+
key: index,
|
|
135
|
+
href: action.url,
|
|
136
|
+
target: "_blank",
|
|
137
|
+
rel: "noopener noreferrer",
|
|
138
|
+
sx: {
|
|
139
|
+
color: "action.text.accent.default",
|
|
140
|
+
cursor: "pointer"
|
|
141
|
+
}
|
|
142
|
+
}, action.label || "Acessar") : null;
|
|
143
|
+
})), props.caption && /* @__PURE__ */React.createElement(Box, {
|
|
144
|
+
sx: {
|
|
145
|
+
whiteSpace: "nowrap",
|
|
146
|
+
mt: 6
|
|
147
|
+
}
|
|
148
|
+
}, /* @__PURE__ */React.createElement(Text, {
|
|
149
|
+
sx: {
|
|
150
|
+
fontSize: "xs",
|
|
151
|
+
color: "text.secondary"
|
|
152
|
+
}
|
|
153
|
+
}, props.caption)), !props.title && props.onClose && /* @__PURE__ */React.createElement(Box, {
|
|
154
|
+
sx: {
|
|
155
|
+
alignSelf: "flex-end"
|
|
156
|
+
}
|
|
157
|
+
}, /* @__PURE__ */React.createElement(CloseButton, {
|
|
158
|
+
onClick: props.onClose
|
|
159
|
+
}))));
|
|
160
|
+
}, "NotificationCard");
|
|
161
|
+
|
|
162
|
+
// src/components/NotificationsMenu/NotificationsMenu.tsx
|
|
9
163
|
var NotificationsMenu = /* @__PURE__ */__name(({
|
|
10
164
|
notifications,
|
|
11
165
|
defaultOpen = false,
|
|
@@ -16,12 +170,12 @@ var NotificationsMenu = /* @__PURE__ */__name(({
|
|
|
16
170
|
onClose,
|
|
17
171
|
onClearAll
|
|
18
172
|
}) => {
|
|
19
|
-
const [isOpen, setIsOpen] =
|
|
20
|
-
const [openToLeft, setOpenToLeft] =
|
|
21
|
-
const buttonRef =
|
|
22
|
-
const containerRef =
|
|
23
|
-
const loadMoreRef =
|
|
24
|
-
const [showCount, setShowCount] =
|
|
173
|
+
const [isOpen, setIsOpen] = React2.useState(defaultOpen);
|
|
174
|
+
const [openToLeft, setOpenToLeft] = React2.useState(false);
|
|
175
|
+
const buttonRef = React2.useRef(null);
|
|
176
|
+
const containerRef = React2.useRef(null);
|
|
177
|
+
const loadMoreRef = React2.useRef(null);
|
|
178
|
+
const [showCount, setShowCount] = React2.useState(true);
|
|
25
179
|
const togglePanel = /* @__PURE__ */__name(() => {
|
|
26
180
|
setIsOpen(prev => {
|
|
27
181
|
const next = !prev;
|
|
@@ -29,7 +183,7 @@ var NotificationsMenu = /* @__PURE__ */__name(({
|
|
|
29
183
|
return next;
|
|
30
184
|
});
|
|
31
185
|
}, "togglePanel");
|
|
32
|
-
|
|
186
|
+
React2.useEffect(() => {
|
|
33
187
|
if (!isOpen || !buttonRef.current) return;
|
|
34
188
|
const rect = buttonRef.current.getBoundingClientRect();
|
|
35
189
|
const spaceRight = window.innerWidth - rect.right;
|
|
@@ -37,7 +191,7 @@ var NotificationsMenu = /* @__PURE__ */__name(({
|
|
|
37
191
|
setShowCount(false);
|
|
38
192
|
setOpenToLeft(spaceRight < 500 && spaceLeft > spaceRight);
|
|
39
193
|
}, [isOpen]);
|
|
40
|
-
|
|
194
|
+
React2.useEffect(() => {
|
|
41
195
|
if (!hasMore || !onLoadMore || !loadMoreRef.current) return;
|
|
42
196
|
const observer = new IntersectionObserver(entries => {
|
|
43
197
|
if (entries[0].isIntersecting) {
|
|
@@ -55,7 +209,7 @@ var NotificationsMenu = /* @__PURE__ */__name(({
|
|
|
55
209
|
}
|
|
56
210
|
};
|
|
57
211
|
}, [hasMore, onLoadMore, notifications.length]);
|
|
58
|
-
|
|
212
|
+
React2.useEffect(() => {
|
|
59
213
|
if (!isOpen) return;
|
|
60
214
|
const handleClickOutside = /* @__PURE__ */__name(event => {
|
|
61
215
|
if (containerRef.current && !containerRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) {
|
|
@@ -69,16 +223,16 @@ var NotificationsMenu = /* @__PURE__ */__name(({
|
|
|
69
223
|
document.removeEventListener("mousedown", handleClickOutside);
|
|
70
224
|
};
|
|
71
225
|
}, [isOpen, onOpenChange, onClose]);
|
|
72
|
-
return /* @__PURE__ */
|
|
226
|
+
return /* @__PURE__ */React2.createElement(Flex, {
|
|
73
227
|
sx: {
|
|
74
228
|
position: "relative",
|
|
75
229
|
justifyContent: "flex-start"
|
|
76
230
|
}
|
|
77
|
-
}, /* @__PURE__ */
|
|
231
|
+
}, /* @__PURE__ */React2.createElement(Box2, {
|
|
78
232
|
sx: {
|
|
79
233
|
position: "relative"
|
|
80
234
|
}
|
|
81
|
-
}, /* @__PURE__ */
|
|
235
|
+
}, /* @__PURE__ */React2.createElement(IconButton, {
|
|
82
236
|
ref: buttonRef,
|
|
83
237
|
variant: "ghost",
|
|
84
238
|
sx: {
|
|
@@ -91,15 +245,15 @@ var NotificationsMenu = /* @__PURE__ */__name(({
|
|
|
91
245
|
}
|
|
92
246
|
},
|
|
93
247
|
onClick: togglePanel
|
|
94
|
-
}, /* @__PURE__ */
|
|
248
|
+
}, /* @__PURE__ */React2.createElement(Box2, {
|
|
95
249
|
sx: {
|
|
96
250
|
color: "display.text.muted.default"
|
|
97
251
|
}
|
|
98
|
-
}, /* @__PURE__ */
|
|
252
|
+
}, /* @__PURE__ */React2.createElement(Icon2, {
|
|
99
253
|
icon: "mdi:bell-outline",
|
|
100
254
|
width: 22,
|
|
101
255
|
height: 22
|
|
102
|
-
})), count > 0 && showCount && /* @__PURE__ */
|
|
256
|
+
})), count > 0 && showCount && /* @__PURE__ */React2.createElement(Box2, {
|
|
103
257
|
sx: {
|
|
104
258
|
position: "absolute",
|
|
105
259
|
top: "-2px",
|
|
@@ -117,9 +271,9 @@ var NotificationsMenu = /* @__PURE__ */__name(({
|
|
|
117
271
|
justifyContent: "center",
|
|
118
272
|
lineHeight: 1
|
|
119
273
|
}
|
|
120
|
-
}, count > 99 ? "99+" : count)), isOpen && /* @__PURE__ */
|
|
274
|
+
}, count > 99 ? "99+" : count)), isOpen && /* @__PURE__ */React2.createElement("div", {
|
|
121
275
|
ref: containerRef
|
|
122
|
-
}, /* @__PURE__ */
|
|
276
|
+
}, /* @__PURE__ */React2.createElement(Card2, {
|
|
123
277
|
sx: {
|
|
124
278
|
position: "absolute",
|
|
125
279
|
top: "calc(100% + 8px)",
|
|
@@ -134,22 +288,22 @@ var NotificationsMenu = /* @__PURE__ */__name(({
|
|
|
134
288
|
borderRadius: "2xl",
|
|
135
289
|
backgroundColor: "display.background.secondary.default"
|
|
136
290
|
}
|
|
137
|
-
}, /* @__PURE__ */
|
|
291
|
+
}, /* @__PURE__ */React2.createElement(Box2, {
|
|
138
292
|
sx: {
|
|
139
293
|
width: "100%"
|
|
140
294
|
}
|
|
141
|
-
}, /* @__PURE__ */
|
|
295
|
+
}, /* @__PURE__ */React2.createElement(Flex, {
|
|
142
296
|
sx: {
|
|
143
297
|
flexDirection: "column",
|
|
144
298
|
gap: 4
|
|
145
299
|
}
|
|
146
|
-
}, notifications.length > 0 && onClearAll && /* @__PURE__ */
|
|
300
|
+
}, notifications.length > 0 && onClearAll && /* @__PURE__ */React2.createElement(Flex, {
|
|
147
301
|
sx: {
|
|
148
302
|
justifyContent: "flex-end",
|
|
149
303
|
p: 2,
|
|
150
304
|
marginBottom: -2
|
|
151
305
|
}
|
|
152
|
-
}, /* @__PURE__ */
|
|
306
|
+
}, /* @__PURE__ */React2.createElement(Button, {
|
|
153
307
|
variant: "ghost",
|
|
154
308
|
sx: {
|
|
155
309
|
borderRadius: "md",
|
|
@@ -170,24 +324,24 @@ var NotificationsMenu = /* @__PURE__ */__name(({
|
|
|
170
324
|
}
|
|
171
325
|
},
|
|
172
326
|
onClick: onClearAll
|
|
173
|
-
}, /* @__PURE__ */
|
|
327
|
+
}, /* @__PURE__ */React2.createElement(Icon2, {
|
|
174
328
|
icon: "delete",
|
|
175
329
|
width: 16,
|
|
176
330
|
height: 16
|
|
177
|
-
}), /* @__PURE__ */
|
|
331
|
+
}), /* @__PURE__ */React2.createElement(Text2, {
|
|
178
332
|
sx: {
|
|
179
333
|
ml: -1,
|
|
180
334
|
marginTop: -0.4,
|
|
181
335
|
fontSize: "sm"
|
|
182
336
|
}
|
|
183
|
-
}, "Limpar Tudo"))), notifications.length === 0 ? /* @__PURE__ */
|
|
337
|
+
}, "Limpar Tudo"))), notifications.length === 0 ? /* @__PURE__ */React2.createElement(Text2, {
|
|
184
338
|
sx: {
|
|
185
339
|
color: "display.text.muted.default",
|
|
186
340
|
textAlign: "center",
|
|
187
341
|
p: 4
|
|
188
342
|
}
|
|
189
343
|
}, "Nenhuma notifica\xE7\xE3o") : notifications.map(notification => {
|
|
190
|
-
return /* @__PURE__ */
|
|
344
|
+
return /* @__PURE__ */React2.createElement(NotificationCard, {
|
|
191
345
|
key: notification.id,
|
|
192
346
|
...notification,
|
|
193
347
|
onClose: /* @__PURE__ */__name(() => {
|
|
@@ -195,7 +349,7 @@ var NotificationsMenu = /* @__PURE__ */__name(({
|
|
|
195
349
|
onClose?.();
|
|
196
350
|
}, "onClose")
|
|
197
351
|
});
|
|
198
|
-
}), hasMore && /* @__PURE__ */
|
|
352
|
+
}), hasMore && /* @__PURE__ */React2.createElement("div", {
|
|
199
353
|
ref: loadMoreRef,
|
|
200
354
|
style: {
|
|
201
355
|
height: 1
|
|
@@ -72,7 +72,7 @@ var SpotlightCard = /* @__PURE__ */__name(({
|
|
|
72
72
|
return /* @__PURE__ */React.createElement(Card, {
|
|
73
73
|
sx: {
|
|
74
74
|
display: "flex",
|
|
75
|
-
flexDirection: "row",
|
|
75
|
+
flexDirection: ["row"],
|
|
76
76
|
flexWrap: "nowrap",
|
|
77
77
|
alignItems: "center",
|
|
78
78
|
justifyContent: "space-between",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ttoss/components",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.12.0",
|
|
4
4
|
"description": "React components for ttoss ecosystem.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "ttoss",
|
|
@@ -50,6 +50,10 @@
|
|
|
50
50
|
"types": "./dist/List/index.d.ts",
|
|
51
51
|
"default": "./dist/esm/List/index.js"
|
|
52
52
|
},
|
|
53
|
+
"./LockedOverlay": {
|
|
54
|
+
"types": "./dist/LockedOverlay/index.d.ts",
|
|
55
|
+
"default": "./dist/esm/LockedOverlay/index.js"
|
|
56
|
+
},
|
|
53
57
|
"./Markdown": {
|
|
54
58
|
"types": "./dist/Markdown/index.d.ts",
|
|
55
59
|
"default": "./dist/esm/Markdown/index.js"
|
|
@@ -123,9 +127,9 @@
|
|
|
123
127
|
},
|
|
124
128
|
"peerDependencies": {
|
|
125
129
|
"react": ">=16.8.0",
|
|
126
|
-
"@ttoss/react-hooks": "^2.1.11",
|
|
127
130
|
"@ttoss/react-i18n": "^2.0.25",
|
|
128
131
|
"@ttoss/react-icons": "^0.5.6",
|
|
132
|
+
"@ttoss/react-hooks": "^2.1.11",
|
|
129
133
|
"@ttoss/ui": "^6.4.0"
|
|
130
134
|
},
|
|
131
135
|
"devDependencies": {
|
|
@@ -138,9 +142,9 @@
|
|
|
138
142
|
"tsx": "^4.19.2",
|
|
139
143
|
"@ttoss/config": "^1.35.12",
|
|
140
144
|
"@ttoss/i18n-cli": "^0.7.38",
|
|
141
|
-
"@ttoss/react-icons": "^0.5.6",
|
|
142
145
|
"@ttoss/react-hooks": "^2.1.11",
|
|
143
146
|
"@ttoss/react-i18n": "^2.0.25",
|
|
147
|
+
"@ttoss/react-icons": "^0.5.6",
|
|
144
148
|
"@ttoss/test-utils": "^4.0.2",
|
|
145
149
|
"@ttoss/ui": "^6.4.0"
|
|
146
150
|
},
|
|
@@ -1,156 +0,0 @@
|
|
|
1
|
-
/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
|
|
2
|
-
import { __name } from "./chunk-V4MHYKRI.js";
|
|
3
|
-
|
|
4
|
-
// src/components/NotificationCard/NotificationCard.tsx
|
|
5
|
-
import { Icon } from "@ttoss/react-icons";
|
|
6
|
-
import { Box, Card, CloseButton, Link, Tag, Text } from "@ttoss/ui";
|
|
7
|
-
import * as React from "react";
|
|
8
|
-
var NotificationCard = /* @__PURE__ */__name(props => {
|
|
9
|
-
const sxMap = {
|
|
10
|
-
success: {
|
|
11
|
-
card: {
|
|
12
|
-
backgroundColor: "feedback.background.positive.default",
|
|
13
|
-
borderColor: "feedback.border.positive.default"
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
error: {
|
|
17
|
-
card: {
|
|
18
|
-
backgroundColor: "feedback.background.negative.default",
|
|
19
|
-
borderColor: "feedback.border.negative.default"
|
|
20
|
-
}
|
|
21
|
-
},
|
|
22
|
-
warning: {
|
|
23
|
-
card: {
|
|
24
|
-
backgroundColor: "feedback.background.caution.default",
|
|
25
|
-
borderColor: "feedback.border.caution.default"
|
|
26
|
-
}
|
|
27
|
-
},
|
|
28
|
-
info: {
|
|
29
|
-
card: {
|
|
30
|
-
backgroundColor: "feedback.background.primary.default",
|
|
31
|
-
borderColor: "feedback.border.primary.default"
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
neutral: {
|
|
35
|
-
card: {
|
|
36
|
-
backgroundColor: "feedback.background.primary.default",
|
|
37
|
-
borderColor: "feedback.border.primary.default"
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
const icon = {
|
|
42
|
-
success: "success-circle",
|
|
43
|
-
error: "error",
|
|
44
|
-
warning: "warning-alt",
|
|
45
|
-
info: "info",
|
|
46
|
-
neutral: "info"
|
|
47
|
-
};
|
|
48
|
-
const hasCaption = Boolean(props.caption);
|
|
49
|
-
const hasActions = Boolean(props.actions && props.actions.length > 0);
|
|
50
|
-
const hasTitle = Boolean(props.title);
|
|
51
|
-
const shouldCenterVerticallyWithoutTitle = !hasCaption && !hasActions && !hasTitle;
|
|
52
|
-
const shouldCenterVerticallyWithTitle = !hasCaption && !hasActions && hasTitle;
|
|
53
|
-
const shouldAddMinHeight = !hasCaption && !hasActions;
|
|
54
|
-
return /* @__PURE__ */React.createElement(Card, {
|
|
55
|
-
sx: {
|
|
56
|
-
...sxMap[props.type].card,
|
|
57
|
-
width: "full"
|
|
58
|
-
}
|
|
59
|
-
}, props.title && /* @__PURE__ */React.createElement(Card.Title, {
|
|
60
|
-
sx: {
|
|
61
|
-
display: "flex",
|
|
62
|
-
justifyContent: "space-between",
|
|
63
|
-
alignItems: "center",
|
|
64
|
-
fontSize: ["md", "xl"],
|
|
65
|
-
paddingY: ["1", "2", "4"],
|
|
66
|
-
paddingX: ["2", "4", "8"]
|
|
67
|
-
}
|
|
68
|
-
}, /* @__PURE__ */React.createElement(Text, {
|
|
69
|
-
sx: {
|
|
70
|
-
display: "inline-flex",
|
|
71
|
-
alignItems: "flex-start",
|
|
72
|
-
gap: "2",
|
|
73
|
-
flexDirection: "row",
|
|
74
|
-
flexWrap: "wrap"
|
|
75
|
-
}
|
|
76
|
-
}, /* @__PURE__ */React.createElement(Box, {
|
|
77
|
-
sx: {
|
|
78
|
-
display: "flex",
|
|
79
|
-
alignItems: "center",
|
|
80
|
-
gap: "2"
|
|
81
|
-
}
|
|
82
|
-
}, /* @__PURE__ */React.createElement(Icon, {
|
|
83
|
-
icon: icon[props.type]
|
|
84
|
-
}), props.title), props.tags && (Array.isArray(props.tags) ? props.tags.length > 0 : true) && (Array.isArray(props.tags) ? props.tags.map((tag, index) => {
|
|
85
|
-
return /* @__PURE__ */React.createElement(Tag, {
|
|
86
|
-
key: index
|
|
87
|
-
}, tag);
|
|
88
|
-
}) : /* @__PURE__ */React.createElement(Tag, null, props.tags))), props.onClose && /* @__PURE__ */React.createElement(Box, {
|
|
89
|
-
sx: {
|
|
90
|
-
marginLeft: "auto"
|
|
91
|
-
}
|
|
92
|
-
}, /* @__PURE__ */React.createElement(CloseButton, {
|
|
93
|
-
onClick: props.onClose
|
|
94
|
-
}))), /* @__PURE__ */React.createElement(Card.Body, {
|
|
95
|
-
sx: {
|
|
96
|
-
...sxMap[props.type].card,
|
|
97
|
-
display: "flex",
|
|
98
|
-
flexDirection: "column",
|
|
99
|
-
gap: "2",
|
|
100
|
-
paddingY: ["1", "2", "4"],
|
|
101
|
-
paddingX: ["2", "4", "8"]
|
|
102
|
-
}
|
|
103
|
-
}, /* @__PURE__ */React.createElement(Box, {
|
|
104
|
-
sx: {
|
|
105
|
-
display: "flex",
|
|
106
|
-
justifyContent: "space-between",
|
|
107
|
-
minHeight: shouldAddMinHeight ? "40px" : "auto",
|
|
108
|
-
alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
|
|
109
|
-
width: "100%",
|
|
110
|
-
gap: "4"
|
|
111
|
-
}
|
|
112
|
-
}, /* @__PURE__ */React.createElement(Box, {
|
|
113
|
-
sx: {
|
|
114
|
-
flex: 1
|
|
115
|
-
}
|
|
116
|
-
}, /* @__PURE__ */React.createElement(Text, {
|
|
117
|
-
sx: {
|
|
118
|
-
fontSize: ["sm", "md"]
|
|
119
|
-
}
|
|
120
|
-
}, props.message))), props.actions && props.actions.length > 0 && /* @__PURE__ */React.createElement(Box, {
|
|
121
|
-
sx: {
|
|
122
|
-
display: "flex",
|
|
123
|
-
flexDirection: "column",
|
|
124
|
-
gap: 2,
|
|
125
|
-
mt: 2
|
|
126
|
-
}
|
|
127
|
-
}, props.actions.map((action, index) => {
|
|
128
|
-
return action.action === "open_url" ? /* @__PURE__ */React.createElement(Link, {
|
|
129
|
-
key: index,
|
|
130
|
-
href: action.url,
|
|
131
|
-
target: "_blank",
|
|
132
|
-
rel: "noopener noreferrer",
|
|
133
|
-
sx: {
|
|
134
|
-
color: "action.text.accent.default",
|
|
135
|
-
cursor: "pointer"
|
|
136
|
-
}
|
|
137
|
-
}, action.label || "Acessar") : null;
|
|
138
|
-
})), props.caption && /* @__PURE__ */React.createElement(Box, {
|
|
139
|
-
sx: {
|
|
140
|
-
whiteSpace: "nowrap",
|
|
141
|
-
mt: 6
|
|
142
|
-
}
|
|
143
|
-
}, /* @__PURE__ */React.createElement(Text, {
|
|
144
|
-
sx: {
|
|
145
|
-
fontSize: "xs",
|
|
146
|
-
color: "text.secondary"
|
|
147
|
-
}
|
|
148
|
-
}, props.caption)), !props.title && props.onClose && /* @__PURE__ */React.createElement(Box, {
|
|
149
|
-
sx: {
|
|
150
|
-
alignSelf: "flex-end"
|
|
151
|
-
}
|
|
152
|
-
}, /* @__PURE__ */React.createElement(CloseButton, {
|
|
153
|
-
onClick: props.onClose
|
|
154
|
-
}))));
|
|
155
|
-
}, "NotificationCard");
|
|
156
|
-
export { NotificationCard };
|