@spark-ui/components 13.0.2 → 13.0.3-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/DialogTrigger-woU7vsJi.d.mts +142 -0
- package/dist/DialogTrigger-woU7vsJi.d.ts +142 -0
- package/dist/avatar/index.mjs +2 -2
- package/dist/carousel/index.mjs +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-WLI4EPS6.mjs +358 -0
- package/dist/chunk-WLI4EPS6.mjs.map +1 -0
- package/dist/chunk-XYK6V3JF.mjs +53 -0
- package/dist/chunk-XYK6V3JF.mjs.map +1 -0
- package/dist/combobox/index.mjs +3 -3
- package/dist/dialog/index.mjs +2 -2
- package/dist/docgen.json +3036 -2846
- package/dist/drawer/index.d.mts +37 -29
- package/dist/drawer/index.d.ts +37 -29
- package/dist/drawer/index.js +125 -89
- package/dist/drawer/index.js.map +1 -1
- package/dist/drawer/index.mjs +127 -89
- package/dist/drawer/index.mjs.map +1 -1
- package/dist/dropdown/index.mjs +2 -2
- package/dist/file-upload/index.mjs +3 -3
- 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/pagination/index.mjs +3 -3
- package/dist/popover/index.mjs +1 -1
- package/dist/scrolling-list/index.mjs +3 -3
- package/dist/snackbar/index.mjs +3 -3
- package/dist/stepper/index.mjs +2 -2
- package/dist/tabs/index.mjs +3 -3
- package/dist/toast/index.mjs +3 -3
- package/package.json +5 -5
package/dist/drawer/index.mjs
CHANGED
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import {
|
|
2
2
|
IconButton
|
|
3
3
|
} from "../chunk-DCXWGQVZ.mjs";
|
|
4
|
+
import "../chunk-2YM6GKWW.mjs";
|
|
5
|
+
import "../chunk-GAK4SC2F.mjs";
|
|
4
6
|
import {
|
|
5
7
|
Icon
|
|
6
8
|
} from "../chunk-UMUMFMFB.mjs";
|
|
7
|
-
import "../chunk-2YM6GKWW.mjs";
|
|
8
|
-
import "../chunk-GAK4SC2F.mjs";
|
|
9
9
|
import "../chunk-KEGAAGJW.mjs";
|
|
10
|
-
import
|
|
10
|
+
import {
|
|
11
|
+
Slot
|
|
12
|
+
} from "../chunk-6QCEPQ3U.mjs";
|
|
11
13
|
|
|
12
14
|
// src/drawer/Drawer.tsx
|
|
13
|
-
import { Dialog as
|
|
15
|
+
import { Dialog as BaseDialog } from "@base-ui-components/react/dialog";
|
|
14
16
|
|
|
15
17
|
// src/drawer/DrawerContext.tsx
|
|
16
18
|
import { createContext, useContext } from "react";
|
|
@@ -40,7 +42,12 @@ var useDrawer = () => {
|
|
|
40
42
|
|
|
41
43
|
// src/drawer/Drawer.tsx
|
|
42
44
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
43
|
-
var Drawer = ({
|
|
45
|
+
var Drawer = ({ onOpenChange, withFade = false, ...props }) => {
|
|
46
|
+
const handleOpenChange = onOpenChange ? (open, _eventDetails) => {
|
|
47
|
+
onOpenChange(open);
|
|
48
|
+
} : void 0;
|
|
49
|
+
return /* @__PURE__ */ jsx2(DrawerProvider, { withFade, children: /* @__PURE__ */ jsx2(BaseDialog.Root, { "data-spark-component": "drawer", onOpenChange: handleOpenChange, ...props }) });
|
|
50
|
+
};
|
|
44
51
|
Drawer.displayName = "Drawer.Root";
|
|
45
52
|
|
|
46
53
|
// src/drawer/DrawerBody.tsx
|
|
@@ -103,23 +110,35 @@ import { Close as CloseSVG } from "@spark-ui/icons/Close";
|
|
|
103
110
|
import { cx } from "class-variance-authority";
|
|
104
111
|
|
|
105
112
|
// src/drawer/DrawerClose.tsx
|
|
106
|
-
import { Dialog as
|
|
113
|
+
import { Dialog as BaseDialog2 } from "@base-ui-components/react/dialog";
|
|
114
|
+
|
|
115
|
+
// src/drawer/useRenderSlot.tsx
|
|
107
116
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
108
|
-
|
|
117
|
+
function useRenderSlot(asChild, defaultTag) {
|
|
118
|
+
const Component = asChild ? Slot : defaultTag;
|
|
119
|
+
return asChild ? ({ ...props }) => /* @__PURE__ */ jsx4(Component, { ...props }) : void 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// src/drawer/DrawerClose.tsx
|
|
123
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
124
|
+
var DrawerClose = ({ asChild = false, ...props }) => {
|
|
125
|
+
const renderSlot = useRenderSlot(asChild, "button");
|
|
126
|
+
return /* @__PURE__ */ jsx5(BaseDialog2.Close, { "data-spark-component": "drawer-close", render: renderSlot, ...props });
|
|
127
|
+
};
|
|
109
128
|
DrawerClose.displayName = "Drawer.Close";
|
|
110
129
|
|
|
111
130
|
// src/drawer/DrawerCloseButton.tsx
|
|
112
|
-
import { jsx as
|
|
131
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
113
132
|
var DrawerCloseButton = ({
|
|
114
133
|
"aria-label": ariaLabel,
|
|
115
134
|
className,
|
|
116
135
|
size = "md",
|
|
117
136
|
intent = "neutral",
|
|
118
137
|
design = "ghost",
|
|
119
|
-
children = /* @__PURE__ */
|
|
138
|
+
children = /* @__PURE__ */ jsx6(CloseSVG, {}),
|
|
120
139
|
ref,
|
|
121
140
|
...rest
|
|
122
|
-
}) => /* @__PURE__ */
|
|
141
|
+
}) => /* @__PURE__ */ jsx6(
|
|
123
142
|
DrawerClose,
|
|
124
143
|
{
|
|
125
144
|
"data-spark-component": "drawer-close-button",
|
|
@@ -127,20 +146,22 @@ var DrawerCloseButton = ({
|
|
|
127
146
|
className: cx(["absolute", "top-sm", "right-xl"], className),
|
|
128
147
|
asChild: true,
|
|
129
148
|
...rest,
|
|
130
|
-
children: /* @__PURE__ */
|
|
149
|
+
children: /* @__PURE__ */ jsx6(IconButton, { intent, size, design, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx6(Icon, { children }) })
|
|
131
150
|
}
|
|
132
151
|
);
|
|
133
152
|
DrawerCloseButton.displayName = "Drawer.CloseButton";
|
|
134
153
|
|
|
135
154
|
// src/drawer/DrawerContent.tsx
|
|
136
|
-
import { Dialog as
|
|
155
|
+
import { Dialog as BaseDialog3 } from "@base-ui-components/react/dialog";
|
|
156
|
+
import { cx as cx2 } from "class-variance-authority";
|
|
137
157
|
|
|
138
158
|
// src/drawer/DrawerContent.styles.tsx
|
|
139
159
|
import { cva as cva2 } from "class-variance-authority";
|
|
140
160
|
var drawerContentStyles = cva2(
|
|
141
161
|
[
|
|
142
162
|
"fixed z-modal flex flex-col bg-surface shadow-md",
|
|
143
|
-
|
|
163
|
+
// Base UI uses data-open and data-closed for transitions
|
|
164
|
+
"data-open:animation-duration-400 data-closed:animation-duration-200"
|
|
144
165
|
],
|
|
145
166
|
{
|
|
146
167
|
variants: {
|
|
@@ -154,25 +175,25 @@ var drawerContentStyles = cva2(
|
|
|
154
175
|
side: {
|
|
155
176
|
right: [
|
|
156
177
|
"inset-y-0 right-0",
|
|
157
|
-
"data-
|
|
158
|
-
"data-
|
|
178
|
+
"data-open:animate-slide-in-right ",
|
|
179
|
+
"data-closed:animate-slide-out-right"
|
|
159
180
|
],
|
|
160
181
|
left: [
|
|
161
182
|
"inset-y-0 left-0",
|
|
162
|
-
"data-
|
|
163
|
-
"data-
|
|
183
|
+
"data-open:animate-slide-in-left",
|
|
184
|
+
"data-closed:animate-slide-out-left"
|
|
164
185
|
],
|
|
165
186
|
top: [
|
|
166
187
|
"top-0 left-0",
|
|
167
188
|
"w-screen",
|
|
168
|
-
"data-
|
|
169
|
-
"data-
|
|
189
|
+
"data-open:animate-slide-in-top",
|
|
190
|
+
"data-closed:animate-slide-out-top"
|
|
170
191
|
],
|
|
171
192
|
bottom: [
|
|
172
193
|
"bottom-0 left-0",
|
|
173
194
|
"w-screen",
|
|
174
|
-
"data-
|
|
175
|
-
"data-
|
|
195
|
+
"data-open:animate-slide-in-bottom",
|
|
196
|
+
"data-closed:animate-slide-out-bottom"
|
|
176
197
|
]
|
|
177
198
|
}
|
|
178
199
|
},
|
|
@@ -226,7 +247,7 @@ var drawerContentStyles = cva2(
|
|
|
226
247
|
);
|
|
227
248
|
|
|
228
249
|
// src/drawer/DrawerContent.tsx
|
|
229
|
-
import { jsx as
|
|
250
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
230
251
|
var DrawerContent = ({
|
|
231
252
|
className,
|
|
232
253
|
size = "md",
|
|
@@ -234,62 +255,71 @@ var DrawerContent = ({
|
|
|
234
255
|
onInteractOutside,
|
|
235
256
|
ref,
|
|
236
257
|
...rest
|
|
237
|
-
}) =>
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
"
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
)
|
|
258
|
+
}) => {
|
|
259
|
+
const handleInteractOutside = onInteractOutside ? (event) => {
|
|
260
|
+
const e = event;
|
|
261
|
+
const isForegroundElement = e.target?.closest(".z-toast, .z-popover");
|
|
262
|
+
if (isForegroundElement) {
|
|
263
|
+
e.preventDefault();
|
|
264
|
+
}
|
|
265
|
+
onInteractOutside?.(e);
|
|
266
|
+
} : void 0;
|
|
267
|
+
return /* @__PURE__ */ jsx7(
|
|
268
|
+
BaseDialog3.Popup,
|
|
269
|
+
{
|
|
270
|
+
ref,
|
|
271
|
+
"data-spark-component": "drawer-content",
|
|
272
|
+
role: "dialog",
|
|
273
|
+
className: (state) => cx2(
|
|
274
|
+
drawerContentStyles({
|
|
275
|
+
size,
|
|
276
|
+
side,
|
|
277
|
+
className: typeof className === "function" ? className(state) : className
|
|
278
|
+
})
|
|
279
|
+
),
|
|
280
|
+
...handleInteractOutside && { onInteractOutside: handleInteractOutside },
|
|
281
|
+
...rest
|
|
282
|
+
}
|
|
283
|
+
);
|
|
284
|
+
};
|
|
257
285
|
DrawerContent.displayName = "Drawer.Content";
|
|
258
286
|
|
|
259
287
|
// src/drawer/DrawerDescription.tsx
|
|
260
|
-
import { Dialog as
|
|
261
|
-
import { jsx as
|
|
262
|
-
var DrawerDescription = (props) =>
|
|
288
|
+
import { Dialog as BaseDialog4 } from "@base-ui-components/react/dialog";
|
|
289
|
+
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
290
|
+
var DrawerDescription = (props) => {
|
|
291
|
+
return /* @__PURE__ */ jsx8(BaseDialog4.Description, { "data-spark-component": "drawer-description", ...props });
|
|
292
|
+
};
|
|
263
293
|
DrawerDescription.displayName = "Drawer.Description";
|
|
264
294
|
|
|
265
295
|
// src/drawer/DrawerFooter.tsx
|
|
266
|
-
import { cx as
|
|
267
|
-
import { jsx as
|
|
268
|
-
var DrawerFooter = ({ className, ref, ...rest }) => /* @__PURE__ */
|
|
296
|
+
import { cx as cx3 } from "class-variance-authority";
|
|
297
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
298
|
+
var DrawerFooter = ({ className, ref, ...rest }) => /* @__PURE__ */ jsx9(
|
|
269
299
|
"footer",
|
|
270
300
|
{
|
|
271
301
|
"data-spark-component": "drawer-footer",
|
|
272
302
|
ref,
|
|
273
|
-
className:
|
|
303
|
+
className: cx3(["px-xl", "py-lg"], className),
|
|
274
304
|
...rest
|
|
275
305
|
}
|
|
276
306
|
);
|
|
277
307
|
DrawerFooter.displayName = "Drawer.Footer";
|
|
278
308
|
|
|
279
309
|
// src/drawer/DrawerHeader.tsx
|
|
280
|
-
import { cx as
|
|
281
|
-
import { jsx as
|
|
310
|
+
import { cx as cx4 } from "class-variance-authority";
|
|
311
|
+
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
282
312
|
var DrawerHeader = ({
|
|
283
313
|
children,
|
|
284
314
|
className,
|
|
285
315
|
ref,
|
|
286
316
|
...rest
|
|
287
|
-
}) => /* @__PURE__ */
|
|
317
|
+
}) => /* @__PURE__ */ jsx10(
|
|
288
318
|
"header",
|
|
289
319
|
{
|
|
290
320
|
"data-spark-component": "drawer-header",
|
|
291
321
|
ref,
|
|
292
|
-
className:
|
|
322
|
+
className: cx4(["px-xl", "py-lg"], className),
|
|
293
323
|
...rest,
|
|
294
324
|
children
|
|
295
325
|
}
|
|
@@ -297,51 +327,59 @@ var DrawerHeader = ({
|
|
|
297
327
|
DrawerHeader.displayName = "Dialog.Header";
|
|
298
328
|
|
|
299
329
|
// src/drawer/DrawerOverlay.tsx
|
|
300
|
-
import {
|
|
301
|
-
import {
|
|
302
|
-
import { jsx as
|
|
303
|
-
var DrawerOverlay = ({ className,
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
330
|
+
import { Dialog as BaseDialog5 } from "@base-ui-components/react/dialog";
|
|
331
|
+
import { cx as cx5 } from "class-variance-authority";
|
|
332
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
333
|
+
var DrawerOverlay = ({ className, ...props }) => {
|
|
334
|
+
return /* @__PURE__ */ jsx11(
|
|
335
|
+
BaseDialog5.Backdrop,
|
|
336
|
+
{
|
|
337
|
+
"data-spark-component": "drawer-overlay",
|
|
338
|
+
className: (state) => cx5(
|
|
339
|
+
"z-overlay fixed top-0 left-0 h-screen w-screen",
|
|
340
|
+
"bg-overlay/dim-1",
|
|
341
|
+
// Base UI automatically adds data-[starting-style] and data-[ending-style] attributes
|
|
342
|
+
"data-[starting-style]:animate-fade-in",
|
|
343
|
+
"data-[ending-style]:animate-fade-out",
|
|
344
|
+
typeof className === "function" ? className(state) : className
|
|
345
|
+
),
|
|
346
|
+
...props
|
|
347
|
+
}
|
|
348
|
+
);
|
|
349
|
+
};
|
|
318
350
|
DrawerOverlay.displayName = "Drawer.Overlay";
|
|
319
351
|
|
|
320
352
|
// src/drawer/DrawerPortal.tsx
|
|
321
|
-
import { Dialog as
|
|
322
|
-
import { jsx as
|
|
323
|
-
var DrawerPortal = (
|
|
353
|
+
import { Dialog as BaseDialog6 } from "@base-ui-components/react/dialog";
|
|
354
|
+
import { jsx as jsx12 } from "react/jsx-runtime";
|
|
355
|
+
var DrawerPortal = (props) => {
|
|
356
|
+
return /* @__PURE__ */ jsx12(BaseDialog6.Portal, { "data-spark-component": "drawer-portal", ...props });
|
|
357
|
+
};
|
|
324
358
|
DrawerPortal.displayName = "Drawer.Portal";
|
|
325
359
|
|
|
326
360
|
// src/drawer/DrawerTitle.tsx
|
|
327
|
-
import {
|
|
328
|
-
import {
|
|
329
|
-
import { jsx as
|
|
330
|
-
var DrawerTitle = ({ className,
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
);
|
|
361
|
+
import { Dialog as BaseDialog7 } from "@base-ui-components/react/dialog";
|
|
362
|
+
import { cx as cx6 } from "class-variance-authority";
|
|
363
|
+
import { jsx as jsx13 } from "react/jsx-runtime";
|
|
364
|
+
var DrawerTitle = ({ className, ...props }) => {
|
|
365
|
+
return /* @__PURE__ */ jsx13(
|
|
366
|
+
BaseDialog7.Title,
|
|
367
|
+
{
|
|
368
|
+
"data-spark-component": "drawer-title",
|
|
369
|
+
className: cx6("text-headline-2 text-on-surface", className),
|
|
370
|
+
...props
|
|
371
|
+
}
|
|
372
|
+
);
|
|
373
|
+
};
|
|
339
374
|
DrawerTitle.displayName = "Drawer.Title";
|
|
340
375
|
|
|
341
376
|
// src/drawer/DrawerTrigger.tsx
|
|
342
|
-
import { Dialog as
|
|
343
|
-
import { jsx as
|
|
344
|
-
var DrawerTrigger = (
|
|
377
|
+
import { Dialog as BaseDialog8 } from "@base-ui-components/react/dialog";
|
|
378
|
+
import { jsx as jsx14 } from "react/jsx-runtime";
|
|
379
|
+
var DrawerTrigger = ({ asChild = false, ...props }) => {
|
|
380
|
+
const renderSlot = useRenderSlot(asChild, "button");
|
|
381
|
+
return /* @__PURE__ */ jsx14(BaseDialog8.Trigger, { "data-spark-component": "drawer-trigger", render: renderSlot, ...props });
|
|
382
|
+
};
|
|
345
383
|
DrawerTrigger.displayName = "Drawer.Trigger";
|
|
346
384
|
|
|
347
385
|
// src/drawer/index.ts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/drawer/Drawer.tsx","../../src/drawer/DrawerContext.tsx","../../src/drawer/DrawerBody.tsx","../../src/drawer/DrawerBody.styles.ts","../../src/drawer/DrawerCloseButton.tsx","../../src/drawer/DrawerClose.tsx","../../src/drawer/DrawerContent.tsx","../../src/drawer/DrawerContent.styles.tsx","../../src/drawer/DrawerDescription.tsx","../../src/drawer/DrawerFooter.tsx","../../src/drawer/DrawerHeader.tsx","../../src/drawer/DrawerOverlay.tsx","../../src/drawer/DrawerPortal.tsx","../../src/drawer/DrawerTitle.tsx","../../src/drawer/DrawerTrigger.tsx","../../src/drawer/index.ts"],"sourcesContent":["import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, ReactNode } from 'react'\n\nimport { DrawerProvider } from './DrawerContext'\n\nexport interface DrawerProps {\n /**\n * Children of the component.\n */\n children?: RadixDrawer.DialogProps['children']\n /**\n * Specifies if the dialog is open or not.\n */\n open?: RadixDrawer.DialogProps['open']\n /**\n * Default open state.\n */\n defaultOpen?: RadixDrawer.DialogProps['defaultOpen']\n /**\n * Handler executed on every dialog open state change.\n */\n onOpenChange?: RadixDrawer.DialogProps['onOpenChange']\n /**\n * Specifies if the dialog is a modal.\n */\n modal?: RadixDrawer.DialogProps['modal']\n /**\n * Specifies if the drawer should have a fade animation on its body (in case it is scrollable).\n */\n withFade?: boolean\n}\n\nexport interface DialogProps {\n children?: ReactNode\n open?: boolean\n defaultOpen?: boolean\n onOpenChange?(open: boolean): void\n modal?: boolean\n}\n\nexport const Drawer = ({ children, withFade = false, ...rest }: DrawerProps): ReactElement => (\n <DrawerProvider withFade={withFade}>\n <RadixDrawer.Root {...rest}>{children}</RadixDrawer.Root>\n </DrawerProvider>\n)\n\nDrawer.displayName = 'Drawer.Root'\n","import { createContext, type ReactNode, useContext } from 'react'\n\nexport interface DrawerContextState {\n withFade: boolean\n}\n\nconst DrawerContext = createContext<DrawerContextState | null>(null)\n\nexport const DrawerProvider = ({\n children: childrenProp,\n withFade = false,\n}: {\n children: ReactNode\n withFade?: boolean\n}) => {\n return (\n <DrawerContext.Provider\n value={{\n withFade,\n }}\n >\n {childrenProp}\n </DrawerContext.Provider>\n )\n}\n\nexport const useDrawer = () => {\n const context = useContext(DrawerContext)\n\n if (!context) {\n throw Error('useDrawer must be used within a Drawer provider')\n }\n\n return context\n}\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { type ReactNode, Ref, useRef } from 'react'\n\nimport { drawerBodyStyles, type DrawerBodyStylesProps } from './DrawerBody.styles'\nimport { useDrawer } from './DrawerContext'\n\nexport interface DrawerBodyProps extends DrawerBodyStylesProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerBody = ({\n children,\n inset = false,\n className,\n ref: forwardedRef,\n ...rest\n}: DrawerBodyProps) => {\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n const { withFade } = useDrawer()\n\n const { overflow } = useScrollOverflow(scrollAreaRef)\n\n return (\n <div\n data-spark-component=\"drawer-body\"\n ref={ref}\n className={drawerBodyStyles({ inset, className })}\n style={{\n ...(withFade && {\n maskImage:\n 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n }),\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n\nDrawerBody.displayName = 'Drawer.Body'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerBodyStyles = cva(\n ['grow', 'overflow-y-auto', 'outline-hidden', 'focus-visible:u-outline'],\n {\n variants: {\n inset: {\n true: '',\n false: 'px-xl py-lg',\n },\n },\n defaultVariants: {\n inset: false,\n },\n }\n)\n\nexport type DrawerBodyStylesProps = VariantProps<typeof drawerBodyStyles>\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { DrawerClose, type DrawerCloseProps } from './DrawerClose'\n\nexport type DrawerCloseButtonProps = DrawerCloseProps &\n Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nexport const DrawerCloseButton = ({\n 'aria-label': ariaLabel,\n className,\n size = 'md',\n intent = 'neutral',\n design = 'ghost',\n children = <CloseSVG />,\n ref,\n ...rest\n}: DrawerCloseButtonProps) => (\n <DrawerClose\n data-spark-component=\"drawer-close-button\"\n ref={ref}\n className={cx(['absolute', 'top-sm', 'right-xl'], className)}\n asChild\n {...rest}\n >\n <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n <Icon>{children}</Icon>\n </IconButton>\n </DrawerClose>\n)\n\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerCloseProps = RadixDrawer.DialogCloseProps & {\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerClose = (props: DrawerCloseProps) => (\n <RadixDrawer.Close data-spark-component=\"drawer-close\" {...props} />\n)\n\nDrawerClose.displayName = 'Drawer.Close'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nimport { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'\n\nexport type DrawerContentProps = RadixDrawer.DialogContentProps &\n DrawerContentStylesProps & {\n ref?: Ref<HTMLDivElement>\n }\n\nexport const DrawerContent = ({\n className,\n size = 'md',\n side = 'right',\n onInteractOutside,\n ref,\n ...rest\n}: DrawerContentProps) => (\n <RadixDrawer.Content\n data-spark-component=\"drawer-content\"\n ref={ref}\n className={drawerContentStyles({\n size,\n side,\n className,\n })}\n onInteractOutside={e => {\n const isForegroundElement = (e.target as HTMLElement).closest('.z-toast, .z-popover')\n\n /**\n * The focus trap of the drawer applies `pointer-events-none` on the body of the page in the background, but\n * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).\n *\n * Clicking on the snackbar will be considered as an \"outside click\" and close the drawer. We want to prevent this.\n */\n if (isForegroundElement) {\n e.preventDefault()\n }\n\n onInteractOutside?.(e)\n }}\n {...rest}\n />\n)\n\nDrawerContent.displayName = 'Drawer.Content'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerContentStyles = cva(\n [\n 'fixed z-modal flex flex-col bg-surface shadow-md',\n 'data-[state=open]:animation-duration-400 data-[state=closed]:animation-duration-200',\n ],\n {\n variants: {\n size: {\n sm: '',\n md: '',\n lg: '',\n fluid: '',\n fullscreen: 'h-screen w-screen',\n },\n side: {\n right: [\n 'inset-y-0 right-0',\n 'data-[state=open]:animate-slide-in-right ',\n 'data-[state=closed]:animate-slide-out-right',\n ],\n left: [\n 'inset-y-0 left-0',\n 'data-[state=open]:animate-slide-in-left',\n 'data-[state=closed]:animate-slide-out-left',\n ],\n top: [\n 'top-0 left-0',\n 'w-screen',\n 'data-[state=open]:animate-slide-in-top',\n 'data-[state=closed]:animate-slide-out-top',\n ],\n bottom: [\n 'bottom-0 left-0',\n 'w-screen',\n 'data-[state=open]:animate-slide-in-bottom',\n 'data-[state=closed]:animate-slide-out-bottom',\n ],\n },\n },\n compoundVariants: [\n {\n side: ['right', 'left'],\n size: 'sm',\n class: ['w-sz-480', 'max-w-full'],\n },\n {\n side: ['right', 'left'],\n size: 'md',\n class: ['w-sz-672', 'max-w-full'],\n },\n {\n side: ['right', 'left'],\n size: 'lg',\n class: ['w-sz-864', 'max-w-full'],\n },\n {\n side: ['left', 'right'],\n size: 'fluid',\n class: ['w-auto', 'max-w-full'],\n },\n {\n side: ['top', 'bottom'],\n size: 'sm',\n class: ['h-sz-480', 'max-h-full'],\n },\n {\n side: ['top', 'bottom'],\n size: 'md',\n class: ['h-sz-672', 'max-h-full'],\n },\n {\n side: ['top', 'bottom'],\n size: 'lg',\n class: ['h-sz-864', 'max-h-full'],\n },\n {\n side: ['top', 'bottom'],\n size: 'fluid',\n class: ['h-auto', 'max-h-full'],\n },\n ],\n defaultVariants: {\n side: 'right',\n size: 'md',\n },\n }\n)\n\nexport type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerDescriptionProps = RadixDrawer.DialogDescriptionProps & {\n ref?: Ref<HTMLParagraphElement>\n}\n\nexport const DrawerDescription = (props: DrawerDescriptionProps) => (\n <RadixDrawer.Description data-spark-component=\"drawer-description\" {...props} />\n)\n\nDrawerDescription.displayName = 'Drawer.Description'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type ReactElement, Ref } from 'react'\n\nexport type DrawerFooterProps = ComponentPropsWithoutRef<'footer'> & {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerFooter = ({ className, ref, ...rest }: DrawerFooterProps): ReactElement => (\n <footer\n data-spark-component=\"drawer-footer\"\n ref={ref}\n className={cx(['px-xl', 'py-lg'], className)}\n {...rest}\n />\n)\n\nDrawerFooter.displayName = 'Drawer.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface DrawerHeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerHeader = ({\n children,\n className,\n ref,\n ...rest\n}: DrawerHeaderProps): ReactElement => (\n <header\n data-spark-component=\"drawer-header\"\n ref={ref}\n className={cx(['px-xl', 'py-lg'], className)}\n {...rest}\n >\n {children}\n </header>\n)\n\nDrawerHeader.displayName = 'Dialog.Header'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nexport type DrawerOverlayProps = RadixDrawer.DialogOverlayProps & {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerOverlay = ({ className, ref, ...rest }: DrawerOverlayProps): ReactElement => (\n <RadixDrawer.Overlay\n data-spark-component=\"drawer-overlay\"\n ref={ref}\n className={cx(\n ['fixed', 'top-0', 'left-0', 'w-screen', 'h-screen', 'z-overlay'],\n ['bg-overlay/dim-1'],\n ['data-[state=open]:animate-fade-in'],\n ['data-[state=closed]:animate-fade-out'],\n className\n )}\n {...rest}\n />\n)\n\nDrawerOverlay.displayName = 'Drawer.Overlay'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement } from 'react'\n\nexport type DrawerPortalProps = RadixDrawer.DialogPortalProps\n\nexport const DrawerPortal = ({ children, ...rest }: DrawerPortalProps): ReactElement => (\n <RadixDrawer.Portal {...rest}>{children}</RadixDrawer.Portal>\n)\n\nDrawerPortal.displayName = 'Drawer.Portal'\n","import { cx } from 'class-variance-authority'\nimport { Dialog as RadixDrawer } from 'radix-ui'\nimport { Ref } from 'react'\n\nexport type DrawerTitleProps = RadixDrawer.DialogTitleProps & {\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const DrawerTitle = ({ className, ref, ...others }: DrawerTitleProps) => (\n <RadixDrawer.Title\n data-spark-component=\"drawer-title\"\n ref={ref}\n className={cx('text-headline-2 text-on-surface', className)}\n {...others}\n />\n)\n\nDrawerTitle.displayName = 'Drawer.Title'\n","import { Dialog as RadixDrawer } from 'radix-ui'\nimport { type ReactElement, Ref } from 'react'\n\nexport interface DrawerTriggerProps extends RadixDrawer.DialogTriggerProps {\n /**\n * Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerTrigger = (props: DrawerTriggerProps): ReactElement => (\n <RadixDrawer.Trigger data-spark-component=\"drawer-trigger\" {...props} />\n)\n\nDrawerTrigger.displayName = 'Drawer.Trigger'\n","import { Drawer as Root } from './Drawer'\nimport { DrawerBody } from './DrawerBody'\nimport { DrawerCloseButton } from './DrawerCloseButton'\nimport { DrawerContent } from './DrawerContent'\nimport { DrawerDescription } from './DrawerDescription' // aria-describedby\nimport { DrawerFooter } from './DrawerFooter'\nimport { DrawerHeader } from './DrawerHeader'\nimport { DrawerOverlay } from './DrawerOverlay'\nimport { DrawerPortal } from './DrawerPortal'\nimport { DrawerTitle } from './DrawerTitle'\nimport { DrawerTrigger } from './DrawerTrigger'\n\nexport const Drawer: typeof Root & {\n Trigger: typeof DrawerTrigger\n Portal: typeof DrawerPortal\n Overlay: typeof DrawerOverlay\n Content: typeof DrawerContent\n Header: typeof DrawerHeader\n Body: typeof DrawerBody\n Footer: typeof DrawerFooter\n CloseButton: typeof DrawerCloseButton\n Title: typeof DrawerTitle\n Description: typeof DrawerDescription\n} = Object.assign(Root, {\n Trigger: DrawerTrigger,\n Portal: DrawerPortal,\n Overlay: DrawerOverlay,\n Content: DrawerContent,\n Header: DrawerHeader,\n Body: DrawerBody,\n Footer: DrawerFooter,\n CloseButton: DrawerCloseButton,\n Title: DrawerTitle,\n Description: DrawerDescription,\n})\n\nDrawer.displayName = 'Drawer'\nDrawerTrigger.displayName = 'Drawer.Trigger'\nDrawerPortal.displayName = 'Drawer.Portal'\nDrawerOverlay.displayName = 'Drawer.Overlay'\nDrawerContent.displayName = 'Drawer.Content'\nDrawerHeader.displayName = 'Drawer.Header'\nDrawerBody.displayName = 'Drawer.Body'\nDrawerFooter.displayName = 'Drawer.Footer'\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\nDrawerTitle.displayName = 'Drawer.Title'\nDrawerDescription.displayName = 'Drawer.Description'\n\nexport { type DrawerProps } from './Drawer'\nexport { type DrawerContentProps } from './DrawerContent'\nexport { type DrawerHeaderProps } from './DrawerHeader'\nexport { type DrawerBodyProps } from './DrawerBody'\nexport { type DrawerFooterProps } from './DrawerFooter'\nexport { type DrawerTriggerProps } from './DrawerTrigger'\nexport { type DrawerOverlayProps } from './DrawerOverlay'\nexport { type DrawerPortalProps } from './DrawerPortal'\nexport { type DrawerTitleProps } from './DrawerTitle'\nexport { type DrawerDescriptionProps } from './DrawerDescription'\nexport { type DrawerCloseProps } from './DrawerClose'\nexport { type DrawerCloseButtonProps } from './DrawerCloseButton'\n"],"mappings":"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","names":["jsx","jsx","RadixDrawer","jsx","jsx","RadixDrawer","cva","jsx","RadixDrawer","RadixDrawer","jsx","cx","jsx","cx","jsx","cx","RadixDrawer","jsx","RadixDrawer","jsx","cx","RadixDrawer","jsx","RadixDrawer","jsx","Drawer"]}
|
|
1
|
+
{"version":3,"sources":["../../src/drawer/Drawer.tsx","../../src/drawer/DrawerContext.tsx","../../src/drawer/DrawerBody.tsx","../../src/drawer/DrawerBody.styles.ts","../../src/drawer/DrawerCloseButton.tsx","../../src/drawer/DrawerClose.tsx","../../src/drawer/useRenderSlot.tsx","../../src/drawer/DrawerContent.tsx","../../src/drawer/DrawerContent.styles.tsx","../../src/drawer/DrawerDescription.tsx","../../src/drawer/DrawerFooter.tsx","../../src/drawer/DrawerHeader.tsx","../../src/drawer/DrawerOverlay.tsx","../../src/drawer/DrawerPortal.tsx","../../src/drawer/DrawerTitle.tsx","../../src/drawer/DrawerTrigger.tsx","../../src/drawer/index.ts"],"sourcesContent":["import { Dialog as BaseDialog } from '@base-ui-components/react/dialog'\nimport { ComponentProps, type ReactElement } from 'react'\n\nimport { DrawerProvider } from './DrawerContext'\n\nexport interface DrawerProps\n extends Omit<ComponentProps<typeof BaseDialog.Root>, 'onOpenChange' | 'render'> {\n /**\n * Specifies if the dialog is open or not.\n */\n open?: boolean\n /**\n * Default open state.\n */\n defaultOpen?: boolean\n /**\n * Handler executed on every dialog open state change.\n */\n onOpenChange?: (open: boolean) => void\n /**\n * Specifies if the dialog is a modal.\n */\n modal?: boolean\n /**\n * Specifies if the drawer should have a fade animation on its body (in case it is scrollable).\n */\n withFade?: boolean\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n}\n\nexport const Drawer = ({ onOpenChange, withFade = false, ...props }: DrawerProps): ReactElement => {\n const handleOpenChange = onOpenChange\n ? (open: boolean, _eventDetails: unknown) => {\n onOpenChange(open)\n }\n : undefined\n\n return (\n <DrawerProvider withFade={withFade}>\n <BaseDialog.Root data-spark-component=\"drawer\" onOpenChange={handleOpenChange} {...props} />\n </DrawerProvider>\n )\n}\n\nDrawer.displayName = 'Drawer.Root'\n","import { createContext, type ReactNode, useContext } from 'react'\n\nexport interface DrawerContextState {\n withFade: boolean\n}\n\nconst DrawerContext = createContext<DrawerContextState | null>(null)\n\nexport const DrawerProvider = ({\n children: childrenProp,\n withFade = false,\n}: {\n children: ReactNode\n withFade?: boolean\n}) => {\n return (\n <DrawerContext.Provider\n value={{\n withFade,\n }}\n >\n {childrenProp}\n </DrawerContext.Provider>\n )\n}\n\nexport const useDrawer = () => {\n const context = useContext(DrawerContext)\n\n if (!context) {\n throw Error('useDrawer must be used within a Drawer provider')\n }\n\n return context\n}\n","import { useMergeRefs } from '@spark-ui/hooks/use-merge-refs'\nimport { useScrollOverflow } from '@spark-ui/hooks/use-scroll-overflow'\nimport { type ReactNode, Ref, useRef } from 'react'\n\nimport { drawerBodyStyles, type DrawerBodyStylesProps } from './DrawerBody.styles'\nimport { useDrawer } from './DrawerContext'\n\nexport interface DrawerBodyProps extends DrawerBodyStylesProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerBody = ({\n children,\n inset = false,\n className,\n ref: forwardedRef,\n ...rest\n}: DrawerBodyProps) => {\n const scrollAreaRef = useRef<HTMLDivElement>(null)\n const ref = useMergeRefs(forwardedRef, scrollAreaRef)\n\n const { withFade } = useDrawer()\n\n const { overflow } = useScrollOverflow(scrollAreaRef)\n\n return (\n <div\n data-spark-component=\"drawer-body\"\n ref={ref}\n className={drawerBodyStyles({ inset, className })}\n style={{\n ...(withFade && {\n maskImage:\n 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1) 44px, rgba(0, 0, 0, 1) calc(100% - 44px), rgba(0, 0, 0, 0))',\n maskSize: `100% calc(100% + ${overflow.top ? '0px' : '44px'} + ${overflow.bottom ? '0px' : '44px'})`,\n maskPosition: `0 ${overflow.top ? '0px' : '-44px'}`,\n }),\n }}\n {...rest}\n >\n {children}\n </div>\n )\n}\n\nDrawerBody.displayName = 'Drawer.Body'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerBodyStyles = cva(\n ['grow', 'overflow-y-auto', 'outline-hidden', 'focus-visible:u-outline'],\n {\n variants: {\n inset: {\n true: '',\n false: 'px-xl py-lg',\n },\n },\n defaultVariants: {\n inset: false,\n },\n }\n)\n\nexport type DrawerBodyStylesProps = VariantProps<typeof drawerBodyStyles>\n","import { Close as CloseSVG } from '@spark-ui/icons/Close'\nimport { cx } from 'class-variance-authority'\n\nimport { Icon } from '../icon'\nimport { IconButton, type IconButtonProps } from '../icon-button'\nimport { DrawerClose, type DrawerCloseProps } from './DrawerClose'\n\nexport type DrawerCloseButtonProps = DrawerCloseProps &\n Pick<IconButtonProps, 'size' | 'intent' | 'design' | 'aria-label'>\n\nexport const DrawerCloseButton = ({\n 'aria-label': ariaLabel,\n className,\n size = 'md',\n intent = 'neutral',\n design = 'ghost',\n children = <CloseSVG />,\n ref,\n ...rest\n}: DrawerCloseButtonProps) => (\n <DrawerClose\n data-spark-component=\"drawer-close-button\"\n ref={ref}\n className={cx(['absolute', 'top-sm', 'right-xl'], className)}\n asChild\n {...rest}\n >\n <IconButton intent={intent} size={size} design={design} aria-label={ariaLabel}>\n <Icon>{children}</Icon>\n </IconButton>\n </DrawerClose>\n)\n\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\n","import { Dialog as BaseDialog } from '@base-ui-components/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerCloseProps extends Omit<ComponentProps<typeof BaseDialog.Close>, 'render'> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerClose = ({ asChild = false, ...props }: DrawerCloseProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return <BaseDialog.Close data-spark-component=\"drawer-close\" render={renderSlot} {...props} />\n}\n\nDrawerClose.displayName = 'Drawer.Close'\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Dialog as BaseDialog } from '@base-ui-components/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nimport { drawerContentStyles, type DrawerContentStylesProps } from './DrawerContent.styles'\n\nexport interface DrawerContentProps\n extends Omit<ComponentProps<typeof BaseDialog.Popup>, 'render' | 'onInteractOutside'>,\n DrawerContentStylesProps {\n ref?: Ref<HTMLDivElement>\n /**\n * Handler called when the user clicks outside the drawer.\n */\n onInteractOutside?: (event: PointerEvent) => void\n}\n\nexport const DrawerContent = ({\n className,\n size = 'md',\n side = 'right',\n onInteractOutside,\n ref,\n ...rest\n}: DrawerContentProps) => {\n // Base UI Dialog doesn't support onInteractOutside directly\n // We'll handle it via a custom approach if needed\n // For now, we'll pass it through in case Base UI adds support\n const handleInteractOutside = onInteractOutside\n ? (event: Event) => {\n const e = event as PointerEvent\n const isForegroundElement = (e.target as HTMLElement)?.closest('.z-toast, .z-popover')\n\n /**\n * The focus trap of the drawer applies `pointer-events-none` on the body of the page in the background, but\n * some components with an higher z-index have `pointer-events-auto` applied on them to remain interactive and ignore the focust trap (ex: a Snackbar with actions).\n *\n * Clicking on the snackbar will be considered as an \"outside click\" and close the drawer. We want to prevent this.\n */\n if (isForegroundElement) {\n e.preventDefault()\n }\n\n onInteractOutside?.(e)\n }\n : undefined\n\n return (\n <BaseDialog.Popup\n ref={ref}\n data-spark-component=\"drawer-content\"\n role=\"dialog\"\n className={state =>\n cx(\n drawerContentStyles({\n size,\n side,\n className: typeof className === 'function' ? className(state) : className,\n })\n )\n }\n {...(handleInteractOutside && { onInteractOutside: handleInteractOutside })}\n {...rest}\n />\n )\n}\n\nDrawerContent.displayName = 'Drawer.Content'\n","import { cva, VariantProps } from 'class-variance-authority'\n\nexport const drawerContentStyles = cva(\n [\n 'fixed z-modal flex flex-col bg-surface shadow-md',\n // Base UI uses data-open and data-closed for transitions\n 'data-open:animation-duration-400 data-closed:animation-duration-200',\n ],\n {\n variants: {\n size: {\n sm: '',\n md: '',\n lg: '',\n fluid: '',\n fullscreen: 'h-screen w-screen',\n },\n side: {\n right: [\n 'inset-y-0 right-0',\n 'data-open:animate-slide-in-right ',\n 'data-closed:animate-slide-out-right',\n ],\n left: [\n 'inset-y-0 left-0',\n 'data-open:animate-slide-in-left',\n 'data-closed:animate-slide-out-left',\n ],\n top: [\n 'top-0 left-0',\n 'w-screen',\n 'data-open:animate-slide-in-top',\n 'data-closed:animate-slide-out-top',\n ],\n bottom: [\n 'bottom-0 left-0',\n 'w-screen',\n 'data-open:animate-slide-in-bottom',\n 'data-closed:animate-slide-out-bottom',\n ],\n },\n },\n compoundVariants: [\n {\n side: ['right', 'left'],\n size: 'sm',\n class: ['w-sz-480', 'max-w-full'],\n },\n {\n side: ['right', 'left'],\n size: 'md',\n class: ['w-sz-672', 'max-w-full'],\n },\n {\n side: ['right', 'left'],\n size: 'lg',\n class: ['w-sz-864', 'max-w-full'],\n },\n {\n side: ['left', 'right'],\n size: 'fluid',\n class: ['w-auto', 'max-w-full'],\n },\n {\n side: ['top', 'bottom'],\n size: 'sm',\n class: ['h-sz-480', 'max-h-full'],\n },\n {\n side: ['top', 'bottom'],\n size: 'md',\n class: ['h-sz-672', 'max-h-full'],\n },\n {\n side: ['top', 'bottom'],\n size: 'lg',\n class: ['h-sz-864', 'max-h-full'],\n },\n {\n side: ['top', 'bottom'],\n size: 'fluid',\n class: ['h-auto', 'max-h-full'],\n },\n ],\n defaultVariants: {\n side: 'right',\n size: 'md',\n },\n }\n)\n\nexport type DrawerContentStylesProps = VariantProps<typeof drawerContentStyles>\n","import { Dialog as BaseDialog } from '@base-ui-components/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerDescriptionProps\n extends Omit<ComponentProps<typeof BaseDialog.Description>, 'render'> {\n ref?: Ref<HTMLParagraphElement>\n}\n\nexport const DrawerDescription = (props: DrawerDescriptionProps) => {\n return <BaseDialog.Description data-spark-component=\"drawer-description\" {...props} />\n}\n\nDrawerDescription.displayName = 'Drawer.Description'\n","import { cx } from 'class-variance-authority'\nimport { ComponentPropsWithoutRef, type ReactElement, Ref } from 'react'\n\nexport type DrawerFooterProps = ComponentPropsWithoutRef<'footer'> & {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerFooter = ({ className, ref, ...rest }: DrawerFooterProps): ReactElement => (\n <footer\n data-spark-component=\"drawer-footer\"\n ref={ref}\n className={cx(['px-xl', 'py-lg'], className)}\n {...rest}\n />\n)\n\nDrawerFooter.displayName = 'Drawer.Footer'\n","import { cx } from 'class-variance-authority'\nimport { type ReactElement, type ReactNode, Ref } from 'react'\n\nexport interface DrawerHeaderProps {\n children: ReactNode\n className?: string\n ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerHeader = ({\n children,\n className,\n ref,\n ...rest\n}: DrawerHeaderProps): ReactElement => (\n <header\n data-spark-component=\"drawer-header\"\n ref={ref}\n className={cx(['px-xl', 'py-lg'], className)}\n {...rest}\n >\n {children}\n </header>\n)\n\nDrawerHeader.displayName = 'Dialog.Header'\n","import { Dialog as BaseDialog } from '@base-ui-components/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerOverlayProps\n extends Omit<ComponentProps<typeof BaseDialog.Backdrop>, 'render'> {\n ref?: Ref<HTMLDivElement>\n}\n\nexport const DrawerOverlay = ({ className, ...props }: DrawerOverlayProps) => {\n return (\n <BaseDialog.Backdrop\n data-spark-component=\"drawer-overlay\"\n className={state =>\n cx(\n 'z-overlay fixed top-0 left-0 h-screen w-screen',\n 'bg-overlay/dim-1',\n // Base UI automatically adds data-[starting-style] and data-[ending-style] attributes\n 'data-[starting-style]:animate-fade-in',\n 'data-[ending-style]:animate-fade-out',\n typeof className === 'function' ? className(state) : className\n )\n }\n {...props}\n />\n )\n}\n\nDrawerOverlay.displayName = 'Drawer.Overlay'\n","import { Dialog as BaseDialog } from '@base-ui-components/react/dialog'\nimport { ComponentProps } from 'react'\n\nexport type DrawerPortalProps = ComponentProps<typeof BaseDialog.Portal>\n\nexport const DrawerPortal = (props: DrawerPortalProps) => {\n return <BaseDialog.Portal data-spark-component=\"drawer-portal\" {...props} />\n}\n\nDrawerPortal.displayName = 'Drawer.Portal'\n","import { Dialog as BaseDialog } from '@base-ui-components/react/dialog'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, Ref } from 'react'\n\nexport interface DrawerTitleProps extends Omit<ComponentProps<typeof BaseDialog.Title>, 'render'> {\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const DrawerTitle = ({ className, ...props }: DrawerTitleProps) => {\n return (\n <BaseDialog.Title\n data-spark-component=\"drawer-title\"\n className={cx('text-headline-2 text-on-surface', className)}\n {...props}\n />\n )\n}\n\nDrawerTitle.displayName = 'Drawer.Title'\n","import { Dialog as BaseDialog } from '@base-ui-components/react/dialog'\nimport { ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\nexport interface DrawerTriggerProps\n extends Omit<ComponentProps<typeof BaseDialog.Trigger>, 'render'> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const DrawerTrigger = ({ asChild = false, ...props }: DrawerTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return <BaseDialog.Trigger data-spark-component=\"drawer-trigger\" render={renderSlot} {...props} />\n}\n\nDrawerTrigger.displayName = 'Drawer.Trigger'\n","import { Drawer as Root } from './Drawer'\nimport { DrawerBody } from './DrawerBody'\nimport { DrawerCloseButton } from './DrawerCloseButton'\nimport { DrawerContent } from './DrawerContent'\nimport { DrawerDescription } from './DrawerDescription' // aria-describedby\nimport { DrawerFooter } from './DrawerFooter'\nimport { DrawerHeader } from './DrawerHeader'\nimport { DrawerOverlay } from './DrawerOverlay'\nimport { DrawerPortal } from './DrawerPortal'\nimport { DrawerTitle } from './DrawerTitle'\nimport { DrawerTrigger } from './DrawerTrigger'\n\nexport const Drawer: typeof Root & {\n Trigger: typeof DrawerTrigger\n Portal: typeof DrawerPortal\n Overlay: typeof DrawerOverlay\n Content: typeof DrawerContent\n Header: typeof DrawerHeader\n Body: typeof DrawerBody\n Footer: typeof DrawerFooter\n CloseButton: typeof DrawerCloseButton\n Title: typeof DrawerTitle\n Description: typeof DrawerDescription\n} = Object.assign(Root, {\n Trigger: DrawerTrigger,\n Portal: DrawerPortal,\n Overlay: DrawerOverlay,\n Content: DrawerContent,\n Header: DrawerHeader,\n Body: DrawerBody,\n Footer: DrawerFooter,\n CloseButton: DrawerCloseButton,\n Title: DrawerTitle,\n Description: DrawerDescription,\n})\n\nDrawer.displayName = 'Drawer'\nDrawerTrigger.displayName = 'Drawer.Trigger'\nDrawerPortal.displayName = 'Drawer.Portal'\nDrawerOverlay.displayName = 'Drawer.Overlay'\nDrawerContent.displayName = 'Drawer.Content'\nDrawerHeader.displayName = 'Drawer.Header'\nDrawerBody.displayName = 'Drawer.Body'\nDrawerFooter.displayName = 'Drawer.Footer'\nDrawerCloseButton.displayName = 'Drawer.CloseButton'\nDrawerTitle.displayName = 'Drawer.Title'\nDrawerDescription.displayName = 'Drawer.Description'\n\nexport { type DrawerProps } from './Drawer'\nexport { type DrawerContentProps } from './DrawerContent'\nexport { type DrawerHeaderProps } from './DrawerHeader'\nexport { type DrawerBodyProps } from './DrawerBody'\nexport { type DrawerFooterProps } from './DrawerFooter'\nexport { type DrawerTriggerProps } from './DrawerTrigger'\nexport { type DrawerOverlayProps } from './DrawerOverlay'\nexport { type DrawerPortalProps } from './DrawerPortal'\nexport { type DrawerTitleProps } from './DrawerTitle'\nexport { type DrawerDescriptionProps } from './DrawerDescription'\nexport { type DrawerCloseProps } from './DrawerClose'\nexport { type DrawerCloseButtonProps } from './DrawerCloseButton'\n"],"mappings":"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","names":["jsx","jsx","BaseDialog","jsx","jsx","BaseDialog","jsx","BaseDialog","cx","cva","jsx","BaseDialog","cx","BaseDialog","jsx","cx","jsx","cx","jsx","BaseDialog","cx","jsx","BaseDialog","jsx","BaseDialog","cx","jsx","BaseDialog","jsx","BaseDialog","Drawer"]}
|
package/dist/dropdown/index.mjs
CHANGED
|
@@ -2,11 +2,11 @@ import {
|
|
|
2
2
|
Popover
|
|
3
3
|
} from "../chunk-GPJMLIHC.mjs";
|
|
4
4
|
import "../chunk-DCXWGQVZ.mjs";
|
|
5
|
+
import "../chunk-2YM6GKWW.mjs";
|
|
6
|
+
import "../chunk-GAK4SC2F.mjs";
|
|
5
7
|
import {
|
|
6
8
|
Icon
|
|
7
9
|
} from "../chunk-UMUMFMFB.mjs";
|
|
8
|
-
import "../chunk-2YM6GKWW.mjs";
|
|
9
|
-
import "../chunk-GAK4SC2F.mjs";
|
|
10
10
|
import {
|
|
11
11
|
VisuallyHidden
|
|
12
12
|
} from "../chunk-KEGAAGJW.mjs";
|
|
@@ -4,14 +4,14 @@ import {
|
|
|
4
4
|
import {
|
|
5
5
|
IconButton
|
|
6
6
|
} from "../chunk-DCXWGQVZ.mjs";
|
|
7
|
-
import {
|
|
8
|
-
Icon
|
|
9
|
-
} from "../chunk-UMUMFMFB.mjs";
|
|
10
7
|
import {
|
|
11
8
|
Button,
|
|
12
9
|
buttonStyles
|
|
13
10
|
} from "../chunk-2YM6GKWW.mjs";
|
|
14
11
|
import "../chunk-GAK4SC2F.mjs";
|
|
12
|
+
import {
|
|
13
|
+
Icon
|
|
14
|
+
} from "../chunk-UMUMFMFB.mjs";
|
|
15
15
|
import "../chunk-KEGAAGJW.mjs";
|
|
16
16
|
import {
|
|
17
17
|
Slot
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Popover as Popover$2 } from 'radix-ui';
|
|
3
|
+
import { Ref, ReactNode, ReactElement } from 'react';
|
|
4
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
5
|
+
import { VariantProps } from 'class-variance-authority';
|
|
6
|
+
|
|
7
|
+
type PopoverIntent = 'surface' | 'main' | 'support' | 'accent' | 'basic' | 'success' | 'alert' | 'danger' | 'info' | 'neutral';
|
|
8
|
+
|
|
9
|
+
type PopoverProps = Popover$2.PopoverProps & {
|
|
10
|
+
intent?: PopoverIntent;
|
|
11
|
+
};
|
|
12
|
+
declare const Popover$1: {
|
|
13
|
+
({ children, intent, modal, ...rest }: PopoverProps): react_jsx_runtime.JSX.Element;
|
|
14
|
+
displayName: string;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
type AnchorProps = Popover$2.PopoverAnchorProps & {
|
|
18
|
+
ref?: Ref<HTMLDivElement>;
|
|
19
|
+
};
|
|
20
|
+
declare const Anchor: {
|
|
21
|
+
({ asChild, children, ref, ...rest }: AnchorProps): react_jsx_runtime.JSX.Element;
|
|
22
|
+
displayName: string;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
type ArrowProps = Popover$2.PopoverArrowProps & {
|
|
26
|
+
ref?: Ref<SVGSVGElement>;
|
|
27
|
+
};
|
|
28
|
+
declare const Arrow: {
|
|
29
|
+
({ asChild, width, height, className, ref, ...rest }: ArrowProps): react_jsx_runtime.JSX.Element;
|
|
30
|
+
displayName: string;
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
type CloseButtonProps = Popover$2.PopoverCloseProps & {
|
|
34
|
+
'aria-label': string;
|
|
35
|
+
ref?: Ref<HTMLButtonElement>;
|
|
36
|
+
};
|
|
37
|
+
declare const CloseButton: {
|
|
38
|
+
({ "aria-label": ariaLabel, className, ref, ...rest }: CloseButtonProps): react_jsx_runtime.JSX.Element;
|
|
39
|
+
displayName: string;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
declare const styles: (props?: ({
|
|
43
|
+
intent?: "main" | "surface" | "support" | "accent" | "basic" | "success" | "alert" | "danger" | "info" | "neutral" | null | undefined;
|
|
44
|
+
matchTriggerWidth?: boolean | null | undefined;
|
|
45
|
+
enforceBoundaries?: boolean | null | undefined;
|
|
46
|
+
inset?: boolean | null | undefined;
|
|
47
|
+
elevation?: "popover" | "dropdown" | null | undefined;
|
|
48
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
49
|
+
type StylesProps = VariantProps<typeof styles>;
|
|
50
|
+
|
|
51
|
+
type ContentProps = Popover$2.PopoverContentProps & StylesProps & {
|
|
52
|
+
ref?: Ref<HTMLDivElement>;
|
|
53
|
+
};
|
|
54
|
+
declare const Content: {
|
|
55
|
+
({ className, children, matchTriggerWidth, align, arrowPadding, asChild, avoidCollisions, "aria-labelledby": ariaLabelledBy, collisionBoundary, collisionPadding, hideWhenDetached, side, sideOffset, sticky, inset, elevation, ref, ...rest }: ContentProps): react_jsx_runtime.JSX.Element;
|
|
56
|
+
displayName: string;
|
|
57
|
+
};
|
|
58
|
+
|
|
59
|
+
interface HeaderProps {
|
|
60
|
+
children: ReactNode;
|
|
61
|
+
className?: string;
|
|
62
|
+
ref?: Ref<HTMLDivElement>;
|
|
63
|
+
}
|
|
64
|
+
declare const Header: {
|
|
65
|
+
({ children, className, ref, ...rest }: HeaderProps): react_jsx_runtime.JSX.Element;
|
|
66
|
+
displayName: string;
|
|
67
|
+
};
|
|
68
|
+
|
|
69
|
+
type PortalProps = Popover$2.PopoverPortalProps;
|
|
70
|
+
declare const Portal: {
|
|
71
|
+
({ children, ...rest }: PortalProps): ReactElement;
|
|
72
|
+
displayName: string;
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
type TriggerProps = Popover$2.PopoverTriggerProps & {
|
|
76
|
+
ref?: Ref<HTMLButtonElement>;
|
|
77
|
+
};
|
|
78
|
+
declare const Trigger: {
|
|
79
|
+
({ asChild, children, ref, ...rest }: TriggerProps): react_jsx_runtime.JSX.Element;
|
|
80
|
+
displayName: string;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
declare const Popover: typeof Popover$1 & {
|
|
84
|
+
Anchor: typeof Anchor;
|
|
85
|
+
Arrow: typeof Arrow;
|
|
86
|
+
CloseButton: typeof CloseButton;
|
|
87
|
+
Content: typeof Content;
|
|
88
|
+
Header: typeof Header;
|
|
89
|
+
Portal: typeof Portal;
|
|
90
|
+
Trigger: typeof Trigger;
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
export { type ContentProps as C, Popover as P };
|