@ttoss/components 2.11.7 → 2.12.1

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.
Files changed (9) hide show
  1. package/README.md +32 -0
  2. package/dist/LockedOverlay/index.d.ts +151 -0
  3. package/dist/NotificationsMenu/index.d.ts +17 -2
  4. package/dist/esm/LockedOverlay/index.js +316 -0
  5. package/dist/esm/NotificationCard/index.js +154 -2
  6. package/dist/esm/NotificationsMenu/index.js +182 -28
  7. package/dist/esm/SpotlightCard/index.js +1 -1
  8. package/package.json +9 -5
  9. package/dist/esm/chunk-5NIRZ3X3.js +0 -156
package/README.md CHANGED
@@ -148,6 +148,38 @@ import { List, ListItem } from '@ttoss/components/List';
148
148
  </List>;
149
149
  ```
150
150
 
151
+ ### LockedOverlay
152
+
153
+ Block and display locked features or restricted content within a container. Unlike modals, overlays block only their parent container. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-lockedoverlay--docs)
154
+
155
+ ```tsx
156
+ import { LockedOverlay } from '@ttoss/components/LockedOverlay';
157
+
158
+ // Parent must have position: relative
159
+ <Box sx={{ position: 'relative' }}>
160
+ <LockedOverlay
161
+ isOpen={isOpen}
162
+ onRequestClose={() => setIsOpen(false)}
163
+ header={{
164
+ icon: 'fluent:lock-closed-24-filled',
165
+ title: 'Premium Feature',
166
+ description: 'Available in Pro plan only',
167
+ variant: 'primary',
168
+ }}
169
+ actions={[
170
+ {
171
+ label: 'Upgrade Now',
172
+ icon: 'fluent-emoji-high-contrast:sparkles',
173
+ variant: 'primary',
174
+ onClick: handleUpgrade,
175
+ },
176
+ ]}
177
+ >
178
+ <Text>This feature is only available for Pro users.</Text>
179
+ </LockedOverlay>
180
+ </Box>;
181
+ ```
182
+
151
183
  ### Markdown
152
184
 
153
185
  Render markdown content with theme integration. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-markdown--docs)
package/dist/LockedOverlay/index.d.ts ADDED
@@ -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 };
package/dist/NotificationsMenu/index.d.ts CHANGED
@@ -1,6 +1,21 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import { NotificationCardProps } from '../NotificationCard/index.js';
3
- import 'react';
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;
package/dist/esm/LockedOverlay/index.js ADDED
@@ -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 };
package/dist/esm/NotificationCard/index.js CHANGED
@@ -1,4 +1,156 @@
1
1
  /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
2
- import { NotificationCard } from "../chunk-5NIRZ3X3.js";
3
- import "../chunk-V4MHYKRI.js";
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 };
package/dist/esm/NotificationsMenu/index.js CHANGED
@@ -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, Button, Card, Flex, IconButton, Text } from "@ttoss/ui";
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] = React.useState(defaultOpen);
20
- const [openToLeft, setOpenToLeft] = React.useState(false);
21
- const buttonRef = React.useRef(null);
22
- const containerRef = React.useRef(null);
23
- const loadMoreRef = React.useRef(null);
24
- const [showCount, setShowCount] = React.useState(true);
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
- React.useEffect(() => {
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
- React.useEffect(() => {
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
- React.useEffect(() => {
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__ */React.createElement(Flex, {
226
+ return /* @__PURE__ */React2.createElement(Flex, {
73
227
  sx: {
74
228
  position: "relative",
75
229
  justifyContent: "flex-start"
76
230
  }
77
- }, /* @__PURE__ */React.createElement(Box, {
231
+ }, /* @__PURE__ */React2.createElement(Box2, {
78
232
  sx: {
79
233
  position: "relative"
80
234
  }
81
- }, /* @__PURE__ */React.createElement(IconButton, {
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__ */React.createElement(Box, {
248
+ }, /* @__PURE__ */React2.createElement(Box2, {
95
249
  sx: {
96
250
  color: "display.text.muted.default"
97
251
  }
98
- }, /* @__PURE__ */React.createElement(Icon, {
252
+ }, /* @__PURE__ */React2.createElement(Icon2, {
99
253
  icon: "mdi:bell-outline",
100
254
  width: 22,
101
255
  height: 22
102
- })), count > 0 && showCount && /* @__PURE__ */React.createElement(Box, {
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__ */React.createElement("div", {
274
+ }, count > 99 ? "99+" : count)), isOpen && /* @__PURE__ */React2.createElement("div", {
121
275
  ref: containerRef
122
- }, /* @__PURE__ */React.createElement(Card, {
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__ */React.createElement(Box, {
291
+ }, /* @__PURE__ */React2.createElement(Box2, {
138
292
  sx: {
139
293
  width: "100%"
140
294
  }
141
- }, /* @__PURE__ */React.createElement(Flex, {
295
+ }, /* @__PURE__ */React2.createElement(Flex, {
142
296
  sx: {
143
297
  flexDirection: "column",
144
298
  gap: 4
145
299
  }
146
- }, notifications.length > 0 && onClearAll && /* @__PURE__ */React.createElement(Flex, {
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__ */React.createElement(Button, {
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__ */React.createElement(Icon, {
327
+ }, /* @__PURE__ */React2.createElement(Icon2, {
174
328
  icon: "delete",
175
329
  width: 16,
176
330
  height: 16
177
- }), /* @__PURE__ */React.createElement(Text, {
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__ */React.createElement(Text, {
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__ */React.createElement(NotificationCard, {
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__ */React.createElement("div", {
352
+ }), hasMore && /* @__PURE__ */React2.createElement("div", {
199
353
  ref: loadMoreRef,
200
354
  style: {
201
355
  height: 1
package/dist/esm/SpotlightCard/index.js CHANGED
@@ -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.11.7",
3
+ "version": "2.12.1",
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
- "@ttoss/react-i18n": "^2.0.25",
128
130
  "@ttoss/react-icons": "^0.5.6",
131
+ "@ttoss/react-i18n": "^2.0.25",
132
+ "@ttoss/react-hooks": "^2.1.11",
129
133
  "@ttoss/ui": "^6.4.0"
130
134
  },
131
135
  "devDependencies": {
@@ -137,10 +141,10 @@
137
141
  "tsup": "^8.5.1",
138
142
  "tsx": "^4.19.2",
139
143
  "@ttoss/config": "^1.35.12",
140
- "@ttoss/i18n-cli": "^0.7.38",
141
- "@ttoss/react-icons": "^0.5.6",
142
144
  "@ttoss/react-hooks": "^2.1.11",
145
+ "@ttoss/react-icons": "^0.5.6",
143
146
  "@ttoss/react-i18n": "^2.0.25",
147
+ "@ttoss/i18n-cli": "^0.7.38",
144
148
  "@ttoss/test-utils": "^4.0.2",
145
149
  "@ttoss/ui": "^6.4.0"
146
150
  },
package/dist/esm/chunk-5NIRZ3X3.js DELETED
@@ -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 };