@dust-tt/sparkle 0.2.583 → 0.2.584-rc-2
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/cjs/index.js +1 -1
- package/dist/esm/components/MultiPageSheet.d.ts +17 -1
- package/dist/esm/components/MultiPageSheet.d.ts.map +1 -1
- package/dist/esm/components/MultiPageSheet.js +26 -35
- package/dist/esm/components/MultiPageSheet.js.map +1 -1
- package/package.json +1 -1
- package/src/components/MultiPageSheet.tsx +87 -46
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { Button } from "../components";
|
|
2
3
|
import { SheetContent } from "../components/Sheet";
|
|
3
4
|
interface MultiPageSheetPage {
|
|
4
5
|
id: string;
|
|
@@ -6,6 +7,7 @@ interface MultiPageSheetPage {
|
|
|
6
7
|
description?: string;
|
|
7
8
|
icon?: React.ComponentType;
|
|
8
9
|
content: React.ReactNode;
|
|
10
|
+
fixedContent?: React.ReactNode;
|
|
9
11
|
}
|
|
10
12
|
interface MultiPageSheetProps {
|
|
11
13
|
pages: MultiPageSheetPage[];
|
|
@@ -21,13 +23,27 @@ interface MultiPageSheetProps {
|
|
|
21
23
|
className?: string;
|
|
22
24
|
disableNext?: boolean;
|
|
23
25
|
disableSave?: boolean;
|
|
26
|
+
leftButton?: React.ComponentProps<typeof Button>;
|
|
27
|
+
centerButton?: React.ComponentProps<typeof Button>;
|
|
28
|
+
rightButton?: React.ComponentProps<typeof Button>;
|
|
29
|
+
addFooterSeparator?: boolean;
|
|
24
30
|
}
|
|
25
31
|
declare const MultiPageSheetRoot: React.FC<import("@radix-ui/react-dialog").DialogProps>;
|
|
26
32
|
declare const MultiPageSheetTrigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
27
33
|
declare const MultiPageSheetClose: React.ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
34
|
+
interface MultiPageSheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
35
|
+
addTopSeparator: boolean;
|
|
36
|
+
leftButton?: React.ComponentProps<typeof Button>;
|
|
37
|
+
centerButton?: React.ComponentProps<typeof Button>;
|
|
38
|
+
rightButton?: React.ComponentProps<typeof Button>;
|
|
39
|
+
}
|
|
40
|
+
declare const MultiPageSheetFooter: {
|
|
41
|
+
({ className, addTopSeparator, children, leftButton, centerButton, rightButton, ...props }: MultiPageSheetFooterProps): React.JSX.Element;
|
|
42
|
+
displayName: string;
|
|
43
|
+
};
|
|
28
44
|
interface MultiPageSheetContentProps extends MultiPageSheetProps {
|
|
29
45
|
children?: never;
|
|
30
46
|
}
|
|
31
47
|
declare const MultiPageSheetContent: React.ForwardRefExoticComponent<MultiPageSheetContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
32
|
-
export { MultiPageSheetRoot as MultiPageSheet, MultiPageSheetClose, MultiPageSheetContent, type MultiPageSheetPage, type MultiPageSheetProps, MultiPageSheetTrigger, };
|
|
48
|
+
export { MultiPageSheetRoot as MultiPageSheet, MultiPageSheetClose, MultiPageSheetContent, MultiPageSheetFooter, type MultiPageSheetFooterProps, type MultiPageSheetPage, type MultiPageSheetProps, MultiPageSheetTrigger, };
|
|
33
49
|
//# sourceMappingURL=MultiPageSheet.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiPageSheet.d.ts","sourceRoot":"","sources":["../../../src/components/MultiPageSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiPageSheet.d.ts","sourceRoot":"","sources":["../../../src/components/MultiPageSheet.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAmB,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAIL,YAAY,EAKb,MAAM,2BAA2B,CAAC;AAInC,UAAU,kBAAkB;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,UAAU,mBAAmB;IAC3B,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;IACzD,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,KAAK,IAAI,CAAC;IACtE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IAClD,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,kBAAkB,wDAAQ,CAAC;AACjC,QAAA,MAAM,qBAAqB,+HAAe,CAAC;AAC3C,QAAA,MAAM,mBAAmB,6HAAa,CAAC;AAEvC,UAAU,yBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;CACnD;AAED,QAAA,MAAM,oBAAoB;gGAQvB,yBAAyB;;CAyB3B,CAAC;AAIF,UAAU,0BAA2B,SAAQ,mBAAmB;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB;AAED,QAAA,MAAM,qBAAqB,mGAoJ1B,CAAC;AAIF,OAAO,EACL,kBAAkB,IAAI,cAAc,EACpC,mBAAmB,EACnB,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,yBAAyB,EAC9B,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,qBAAqB,GACtB,CAAC"}
|
|
@@ -1,13 +1,28 @@
|
|
|
1
1
|
import { __assign, __rest } from "tslib";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import { Button, Icon } from "../components";
|
|
4
|
-
import { Sheet, SheetClose, SheetContainer, SheetContent, SheetDescription,
|
|
3
|
+
import { Button, Icon, Separator } from "../components";
|
|
4
|
+
import { Sheet, SheetClose, SheetContainer, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, } from "../components/Sheet";
|
|
5
5
|
import { ChevronLeftIcon, ChevronRightIcon } from "../icons/app";
|
|
6
|
+
import { cn } from "../lib/utils";
|
|
6
7
|
var MultiPageSheetRoot = Sheet;
|
|
7
8
|
var MultiPageSheetTrigger = SheetTrigger;
|
|
8
9
|
var MultiPageSheetClose = SheetClose;
|
|
10
|
+
var MultiPageSheetFooter = function (_a) {
|
|
11
|
+
var className = _a.className, addTopSeparator = _a.addTopSeparator, children = _a.children, leftButton = _a.leftButton, centerButton = _a.centerButton, rightButton = _a.rightButton, props = __rest(_a, ["className", "addTopSeparator", "children", "leftButton", "centerButton", "rightButton"]);
|
|
12
|
+
var content = (React.createElement("div", __assign({ className: cn("s-flex s-flex-none s-flex-col s-gap-3 s-p-4", className) }, props),
|
|
13
|
+
children,
|
|
14
|
+
React.createElement("div", { className: "s-flex s-flex-row s-justify-between" },
|
|
15
|
+
React.createElement("div", null, leftButton && React.createElement(Button, __assign({}, leftButton))),
|
|
16
|
+
React.createElement("div", { className: "s-flex s-gap-2" },
|
|
17
|
+
centerButton && React.createElement(Button, __assign({}, centerButton)),
|
|
18
|
+
rightButton && React.createElement(Button, __assign({}, rightButton))))));
|
|
19
|
+
return addTopSeparator ? (React.createElement(React.Fragment, null,
|
|
20
|
+
React.createElement(Separator, null),
|
|
21
|
+
content)) : (React.createElement(React.Fragment, null, content));
|
|
22
|
+
};
|
|
23
|
+
MultiPageSheetFooter.displayName = "MultiPageSheetFooter";
|
|
9
24
|
var MultiPageSheetContent = React.forwardRef(function (_a, ref) {
|
|
10
|
-
var pages = _a.pages, currentPageId = _a.currentPageId, onPageChange = _a.onPageChange, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.side, side = _c === void 0 ? "right" : _c, trapFocusScope = _a.trapFocusScope, _d = _a.showNavigation, showNavigation = _d === void 0 ? true : _d, _e = _a.showHeaderNavigation, showHeaderNavigation = _e === void 0 ? true : _e, footerContent = _a.footerContent,
|
|
25
|
+
var pages = _a.pages, currentPageId = _a.currentPageId, onPageChange = _a.onPageChange, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.side, side = _c === void 0 ? "right" : _c, trapFocusScope = _a.trapFocusScope, _d = _a.showNavigation, showNavigation = _d === void 0 ? true : _d, _e = _a.showHeaderNavigation, showHeaderNavigation = _e === void 0 ? true : _e, footerContent = _a.footerContent, className = _a.className, _f = _a.disableNext, disableNext = _f === void 0 ? false : _f, _g = _a.addFooterSeparator, addFooterSeparator = _g === void 0 ? false : _g, leftButton = _a.leftButton, centerButton = _a.centerButton, rightButton = _a.rightButton, props = __rest(_a, ["pages", "currentPageId", "onPageChange", "size", "side", "trapFocusScope", "showNavigation", "showHeaderNavigation", "footerContent", "className", "disableNext", "addFooterSeparator", "leftButton", "centerButton", "rightButton"]);
|
|
11
26
|
var currentPageIndex = pages.findIndex(function (page) { return page.id === currentPageId; });
|
|
12
27
|
var currentPage = pages[currentPageIndex];
|
|
13
28
|
var handlePrevious = function (e) {
|
|
@@ -45,38 +60,14 @@ var MultiPageSheetContent = React.forwardRef(function (_a, ref) {
|
|
|
45
60
|
currentPageIndex + 1,
|
|
46
61
|
" / ",
|
|
47
62
|
pages.length)))),
|
|
48
|
-
React.createElement(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
label: "Previous",
|
|
56
|
-
variant: "outline",
|
|
57
|
-
size: "sm",
|
|
58
|
-
onClick: handlePrevious,
|
|
59
|
-
}
|
|
60
|
-
: undefined, rightEndButtonProps: showNavigation && pages.length > 1 && hasNext
|
|
61
|
-
? {
|
|
62
|
-
label: "Next",
|
|
63
|
-
variant: "outline",
|
|
64
|
-
size: "sm",
|
|
65
|
-
disabled: disableNext,
|
|
66
|
-
onClick: handleNext,
|
|
67
|
-
}
|
|
68
|
-
: showNavigation && pages.length > 1 && !hasNext && onSave
|
|
69
|
-
? {
|
|
70
|
-
label: "Save changes",
|
|
71
|
-
variant: "primary",
|
|
72
|
-
size: "sm",
|
|
73
|
-
disabled: disableSave,
|
|
74
|
-
onClick: function (e) {
|
|
75
|
-
onSave(e);
|
|
76
|
-
},
|
|
77
|
-
}
|
|
78
|
-
: undefined }, footerContent)));
|
|
63
|
+
React.createElement("div", { className: "s-min-h-0 s-flex-1 s-overflow-hidden" },
|
|
64
|
+
React.createElement("div", { className: cn("s-h-full", currentPage.fixedContent ? "s-flex s-flex-col" : "") },
|
|
65
|
+
currentPage.fixedContent && (React.createElement(React.Fragment, null,
|
|
66
|
+
React.createElement("div", { className: "s-flex-none s-px-5 s-py-4" }, currentPage.fixedContent),
|
|
67
|
+
React.createElement(Separator, null))),
|
|
68
|
+
React.createElement(SheetContainer, { className: currentPage.fixedContent ? "s-flex-1" : undefined }, currentPage.content))),
|
|
69
|
+
React.createElement(MultiPageSheetFooter, { leftButton: leftButton, centerButton: centerButton, rightButton: rightButton, addTopSeparator: addFooterSeparator }, footerContent)));
|
|
79
70
|
});
|
|
80
71
|
MultiPageSheetContent.displayName = "MultiPageSheetContent";
|
|
81
|
-
export { MultiPageSheetRoot as MultiPageSheet, MultiPageSheetClose, MultiPageSheetContent, MultiPageSheetTrigger, };
|
|
72
|
+
export { MultiPageSheetRoot as MultiPageSheet, MultiPageSheetClose, MultiPageSheetContent, MultiPageSheetFooter, MultiPageSheetTrigger, };
|
|
82
73
|
//# sourceMappingURL=MultiPageSheet.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiPageSheet.js","sourceRoot":"","sources":["../../../src/components/MultiPageSheet.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"MultiPageSheet.js","sourceRoot":"","sources":["../../../src/components/MultiPageSheet.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
|
|
3
|
-
import { Button, Icon } from "@sparkle/components";
|
|
3
|
+
import { Button, Icon, Separator } from "@sparkle/components";
|
|
4
4
|
import {
|
|
5
5
|
Sheet,
|
|
6
6
|
SheetClose,
|
|
7
7
|
SheetContainer,
|
|
8
8
|
SheetContent,
|
|
9
9
|
SheetDescription,
|
|
10
|
-
SheetFooter,
|
|
11
10
|
SheetHeader,
|
|
12
11
|
SheetTitle,
|
|
13
12
|
SheetTrigger,
|
|
14
13
|
} from "@sparkle/components/Sheet";
|
|
15
14
|
import { ChevronLeftIcon, ChevronRightIcon } from "@sparkle/icons/app";
|
|
15
|
+
import { cn } from "@sparkle/lib/utils";
|
|
16
16
|
|
|
17
17
|
interface MultiPageSheetPage {
|
|
18
18
|
id: string;
|
|
@@ -20,6 +20,7 @@ interface MultiPageSheetPage {
|
|
|
20
20
|
description?: string;
|
|
21
21
|
icon?: React.ComponentType;
|
|
22
22
|
content: React.ReactNode;
|
|
23
|
+
fixedContent?: React.ReactNode;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
interface MultiPageSheetProps {
|
|
@@ -36,12 +37,61 @@ interface MultiPageSheetProps {
|
|
|
36
37
|
className?: string;
|
|
37
38
|
disableNext?: boolean;
|
|
38
39
|
disableSave?: boolean;
|
|
40
|
+
leftButton?: React.ComponentProps<typeof Button>;
|
|
41
|
+
centerButton?: React.ComponentProps<typeof Button>;
|
|
42
|
+
rightButton?: React.ComponentProps<typeof Button>;
|
|
43
|
+
addFooterSeparator?: boolean;
|
|
39
44
|
}
|
|
40
45
|
|
|
41
46
|
const MultiPageSheetRoot = Sheet;
|
|
42
47
|
const MultiPageSheetTrigger = SheetTrigger;
|
|
43
48
|
const MultiPageSheetClose = SheetClose;
|
|
44
49
|
|
|
50
|
+
interface MultiPageSheetFooterProps
|
|
51
|
+
extends React.HTMLAttributes<HTMLDivElement> {
|
|
52
|
+
addTopSeparator: boolean;
|
|
53
|
+
leftButton?: React.ComponentProps<typeof Button>;
|
|
54
|
+
centerButton?: React.ComponentProps<typeof Button>;
|
|
55
|
+
rightButton?: React.ComponentProps<typeof Button>;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
const MultiPageSheetFooter = ({
|
|
59
|
+
className,
|
|
60
|
+
addTopSeparator,
|
|
61
|
+
children,
|
|
62
|
+
leftButton,
|
|
63
|
+
centerButton,
|
|
64
|
+
rightButton,
|
|
65
|
+
...props
|
|
66
|
+
}: MultiPageSheetFooterProps) => {
|
|
67
|
+
const content = (
|
|
68
|
+
<div
|
|
69
|
+
className={cn("s-flex s-flex-none s-flex-col s-gap-3 s-p-4", className)}
|
|
70
|
+
{...props}
|
|
71
|
+
>
|
|
72
|
+
{children}
|
|
73
|
+
<div className="s-flex s-flex-row s-justify-between">
|
|
74
|
+
<div>{leftButton && <Button {...leftButton} />}</div>
|
|
75
|
+
<div className="s-flex s-gap-2">
|
|
76
|
+
{centerButton && <Button {...centerButton} />}
|
|
77
|
+
{rightButton && <Button {...rightButton} />}
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
);
|
|
82
|
+
|
|
83
|
+
return addTopSeparator ? (
|
|
84
|
+
<>
|
|
85
|
+
<Separator />
|
|
86
|
+
{content}
|
|
87
|
+
</>
|
|
88
|
+
) : (
|
|
89
|
+
<>{content}</>
|
|
90
|
+
);
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
MultiPageSheetFooter.displayName = "MultiPageSheetFooter";
|
|
94
|
+
|
|
45
95
|
interface MultiPageSheetContentProps extends MultiPageSheetProps {
|
|
46
96
|
children?: never;
|
|
47
97
|
}
|
|
@@ -61,10 +111,12 @@ const MultiPageSheetContent = React.forwardRef<
|
|
|
61
111
|
showNavigation = true,
|
|
62
112
|
showHeaderNavigation = true,
|
|
63
113
|
footerContent,
|
|
64
|
-
onSave,
|
|
65
114
|
className,
|
|
66
115
|
disableNext = false,
|
|
67
|
-
|
|
116
|
+
addFooterSeparator = false,
|
|
117
|
+
leftButton,
|
|
118
|
+
centerButton,
|
|
119
|
+
rightButton,
|
|
68
120
|
...props
|
|
69
121
|
},
|
|
70
122
|
ref
|
|
@@ -158,50 +210,37 @@ const MultiPageSheetContent = React.forwardRef<
|
|
|
158
210
|
</div>
|
|
159
211
|
</SheetHeader>
|
|
160
212
|
|
|
161
|
-
<
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
: undefined
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
? {
|
|
190
|
-
label: "Save changes",
|
|
191
|
-
variant: "primary",
|
|
192
|
-
size: "sm",
|
|
193
|
-
disabled: disableSave,
|
|
194
|
-
onClick: (
|
|
195
|
-
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
|
|
196
|
-
) => {
|
|
197
|
-
onSave(e);
|
|
198
|
-
},
|
|
199
|
-
}
|
|
200
|
-
: undefined
|
|
201
|
-
}
|
|
213
|
+
<div className="s-min-h-0 s-flex-1 s-overflow-hidden">
|
|
214
|
+
<div
|
|
215
|
+
className={cn(
|
|
216
|
+
"s-h-full",
|
|
217
|
+
currentPage.fixedContent ? "s-flex s-flex-col" : ""
|
|
218
|
+
)}
|
|
219
|
+
>
|
|
220
|
+
{currentPage.fixedContent && (
|
|
221
|
+
<>
|
|
222
|
+
<div className="s-flex-none s-px-5 s-py-4">
|
|
223
|
+
{currentPage.fixedContent}
|
|
224
|
+
</div>
|
|
225
|
+
<Separator />
|
|
226
|
+
</>
|
|
227
|
+
)}
|
|
228
|
+
<SheetContainer
|
|
229
|
+
className={currentPage.fixedContent ? "s-flex-1" : undefined}
|
|
230
|
+
>
|
|
231
|
+
{currentPage.content}
|
|
232
|
+
</SheetContainer>
|
|
233
|
+
</div>
|
|
234
|
+
</div>
|
|
235
|
+
|
|
236
|
+
<MultiPageSheetFooter
|
|
237
|
+
leftButton={leftButton}
|
|
238
|
+
centerButton={centerButton}
|
|
239
|
+
rightButton={rightButton}
|
|
240
|
+
addTopSeparator={addFooterSeparator}
|
|
202
241
|
>
|
|
203
242
|
{footerContent}
|
|
204
|
-
</
|
|
243
|
+
</MultiPageSheetFooter>
|
|
205
244
|
</SheetContent>
|
|
206
245
|
);
|
|
207
246
|
}
|
|
@@ -213,6 +252,8 @@ export {
|
|
|
213
252
|
MultiPageSheetRoot as MultiPageSheet,
|
|
214
253
|
MultiPageSheetClose,
|
|
215
254
|
MultiPageSheetContent,
|
|
255
|
+
MultiPageSheetFooter,
|
|
256
|
+
type MultiPageSheetFooterProps,
|
|
216
257
|
type MultiPageSheetPage,
|
|
217
258
|
type MultiPageSheetProps,
|
|
218
259
|
MultiPageSheetTrigger,
|