@spark-ui/components 12.1.2 → 13.0.1-beta.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/DialogTrigger-8oDlAJjU.d.mts +142 -0
- package/dist/DialogTrigger-8oDlAJjU.d.ts +142 -0
- package/dist/alert-dialog/index.d.mts +78 -38
- package/dist/alert-dialog/index.d.ts +78 -38
- package/dist/alert-dialog/index.js +187 -1341
- package/dist/alert-dialog/index.js.map +1 -1
- package/dist/alert-dialog/index.mjs +234 -89
- package/dist/alert-dialog/index.mjs.map +1 -1
- package/dist/avatar/index.d.mts +2 -2
- package/dist/avatar/index.d.ts +2 -2
- package/dist/chunk-2BSBKLHG.mjs +358 -0
- package/dist/chunk-2BSBKLHG.mjs.map +1 -0
- package/dist/chunk-D7YBYT5H.mjs +308 -0
- package/dist/chunk-D7YBYT5H.mjs.map +1 -0
- package/dist/chunk-HEKSVWYW.mjs +800 -0
- package/dist/chunk-HEKSVWYW.mjs.map +1 -0
- package/dist/chunk-TKAU6SMC.mjs +197 -0
- package/dist/chunk-TKAU6SMC.mjs.map +1 -0
- package/dist/chunk-WA56YHV3.mjs +358 -0
- package/dist/chunk-WA56YHV3.mjs.map +1 -0
- package/dist/chunk-XYK6V3JF.mjs +53 -0
- package/dist/chunk-XYK6V3JF.mjs.map +1 -0
- package/dist/chunk-XZ47F6TP.mjs +50 -0
- package/dist/chunk-XZ47F6TP.mjs.map +1 -0
- package/dist/dialog/index.d.mts +140 -7
- package/dist/dialog/index.d.ts +140 -7
- package/dist/dialog/index.mjs +308 -5
- package/dist/dialog/index.mjs.map +1 -1
- package/dist/docgen.json +3450 -3321
- package/dist/index-BRKaV3lI.d.mts +93 -0
- package/dist/index-BRKaV3lI.d.ts +93 -0
- package/dist/index-Cw_DIfiq.d.mts +93 -0
- package/dist/index-Cw_DIfiq.d.ts +93 -0
- package/dist/spinner/index.d.mts +2 -2
- package/dist/spinner/index.d.ts +2 -2
- package/dist/tabs/index.d.mts +3 -3
- package/dist/tabs/index.d.ts +3 -3
- package/dist/toast/index.d.mts +14 -10
- package/dist/toast/index.d.ts +14 -10
- package/dist/toast/index.js +26 -3
- package/dist/toast/index.js.map +1 -1
- package/dist/toast/index.mjs +26 -3
- package/dist/toast/index.mjs.map +1 -1
- package/package.json +5 -5
|
@@ -0,0 +1,308 @@
|
|
|
1
|
+
import {
|
|
2
|
+
IconButton
|
|
3
|
+
} from "./chunk-XYK6V3JF.mjs";
|
|
4
|
+
import {
|
|
5
|
+
Icon
|
|
6
|
+
} from "./chunk-UMUMFMFB.mjs";
|
|
7
|
+
|
|
8
|
+
// src/popover/Popover.tsx
|
|
9
|
+
import { Popover as RadixPopover } from "radix-ui";
|
|
10
|
+
|
|
11
|
+
// src/popover/PopoverContext.tsx
|
|
12
|
+
import { createContext, useContext, useState } from "react";
|
|
13
|
+
import { jsx } from "react/jsx-runtime";
|
|
14
|
+
var PopoverContext = createContext(null);
|
|
15
|
+
var ID_PREFIX = ":popover";
|
|
16
|
+
var PopoverProvider = ({
|
|
17
|
+
children,
|
|
18
|
+
intent
|
|
19
|
+
}) => {
|
|
20
|
+
const [headerId, setHeaderId] = useState(null);
|
|
21
|
+
return /* @__PURE__ */ jsx(
|
|
22
|
+
PopoverContext.Provider,
|
|
23
|
+
{
|
|
24
|
+
value: {
|
|
25
|
+
headerId,
|
|
26
|
+
setHeaderId,
|
|
27
|
+
intent
|
|
28
|
+
},
|
|
29
|
+
children
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
var usePopover = () => {
|
|
34
|
+
const context = useContext(PopoverContext);
|
|
35
|
+
if (!context) {
|
|
36
|
+
throw Error("usePopover must be used within a Popover provider");
|
|
37
|
+
}
|
|
38
|
+
return context;
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
// src/popover/Popover.tsx
|
|
42
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
43
|
+
var Popover = ({ children, intent = "surface", modal = false, ...rest }) => {
|
|
44
|
+
return /* @__PURE__ */ jsx2(PopoverProvider, { intent, children: /* @__PURE__ */ jsx2(RadixPopover.Root, { "data-spark-component": "popover", modal, ...rest, children }) });
|
|
45
|
+
};
|
|
46
|
+
Popover.displayName = "Popover";
|
|
47
|
+
|
|
48
|
+
// src/popover/PopoverAnchor.tsx
|
|
49
|
+
import { Popover as RadixPopover2 } from "radix-ui";
|
|
50
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
51
|
+
var Anchor = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ jsx3(RadixPopover2.Anchor, { "data-spark-component": "popover-anchor", ref, asChild, ...rest, children });
|
|
52
|
+
Anchor.displayName = "Popover.Anchor";
|
|
53
|
+
|
|
54
|
+
// src/popover/PopoverArrow.tsx
|
|
55
|
+
import { cva } from "class-variance-authority";
|
|
56
|
+
import { Popover as RadixPopover3 } from "radix-ui";
|
|
57
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
58
|
+
var Arrow = ({
|
|
59
|
+
asChild = false,
|
|
60
|
+
width = 16,
|
|
61
|
+
height = 8,
|
|
62
|
+
className,
|
|
63
|
+
ref,
|
|
64
|
+
...rest
|
|
65
|
+
}) => {
|
|
66
|
+
const { intent } = usePopover();
|
|
67
|
+
const styles2 = cva("visible", {
|
|
68
|
+
variants: {
|
|
69
|
+
intent: {
|
|
70
|
+
surface: "fill-surface",
|
|
71
|
+
main: "fill-main-container",
|
|
72
|
+
support: "fill-support-container",
|
|
73
|
+
accent: "fill-accent-container",
|
|
74
|
+
basic: "fill-basic-container",
|
|
75
|
+
success: "fill-success-container",
|
|
76
|
+
alert: "fill-alert-container",
|
|
77
|
+
danger: "fill-error-container",
|
|
78
|
+
info: "fill-info-container",
|
|
79
|
+
neutral: "fill-neutral-container"
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
defaultVariants: {
|
|
83
|
+
intent: "surface"
|
|
84
|
+
}
|
|
85
|
+
});
|
|
86
|
+
return /* @__PURE__ */ jsx4(
|
|
87
|
+
RadixPopover3.Arrow,
|
|
88
|
+
{
|
|
89
|
+
"data-spark-component": "popover-arrow",
|
|
90
|
+
ref,
|
|
91
|
+
className: styles2({ intent, className }),
|
|
92
|
+
asChild,
|
|
93
|
+
width,
|
|
94
|
+
height,
|
|
95
|
+
...rest
|
|
96
|
+
}
|
|
97
|
+
);
|
|
98
|
+
};
|
|
99
|
+
Arrow.displayName = "Popover.Arrow";
|
|
100
|
+
|
|
101
|
+
// src/popover/PopoverCloseButton.tsx
|
|
102
|
+
import { Close as CloseSVG } from "@spark-ui/icons/Close";
|
|
103
|
+
import { cx } from "class-variance-authority";
|
|
104
|
+
import { Popover as RadixPopover4 } from "radix-ui";
|
|
105
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
106
|
+
var CloseButton = ({
|
|
107
|
+
"aria-label": ariaLabel,
|
|
108
|
+
className,
|
|
109
|
+
ref,
|
|
110
|
+
...rest
|
|
111
|
+
}) => {
|
|
112
|
+
return /* @__PURE__ */ jsx5(
|
|
113
|
+
RadixPopover4.Close,
|
|
114
|
+
{
|
|
115
|
+
"data-spark-component": "popover-close-button",
|
|
116
|
+
ref,
|
|
117
|
+
className: cx("right-lg top-md absolute", className),
|
|
118
|
+
asChild: true,
|
|
119
|
+
...rest,
|
|
120
|
+
children: /* @__PURE__ */ jsx5(IconButton, { size: "sm", intent: "neutral", design: "ghost", "aria-label": ariaLabel, children: /* @__PURE__ */ jsx5(Icon, { children: /* @__PURE__ */ jsx5(CloseSVG, {}) }) })
|
|
121
|
+
}
|
|
122
|
+
);
|
|
123
|
+
};
|
|
124
|
+
CloseButton.displayName = "Popover.CloseButton";
|
|
125
|
+
|
|
126
|
+
// src/popover/PopoverContent.tsx
|
|
127
|
+
import { Popover as RadixPopover5 } from "radix-ui";
|
|
128
|
+
|
|
129
|
+
// src/popover/PopoverContent.styles.ts
|
|
130
|
+
import { cva as cva2 } from "class-variance-authority";
|
|
131
|
+
var styles = cva2(
|
|
132
|
+
[
|
|
133
|
+
"rounded-md",
|
|
134
|
+
"shadow-sm",
|
|
135
|
+
"focus-visible:outline-hidden focus-visible:u-outline",
|
|
136
|
+
"max-h-(--radix-popper-available-height) overflow-y-auto"
|
|
137
|
+
],
|
|
138
|
+
{
|
|
139
|
+
variants: {
|
|
140
|
+
intent: {
|
|
141
|
+
surface: "bg-surface text-on-surface",
|
|
142
|
+
main: "bg-main-container text-on-main-container",
|
|
143
|
+
support: "bg-support-container text-on-support-container",
|
|
144
|
+
accent: "bg-accent-container text-on-accent-container",
|
|
145
|
+
basic: "bg-basic-container text-on-basic-container",
|
|
146
|
+
success: "bg-success-container text-on-success-container",
|
|
147
|
+
alert: "bg-alert-container text-on-alert-container",
|
|
148
|
+
danger: "bg-error-container text-on-error-container",
|
|
149
|
+
info: "bg-info-container text-on-info-container",
|
|
150
|
+
neutral: "bg-neutral-container text-on-neutral-container"
|
|
151
|
+
},
|
|
152
|
+
matchTriggerWidth: {
|
|
153
|
+
true: "w-(--radix-popper-anchor-width)"
|
|
154
|
+
},
|
|
155
|
+
enforceBoundaries: {
|
|
156
|
+
true: ["max-w-(--radix-popper-available-width)"]
|
|
157
|
+
},
|
|
158
|
+
inset: {
|
|
159
|
+
true: "overflow-hidden",
|
|
160
|
+
false: "p-lg"
|
|
161
|
+
},
|
|
162
|
+
elevation: {
|
|
163
|
+
dropdown: "z-dropdown",
|
|
164
|
+
popover: "z-popover"
|
|
165
|
+
}
|
|
166
|
+
},
|
|
167
|
+
compoundVariants: [
|
|
168
|
+
{
|
|
169
|
+
inset: false,
|
|
170
|
+
/**
|
|
171
|
+
* When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.
|
|
172
|
+
*/
|
|
173
|
+
class: "has-data-[spark-component=popover-close-button]:pr-3xl"
|
|
174
|
+
},
|
|
175
|
+
{
|
|
176
|
+
enforceBoundaries: false,
|
|
177
|
+
matchTriggerWidth: false,
|
|
178
|
+
class: "max-w-[min(var(--spacing-sz-384),100vw)]"
|
|
179
|
+
}
|
|
180
|
+
],
|
|
181
|
+
defaultVariants: {
|
|
182
|
+
matchTriggerWidth: false,
|
|
183
|
+
enforceBoundaries: false,
|
|
184
|
+
inset: false,
|
|
185
|
+
intent: "surface",
|
|
186
|
+
elevation: "popover"
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
);
|
|
190
|
+
|
|
191
|
+
// src/popover/PopoverContent.tsx
|
|
192
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
193
|
+
var Content = ({
|
|
194
|
+
// Spark props
|
|
195
|
+
className,
|
|
196
|
+
children,
|
|
197
|
+
matchTriggerWidth = false,
|
|
198
|
+
// Radix props
|
|
199
|
+
align = "center",
|
|
200
|
+
arrowPadding = 16,
|
|
201
|
+
// In order not to overlap the arrow on the rounded corners of the popover.
|
|
202
|
+
asChild = false,
|
|
203
|
+
avoidCollisions = true,
|
|
204
|
+
"aria-labelledby": ariaLabelledBy,
|
|
205
|
+
collisionBoundary,
|
|
206
|
+
collisionPadding = 0,
|
|
207
|
+
hideWhenDetached = false,
|
|
208
|
+
side = "bottom",
|
|
209
|
+
sideOffset = 8,
|
|
210
|
+
sticky = "partial",
|
|
211
|
+
inset = false,
|
|
212
|
+
elevation = "popover",
|
|
213
|
+
ref,
|
|
214
|
+
...rest
|
|
215
|
+
}) => {
|
|
216
|
+
const { headerId, intent } = usePopover();
|
|
217
|
+
return /* @__PURE__ */ jsx6(
|
|
218
|
+
RadixPopover5.Content,
|
|
219
|
+
{
|
|
220
|
+
"aria-labelledby": headerId || ariaLabelledBy,
|
|
221
|
+
className: styles({
|
|
222
|
+
enforceBoundaries: !!collisionBoundary,
|
|
223
|
+
matchTriggerWidth,
|
|
224
|
+
inset,
|
|
225
|
+
elevation,
|
|
226
|
+
intent,
|
|
227
|
+
className
|
|
228
|
+
}),
|
|
229
|
+
"data-spark-component": "popover-content",
|
|
230
|
+
ref,
|
|
231
|
+
...{
|
|
232
|
+
align,
|
|
233
|
+
arrowPadding,
|
|
234
|
+
asChild,
|
|
235
|
+
avoidCollisions,
|
|
236
|
+
collisionBoundary,
|
|
237
|
+
collisionPadding,
|
|
238
|
+
hideWhenDetached,
|
|
239
|
+
side,
|
|
240
|
+
sideOffset,
|
|
241
|
+
sticky
|
|
242
|
+
},
|
|
243
|
+
...rest,
|
|
244
|
+
children
|
|
245
|
+
}
|
|
246
|
+
);
|
|
247
|
+
};
|
|
248
|
+
Content.displayName = "Popover.Content";
|
|
249
|
+
|
|
250
|
+
// src/popover/PopoverHeader.tsx
|
|
251
|
+
import { cx as cx2 } from "class-variance-authority";
|
|
252
|
+
import { useId, useLayoutEffect } from "react";
|
|
253
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
254
|
+
var Header = ({ children, className, ref, ...rest }) => {
|
|
255
|
+
const id = `${ID_PREFIX}-header-${useId()}`;
|
|
256
|
+
const { setHeaderId } = usePopover();
|
|
257
|
+
useLayoutEffect(() => {
|
|
258
|
+
setHeaderId(id);
|
|
259
|
+
return () => setHeaderId(null);
|
|
260
|
+
}, [id, setHeaderId]);
|
|
261
|
+
return /* @__PURE__ */ jsx7("header", { id, ref, className: cx2("mb-md text-headline-2", className), ...rest, children });
|
|
262
|
+
};
|
|
263
|
+
Header.displayName = "Popover.Header";
|
|
264
|
+
|
|
265
|
+
// src/popover/PopoverPortal.tsx
|
|
266
|
+
import { Popover as RadixPopover6 } from "radix-ui";
|
|
267
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
268
|
+
var Portal = ({ children, ...rest }) => /* @__PURE__ */ jsx8(RadixPopover6.Portal, { ...rest, children });
|
|
269
|
+
Portal.displayName = "Popover.Portal";
|
|
270
|
+
|
|
271
|
+
// src/popover/PopoverTrigger.tsx
|
|
272
|
+
import { Popover as RadixPopover7 } from "radix-ui";
|
|
273
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
274
|
+
var Trigger = ({ asChild = false, children, ref, ...rest }) => /* @__PURE__ */ jsx9(
|
|
275
|
+
RadixPopover7.Trigger,
|
|
276
|
+
{
|
|
277
|
+
"data-spark-component": "popover-trigger",
|
|
278
|
+
ref,
|
|
279
|
+
asChild,
|
|
280
|
+
...rest,
|
|
281
|
+
children
|
|
282
|
+
}
|
|
283
|
+
);
|
|
284
|
+
Trigger.displayName = "Popover.Trigger";
|
|
285
|
+
|
|
286
|
+
// src/popover/index.ts
|
|
287
|
+
var Popover2 = Object.assign(Popover, {
|
|
288
|
+
Anchor,
|
|
289
|
+
Arrow,
|
|
290
|
+
CloseButton,
|
|
291
|
+
Content,
|
|
292
|
+
Header,
|
|
293
|
+
Portal,
|
|
294
|
+
Trigger
|
|
295
|
+
});
|
|
296
|
+
Popover2.displayName = "Popover";
|
|
297
|
+
Anchor.displayName = "Popover.Anchor";
|
|
298
|
+
Arrow.displayName = "Popover.Arrow";
|
|
299
|
+
CloseButton.displayName = "Popover.CloseButton";
|
|
300
|
+
Content.displayName = "Popover.Content";
|
|
301
|
+
Header.displayName = "Popover.Header";
|
|
302
|
+
Portal.displayName = "Popover.Portal";
|
|
303
|
+
Trigger.displayName = "Popover.Trigger";
|
|
304
|
+
|
|
305
|
+
export {
|
|
306
|
+
Popover2 as Popover
|
|
307
|
+
};
|
|
308
|
+
//# sourceMappingURL=chunk-D7YBYT5H.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/popover/Popover.tsx","../src/popover/PopoverContext.tsx","../src/popover/PopoverAnchor.tsx","../src/popover/PopoverArrow.tsx","../src/popover/PopoverCloseButton.tsx","../src/popover/PopoverContent.tsx","../src/popover/PopoverContent.styles.ts","../src/popover/PopoverHeader.tsx","../src/popover/PopoverPortal.tsx","../src/popover/PopoverTrigger.tsx","../src/popover/index.ts"],"sourcesContent":["import { Popover as RadixPopover } from 'radix-ui'\n\nimport { type PopoverIntent, PopoverProvider } from './PopoverContext'\n\nexport type PopoverProps = RadixPopover.PopoverProps & {\n intent?: PopoverIntent\n}\n\nexport const Popover = ({ children, intent = 'surface', modal = false, ...rest }: PopoverProps) => {\n return (\n <PopoverProvider intent={intent}>\n <RadixPopover.Root data-spark-component=\"popover\" modal={modal} {...rest}>\n {children}\n </RadixPopover.Root>\n </PopoverProvider>\n )\n}\n\nPopover.displayName = 'Popover'\n","import { createContext, type ReactNode, useContext, useState } from 'react'\n\ntype HeaderId = string | null\n\nexport type PopoverIntent =\n | 'surface'\n | 'main'\n | 'support'\n | 'accent'\n | 'basic'\n | 'success'\n | 'alert'\n | 'danger'\n | 'info'\n | 'neutral'\nexport interface PopoverContextState {\n headerId: HeaderId\n setHeaderId: (id: HeaderId) => void\n intent: PopoverIntent\n}\n\nconst PopoverContext = createContext<PopoverContextState | null>(null)\n\nexport const ID_PREFIX = ':popover'\n\nexport const PopoverProvider = ({\n children,\n intent,\n}: {\n children: ReactNode\n intent: PopoverIntent\n}) => {\n const [headerId, setHeaderId] = useState<HeaderId>(null)\n\n return (\n <PopoverContext.Provider\n value={{\n headerId,\n setHeaderId,\n intent,\n }}\n >\n {children}\n </PopoverContext.Provider>\n )\n}\n\nexport const usePopover = () => {\n const context = useContext(PopoverContext)\n\n if (!context) {\n throw Error('usePopover must be used within a Popover provider')\n }\n\n return context\n}\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type AnchorProps = RadixPopover.PopoverAnchorProps & {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Anchor = ({ asChild = false, children, ref, ...rest }: AnchorProps) => (\n <RadixPopover.Anchor data-spark-component=\"popover-anchor\" ref={ref} asChild={asChild} {...rest}>\n {children}\n </RadixPopover.Anchor>\n)\n\nAnchor.displayName = 'Popover.Anchor'\n","import { cva } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { usePopover } from './PopoverContext'\n\nexport type ArrowProps = RadixPopover.PopoverArrowProps & {\n ref?: Ref<SVGSVGElement>\n}\n\nexport const Arrow = ({\n asChild = false,\n width = 16,\n height = 8,\n className,\n ref,\n ...rest\n}: ArrowProps) => {\n const { intent } = usePopover()\n\n /**\n * This is necessary to override a Radix UI behaviour.\n * Radix hides the arrow when the Popover is too misaligned from its trigger element.\n */\n const styles = cva('visible', {\n variants: {\n intent: {\n surface: 'fill-surface',\n main: 'fill-main-container',\n support: 'fill-support-container',\n accent: 'fill-accent-container',\n basic: 'fill-basic-container',\n success: 'fill-success-container',\n alert: 'fill-alert-container',\n danger: 'fill-error-container',\n info: 'fill-info-container',\n neutral: 'fill-neutral-container',\n },\n },\n defaultVariants: {\n intent: 'surface',\n },\n })\n\n return (\n <RadixPopover.Arrow\n data-spark-component=\"popover-arrow\"\n ref={ref}\n className={styles({ intent, className })}\n asChild={asChild}\n width={width}\n height={height}\n {...rest}\n />\n )\n}\n\nArrow.displayName = 'Popover.Arrow'\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\nimport { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { IconButton } from '../icon-button'\n\nexport type CloseButtonProps = RadixPopover.PopoverCloseProps & {\n 'aria-label': string\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const CloseButton = ({\n 'aria-label': ariaLabel,\n className,\n ref,\n ...rest\n}: CloseButtonProps) => {\n return (\n <RadixPopover.Close\n data-spark-component=\"popover-close-button\"\n ref={ref}\n className={cx('right-lg top-md absolute', className)}\n asChild\n {...rest}\n >\n <IconButton size=\"sm\" intent=\"neutral\" design=\"ghost\" aria-label={ariaLabel}>\n <Icon>\n <CloseSVG />\n </Icon>\n </IconButton>\n </RadixPopover.Close>\n )\n}\n\nCloseButton.displayName = 'Popover.CloseButton'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { styles, type StylesProps } from './PopoverContent.styles'\nimport { usePopover } from './PopoverContext'\n\nexport type ContentProps = RadixPopover.PopoverContentProps &\n StylesProps & {\n ref?: Ref<HTMLDivElement>\n }\n\nexport const Content = ({\n // Spark props\n className,\n children,\n matchTriggerWidth = false,\n // Radix props\n align = 'center',\n arrowPadding = 16, // In order not to overlap the arrow on the rounded corners of the popover.\n asChild = false,\n avoidCollisions = true,\n 'aria-labelledby': ariaLabelledBy,\n collisionBoundary,\n collisionPadding = 0,\n hideWhenDetached = false,\n side = 'bottom',\n sideOffset = 8,\n sticky = 'partial',\n inset = false,\n elevation = 'popover',\n ref,\n ...rest\n}: ContentProps) => {\n const { headerId, intent } = usePopover()\n\n return (\n <RadixPopover.Content\n aria-labelledby={headerId || ariaLabelledBy}\n className={styles({\n enforceBoundaries: !!collisionBoundary,\n matchTriggerWidth,\n inset,\n elevation,\n intent,\n className,\n })}\n data-spark-component=\"popover-content\"\n ref={ref}\n {...{\n align,\n arrowPadding,\n asChild,\n avoidCollisions,\n collisionBoundary,\n collisionPadding,\n hideWhenDetached,\n side,\n sideOffset,\n sticky,\n }}\n {...rest}\n >\n {children}\n </RadixPopover.Content>\n )\n}\n\nContent.displayName = 'Popover.Content'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const styles = cva(\n [\n 'rounded-md',\n 'shadow-sm',\n 'focus-visible:outline-hidden focus-visible:u-outline',\n 'max-h-(--radix-popper-available-height) overflow-y-auto',\n ],\n {\n variants: {\n intent: {\n surface: 'bg-surface text-on-surface',\n main: 'bg-main-container text-on-main-container',\n support: 'bg-support-container text-on-support-container',\n accent: 'bg-accent-container text-on-accent-container',\n basic: 'bg-basic-container text-on-basic-container',\n success: 'bg-success-container text-on-success-container',\n alert: 'bg-alert-container text-on-alert-container',\n danger: 'bg-error-container text-on-error-container',\n info: 'bg-info-container text-on-info-container',\n neutral: 'bg-neutral-container text-on-neutral-container',\n },\n matchTriggerWidth: {\n true: 'w-(--radix-popper-anchor-width)',\n },\n enforceBoundaries: {\n true: ['max-w-(--radix-popper-available-width)'],\n },\n\n inset: {\n true: 'overflow-hidden',\n false: 'p-lg',\n },\n elevation: {\n dropdown: 'z-dropdown',\n popover: 'z-popover',\n },\n },\n compoundVariants: [\n {\n inset: false,\n /**\n * When there is a close button, padding to the right side must be adjusted to avoid content overlapping with it.\n */\n class: 'has-data-[spark-component=popover-close-button]:pr-3xl',\n },\n {\n enforceBoundaries: false,\n matchTriggerWidth: false,\n class: 'max-w-[min(var(--spacing-sz-384),100vw)]',\n },\n ],\n defaultVariants: {\n matchTriggerWidth: false,\n enforceBoundaries: false,\n inset: false,\n intent: 'surface',\n elevation: 'popover',\n },\n }\n)\n\nexport type StylesProps = VariantProps<typeof styles>\n","import { cx } from 'class-variance-authority'\nimport { type ReactNode, Ref, useId, useLayoutEffect } from 'react'\n\nimport { ID_PREFIX, usePopover } from './PopoverContext'\n\nexport interface HeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Header = ({ children, className, ref, ...rest }: HeaderProps) => {\n const id = `${ID_PREFIX}-header-${useId()}`\n const { setHeaderId } = usePopover()\n\n useLayoutEffect(() => {\n setHeaderId(id)\n\n return () => setHeaderId(null)\n }, [id, setHeaderId])\n\n return (\n <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>\n {children}\n </header>\n )\n}\n\nHeader.displayName = 'Popover.Header'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { ReactElement } from 'react'\n\nexport type PortalProps = RadixPopover.PopoverPortalProps\n\nexport const Portal = ({ children, ...rest }: PortalProps): ReactElement => (\n <RadixPopover.Portal {...rest}>{children}</RadixPopover.Portal>\n)\n\nPortal.displayName = 'Popover.Portal'\n","import { Popover as RadixPopover } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type TriggerProps = RadixPopover.PopoverTriggerProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({ asChild = false, children, ref, ...rest }: TriggerProps) => (\n <RadixPopover.Trigger\n data-spark-component=\"popover-trigger\"\n ref={ref}\n asChild={asChild}\n {...rest}\n >\n {children}\n </RadixPopover.Trigger>\n)\n\nTrigger.displayName = 'Popover.Trigger'\n","import { Popover as Root } from './Popover'\nimport { Anchor } from './PopoverAnchor'\nimport { Arrow } from './PopoverArrow'\nimport { CloseButton } from './PopoverCloseButton'\nimport { Content } from './PopoverContent'\nimport { Header } from './PopoverHeader'\nimport { Portal } from './PopoverPortal'\nimport { Trigger } from './PopoverTrigger'\n\nexport const Popover: typeof Root & {\n Anchor: typeof Anchor\n Arrow: typeof Arrow\n CloseButton: typeof CloseButton\n Content: typeof Content\n Header: typeof Header\n Portal: typeof Portal\n Trigger: typeof Trigger\n} = Object.assign(Root, {\n Anchor,\n Arrow,\n CloseButton,\n Content,\n Header,\n Portal,\n Trigger,\n})\n\nPopover.displayName = 'Popover'\nAnchor.displayName = 'Popover.Anchor'\nArrow.displayName = 'Popover.Arrow'\nCloseButton.displayName = 'Popover.CloseButton'\nContent.displayName = 'Popover.Content'\nHeader.displayName = 'Popover.Header'\nPortal.displayName = 'Popover.Portal'\nTrigger.displayName = 'Popover.Trigger'\n"],"mappings":"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","names":["jsx","RadixPopover","jsx","RadixPopover","jsx","styles","RadixPopover","RadixPopover","jsx","RadixPopover","RadixPopover","cva","jsx","RadixPopover","cx","jsx","cx","RadixPopover","jsx","RadixPopover","jsx","Popover"]}
|