@mirohq/design-system-toast 0.1.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/main.js +294 -0
- package/dist/main.js.map +1 -0
- package/dist/module.js +292 -0
- package/dist/module.js.map +1 -0
- package/dist/types.d.ts +142 -0
- package/package.json +42 -0
package/dist/main.js
ADDED
|
@@ -0,0 +1,294 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
var reactToast = require('@radix-ui/react-toast');
|
|
6
|
+
var designSystemStitches = require('@mirohq/design-system-stitches');
|
|
7
|
+
var designSystemStyles = require('@mirohq/design-system-styles');
|
|
8
|
+
var designSystemPrimitive = require('@mirohq/design-system-primitive');
|
|
9
|
+
var designSystemIconButton = require('@mirohq/design-system-icon-button');
|
|
10
|
+
var designSystemIcons = require('@mirohq/design-system-icons');
|
|
11
|
+
var designSystemTooltip = require('@mirohq/design-system-tooltip');
|
|
12
|
+
|
|
13
|
+
const slideInFromRight = designSystemStitches.keyframes({
|
|
14
|
+
from: { transform: "translateX(calc(100% + 24px))", opacity: 0 },
|
|
15
|
+
to: { transform: "translateX(0)", opacity: 1 }
|
|
16
|
+
});
|
|
17
|
+
const swipeOut = designSystemStitches.keyframes({
|
|
18
|
+
from: { transform: "translateX(var(--radix-toast-swipe-end-x))" },
|
|
19
|
+
to: { transform: "translateX(calc(100% + 24px))", opacity: 0 }
|
|
20
|
+
});
|
|
21
|
+
const StyledToast = designSystemStitches.styled(reactToast.Root, {
|
|
22
|
+
// Radix Root renders an <li> that is portalled into the Viewport's <ol>.
|
|
23
|
+
listStyle: "none",
|
|
24
|
+
position: "relative",
|
|
25
|
+
boxSizing: "border-box",
|
|
26
|
+
display: "grid",
|
|
27
|
+
gridTemplateColumns: "auto 1fr",
|
|
28
|
+
gridTemplateAreas: "\n 'label label'\n 'media content'\n ",
|
|
29
|
+
width: "100%",
|
|
30
|
+
maxWidth: 344,
|
|
31
|
+
padding: "$200",
|
|
32
|
+
color: "$text-inverted",
|
|
33
|
+
backgroundColor: "$notification-background-inverted",
|
|
34
|
+
borderWidth: "$sm",
|
|
35
|
+
borderStyle: "solid",
|
|
36
|
+
borderColor: "$notification-border-inverted-subtle",
|
|
37
|
+
borderRadius: "$notification",
|
|
38
|
+
boxShadow: "$elevation-300",
|
|
39
|
+
// Direct-manipulation feedback: the toast follows the pointer during a
|
|
40
|
+
// swipe regardless of the reduced-motion preference.
|
|
41
|
+
'&[data-swipe="move"]': {
|
|
42
|
+
transform: "translateX(var(--radix-toast-swipe-move-x))"
|
|
43
|
+
},
|
|
44
|
+
'&[data-swipe="cancel"]': {
|
|
45
|
+
transform: "translateX(0)"
|
|
46
|
+
},
|
|
47
|
+
// Radix drives enter/exit via data-state and waits for the exit animation
|
|
48
|
+
// to finish before unmounting. With reduced motion, toasts appear and
|
|
49
|
+
// disappear instantly.
|
|
50
|
+
"@media (prefers-reduced-motion: no-preference)": {
|
|
51
|
+
willChange: "transform, opacity",
|
|
52
|
+
'&[data-state="open"]': {
|
|
53
|
+
animation: "".concat(slideInFromRight, " 300ms cubic-bezier(0.19, 1, 0.22, 1)")
|
|
54
|
+
},
|
|
55
|
+
'&[data-state="closed"]': {
|
|
56
|
+
animation: "".concat(designSystemStyles.animations.fadeOut, " 200ms ease-in")
|
|
57
|
+
},
|
|
58
|
+
'&[data-swipe="cancel"]': {
|
|
59
|
+
transition: "transform 200ms ease-out"
|
|
60
|
+
},
|
|
61
|
+
'&[data-swipe="end"]': {
|
|
62
|
+
animation: "".concat(swipeOut, " 150ms ease-out")
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
variants: {
|
|
66
|
+
// Reserve room on the right for the absolutely positioned dismiss button.
|
|
67
|
+
dismissible: {
|
|
68
|
+
true: { paddingRight: "$500" },
|
|
69
|
+
false: {}
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
defaultVariants: {
|
|
73
|
+
dismissible: true
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
|
|
77
|
+
const Provider = reactToast.Provider;
|
|
78
|
+
|
|
79
|
+
const StyledViewport = designSystemStitches.styled(reactToast.Viewport, {
|
|
80
|
+
listStyle: "none",
|
|
81
|
+
display: "flex",
|
|
82
|
+
flexDirection: "column-reverse",
|
|
83
|
+
gap: "$150",
|
|
84
|
+
// Toast width from Figma. Definite value: a percentage would collapse to
|
|
85
|
+
// content width inside content-sized containers.
|
|
86
|
+
width: 344,
|
|
87
|
+
maxWidth: "100%",
|
|
88
|
+
margin: 0,
|
|
89
|
+
padding: 0
|
|
90
|
+
});
|
|
91
|
+
|
|
92
|
+
const Viewport = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledViewport, { ...props, ref: forwardRef }));
|
|
93
|
+
Viewport.displayName = "Toast.Viewport";
|
|
94
|
+
|
|
95
|
+
const Label = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
|
|
96
|
+
gridArea: "label",
|
|
97
|
+
display: "flex",
|
|
98
|
+
alignItems: "center",
|
|
99
|
+
gap: "$100",
|
|
100
|
+
marginBottom: "$150",
|
|
101
|
+
fontFamily: "$body",
|
|
102
|
+
fontSize: "$150",
|
|
103
|
+
fontWeight: "$semibold",
|
|
104
|
+
lineHeight: 1,
|
|
105
|
+
textTransform: "uppercase",
|
|
106
|
+
color: "$text-inverted-secondary"
|
|
107
|
+
});
|
|
108
|
+
Label.displayName = "Toast.Label";
|
|
109
|
+
|
|
110
|
+
const StyledIconSlot = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
|
|
111
|
+
display: "inline-flex",
|
|
112
|
+
alignItems: "center",
|
|
113
|
+
flexShrink: 0
|
|
114
|
+
});
|
|
115
|
+
const IconSlot = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsxRuntime.jsx(StyledIconSlot, { "aria-hidden": true, ...props, ref: forwardRef }));
|
|
116
|
+
IconSlot.displayName = "Toast.IconSlot";
|
|
117
|
+
|
|
118
|
+
const Media = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
|
|
119
|
+
gridArea: "media",
|
|
120
|
+
flexShrink: 0,
|
|
121
|
+
display: "flex",
|
|
122
|
+
alignItems: "center",
|
|
123
|
+
justifyContent: "center",
|
|
124
|
+
width: "$10",
|
|
125
|
+
height: "$10",
|
|
126
|
+
marginRight: "$150"
|
|
127
|
+
});
|
|
128
|
+
Media.displayName = "Toast.Media";
|
|
129
|
+
|
|
130
|
+
const Content = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
|
|
131
|
+
gridArea: "content",
|
|
132
|
+
display: "flex",
|
|
133
|
+
flexDirection: "column",
|
|
134
|
+
minWidth: 0
|
|
135
|
+
});
|
|
136
|
+
Content.displayName = "Toast.Content";
|
|
137
|
+
|
|
138
|
+
const Title = designSystemStitches.styled(reactToast.Title, {
|
|
139
|
+
fontFamily: "$heading",
|
|
140
|
+
fontSize: "$175",
|
|
141
|
+
fontWeight: "$semibold",
|
|
142
|
+
lineHeight: 1.4,
|
|
143
|
+
color: "$text-inverted",
|
|
144
|
+
display: "-webkit-box",
|
|
145
|
+
WebkitBoxOrient: "vertical",
|
|
146
|
+
WebkitLineClamp: 2,
|
|
147
|
+
overflow: "hidden"
|
|
148
|
+
});
|
|
149
|
+
Title.displayName = "Toast.Title";
|
|
150
|
+
|
|
151
|
+
const Description = designSystemStitches.styled(reactToast.Description, {
|
|
152
|
+
fontFamily: "$body",
|
|
153
|
+
fontSize: "$175",
|
|
154
|
+
fontWeight: "$regular",
|
|
155
|
+
lineHeight: 1.4,
|
|
156
|
+
color: "$text-inverted-secondary",
|
|
157
|
+
display: "-webkit-box",
|
|
158
|
+
WebkitBoxOrient: "vertical",
|
|
159
|
+
WebkitLineClamp: 3,
|
|
160
|
+
overflow: "hidden"
|
|
161
|
+
});
|
|
162
|
+
Description.displayName = "Toast.Description";
|
|
163
|
+
|
|
164
|
+
const Actions = designSystemStitches.styled(designSystemPrimitive.Primitive.div, {
|
|
165
|
+
display: "flex",
|
|
166
|
+
alignItems: "center",
|
|
167
|
+
gap: "$100",
|
|
168
|
+
paddingTop: "$100",
|
|
169
|
+
"&&& button": {
|
|
170
|
+
backgroundColor: "$button-background-inverse",
|
|
171
|
+
color: "$button-text-on-inverse",
|
|
172
|
+
"&:hover, &[data-hovered]": {
|
|
173
|
+
backgroundColor: "$button-background-inverse-hover",
|
|
174
|
+
color: "$button-text-on-inverse"
|
|
175
|
+
},
|
|
176
|
+
"&:active, &[data-pressed]": {
|
|
177
|
+
backgroundColor: "$button-background-inverse-pressed",
|
|
178
|
+
color: "$button-text-on-inverse"
|
|
179
|
+
},
|
|
180
|
+
'&[aria-disabled="true"]': {
|
|
181
|
+
backgroundColor: "$button-background-inverse-disabled",
|
|
182
|
+
color: "$button-text-on-inverse-disabled"
|
|
183
|
+
}
|
|
184
|
+
},
|
|
185
|
+
"&&& button ~ button": {
|
|
186
|
+
backgroundColor: "$button-background-inverse-secondary",
|
|
187
|
+
borderColor: "$button-border-inverse-secondary",
|
|
188
|
+
color: "$button-text-on-inverse-secondary",
|
|
189
|
+
"&:hover, &[data-hovered]": {
|
|
190
|
+
backgroundColor: "$button-background-inverse-secondary-hover",
|
|
191
|
+
borderColor: "$button-border-inverse-secondary-hover",
|
|
192
|
+
color: "$button-text-on-inverse-secondary"
|
|
193
|
+
},
|
|
194
|
+
"&:active, &[data-pressed]": {
|
|
195
|
+
backgroundColor: "$button-background-inverse-secondary-pressed",
|
|
196
|
+
borderColor: "$button-border-inverse-secondary-pressed",
|
|
197
|
+
color: "$button-text-on-inverse-secondary"
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
"&&& a": {
|
|
201
|
+
// Link has no size variant and inherits font-size from context. The
|
|
202
|
+
// inverted recolor is a stopgap — NOTI-5461 tracks moving it onto a
|
|
203
|
+
// real Link inverse treatment.
|
|
204
|
+
fontSize: "$175",
|
|
205
|
+
color: "$text-interactive-on-inverted",
|
|
206
|
+
"&:hover, &[data-hovered]": {
|
|
207
|
+
color: "$text-interactive-on-inverted-hover"
|
|
208
|
+
},
|
|
209
|
+
"&:active, &[data-pressed]": {
|
|
210
|
+
color: "$text-interactive-on-inverted-pressed"
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
});
|
|
214
|
+
Actions.displayName = "Toast.Actions";
|
|
215
|
+
|
|
216
|
+
const Action = reactToast.Action;
|
|
217
|
+
|
|
218
|
+
const StyledDismissButton = designSystemStitches.styled(designSystemIconButton.IconButton, {
|
|
219
|
+
position: "absolute",
|
|
220
|
+
top: "$50",
|
|
221
|
+
right: "$50",
|
|
222
|
+
// Ghost recolor for the inverted surface. Stopgap — NOTI-5461 tracks
|
|
223
|
+
// replacing it with a real inverse variant on IconButton.
|
|
224
|
+
variants: {
|
|
225
|
+
variant: {
|
|
226
|
+
ghost: {
|
|
227
|
+
"&&&": {
|
|
228
|
+
color: "$icon-inverted",
|
|
229
|
+
backgroundColor: "transparent",
|
|
230
|
+
"&:hover, &:focus": {
|
|
231
|
+
color: "$icon-inverted",
|
|
232
|
+
backgroundColor: "$button-background-ghost-inverse-hover"
|
|
233
|
+
},
|
|
234
|
+
"&:active": {
|
|
235
|
+
color: "$icon-inverted",
|
|
236
|
+
backgroundColor: "$button-background-ghost-inverse-pressed"
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
});
|
|
243
|
+
const DismissButton = ({
|
|
244
|
+
onDismiss,
|
|
245
|
+
...props
|
|
246
|
+
}) => {
|
|
247
|
+
const handleClick = (event) => {
|
|
248
|
+
event.stopPropagation();
|
|
249
|
+
onDismiss == null ? void 0 : onDismiss();
|
|
250
|
+
};
|
|
251
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(designSystemTooltip.Tooltip, { children: [
|
|
252
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(reactToast.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
253
|
+
StyledDismissButton,
|
|
254
|
+
{
|
|
255
|
+
variant: "ghost",
|
|
256
|
+
size: "medium",
|
|
257
|
+
onClick: handleClick,
|
|
258
|
+
...props,
|
|
259
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(designSystemIcons.IconCross, {})
|
|
260
|
+
}
|
|
261
|
+
) }) }),
|
|
262
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystemTooltip.Tooltip.Content, { children: props["aria-label"] }) })
|
|
263
|
+
] });
|
|
264
|
+
};
|
|
265
|
+
DismissButton.displayName = "Toast.DismissButton";
|
|
266
|
+
|
|
267
|
+
const Toast = React.forwardRef(
|
|
268
|
+
({ dismissible = true, dismissLabel, onDismiss, children, ...props }, forwardRef) => {
|
|
269
|
+
const showDismiss = dismissible && dismissLabel != null && dismissLabel.length > 0;
|
|
270
|
+
const items = React.Children.toArray(children);
|
|
271
|
+
const isType = (child, type) => React.isValidElement(child) && child.type === type;
|
|
272
|
+
const label = items.find((child) => isType(child, Label));
|
|
273
|
+
const media = items.find((child) => isType(child, Media));
|
|
274
|
+
const content = items.filter((child) => child !== label && child !== media);
|
|
275
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(StyledToast, { ...props, ref: forwardRef, dismissible: showDismiss, children: [
|
|
276
|
+
label,
|
|
277
|
+
media,
|
|
278
|
+
content.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Content, { children: content }),
|
|
279
|
+
showDismiss && /* @__PURE__ */ jsxRuntime.jsx(DismissButton, { "aria-label": dismissLabel, onDismiss })
|
|
280
|
+
] });
|
|
281
|
+
}
|
|
282
|
+
);
|
|
283
|
+
Toast.Provider = Provider;
|
|
284
|
+
Toast.Viewport = Viewport;
|
|
285
|
+
Toast.Label = Label;
|
|
286
|
+
Toast.IconSlot = IconSlot;
|
|
287
|
+
Toast.Media = Media;
|
|
288
|
+
Toast.Title = Title;
|
|
289
|
+
Toast.Description = Description;
|
|
290
|
+
Toast.Actions = Actions;
|
|
291
|
+
Toast.Action = Action;
|
|
292
|
+
|
|
293
|
+
exports.Toast = Toast;
|
|
294
|
+
//# sourceMappingURL=main.js.map
|
package/dist/main.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/toast.styled.tsx","../src/partials/provider.tsx","../src/partials/viewport.styled.tsx","../src/partials/viewport.tsx","../src/partials/label.tsx","../src/partials/icon-slot.tsx","../src/partials/media.tsx","../src/partials/content.tsx","../src/partials/title.tsx","../src/partials/description.tsx","../src/partials/actions.tsx","../src/partials/action.tsx","../src/partials/dismiss-button.tsx","../src/toast.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Root } from '@radix-ui/react-toast'\nimport { keyframes, styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\n\n// Toasts live at the right edge of the screen, so they enter from the right.\nconst slideInFromRight = keyframes({\n from: { transform: 'translateX(calc(100% + 24px))', opacity: 0 },\n to: { transform: 'translateX(0)', opacity: 1 },\n})\n\n// Continues from wherever the swipe released (Radix exposes the offset).\nconst swipeOut = keyframes({\n from: { transform: 'translateX(var(--radix-toast-swipe-end-x))' },\n to: { transform: 'translateX(calc(100% + 24px))', opacity: 0 },\n})\n\nexport const StyledToast = styled(Root, {\n // Radix Root renders an <li> that is portalled into the Viewport's <ol>.\n listStyle: 'none',\n position: 'relative',\n boxSizing: 'border-box',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `\n 'label label'\n 'media content'\n `,\n width: '100%',\n maxWidth: 344,\n padding: '$200',\n color: '$text-inverted',\n backgroundColor: '$notification-background-inverted',\n borderWidth: '$sm',\n borderStyle: 'solid',\n borderColor: '$notification-border-inverted-subtle',\n borderRadius: '$notification',\n boxShadow: '$elevation-300',\n\n // Direct-manipulation feedback: the toast follows the pointer during a\n // swipe regardless of the reduced-motion preference.\n '&[data-swipe=\"move\"]': {\n transform: 'translateX(var(--radix-toast-swipe-move-x))',\n },\n '&[data-swipe=\"cancel\"]': {\n transform: 'translateX(0)',\n },\n\n // Radix drives enter/exit via data-state and waits for the exit animation\n // to finish before unmounting. With reduced motion, toasts appear and\n // disappear instantly.\n '@media (prefers-reduced-motion: no-preference)': {\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': {\n animation: `${slideInFromRight} 300ms cubic-bezier(0.19, 1, 0.22, 1)`,\n },\n '&[data-state=\"closed\"]': {\n animation: `${animations.fadeOut} 200ms ease-in`,\n },\n '&[data-swipe=\"cancel\"]': {\n transition: 'transform 200ms ease-out',\n },\n '&[data-swipe=\"end\"]': {\n animation: `${swipeOut} 150ms ease-out`,\n },\n },\n\n variants: {\n // Reserve room on the right for the absolutely positioned dismiss button.\n dismissible: {\n true: { paddingRight: '$500' },\n false: {},\n },\n },\n defaultVariants: {\n dismissible: true,\n },\n})\n\nexport type StyledToastProps = ComponentPropsWithRef<typeof StyledToast>\n","import { Provider as RadixProvider } from '@radix-ui/react-toast'\n\nexport const Provider = RadixProvider\n","import type { ComponentPropsWithRef } from 'react'\nimport { Viewport } from '@radix-ui/react-toast'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// Owns the stack layout only; screen position and z-index belong to the\n// consumer. column-reverse shows the newest toast on top while the DOM keeps\n// mount order, preserving tab and announcement order.\nexport const StyledViewport = styled(Viewport, {\n listStyle: 'none',\n display: 'flex',\n flexDirection: 'column-reverse',\n gap: '$150',\n // Toast width from Figma. Definite value: a percentage would collapse to\n // content width inside content-sized containers.\n width: 344,\n maxWidth: '100%',\n margin: 0,\n padding: 0,\n})\n\nexport type StyledViewportProps = ComponentPropsWithRef<typeof StyledViewport>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledViewport } from './viewport.styled'\nimport type { StyledViewportProps } from './viewport.styled'\n\nexport interface ViewportProps extends StyledViewportProps {\n /**\n * Accessible label of the viewport region. `{hotkey}` interpolates the\n * shortcut.\n * @default 'Notifications ({hotkey})'\n */\n label?: string\n\n /**\n * Keyboard shortcut that moves focus into the viewport.\n * @default ['F8']\n */\n hotkey?: string[]\n}\n\nexport const Viewport = React.forwardRef<\n ElementRef<typeof StyledViewport>,\n ViewportProps\n>((props, forwardRef) => <StyledViewport {...props} ref={forwardRef} />)\n\nViewport.displayName = 'Toast.Viewport'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Label = styled(Primitive.div, {\n gridArea: 'label',\n display: 'flex',\n alignItems: 'center',\n gap: '$100',\n marginBottom: '$150',\n fontFamily: '$body',\n fontSize: '$150',\n fontWeight: '$semibold',\n lineHeight: 1,\n textTransform: 'uppercase',\n color: '$text-inverted-secondary',\n})\n\nLabel.displayName = 'Toast.Label'\n","import React from 'react'\nimport type { ComponentPropsWithRef, ElementRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nconst StyledIconSlot = styled(Primitive.span, {\n display: 'inline-flex',\n alignItems: 'center',\n flexShrink: 0,\n})\n\nexport type IconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\n// Decorative by default: the toast text carries the meaning.\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>((props, forwardRef) => (\n <StyledIconSlot aria-hidden {...props} ref={forwardRef} />\n))\n\nIconSlot.displayName = 'Toast.IconSlot'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Media = styled(Primitive.div, {\n gridArea: 'media',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '$10',\n height: '$10',\n marginRight: '$150',\n})\n\nMedia.displayName = 'Toast.Media'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Content = styled(Primitive.div, {\n gridArea: 'content',\n display: 'flex',\n flexDirection: 'column',\n minWidth: 0,\n})\n\nContent.displayName = 'Toast.Content'\n","import { Title as RadixTitle } from '@radix-ui/react-toast'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Title = styled(RadixTitle, {\n fontFamily: '$heading',\n fontSize: '$175',\n fontWeight: '$semibold',\n lineHeight: 1.4,\n color: '$text-inverted',\n display: '-webkit-box',\n WebkitBoxOrient: 'vertical',\n WebkitLineClamp: 2,\n overflow: 'hidden',\n})\n\nTitle.displayName = 'Toast.Title'\n","import { Description as RadixDescription } from '@radix-ui/react-toast'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Description = styled(RadixDescription, {\n fontFamily: '$body',\n fontSize: '$175',\n fontWeight: '$regular',\n lineHeight: 1.4,\n color: '$text-inverted-secondary',\n display: '-webkit-box',\n WebkitBoxOrient: 'vertical',\n WebkitLineClamp: 3,\n overflow: 'hidden',\n})\n\nDescription.displayName = 'Toast.Description'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// Button and Link have no inverse variants yet, so the slot recolors them\n// with the inverse tokens for the inverted surface. Element selectors: the\n// slot only ever contains CTA buttons and links, and the DS components are\n// not selector-interpolatable (they export wrappers, not styled components).\n// Buttons are matched by order: the first is the primary CTA, any following\n// one is secondary. Stopgap — NOTI-5461 tracks replacing these overrides\n// with real inverse variants on Button/Link.\nexport const Actions = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n gap: '$100',\n paddingTop: '$100',\n\n '&&& button': {\n backgroundColor: '$button-background-inverse',\n color: '$button-text-on-inverse',\n '&:hover, &[data-hovered]': {\n backgroundColor: '$button-background-inverse-hover',\n color: '$button-text-on-inverse',\n },\n '&:active, &[data-pressed]': {\n backgroundColor: '$button-background-inverse-pressed',\n color: '$button-text-on-inverse',\n },\n '&[aria-disabled=\"true\"]': {\n backgroundColor: '$button-background-inverse-disabled',\n color: '$button-text-on-inverse-disabled',\n },\n },\n\n '&&& button ~ button': {\n backgroundColor: '$button-background-inverse-secondary',\n borderColor: '$button-border-inverse-secondary',\n color: '$button-text-on-inverse-secondary',\n '&:hover, &[data-hovered]': {\n backgroundColor: '$button-background-inverse-secondary-hover',\n borderColor: '$button-border-inverse-secondary-hover',\n color: '$button-text-on-inverse-secondary',\n },\n '&:active, &[data-pressed]': {\n backgroundColor: '$button-background-inverse-secondary-pressed',\n borderColor: '$button-border-inverse-secondary-pressed',\n color: '$button-text-on-inverse-secondary',\n },\n },\n\n '&&& a': {\n // Link has no size variant and inherits font-size from context. The\n // inverted recolor is a stopgap — NOTI-5461 tracks moving it onto a\n // real Link inverse treatment.\n fontSize: '$175',\n color: '$text-interactive-on-inverted',\n '&:hover, &[data-hovered]': {\n color: '$text-interactive-on-inverted-hover',\n },\n '&:active, &[data-pressed]': {\n color: '$text-interactive-on-inverted-pressed',\n },\n },\n})\n\nActions.displayName = 'Toast.Actions'\n","import { Action as RadixAction } from '@radix-ui/react-toast'\n\n// Direct pass-through, meant to be used with `asChild` around a Button/Link\n// inside Toast.Actions. Radix requires `altText` so the action survives the\n// live-region announcement.\nexport const Action = RadixAction\n","import type { MouseEvent } from 'react'\nimport { Close } from '@radix-ui/react-toast'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\n\nconst StyledDismissButton = styled(IconButton, {\n position: 'absolute',\n top: '$50',\n right: '$50',\n\n // Ghost recolor for the inverted surface. Stopgap — NOTI-5461 tracks\n // replacing it with a real inverse variant on IconButton.\n variants: {\n variant: {\n ghost: {\n '&&&': {\n color: '$icon-inverted',\n backgroundColor: 'transparent',\n '&:hover, &:focus': {\n color: '$icon-inverted',\n backgroundColor: '$button-background-ghost-inverse-hover',\n },\n '&:active': {\n color: '$icon-inverted',\n backgroundColor: '$button-background-ghost-inverse-pressed',\n },\n },\n },\n },\n },\n})\n\nexport interface DismissButtonProps\n extends Omit<IconButtonProps, 'variant' | 'children'> {\n 'aria-label': string\n onDismiss?: () => void\n}\n\nexport const DismissButton = ({\n onDismiss,\n ...props\n}: DismissButtonProps): JSX.Element => {\n const handleClick = (event: MouseEvent): void => {\n event.stopPropagation()\n onDismiss?.()\n }\n\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <Close asChild>\n <StyledDismissButton\n variant='ghost'\n size='medium'\n onClick={handleClick}\n {...props}\n >\n <IconCross />\n </StyledDismissButton>\n </Close>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content>{props['aria-label']}</Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip>\n )\n}\n\nDismissButton.displayName = 'Toast.DismissButton'\n","import React, { isValidElement } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent, ReactNode } from 'react'\n\nimport { StyledToast } from './toast.styled'\nimport type { StyledToastProps } from './toast.styled'\nimport { Provider } from './partials/provider'\nimport { Viewport } from './partials/viewport'\nimport { Label } from './partials/label'\nimport { IconSlot } from './partials/icon-slot'\nimport { Media } from './partials/media'\nimport { Content } from './partials/content'\nimport { Title } from './partials/title'\nimport { Description } from './partials/description'\nimport { Actions } from './partials/actions'\nimport { Action } from './partials/action'\nimport { DismissButton } from './partials/dismiss-button'\n\nexport interface DismissalProps {\n /**\n * Whether to render the dismiss button.\n * @default true\n */\n dismissible?: true\n\n /**\n * aria-label for the dismiss button.\n */\n dismissLabel: string\n\n /**\n * Fired when the dismiss button is pressed, alongside the Radix close\n * (which flips `open` / fires `onOpenChange(false)`).\n */\n onDismiss?: () => void\n}\n\ninterface NotDismissibleProps {\n dismissible: false\n dismissLabel?: never\n onDismiss?: never\n}\n\ninterface ToastOwnProps extends Omit<StyledToastProps, 'dismissible'> {\n /**\n * Controlled open state. Omit it for an uncontrolled toast that closes\n * itself on dismiss, timeout, or swipe.\n */\n open?: boolean\n\n /**\n * Fired when the open state changes (dismiss press, timeout, swipe, Escape).\n * A controlled consumer removes the toast here.\n */\n onOpenChange?: (open: boolean) => void\n\n /**\n * Time in milliseconds before the toast auto-closes. `Infinity` keeps it\n * until dismissed. Pauses on viewport hover/focus and window blur.\n * @default 5000 — inherited from `Toast.Provider`\n */\n duration?: number\n\n /**\n * Announcement politeness: 'foreground' interrupts, 'background' waits.\n * @default 'foreground'\n */\n type?: 'foreground' | 'background'\n\n children?: ReactNode\n}\n\nexport type ToastProps = ToastOwnProps & (DismissalProps | NotDismissibleProps)\n\n/**\n * Toast built on Radix Toast. Must be rendered inside a `Toast.Provider`\n * with a `Toast.Viewport` (each toast portals into the viewport). Radix owns\n * the behavior: `open` / `onOpenChange`, `duration` with pause on\n * hover/focus/window-blur, swipe dismissal, the viewport hotkey, and\n * live-region announcements (politeness via `type`). The consumer owns which\n * toasts exist, their content, and where the viewport is positioned on\n * screen.\n *\n * @experimental Beta — the API may still change while teams adopt it.\n */\nexport const Toast = React.forwardRef<\n ElementRef<typeof StyledToast>,\n ToastProps\n>(\n (\n { dismissible = true, dismissLabel, onDismiss, children, ...props },\n forwardRef\n ) => {\n const showDismiss =\n dismissible && dismissLabel != null && dismissLabel.length > 0\n\n // Consumers compose flat children (the Radix anatomy); the root routes\n // Label/Media into their grid areas and wraps the rest into the internal\n // content column — same slot partition Banner does. Slot parts must be\n // direct children to be recognized.\n const items = React.Children.toArray(children)\n const isType = (child: ReactNode, type: unknown): boolean =>\n isValidElement(child) && child.type === type\n const label = items.find(child => isType(child, Label))\n const media = items.find(child => isType(child, Media))\n const content = items.filter(child => child !== label && child !== media)\n\n return (\n <StyledToast {...props} ref={forwardRef} dismissible={showDismiss}>\n {label}\n {media}\n {content.length > 0 && <Content>{content}</Content>}\n {showDismiss && (\n <DismissButton aria-label={dismissLabel} onDismiss={onDismiss} />\n )}\n </StyledToast>\n )\n }\n) as ForwardRefExoticComponent<ToastProps> & Partials\n\nexport interface Partials {\n Provider: typeof Provider\n Viewport: typeof Viewport\n Label: typeof Label\n IconSlot: typeof IconSlot\n Media: typeof Media\n Title: typeof Title\n Description: typeof Description\n Actions: typeof Actions\n Action: typeof Action\n}\n\nToast.Provider = Provider\nToast.Viewport = Viewport\nToast.Label = Label\nToast.IconSlot = IconSlot\nToast.Media = Media\nToast.Title = Title\nToast.Description = Description\nToast.Actions = Actions\nToast.Action = Action\n"],"names":["keyframes","styled","Root","animations","RadixProvider","Viewport","jsx","Primitive","RadixTitle","RadixDescription","RadixAction","IconButton","Tooltip","Close","IconCross","isValidElement"],"mappings":";;;;;;;;;;;;AAMA,MAAM,mBAAmBA,8BAAA,CAAU;AAAA,EACjC,IAAA,EAAM,EAAE,SAAA,EAAW,+BAAA,EAAiC,SAAS,CAAA,EAAE;AAAA,EAC/D,EAAA,EAAI,EAAE,SAAA,EAAW,eAAA,EAAiB,SAAS,CAAA;AAC7C,CAAC,CAAA;AAGD,MAAM,WAAWA,8BAAA,CAAU;AAAA,EACzB,IAAA,EAAM,EAAE,SAAA,EAAW,4CAAA,EAA6C;AAAA,EAChE,EAAA,EAAI,EAAE,SAAA,EAAW,+BAAA,EAAiC,SAAS,CAAA;AAC7D,CAAC,CAAA;AAEM,MAAM,WAAA,GAAcC,4BAAOC,eAAA,EAAM;AAAA;AAAA,EAEtC,SAAA,EAAW,MAAA;AAAA,EACX,QAAA,EAAU,UAAA;AAAA,EACV,SAAA,EAAW,YAAA;AAAA,EACX,OAAA,EAAS,MAAA;AAAA,EACT,mBAAA,EAAqB,UAAA;AAAA,EACrB,iBAAA,EAAmB,8CAAA;AAAA,EAInB,KAAA,EAAO,MAAA;AAAA,EACP,QAAA,EAAU,GAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,KAAA,EAAO,gBAAA;AAAA,EACP,eAAA,EAAiB,mCAAA;AAAA,EACjB,WAAA,EAAa,KAAA;AAAA,EACb,WAAA,EAAa,OAAA;AAAA,EACb,WAAA,EAAa,sCAAA;AAAA,EACb,YAAA,EAAc,eAAA;AAAA,EACd,SAAA,EAAW,gBAAA;AAAA;AAAA;AAAA,EAIX,sBAAA,EAAwB;AAAA,IACtB,SAAA,EAAW;AAAA,GACb;AAAA,EACA,wBAAA,EAA0B;AAAA,IACxB,SAAA,EAAW;AAAA,GACb;AAAA;AAAA;AAAA;AAAA,EAKA,gDAAA,EAAkD;AAAA,IAChD,UAAA,EAAY,oBAAA;AAAA,IACZ,sBAAA,EAAwB;AAAA,MACtB,SAAA,EAAW,GAAG,MAAA,CAAA,gBAAA,EAAgB,uCAAA;AAAA,KAChC;AAAA,IACA,wBAAA,EAA0B;AAAA,MACxB,SAAA,EAAW,EAAA,CAAG,MAAA,CAAAC,6BAAA,CAAW,OAAA,EAAO,gBAAA;AAAA,KAClC;AAAA,IACA,wBAAA,EAA0B;AAAA,MACxB,UAAA,EAAY;AAAA,KACd;AAAA,IACA,qBAAA,EAAuB;AAAA,MACrB,SAAA,EAAW,GAAG,MAAA,CAAA,QAAA,EAAQ,iBAAA;AAAA;AACxB,GACF;AAAA,EAEA,QAAA,EAAU;AAAA;AAAA,IAER,WAAA,EAAa;AAAA,MACX,IAAA,EAAM,EAAE,YAAA,EAAc,MAAA,EAAO;AAAA,MAC7B,OAAO;AAAC;AACV,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;;AC3EM,MAAM,QAAA,GAAWC,mBAAA;;ACKjB,MAAM,cAAA,GAAiBH,4BAAOI,mBAAA,EAAU;AAAA,EAC7C,SAAA,EAAW,MAAA;AAAA,EACX,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,gBAAA;AAAA,EACf,GAAA,EAAK,MAAA;AAAA;AAAA;AAAA,EAGL,KAAA,EAAO,GAAA;AAAA,EACP,QAAA,EAAU,MAAA;AAAA,EACV,MAAA,EAAQ,CAAA;AAAA,EACR,OAAA,EAAS;AACX,CAAC,CAAA;;ACGM,MAAM,QAAA,GAAW,KAAA,CAAM,UAAA,CAG5B,CAAC,KAAA,EAAO,UAAA,qBAAeC,cAAA,CAAC,cAAA,EAAA,EAAgB,GAAG,KAAA,EAAO,GAAA,EAAK,UAAA,EAAY,CAAE,CAAA;AAEvE,QAAA,CAAS,WAAA,GAAc,gBAAA;;ACvBhB,MAAM,KAAA,GAAQL,2BAAA,CAAOM,+BAAA,CAAU,GAAA,EAAK;AAAA,EACzC,QAAA,EAAU,OAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,MAAA;AAAA,EACL,YAAA,EAAc,MAAA;AAAA,EACd,UAAA,EAAY,OAAA;AAAA,EACZ,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,WAAA;AAAA,EACZ,UAAA,EAAY,CAAA;AAAA,EACZ,aAAA,EAAe,WAAA;AAAA,EACf,KAAA,EAAO;AACT,CAAC,CAAA;AAED,KAAA,CAAM,WAAA,GAAc,aAAA;;ACZpB,MAAM,cAAA,GAAiBN,2BAAA,CAAOM,+BAAA,CAAU,IAAA,EAAM;AAAA,EAC5C,OAAA,EAAS,aAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,UAAA,EAAY;AACd,CAAC,CAAA;AAKM,MAAM,QAAA,GAAW,KAAA,CAAM,UAAA,CAG5B,CAAC,OAAO,UAAA,qBACRD,cAAA,CAAC,cAAA,EAAA,EAAe,aAAA,EAAW,IAAA,EAAE,GAAG,KAAA,EAAO,GAAA,EAAK,YAAY,CACzD,CAAA;AAED,QAAA,CAAS,WAAA,GAAc,gBAAA;;AClBhB,MAAM,KAAA,GAAQL,2BAAA,CAAOM,+BAAA,CAAU,GAAA,EAAK;AAAA,EACzC,QAAA,EAAU,OAAA;AAAA,EACV,UAAA,EAAY,CAAA;AAAA,EACZ,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,cAAA,EAAgB,QAAA;AAAA,EAChB,KAAA,EAAO,KAAA;AAAA,EACP,MAAA,EAAQ,KAAA;AAAA,EACR,WAAA,EAAa;AACf,CAAC,CAAA;AAED,KAAA,CAAM,WAAA,GAAc,aAAA;;ACXb,MAAM,OAAA,GAAUN,2BAAA,CAAOM,+BAAA,CAAU,GAAA,EAAK;AAAA,EAC3C,QAAA,EAAU,SAAA;AAAA,EACV,OAAA,EAAS,MAAA;AAAA,EACT,aAAA,EAAe,QAAA;AAAA,EACf,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,OAAA,CAAQ,WAAA,GAAc,eAAA;;ACPf,MAAM,KAAA,GAAQN,4BAAOO,gBAAA,EAAY;AAAA,EACtC,UAAA,EAAY,UAAA;AAAA,EACZ,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,WAAA;AAAA,EACZ,UAAA,EAAY,GAAA;AAAA,EACZ,KAAA,EAAO,gBAAA;AAAA,EACP,OAAA,EAAS,aAAA;AAAA,EACT,eAAA,EAAiB,UAAA;AAAA,EACjB,eAAA,EAAiB,CAAA;AAAA,EACjB,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,KAAA,CAAM,WAAA,GAAc,aAAA;;ACZb,MAAM,WAAA,GAAcP,4BAAOQ,sBAAA,EAAkB;AAAA,EAClD,UAAA,EAAY,OAAA;AAAA,EACZ,QAAA,EAAU,MAAA;AAAA,EACV,UAAA,EAAY,UAAA;AAAA,EACZ,UAAA,EAAY,GAAA;AAAA,EACZ,KAAA,EAAO,0BAAA;AAAA,EACP,OAAA,EAAS,aAAA;AAAA,EACT,eAAA,EAAiB,UAAA;AAAA,EACjB,eAAA,EAAiB,CAAA;AAAA,EACjB,QAAA,EAAU;AACZ,CAAC,CAAA;AAED,WAAA,CAAY,WAAA,GAAc,mBAAA;;ACLnB,MAAM,OAAA,GAAUR,2BAAA,CAAOM,+BAAA,CAAU,GAAA,EAAK;AAAA,EAC3C,OAAA,EAAS,MAAA;AAAA,EACT,UAAA,EAAY,QAAA;AAAA,EACZ,GAAA,EAAK,MAAA;AAAA,EACL,UAAA,EAAY,MAAA;AAAA,EAEZ,YAAA,EAAc;AAAA,IACZ,eAAA,EAAiB,4BAAA;AAAA,IACjB,KAAA,EAAO,yBAAA;AAAA,IACP,0BAAA,EAA4B;AAAA,MAC1B,eAAA,EAAiB,kCAAA;AAAA,MACjB,KAAA,EAAO;AAAA,KACT;AAAA,IACA,2BAAA,EAA6B;AAAA,MAC3B,eAAA,EAAiB,oCAAA;AAAA,MACjB,KAAA,EAAO;AAAA,KACT;AAAA,IACA,yBAAA,EAA2B;AAAA,MACzB,eAAA,EAAiB,qCAAA;AAAA,MACjB,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EAEA,qBAAA,EAAuB;AAAA,IACrB,eAAA,EAAiB,sCAAA;AAAA,IACjB,WAAA,EAAa,kCAAA;AAAA,IACb,KAAA,EAAO,mCAAA;AAAA,IACP,0BAAA,EAA4B;AAAA,MAC1B,eAAA,EAAiB,4CAAA;AAAA,MACjB,WAAA,EAAa,wCAAA;AAAA,MACb,KAAA,EAAO;AAAA,KACT;AAAA,IACA,2BAAA,EAA6B;AAAA,MAC3B,eAAA,EAAiB,8CAAA;AAAA,MACjB,WAAA,EAAa,0CAAA;AAAA,MACb,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EAEA,OAAA,EAAS;AAAA;AAAA;AAAA;AAAA,IAIP,QAAA,EAAU,MAAA;AAAA,IACV,KAAA,EAAO,+BAAA;AAAA,IACP,0BAAA,EAA4B;AAAA,MAC1B,KAAA,EAAO;AAAA,KACT;AAAA,IACA,2BAAA,EAA6B;AAAA,MAC3B,KAAA,EAAO;AAAA;AACT;AAEJ,CAAC,CAAA;AAED,OAAA,CAAQ,WAAA,GAAc,eAAA;;AC3Df,MAAM,MAAA,GAASG,iBAAA;;ACGtB,MAAM,mBAAA,GAAsBT,4BAAOU,iCAAA,EAAY;AAAA,EAC7C,QAAA,EAAU,UAAA;AAAA,EACV,GAAA,EAAK,KAAA;AAAA,EACL,KAAA,EAAO,KAAA;AAAA;AAAA;AAAA,EAIP,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,KAAA,EAAO;AAAA,QACL,KAAA,EAAO;AAAA,UACL,KAAA,EAAO,gBAAA;AAAA,UACP,eAAA,EAAiB,aAAA;AAAA,UACjB,kBAAA,EAAoB;AAAA,YAClB,KAAA,EAAO,gBAAA;AAAA,YACP,eAAA,EAAiB;AAAA,WACnB;AAAA,UACA,UAAA,EAAY;AAAA,YACV,KAAA,EAAO,gBAAA;AAAA,YACP,eAAA,EAAiB;AAAA;AACnB;AACF;AACF;AACF;AAEJ,CAAC,CAAA;AAQM,MAAM,gBAAgB,CAAC;AAAA,EAC5B,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAuC;AACrC,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AAC/C,IAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,IAAA,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,EAAA;AAAA,EACF,CAAA;AAEA,EAAA,uCACGC,2BAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAN,cAAA,CAACM,2BAAA,CAAQ,SAAR,EAAgB,OAAA,EAAO,MACtB,QAAA,kBAAAN,cAAA,CAACO,gBAAA,EAAA,EAAM,SAAO,IAAA,EACZ,QAAA,kBAAAP,cAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,OAAA;AAAA,QACR,IAAA,EAAK,QAAA;AAAA,QACL,OAAA,EAAS,WAAA;AAAA,QACR,GAAG,KAAA;AAAA,QAEJ,yCAACQ,2BAAA,EAAA,EAAU;AAAA;AAAA,OAEf,CAAA,EACF,CAAA;AAAA,oBACAR,cAAA,CAACM,2BAAA,CAAQ,MAAA,EAAR,EACC,QAAA,kBAAAN,cAAA,CAACM,2BAAA,CAAQ,OAAA,EAAR,EAAiB,QAAA,EAAA,KAAA,CAAM,YAAY,CAAA,EAAE,CAAA,EACxC;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAEA,aAAA,CAAc,WAAA,GAAc,qBAAA;;ACarB,MAAM,QAAQ,KAAA,CAAM,UAAA;AAAA,EAIzB,CACE,EAAE,WAAA,GAAc,IAAA,EAAM,YAAA,EAAc,WAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAClE,UAAA,KACG;AACH,IAAA,MAAM,WAAA,GACJ,WAAA,IAAe,YAAA,IAAgB,IAAA,IAAQ,aAAa,MAAA,GAAS,CAAA;AAM/D,IAAA,MAAM,KAAA,GAAQ,KAAA,CAAM,QAAA,CAAS,OAAA,CAAQ,QAAQ,CAAA;AAC7C,IAAA,MAAM,MAAA,GAAS,CAAC,KAAA,EAAkB,IAAA,KAChCG,qBAAe,KAAK,CAAA,IAAK,MAAM,IAAA,KAAS,IAAA;AAC1C,IAAA,MAAM,QAAQ,KAAA,CAAM,IAAA,CAAK,WAAS,MAAA,CAAO,KAAA,EAAO,KAAK,CAAC,CAAA;AACtD,IAAA,MAAM,QAAQ,KAAA,CAAM,IAAA,CAAK,WAAS,MAAA,CAAO,KAAA,EAAO,KAAK,CAAC,CAAA;AACtD,IAAA,MAAM,UAAU,KAAA,CAAM,MAAA,CAAO,WAAS,KAAA,KAAU,KAAA,IAAS,UAAU,KAAK,CAAA;AAExE,IAAA,uCACG,WAAA,EAAA,EAAa,GAAG,OAAO,GAAA,EAAK,UAAA,EAAY,aAAa,WAAA,EACnD,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA,CAAQ,MAAA,GAAS,CAAA,oBAAKT,cAAA,CAAC,WAAS,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,MACxC,WAAA,oBACCA,cAAA,CAAC,aAAA,EAAA,EAAc,YAAA,EAAY,cAAc,SAAA,EAAsB;AAAA,KAAA,EAEnE,CAAA;AAAA,EAEJ;AACF;AAcA,KAAA,CAAM,QAAA,GAAW,QAAA;AACjB,KAAA,CAAM,QAAA,GAAW,QAAA;AACjB,KAAA,CAAM,KAAA,GAAQ,KAAA;AACd,KAAA,CAAM,QAAA,GAAW,QAAA;AACjB,KAAA,CAAM,KAAA,GAAQ,KAAA;AACd,KAAA,CAAM,KAAA,GAAQ,KAAA;AACd,KAAA,CAAM,WAAA,GAAc,WAAA;AACpB,KAAA,CAAM,OAAA,GAAU,OAAA;AAChB,KAAA,CAAM,MAAA,GAAS,MAAA;;;;"}
|
package/dist/module.js
ADDED
|
@@ -0,0 +1,292 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import React, { isValidElement } from 'react';
|
|
3
|
+
import { Root, Provider as Provider$1, Viewport as Viewport$1, Title as Title$1, Description as Description$1, Action as Action$1, Close } from '@radix-ui/react-toast';
|
|
4
|
+
import { keyframes, styled } from '@mirohq/design-system-stitches';
|
|
5
|
+
import { animations } from '@mirohq/design-system-styles';
|
|
6
|
+
import { Primitive } from '@mirohq/design-system-primitive';
|
|
7
|
+
import { IconButton } from '@mirohq/design-system-icon-button';
|
|
8
|
+
import { IconCross } from '@mirohq/design-system-icons';
|
|
9
|
+
import { Tooltip } from '@mirohq/design-system-tooltip';
|
|
10
|
+
|
|
11
|
+
const slideInFromRight = keyframes({
|
|
12
|
+
from: { transform: "translateX(calc(100% + 24px))", opacity: 0 },
|
|
13
|
+
to: { transform: "translateX(0)", opacity: 1 }
|
|
14
|
+
});
|
|
15
|
+
const swipeOut = keyframes({
|
|
16
|
+
from: { transform: "translateX(var(--radix-toast-swipe-end-x))" },
|
|
17
|
+
to: { transform: "translateX(calc(100% + 24px))", opacity: 0 }
|
|
18
|
+
});
|
|
19
|
+
const StyledToast = styled(Root, {
|
|
20
|
+
// Radix Root renders an <li> that is portalled into the Viewport's <ol>.
|
|
21
|
+
listStyle: "none",
|
|
22
|
+
position: "relative",
|
|
23
|
+
boxSizing: "border-box",
|
|
24
|
+
display: "grid",
|
|
25
|
+
gridTemplateColumns: "auto 1fr",
|
|
26
|
+
gridTemplateAreas: "\n 'label label'\n 'media content'\n ",
|
|
27
|
+
width: "100%",
|
|
28
|
+
maxWidth: 344,
|
|
29
|
+
padding: "$200",
|
|
30
|
+
color: "$text-inverted",
|
|
31
|
+
backgroundColor: "$notification-background-inverted",
|
|
32
|
+
borderWidth: "$sm",
|
|
33
|
+
borderStyle: "solid",
|
|
34
|
+
borderColor: "$notification-border-inverted-subtle",
|
|
35
|
+
borderRadius: "$notification",
|
|
36
|
+
boxShadow: "$elevation-300",
|
|
37
|
+
// Direct-manipulation feedback: the toast follows the pointer during a
|
|
38
|
+
// swipe regardless of the reduced-motion preference.
|
|
39
|
+
'&[data-swipe="move"]': {
|
|
40
|
+
transform: "translateX(var(--radix-toast-swipe-move-x))"
|
|
41
|
+
},
|
|
42
|
+
'&[data-swipe="cancel"]': {
|
|
43
|
+
transform: "translateX(0)"
|
|
44
|
+
},
|
|
45
|
+
// Radix drives enter/exit via data-state and waits for the exit animation
|
|
46
|
+
// to finish before unmounting. With reduced motion, toasts appear and
|
|
47
|
+
// disappear instantly.
|
|
48
|
+
"@media (prefers-reduced-motion: no-preference)": {
|
|
49
|
+
willChange: "transform, opacity",
|
|
50
|
+
'&[data-state="open"]': {
|
|
51
|
+
animation: "".concat(slideInFromRight, " 300ms cubic-bezier(0.19, 1, 0.22, 1)")
|
|
52
|
+
},
|
|
53
|
+
'&[data-state="closed"]': {
|
|
54
|
+
animation: "".concat(animations.fadeOut, " 200ms ease-in")
|
|
55
|
+
},
|
|
56
|
+
'&[data-swipe="cancel"]': {
|
|
57
|
+
transition: "transform 200ms ease-out"
|
|
58
|
+
},
|
|
59
|
+
'&[data-swipe="end"]': {
|
|
60
|
+
animation: "".concat(swipeOut, " 150ms ease-out")
|
|
61
|
+
}
|
|
62
|
+
},
|
|
63
|
+
variants: {
|
|
64
|
+
// Reserve room on the right for the absolutely positioned dismiss button.
|
|
65
|
+
dismissible: {
|
|
66
|
+
true: { paddingRight: "$500" },
|
|
67
|
+
false: {}
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
defaultVariants: {
|
|
71
|
+
dismissible: true
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
const Provider = Provider$1;
|
|
76
|
+
|
|
77
|
+
const StyledViewport = styled(Viewport$1, {
|
|
78
|
+
listStyle: "none",
|
|
79
|
+
display: "flex",
|
|
80
|
+
flexDirection: "column-reverse",
|
|
81
|
+
gap: "$150",
|
|
82
|
+
// Toast width from Figma. Definite value: a percentage would collapse to
|
|
83
|
+
// content width inside content-sized containers.
|
|
84
|
+
width: 344,
|
|
85
|
+
maxWidth: "100%",
|
|
86
|
+
margin: 0,
|
|
87
|
+
padding: 0
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
const Viewport = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledViewport, { ...props, ref: forwardRef }));
|
|
91
|
+
Viewport.displayName = "Toast.Viewport";
|
|
92
|
+
|
|
93
|
+
const Label = styled(Primitive.div, {
|
|
94
|
+
gridArea: "label",
|
|
95
|
+
display: "flex",
|
|
96
|
+
alignItems: "center",
|
|
97
|
+
gap: "$100",
|
|
98
|
+
marginBottom: "$150",
|
|
99
|
+
fontFamily: "$body",
|
|
100
|
+
fontSize: "$150",
|
|
101
|
+
fontWeight: "$semibold",
|
|
102
|
+
lineHeight: 1,
|
|
103
|
+
textTransform: "uppercase",
|
|
104
|
+
color: "$text-inverted-secondary"
|
|
105
|
+
});
|
|
106
|
+
Label.displayName = "Toast.Label";
|
|
107
|
+
|
|
108
|
+
const StyledIconSlot = styled(Primitive.span, {
|
|
109
|
+
display: "inline-flex",
|
|
110
|
+
alignItems: "center",
|
|
111
|
+
flexShrink: 0
|
|
112
|
+
});
|
|
113
|
+
const IconSlot = React.forwardRef((props, forwardRef) => /* @__PURE__ */ jsx(StyledIconSlot, { "aria-hidden": true, ...props, ref: forwardRef }));
|
|
114
|
+
IconSlot.displayName = "Toast.IconSlot";
|
|
115
|
+
|
|
116
|
+
const Media = styled(Primitive.div, {
|
|
117
|
+
gridArea: "media",
|
|
118
|
+
flexShrink: 0,
|
|
119
|
+
display: "flex",
|
|
120
|
+
alignItems: "center",
|
|
121
|
+
justifyContent: "center",
|
|
122
|
+
width: "$10",
|
|
123
|
+
height: "$10",
|
|
124
|
+
marginRight: "$150"
|
|
125
|
+
});
|
|
126
|
+
Media.displayName = "Toast.Media";
|
|
127
|
+
|
|
128
|
+
const Content = styled(Primitive.div, {
|
|
129
|
+
gridArea: "content",
|
|
130
|
+
display: "flex",
|
|
131
|
+
flexDirection: "column",
|
|
132
|
+
minWidth: 0
|
|
133
|
+
});
|
|
134
|
+
Content.displayName = "Toast.Content";
|
|
135
|
+
|
|
136
|
+
const Title = styled(Title$1, {
|
|
137
|
+
fontFamily: "$heading",
|
|
138
|
+
fontSize: "$175",
|
|
139
|
+
fontWeight: "$semibold",
|
|
140
|
+
lineHeight: 1.4,
|
|
141
|
+
color: "$text-inverted",
|
|
142
|
+
display: "-webkit-box",
|
|
143
|
+
WebkitBoxOrient: "vertical",
|
|
144
|
+
WebkitLineClamp: 2,
|
|
145
|
+
overflow: "hidden"
|
|
146
|
+
});
|
|
147
|
+
Title.displayName = "Toast.Title";
|
|
148
|
+
|
|
149
|
+
const Description = styled(Description$1, {
|
|
150
|
+
fontFamily: "$body",
|
|
151
|
+
fontSize: "$175",
|
|
152
|
+
fontWeight: "$regular",
|
|
153
|
+
lineHeight: 1.4,
|
|
154
|
+
color: "$text-inverted-secondary",
|
|
155
|
+
display: "-webkit-box",
|
|
156
|
+
WebkitBoxOrient: "vertical",
|
|
157
|
+
WebkitLineClamp: 3,
|
|
158
|
+
overflow: "hidden"
|
|
159
|
+
});
|
|
160
|
+
Description.displayName = "Toast.Description";
|
|
161
|
+
|
|
162
|
+
const Actions = styled(Primitive.div, {
|
|
163
|
+
display: "flex",
|
|
164
|
+
alignItems: "center",
|
|
165
|
+
gap: "$100",
|
|
166
|
+
paddingTop: "$100",
|
|
167
|
+
"&&& button": {
|
|
168
|
+
backgroundColor: "$button-background-inverse",
|
|
169
|
+
color: "$button-text-on-inverse",
|
|
170
|
+
"&:hover, &[data-hovered]": {
|
|
171
|
+
backgroundColor: "$button-background-inverse-hover",
|
|
172
|
+
color: "$button-text-on-inverse"
|
|
173
|
+
},
|
|
174
|
+
"&:active, &[data-pressed]": {
|
|
175
|
+
backgroundColor: "$button-background-inverse-pressed",
|
|
176
|
+
color: "$button-text-on-inverse"
|
|
177
|
+
},
|
|
178
|
+
'&[aria-disabled="true"]': {
|
|
179
|
+
backgroundColor: "$button-background-inverse-disabled",
|
|
180
|
+
color: "$button-text-on-inverse-disabled"
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
"&&& button ~ button": {
|
|
184
|
+
backgroundColor: "$button-background-inverse-secondary",
|
|
185
|
+
borderColor: "$button-border-inverse-secondary",
|
|
186
|
+
color: "$button-text-on-inverse-secondary",
|
|
187
|
+
"&:hover, &[data-hovered]": {
|
|
188
|
+
backgroundColor: "$button-background-inverse-secondary-hover",
|
|
189
|
+
borderColor: "$button-border-inverse-secondary-hover",
|
|
190
|
+
color: "$button-text-on-inverse-secondary"
|
|
191
|
+
},
|
|
192
|
+
"&:active, &[data-pressed]": {
|
|
193
|
+
backgroundColor: "$button-background-inverse-secondary-pressed",
|
|
194
|
+
borderColor: "$button-border-inverse-secondary-pressed",
|
|
195
|
+
color: "$button-text-on-inverse-secondary"
|
|
196
|
+
}
|
|
197
|
+
},
|
|
198
|
+
"&&& a": {
|
|
199
|
+
// Link has no size variant and inherits font-size from context. The
|
|
200
|
+
// inverted recolor is a stopgap — NOTI-5461 tracks moving it onto a
|
|
201
|
+
// real Link inverse treatment.
|
|
202
|
+
fontSize: "$175",
|
|
203
|
+
color: "$text-interactive-on-inverted",
|
|
204
|
+
"&:hover, &[data-hovered]": {
|
|
205
|
+
color: "$text-interactive-on-inverted-hover"
|
|
206
|
+
},
|
|
207
|
+
"&:active, &[data-pressed]": {
|
|
208
|
+
color: "$text-interactive-on-inverted-pressed"
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
});
|
|
212
|
+
Actions.displayName = "Toast.Actions";
|
|
213
|
+
|
|
214
|
+
const Action = Action$1;
|
|
215
|
+
|
|
216
|
+
const StyledDismissButton = styled(IconButton, {
|
|
217
|
+
position: "absolute",
|
|
218
|
+
top: "$50",
|
|
219
|
+
right: "$50",
|
|
220
|
+
// Ghost recolor for the inverted surface. Stopgap — NOTI-5461 tracks
|
|
221
|
+
// replacing it with a real inverse variant on IconButton.
|
|
222
|
+
variants: {
|
|
223
|
+
variant: {
|
|
224
|
+
ghost: {
|
|
225
|
+
"&&&": {
|
|
226
|
+
color: "$icon-inverted",
|
|
227
|
+
backgroundColor: "transparent",
|
|
228
|
+
"&:hover, &:focus": {
|
|
229
|
+
color: "$icon-inverted",
|
|
230
|
+
backgroundColor: "$button-background-ghost-inverse-hover"
|
|
231
|
+
},
|
|
232
|
+
"&:active": {
|
|
233
|
+
color: "$icon-inverted",
|
|
234
|
+
backgroundColor: "$button-background-ghost-inverse-pressed"
|
|
235
|
+
}
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
});
|
|
241
|
+
const DismissButton = ({
|
|
242
|
+
onDismiss,
|
|
243
|
+
...props
|
|
244
|
+
}) => {
|
|
245
|
+
const handleClick = (event) => {
|
|
246
|
+
event.stopPropagation();
|
|
247
|
+
onDismiss == null ? void 0 : onDismiss();
|
|
248
|
+
};
|
|
249
|
+
return /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
250
|
+
/* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(Close, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
251
|
+
StyledDismissButton,
|
|
252
|
+
{
|
|
253
|
+
variant: "ghost",
|
|
254
|
+
size: "medium",
|
|
255
|
+
onClick: handleClick,
|
|
256
|
+
...props,
|
|
257
|
+
children: /* @__PURE__ */ jsx(IconCross, {})
|
|
258
|
+
}
|
|
259
|
+
) }) }),
|
|
260
|
+
/* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Content, { children: props["aria-label"] }) })
|
|
261
|
+
] });
|
|
262
|
+
};
|
|
263
|
+
DismissButton.displayName = "Toast.DismissButton";
|
|
264
|
+
|
|
265
|
+
const Toast = React.forwardRef(
|
|
266
|
+
({ dismissible = true, dismissLabel, onDismiss, children, ...props }, forwardRef) => {
|
|
267
|
+
const showDismiss = dismissible && dismissLabel != null && dismissLabel.length > 0;
|
|
268
|
+
const items = React.Children.toArray(children);
|
|
269
|
+
const isType = (child, type) => isValidElement(child) && child.type === type;
|
|
270
|
+
const label = items.find((child) => isType(child, Label));
|
|
271
|
+
const media = items.find((child) => isType(child, Media));
|
|
272
|
+
const content = items.filter((child) => child !== label && child !== media);
|
|
273
|
+
return /* @__PURE__ */ jsxs(StyledToast, { ...props, ref: forwardRef, dismissible: showDismiss, children: [
|
|
274
|
+
label,
|
|
275
|
+
media,
|
|
276
|
+
content.length > 0 && /* @__PURE__ */ jsx(Content, { children: content }),
|
|
277
|
+
showDismiss && /* @__PURE__ */ jsx(DismissButton, { "aria-label": dismissLabel, onDismiss })
|
|
278
|
+
] });
|
|
279
|
+
}
|
|
280
|
+
);
|
|
281
|
+
Toast.Provider = Provider;
|
|
282
|
+
Toast.Viewport = Viewport;
|
|
283
|
+
Toast.Label = Label;
|
|
284
|
+
Toast.IconSlot = IconSlot;
|
|
285
|
+
Toast.Media = Media;
|
|
286
|
+
Toast.Title = Title;
|
|
287
|
+
Toast.Description = Description;
|
|
288
|
+
Toast.Actions = Actions;
|
|
289
|
+
Toast.Action = Action;
|
|
290
|
+
|
|
291
|
+
export { Toast };
|
|
292
|
+
//# sourceMappingURL=module.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/toast.styled.tsx","../src/partials/provider.tsx","../src/partials/viewport.styled.tsx","../src/partials/viewport.tsx","../src/partials/label.tsx","../src/partials/icon-slot.tsx","../src/partials/media.tsx","../src/partials/content.tsx","../src/partials/title.tsx","../src/partials/description.tsx","../src/partials/actions.tsx","../src/partials/action.tsx","../src/partials/dismiss-button.tsx","../src/toast.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Root } from '@radix-ui/react-toast'\nimport { keyframes, styled } from '@mirohq/design-system-stitches'\nimport { animations } from '@mirohq/design-system-styles'\n\n// Toasts live at the right edge of the screen, so they enter from the right.\nconst slideInFromRight = keyframes({\n from: { transform: 'translateX(calc(100% + 24px))', opacity: 0 },\n to: { transform: 'translateX(0)', opacity: 1 },\n})\n\n// Continues from wherever the swipe released (Radix exposes the offset).\nconst swipeOut = keyframes({\n from: { transform: 'translateX(var(--radix-toast-swipe-end-x))' },\n to: { transform: 'translateX(calc(100% + 24px))', opacity: 0 },\n})\n\nexport const StyledToast = styled(Root, {\n // Radix Root renders an <li> that is portalled into the Viewport's <ol>.\n listStyle: 'none',\n position: 'relative',\n boxSizing: 'border-box',\n display: 'grid',\n gridTemplateColumns: 'auto 1fr',\n gridTemplateAreas: `\n 'label label'\n 'media content'\n `,\n width: '100%',\n maxWidth: 344,\n padding: '$200',\n color: '$text-inverted',\n backgroundColor: '$notification-background-inverted',\n borderWidth: '$sm',\n borderStyle: 'solid',\n borderColor: '$notification-border-inverted-subtle',\n borderRadius: '$notification',\n boxShadow: '$elevation-300',\n\n // Direct-manipulation feedback: the toast follows the pointer during a\n // swipe regardless of the reduced-motion preference.\n '&[data-swipe=\"move\"]': {\n transform: 'translateX(var(--radix-toast-swipe-move-x))',\n },\n '&[data-swipe=\"cancel\"]': {\n transform: 'translateX(0)',\n },\n\n // Radix drives enter/exit via data-state and waits for the exit animation\n // to finish before unmounting. With reduced motion, toasts appear and\n // disappear instantly.\n '@media (prefers-reduced-motion: no-preference)': {\n willChange: 'transform, opacity',\n '&[data-state=\"open\"]': {\n animation: `${slideInFromRight} 300ms cubic-bezier(0.19, 1, 0.22, 1)`,\n },\n '&[data-state=\"closed\"]': {\n animation: `${animations.fadeOut} 200ms ease-in`,\n },\n '&[data-swipe=\"cancel\"]': {\n transition: 'transform 200ms ease-out',\n },\n '&[data-swipe=\"end\"]': {\n animation: `${swipeOut} 150ms ease-out`,\n },\n },\n\n variants: {\n // Reserve room on the right for the absolutely positioned dismiss button.\n dismissible: {\n true: { paddingRight: '$500' },\n false: {},\n },\n },\n defaultVariants: {\n dismissible: true,\n },\n})\n\nexport type StyledToastProps = ComponentPropsWithRef<typeof StyledToast>\n","import { Provider as RadixProvider } from '@radix-ui/react-toast'\n\nexport const Provider = RadixProvider\n","import type { ComponentPropsWithRef } from 'react'\nimport { Viewport } from '@radix-ui/react-toast'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// Owns the stack layout only; screen position and z-index belong to the\n// consumer. column-reverse shows the newest toast on top while the DOM keeps\n// mount order, preserving tab and announcement order.\nexport const StyledViewport = styled(Viewport, {\n listStyle: 'none',\n display: 'flex',\n flexDirection: 'column-reverse',\n gap: '$150',\n // Toast width from Figma. Definite value: a percentage would collapse to\n // content width inside content-sized containers.\n width: 344,\n maxWidth: '100%',\n margin: 0,\n padding: 0,\n})\n\nexport type StyledViewportProps = ComponentPropsWithRef<typeof StyledViewport>\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledViewport } from './viewport.styled'\nimport type { StyledViewportProps } from './viewport.styled'\n\nexport interface ViewportProps extends StyledViewportProps {\n /**\n * Accessible label of the viewport region. `{hotkey}` interpolates the\n * shortcut.\n * @default 'Notifications ({hotkey})'\n */\n label?: string\n\n /**\n * Keyboard shortcut that moves focus into the viewport.\n * @default ['F8']\n */\n hotkey?: string[]\n}\n\nexport const Viewport = React.forwardRef<\n ElementRef<typeof StyledViewport>,\n ViewportProps\n>((props, forwardRef) => <StyledViewport {...props} ref={forwardRef} />)\n\nViewport.displayName = 'Toast.Viewport'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Label = styled(Primitive.div, {\n gridArea: 'label',\n display: 'flex',\n alignItems: 'center',\n gap: '$100',\n marginBottom: '$150',\n fontFamily: '$body',\n fontSize: '$150',\n fontWeight: '$semibold',\n lineHeight: 1,\n textTransform: 'uppercase',\n color: '$text-inverted-secondary',\n})\n\nLabel.displayName = 'Toast.Label'\n","import React from 'react'\nimport type { ComponentPropsWithRef, ElementRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nconst StyledIconSlot = styled(Primitive.span, {\n display: 'inline-flex',\n alignItems: 'center',\n flexShrink: 0,\n})\n\nexport type IconSlotProps = ComponentPropsWithRef<typeof StyledIconSlot>\n\n// Decorative by default: the toast text carries the meaning.\nexport const IconSlot = React.forwardRef<\n ElementRef<typeof StyledIconSlot>,\n IconSlotProps\n>((props, forwardRef) => (\n <StyledIconSlot aria-hidden {...props} ref={forwardRef} />\n))\n\nIconSlot.displayName = 'Toast.IconSlot'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Media = styled(Primitive.div, {\n gridArea: 'media',\n flexShrink: 0,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n width: '$10',\n height: '$10',\n marginRight: '$150',\n})\n\nMedia.displayName = 'Toast.Media'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Content = styled(Primitive.div, {\n gridArea: 'content',\n display: 'flex',\n flexDirection: 'column',\n minWidth: 0,\n})\n\nContent.displayName = 'Toast.Content'\n","import { Title as RadixTitle } from '@radix-ui/react-toast'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Title = styled(RadixTitle, {\n fontFamily: '$heading',\n fontSize: '$175',\n fontWeight: '$semibold',\n lineHeight: 1.4,\n color: '$text-inverted',\n display: '-webkit-box',\n WebkitBoxOrient: 'vertical',\n WebkitLineClamp: 2,\n overflow: 'hidden',\n})\n\nTitle.displayName = 'Toast.Title'\n","import { Description as RadixDescription } from '@radix-ui/react-toast'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const Description = styled(RadixDescription, {\n fontFamily: '$body',\n fontSize: '$175',\n fontWeight: '$regular',\n lineHeight: 1.4,\n color: '$text-inverted-secondary',\n display: '-webkit-box',\n WebkitBoxOrient: 'vertical',\n WebkitLineClamp: 3,\n overflow: 'hidden',\n})\n\nDescription.displayName = 'Toast.Description'\n","import { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\n// Button and Link have no inverse variants yet, so the slot recolors them\n// with the inverse tokens for the inverted surface. Element selectors: the\n// slot only ever contains CTA buttons and links, and the DS components are\n// not selector-interpolatable (they export wrappers, not styled components).\n// Buttons are matched by order: the first is the primary CTA, any following\n// one is secondary. Stopgap — NOTI-5461 tracks replacing these overrides\n// with real inverse variants on Button/Link.\nexport const Actions = styled(Primitive.div, {\n display: 'flex',\n alignItems: 'center',\n gap: '$100',\n paddingTop: '$100',\n\n '&&& button': {\n backgroundColor: '$button-background-inverse',\n color: '$button-text-on-inverse',\n '&:hover, &[data-hovered]': {\n backgroundColor: '$button-background-inverse-hover',\n color: '$button-text-on-inverse',\n },\n '&:active, &[data-pressed]': {\n backgroundColor: '$button-background-inverse-pressed',\n color: '$button-text-on-inverse',\n },\n '&[aria-disabled=\"true\"]': {\n backgroundColor: '$button-background-inverse-disabled',\n color: '$button-text-on-inverse-disabled',\n },\n },\n\n '&&& button ~ button': {\n backgroundColor: '$button-background-inverse-secondary',\n borderColor: '$button-border-inverse-secondary',\n color: '$button-text-on-inverse-secondary',\n '&:hover, &[data-hovered]': {\n backgroundColor: '$button-background-inverse-secondary-hover',\n borderColor: '$button-border-inverse-secondary-hover',\n color: '$button-text-on-inverse-secondary',\n },\n '&:active, &[data-pressed]': {\n backgroundColor: '$button-background-inverse-secondary-pressed',\n borderColor: '$button-border-inverse-secondary-pressed',\n color: '$button-text-on-inverse-secondary',\n },\n },\n\n '&&& a': {\n // Link has no size variant and inherits font-size from context. The\n // inverted recolor is a stopgap — NOTI-5461 tracks moving it onto a\n // real Link inverse treatment.\n fontSize: '$175',\n color: '$text-interactive-on-inverted',\n '&:hover, &[data-hovered]': {\n color: '$text-interactive-on-inverted-hover',\n },\n '&:active, &[data-pressed]': {\n color: '$text-interactive-on-inverted-pressed',\n },\n },\n})\n\nActions.displayName = 'Toast.Actions'\n","import { Action as RadixAction } from '@radix-ui/react-toast'\n\n// Direct pass-through, meant to be used with `asChild` around a Button/Link\n// inside Toast.Actions. Radix requires `altText` so the action survives the\n// live-region announcement.\nexport const Action = RadixAction\n","import type { MouseEvent } from 'react'\nimport { Close } from '@radix-ui/react-toast'\nimport { styled } from '@mirohq/design-system-stitches'\nimport { IconButton } from '@mirohq/design-system-icon-button'\nimport type { IconButtonProps } from '@mirohq/design-system-icon-button'\nimport { IconCross } from '@mirohq/design-system-icons'\nimport { Tooltip } from '@mirohq/design-system-tooltip'\n\nconst StyledDismissButton = styled(IconButton, {\n position: 'absolute',\n top: '$50',\n right: '$50',\n\n // Ghost recolor for the inverted surface. Stopgap — NOTI-5461 tracks\n // replacing it with a real inverse variant on IconButton.\n variants: {\n variant: {\n ghost: {\n '&&&': {\n color: '$icon-inverted',\n backgroundColor: 'transparent',\n '&:hover, &:focus': {\n color: '$icon-inverted',\n backgroundColor: '$button-background-ghost-inverse-hover',\n },\n '&:active': {\n color: '$icon-inverted',\n backgroundColor: '$button-background-ghost-inverse-pressed',\n },\n },\n },\n },\n },\n})\n\nexport interface DismissButtonProps\n extends Omit<IconButtonProps, 'variant' | 'children'> {\n 'aria-label': string\n onDismiss?: () => void\n}\n\nexport const DismissButton = ({\n onDismiss,\n ...props\n}: DismissButtonProps): JSX.Element => {\n const handleClick = (event: MouseEvent): void => {\n event.stopPropagation()\n onDismiss?.()\n }\n\n return (\n <Tooltip>\n <Tooltip.Trigger asChild>\n <Close asChild>\n <StyledDismissButton\n variant='ghost'\n size='medium'\n onClick={handleClick}\n {...props}\n >\n <IconCross />\n </StyledDismissButton>\n </Close>\n </Tooltip.Trigger>\n <Tooltip.Portal>\n <Tooltip.Content>{props['aria-label']}</Tooltip.Content>\n </Tooltip.Portal>\n </Tooltip>\n )\n}\n\nDismissButton.displayName = 'Toast.DismissButton'\n","import React, { isValidElement } from 'react'\nimport type { ElementRef, ForwardRefExoticComponent, ReactNode } from 'react'\n\nimport { StyledToast } from './toast.styled'\nimport type { StyledToastProps } from './toast.styled'\nimport { Provider } from './partials/provider'\nimport { Viewport } from './partials/viewport'\nimport { Label } from './partials/label'\nimport { IconSlot } from './partials/icon-slot'\nimport { Media } from './partials/media'\nimport { Content } from './partials/content'\nimport { Title } from './partials/title'\nimport { Description } from './partials/description'\nimport { Actions } from './partials/actions'\nimport { Action } from './partials/action'\nimport { DismissButton } from './partials/dismiss-button'\n\nexport interface DismissalProps {\n /**\n * Whether to render the dismiss button.\n * @default true\n */\n dismissible?: true\n\n /**\n * aria-label for the dismiss button.\n */\n dismissLabel: string\n\n /**\n * Fired when the dismiss button is pressed, alongside the Radix close\n * (which flips `open` / fires `onOpenChange(false)`).\n */\n onDismiss?: () => void\n}\n\ninterface NotDismissibleProps {\n dismissible: false\n dismissLabel?: never\n onDismiss?: never\n}\n\ninterface ToastOwnProps extends Omit<StyledToastProps, 'dismissible'> {\n /**\n * Controlled open state. Omit it for an uncontrolled toast that closes\n * itself on dismiss, timeout, or swipe.\n */\n open?: boolean\n\n /**\n * Fired when the open state changes (dismiss press, timeout, swipe, Escape).\n * A controlled consumer removes the toast here.\n */\n onOpenChange?: (open: boolean) => void\n\n /**\n * Time in milliseconds before the toast auto-closes. `Infinity` keeps it\n * until dismissed. Pauses on viewport hover/focus and window blur.\n * @default 5000 — inherited from `Toast.Provider`\n */\n duration?: number\n\n /**\n * Announcement politeness: 'foreground' interrupts, 'background' waits.\n * @default 'foreground'\n */\n type?: 'foreground' | 'background'\n\n children?: ReactNode\n}\n\nexport type ToastProps = ToastOwnProps & (DismissalProps | NotDismissibleProps)\n\n/**\n * Toast built on Radix Toast. Must be rendered inside a `Toast.Provider`\n * with a `Toast.Viewport` (each toast portals into the viewport). Radix owns\n * the behavior: `open` / `onOpenChange`, `duration` with pause on\n * hover/focus/window-blur, swipe dismissal, the viewport hotkey, and\n * live-region announcements (politeness via `type`). The consumer owns which\n * toasts exist, their content, and where the viewport is positioned on\n * screen.\n *\n * @experimental Beta — the API may still change while teams adopt it.\n */\nexport const Toast = React.forwardRef<\n ElementRef<typeof StyledToast>,\n ToastProps\n>(\n (\n { dismissible = true, dismissLabel, onDismiss, children, ...props },\n forwardRef\n ) => {\n const showDismiss =\n dismissible && dismissLabel != null && dismissLabel.length > 0\n\n // Consumers compose flat children (the Radix anatomy); the root routes\n // Label/Media into their grid areas and wraps the rest into the internal\n // content column — same slot partition Banner does. Slot parts must be\n // direct children to be recognized.\n const items = React.Children.toArray(children)\n const isType = (child: ReactNode, type: unknown): boolean =>\n isValidElement(child) && child.type === type\n const label = items.find(child => isType(child, Label))\n const media = items.find(child => isType(child, Media))\n const content = items.filter(child => child !== label && child !== media)\n\n return (\n <StyledToast {...props} ref={forwardRef} dismissible={showDismiss}>\n {label}\n {media}\n {content.length > 0 && <Content>{content}</Content>}\n {showDismiss && (\n <DismissButton aria-label={dismissLabel} onDismiss={onDismiss} />\n )}\n </StyledToast>\n )\n }\n) as ForwardRefExoticComponent<ToastProps> & Partials\n\nexport interface Partials {\n Provider: typeof Provider\n Viewport: typeof Viewport\n Label: typeof Label\n IconSlot: typeof IconSlot\n Media: typeof Media\n Title: typeof Title\n Description: typeof Description\n Actions: typeof Actions\n Action: typeof Action\n}\n\nToast.Provider = Provider\nToast.Viewport = Viewport\nToast.Label = Label\nToast.IconSlot = IconSlot\nToast.Media = Media\nToast.Title = Title\nToast.Description = Description\nToast.Actions = Actions\nToast.Action = Action\n"],"names":["RadixProvider","Viewport","RadixTitle","RadixDescription","RadixAction"],"mappings":"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"}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import react__default, { ComponentPropsWithRef, ForwardRefExoticComponent, ReactNode } from 'react';
|
|
3
|
+
import * as _mirohq_design_system_stitches from '@mirohq/design-system-stitches';
|
|
4
|
+
import * as _radix_ui_react_toast from '@radix-ui/react-toast';
|
|
5
|
+
export { ToastActionProps, ToastProviderProps } from '@radix-ui/react-toast';
|
|
6
|
+
import * as _mirohq_design_system_primitive from '@mirohq/design-system-primitive';
|
|
7
|
+
|
|
8
|
+
/* Utilities */
|
|
9
|
+
/* ========================================================================== */
|
|
10
|
+
|
|
11
|
+
/** Returns a string with the given prefix followed by the given values. */
|
|
12
|
+
type Prefixed<K extends string, T> = `${K}${Extract<T, boolean | number | string>}`
|
|
13
|
+
|
|
14
|
+
type TransformProps<Props, Media> = {
|
|
15
|
+
[K in keyof Props]: (
|
|
16
|
+
| Props[K]
|
|
17
|
+
| (
|
|
18
|
+
& {
|
|
19
|
+
[KMedia in Prefixed<'@', 'initial' | keyof Media>]?: Props[K]
|
|
20
|
+
}
|
|
21
|
+
& {
|
|
22
|
+
[KMedia in string]: Props[K]
|
|
23
|
+
}
|
|
24
|
+
)
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
declare const StyledToast: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toast.ToastProps & react.RefAttributes<HTMLLIElement>>>, "dismissible"> & TransformProps<{
|
|
29
|
+
dismissible?: boolean | "true" | "false" | undefined;
|
|
30
|
+
}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLLIElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toast.ToastProps & react.RefAttributes<HTMLLIElement>>, {
|
|
31
|
+
dismissible?: boolean | "true" | "false" | undefined;
|
|
32
|
+
}, {}>;
|
|
33
|
+
type StyledToastProps = ComponentPropsWithRef<typeof StyledToast>;
|
|
34
|
+
|
|
35
|
+
declare const Provider: react.FC<_radix_ui_react_toast.ToastProviderProps>;
|
|
36
|
+
|
|
37
|
+
declare const StyledViewport: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toast.ToastViewportProps & react.RefAttributes<HTMLOListElement>>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLOListElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toast.ToastViewportProps & react.RefAttributes<HTMLOListElement>>, {}, {}>;
|
|
38
|
+
type StyledViewportProps = ComponentPropsWithRef<typeof StyledViewport>;
|
|
39
|
+
|
|
40
|
+
interface ViewportProps extends StyledViewportProps {
|
|
41
|
+
/**
|
|
42
|
+
* Accessible label of the viewport region. `{hotkey}` interpolates the
|
|
43
|
+
* shortcut.
|
|
44
|
+
* @default 'Notifications ({hotkey})'
|
|
45
|
+
*/
|
|
46
|
+
label?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Keyboard shortcut that moves focus into the viewport.
|
|
49
|
+
* @default ['F8']
|
|
50
|
+
*/
|
|
51
|
+
hotkey?: string[];
|
|
52
|
+
}
|
|
53
|
+
declare const Viewport: react__default.ForwardRefExoticComponent<Omit<ViewportProps, "ref"> & react__default.RefAttributes<HTMLOListElement>>;
|
|
54
|
+
|
|
55
|
+
declare const Label: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
|
|
56
|
+
|
|
57
|
+
declare const IconSlot: react__default.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react__default.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"span">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react__default.RefAttributes<HTMLSpanElement>, "ref"> & {
|
|
58
|
+
ref?: ((instance: HTMLSpanElement | null) => void | react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof react__default.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | react__default.RefObject<HTMLSpanElement> | null | undefined;
|
|
59
|
+
}, "ref"> & react__default.RefAttributes<HTMLSpanElement>>;
|
|
60
|
+
|
|
61
|
+
declare const Media: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
|
|
62
|
+
|
|
63
|
+
declare const Title: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toast.ToastTitleProps & react.RefAttributes<HTMLDivElement>>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toast.ToastTitleProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
|
|
64
|
+
|
|
65
|
+
declare const Description: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_radix_ui_react_toast.ToastDescriptionProps & react.RefAttributes<HTMLDivElement>>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_radix_ui_react_toast.ToastDescriptionProps & react.RefAttributes<HTMLDivElement>>, {}, {}>;
|
|
66
|
+
|
|
67
|
+
declare const Actions: react.ForwardRefExoticComponent<Omit<Omit<_mirohq_design_system_stitches.StyledComponentProps<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>>, never> & TransformProps<{}, {}> & _mirohq_design_system_stitches.CustomStylesProps, "ref"> & react.RefAttributes<HTMLDivElement>> & _mirohq_design_system_stitches.StitchesInternals<react.ForwardRefExoticComponent<_mirohq_design_system_primitive.PrimitiveProps<"div">>, {}, {}>;
|
|
68
|
+
|
|
69
|
+
declare const Action: react.ForwardRefExoticComponent<_radix_ui_react_toast.ToastActionProps & react.RefAttributes<HTMLButtonElement>>;
|
|
70
|
+
|
|
71
|
+
interface DismissalProps {
|
|
72
|
+
/**
|
|
73
|
+
* Whether to render the dismiss button.
|
|
74
|
+
* @default true
|
|
75
|
+
*/
|
|
76
|
+
dismissible?: true;
|
|
77
|
+
/**
|
|
78
|
+
* aria-label for the dismiss button.
|
|
79
|
+
*/
|
|
80
|
+
dismissLabel: string;
|
|
81
|
+
/**
|
|
82
|
+
* Fired when the dismiss button is pressed, alongside the Radix close
|
|
83
|
+
* (which flips `open` / fires `onOpenChange(false)`).
|
|
84
|
+
*/
|
|
85
|
+
onDismiss?: () => void;
|
|
86
|
+
}
|
|
87
|
+
interface NotDismissibleProps {
|
|
88
|
+
dismissible: false;
|
|
89
|
+
dismissLabel?: never;
|
|
90
|
+
onDismiss?: never;
|
|
91
|
+
}
|
|
92
|
+
interface ToastOwnProps extends Omit<StyledToastProps, 'dismissible'> {
|
|
93
|
+
/**
|
|
94
|
+
* Controlled open state. Omit it for an uncontrolled toast that closes
|
|
95
|
+
* itself on dismiss, timeout, or swipe.
|
|
96
|
+
*/
|
|
97
|
+
open?: boolean;
|
|
98
|
+
/**
|
|
99
|
+
* Fired when the open state changes (dismiss press, timeout, swipe, Escape).
|
|
100
|
+
* A controlled consumer removes the toast here.
|
|
101
|
+
*/
|
|
102
|
+
onOpenChange?: (open: boolean) => void;
|
|
103
|
+
/**
|
|
104
|
+
* Time in milliseconds before the toast auto-closes. `Infinity` keeps it
|
|
105
|
+
* until dismissed. Pauses on viewport hover/focus and window blur.
|
|
106
|
+
* @default 5000 — inherited from `Toast.Provider`
|
|
107
|
+
*/
|
|
108
|
+
duration?: number;
|
|
109
|
+
/**
|
|
110
|
+
* Announcement politeness: 'foreground' interrupts, 'background' waits.
|
|
111
|
+
* @default 'foreground'
|
|
112
|
+
*/
|
|
113
|
+
type?: 'foreground' | 'background';
|
|
114
|
+
children?: ReactNode;
|
|
115
|
+
}
|
|
116
|
+
type ToastProps = ToastOwnProps & (DismissalProps | NotDismissibleProps);
|
|
117
|
+
/**
|
|
118
|
+
* Toast built on Radix Toast. Must be rendered inside a `Toast.Provider`
|
|
119
|
+
* with a `Toast.Viewport` (each toast portals into the viewport). Radix owns
|
|
120
|
+
* the behavior: `open` / `onOpenChange`, `duration` with pause on
|
|
121
|
+
* hover/focus/window-blur, swipe dismissal, the viewport hotkey, and
|
|
122
|
+
* live-region announcements (politeness via `type`). The consumer owns which
|
|
123
|
+
* toasts exist, their content, and where the viewport is positioned on
|
|
124
|
+
* screen.
|
|
125
|
+
*
|
|
126
|
+
* @experimental Beta — the API may still change while teams adopt it.
|
|
127
|
+
*/
|
|
128
|
+
declare const Toast: ForwardRefExoticComponent<ToastProps> & Partials;
|
|
129
|
+
interface Partials {
|
|
130
|
+
Provider: typeof Provider;
|
|
131
|
+
Viewport: typeof Viewport;
|
|
132
|
+
Label: typeof Label;
|
|
133
|
+
IconSlot: typeof IconSlot;
|
|
134
|
+
Media: typeof Media;
|
|
135
|
+
Title: typeof Title;
|
|
136
|
+
Description: typeof Description;
|
|
137
|
+
Actions: typeof Actions;
|
|
138
|
+
Action: typeof Action;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
export { Toast };
|
|
142
|
+
export type { ToastProps, ViewportProps as ToastViewportProps };
|
package/package.json
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@mirohq/design-system-toast",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"author": "Miro",
|
|
6
|
+
"source": "src/index.ts",
|
|
7
|
+
"main": "dist/main.js",
|
|
8
|
+
"module": "dist/module.js",
|
|
9
|
+
"types": "dist/types.d.ts",
|
|
10
|
+
"sideEffects": false,
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"require": "./dist/main.js",
|
|
14
|
+
"import": "./dist/module.js",
|
|
15
|
+
"types": "./dist/types.d.ts"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist"
|
|
20
|
+
],
|
|
21
|
+
"publishConfig": {
|
|
22
|
+
"access": "public"
|
|
23
|
+
},
|
|
24
|
+
"peerDependencies": {
|
|
25
|
+
"@stitches/react": "^1.2.8",
|
|
26
|
+
"react": "^16.14 || ^17 || ^18 || ^19"
|
|
27
|
+
},
|
|
28
|
+
"dependencies": {
|
|
29
|
+
"@radix-ui/react-toast": "^1.2.19",
|
|
30
|
+
"@mirohq/design-system-icon-button": "^4.2.38",
|
|
31
|
+
"@mirohq/design-system-icons": "^1.43.1",
|
|
32
|
+
"@mirohq/design-system-primitive": "^2.2.1",
|
|
33
|
+
"@mirohq/design-system-stitches": "^3.3.31",
|
|
34
|
+
"@mirohq/design-system-styles": "^3.2.31",
|
|
35
|
+
"@mirohq/design-system-tooltip": "^4.4.33"
|
|
36
|
+
},
|
|
37
|
+
"scripts": {
|
|
38
|
+
"build": "rollup -c ../../../rollup.config.js",
|
|
39
|
+
"clean": "rm -rf dist",
|
|
40
|
+
"prebuild": "pnpm clean"
|
|
41
|
+
}
|
|
42
|
+
}
|