@teamsparta/stack-bottom-sheet
Version:
stack bottom sheet
736 lines (710 loc) • 25 kB
JavaScript
"use client";
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
Body: () => Body,
BottomSheetBody: () => BottomSheetBody,
BottomSheetButton: () => BottomSheetButton,
BottomSheetButtonGroup: () => BottomSheetButtonGroup,
BottomSheetCaption: () => BottomSheetCaption,
BottomSheetClose: () => BottomSheetClose,
BottomSheetCloseButton: () => BottomSheetCloseButton,
BottomSheetContent: () => BottomSheetContent,
BottomSheetDescription: () => BottomSheetDescription,
BottomSheetFooter: () => BottomSheetFooter,
BottomSheetHeader: () => BottomSheetHeader,
BottomSheetOverlay: () => BottomSheetOverlay,
BottomSheetRoot: () => BottomSheetRoot,
BottomSheetSubTitle: () => BottomSheetSubTitle,
BottomSheetTitle: () => BottomSheetTitle,
BottomSheetTrigger: () => BottomSheetTrigger,
Button: () => Button2,
ButtonGroup: () => ButtonGroup,
Caption: () => Caption,
Close: () => Close,
CloseButton: () => CloseButton,
Content: () => Content,
Description: () => Description,
Footer: () => Footer,
Header: () => Header,
Overlay: () => Overlay,
Root: () => Root2,
SubTitle: () => SubTitle,
Title: () => Title,
Trigger: () => Trigger
});
module.exports = __toCommonJS(src_exports);
// src/compounds/BottomSheetBody.tsx
var import_react3 = require("react");
// src/style.ts
var import_react = require("@emotion/react");
var import_stack_tokens = require("@teamsparta/stack-tokens");
var import_stack_utils = require("@teamsparta/stack-utils");
var import_stack_z_index = require("@teamsparta/stack-z-index");
var bottomSheetBodyPaddingVar = "--stack-bottom-sheet-body-padding";
var BOTTOM_SHEET_MAX_WIDTH = 600;
var overlayCss = (0, import_react.css)({
backgroundColor: import_stack_tokens.vars.dimm.default,
position: "fixed",
inset: 0
});
var contentWrapperCss = (0, import_react.css)({
position: "fixed",
bottom: 0,
left: 0,
right: 0,
backgroundColor: import_stack_tokens.vars.background.modal,
borderRadius: "20px 20px 0 0",
boxShadow: import_stack_tokens.vars.shadow.elevation1,
zIndex: import_stack_z_index.zIndex.modal,
width: "100%",
maxWidth: BOTTOM_SHEET_MAX_WIDTH,
margin: "0 auto"
});
var contentCss = (0, import_react.css)({
display: "flex",
flexDirection: "column",
width: "100%",
maxHeight: "calc(100dvh - 40px)",
height: "auto"
});
var fogCss = (0, import_react.css)({
position: "absolute",
bottom: 0,
left: 0,
right: 0,
height: "16px",
background: `linear-gradient(to bottom, color-mix(in srgb, ${import_stack_tokens.vars.background.modal} 0%, transparent), ${import_stack_tokens.vars.background.modal})`
});
var bodyCss = (0, import_react.css)({
padding: (0, import_stack_utils.getVar)(bottomSheetBodyPaddingVar),
flex: 1
});
var headerCss = (0, import_react.css)({
position: "relative",
padding: "28px 20px 16px 20px"
});
var headerDismissibleCss = (0, import_react.css)({
paddingTop: "40px"
});
var titleCss = (0, import_react.css)({
wordBreak: "keep-all",
whiteSpace: "pre-wrap"
});
var subTitleCss = (0, import_react.css)({
marginBottom: "4px"
});
var descriptionCss = (0, import_react.css)({
wordBreak: "keep-all",
whiteSpace: "pre-wrap",
marginTop: "4px"
});
var footerCss = (0, import_react.css)({
padding: "8px 20px 20px 20px"
});
var captionCss = (0, import_react.css)({
width: "100%",
marginTop: 16,
wordBreak: "keep-all",
whiteSpace: "pre-wrap"
});
var scrollAreaRootCss = (0, import_react.css)({
height: "100%",
width: "100%",
overflow: "hidden",
display: "flex",
flexDirection: "column"
});
var scrollAreaContentCss = (0, import_react.css)({
flex: 1,
overflow: "auto"
});
var scrollAreaScrollbarCss = (0, import_react.css)({
width: "12px",
display: "flex",
userSelect: "none",
touchAction: "none",
paddingInline: "4px",
transition: "background-color 160ms ease-out"
});
var scrollAreaThumbCss = (0, import_react.css)({
flex: 1,
backgroundColor: import_stack_tokens.vars.neutral[30],
borderRadius: "10px",
position: "relative",
transition: "background-color 160ms ease-out"
});
var closeButtonCss = (0, import_react.css)({
position: "absolute",
right: 16,
top: 20,
zIndex: 1,
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
padding: 0,
width: 28,
height: 28,
flexShrink: 0,
borderRadius: "50%",
backgroundColor: import_stack_tokens.vars.fill.subtle,
border: "none",
cursor: "pointer"
});
var grabberCss = (0, import_react.css)({
"&&": {
position: "absolute",
top: 12,
left: "50%",
transform: "translateX(-50%)",
width: 40,
height: 4,
borderRadius: 100,
backgroundColor: import_stack_tokens.vars.bottomSheet.grabber.background
},
"& [data-vaul-handle-hitarea]": {
width: "100vw",
maxWidth: BOTTOM_SHEET_MAX_WIDTH
}
});
// src/compounds/ScrollArea.tsx
var RadixScrollArea = __toESM(require("@radix-ui/react-scroll-area"));
var import_react2 = require("react");
var import_jsx_runtime = require("@emotion/react/jsx-runtime");
var ScrollArea = (0, import_react2.forwardRef)((_a, ref) => {
var _b = _a, { children, scrollHideDelay = 100 } = _b, restProps = __objRest(_b, ["children", "scrollHideDelay"]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
RadixScrollArea.Root,
__spreadProps(__spreadValues({
ref,
scrollHideDelay,
css: scrollAreaRootCss
}, restProps), {
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixScrollArea.Viewport, { css: scrollAreaContentCss, children }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
RadixScrollArea.Scrollbar,
{
orientation: "vertical",
css: scrollAreaScrollbarCss,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RadixScrollArea.Thumb, { css: scrollAreaThumbCss })
}
)
]
})
);
});
ScrollArea.displayName = "ScrollArea";
// src/compounds/BottomSheetBody.tsx
var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
var BottomSheetBody = (0, import_react3.forwardRef)(
(_a, ref) => {
var _b = _a, {
children,
padding = "0 20px 20px 20px",
style: styleFromProps
} = _b, restProps = __objRest(_b, [
"children",
"padding",
"style"
]);
const style = __spreadValues({
[bottomSheetBodyPaddingVar]: padding
}, styleFromProps);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", __spreadProps(__spreadValues({ ref, style, css: bodyCss }, restProps), { children: [
children,
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { "aria-hidden": "true", css: fogCss })
] })) });
}
);
BottomSheetBody.displayName = "BottomSheetBody";
// src/compounds/BottomSheetButton.tsx
var import_stack_button = require("@teamsparta/stack-button");
var import_react4 = require("react");
var import_jsx_runtime3 = require("@emotion/react/jsx-runtime");
var BottomSheetButton = (0, import_react4.forwardRef)(
(_a, ref) => {
var _b = _a, {
children,
variant = "solid",
colorScheme = "primary",
size = "lg",
fullWidth = true
} = _b, restProps = __objRest(_b, [
"children",
"variant",
"colorScheme",
"size",
"fullWidth"
]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_stack_button.Button,
__spreadProps(__spreadValues({
ref,
variant,
colorScheme,
size,
fullWidth
}, restProps), {
children
})
);
}
);
BottomSheetButton.displayName = "BottomSheetButton";
// src/compounds/BottomSheetButtonGroup.tsx
var import_stack_flex = require("@teamsparta/stack-flex");
var import_react5 = require("react");
var import_jsx_runtime4 = require("@emotion/react/jsx-runtime");
var BottomSheetButtonGroup = (0, import_react5.forwardRef)(
(_a, ref) => {
var _b = _a, { children, gap = 8, direction = "row", fullWidth = true } = _b, restProps = __objRest(_b, ["children", "gap", "direction", "fullWidth"]);
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
import_stack_flex.Flex,
__spreadProps(__spreadValues({
ref,
gap,
direction,
fullWidth
}, restProps), {
children
})
);
}
);
BottomSheetButtonGroup.displayName = "BottomSheetButtonGroup";
// src/compounds/BottomSheetCaption.tsx
var import_stack_text = require("@teamsparta/stack-text");
var import_stack_tokens2 = require("@teamsparta/stack-tokens");
var import_react6 = require("react");
var import_jsx_runtime5 = require("@emotion/react/jsx-runtime");
var BottomSheetCaption = (0, import_react6.forwardRef)(
(_a, ref) => {
var _b = _a, {
children,
font = "captionM",
color = import_stack_tokens2.vars.text.quaternary,
align = "center"
} = _b, restProps = __objRest(_b, [
"children",
"font",
"color",
"align"
]);
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
import_stack_text.Text,
__spreadProps(__spreadValues({
ref,
as: "p",
font,
color,
align,
css: captionCss
}, restProps), {
children
})
);
}
);
BottomSheetCaption.displayName = "BottomSheetCaption";
// src/compounds/BottomSheetClose.tsx
var import_react7 = require("react");
var import_vaul = require("vaul");
var import_jsx_runtime6 = require("@emotion/react/jsx-runtime");
var BottomSheetClose = (0, import_react7.forwardRef)((_a, ref) => {
var _b = _a, { asChild = true, children } = _b, restProps = __objRest(_b, ["asChild", "children"]);
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_vaul.Drawer.Close, __spreadProps(__spreadValues({ ref, asChild }, restProps), { children }));
});
BottomSheetClose.displayName = "BottomSheetClose";
// src/compounds/BottomSheetCloseButton.tsx
var import_stack_icons = require("@teamsparta/stack-icons");
var import_stack_tokens3 = require("@teamsparta/stack-tokens");
var import_react8 = require("react");
var import_vaul2 = require("vaul");
var import_jsx_runtime7 = require("@emotion/react/jsx-runtime");
var BottomSheetCloseButton = (0, import_react8.forwardRef)((_a, ref) => {
var _b = _a, { asChild = true } = _b, restProps = __objRest(_b, ["asChild"]);
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_vaul2.Drawer.Close, __spreadProps(__spreadValues({ ref, asChild }, restProps), { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", "aria-label": "\uB2EB\uAE30", css: closeButtonCss, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_stack_icons.NavigationClose, { size: 16, color: import_stack_tokens3.vars.icon.quaternary }) }) }));
});
BottomSheetCloseButton.displayName = "BottomSheetCloseButton";
// src/compounds/BottomSheetContent.tsx
var import_react10 = require("react");
var import_vaul4 = require("vaul");
// src/context.ts
var import_stack_utils2 = require("@teamsparta/stack-utils");
var [BottomSheetProvider, useBottomSheet] = (0, import_stack_utils2.createContext)("BottomSheetRoot");
// src/compounds/BottomSheetOverlay.tsx
var import_stack_core = require("@teamsparta/stack-core");
var import_stack_z_index2 = require("@teamsparta/stack-z-index");
var import_react9 = require("react");
var import_vaul3 = require("vaul");
var import_jsx_runtime8 = require("@emotion/react/jsx-runtime");
var BottomSheetOverlay = (0, import_react9.forwardRef)((_a, ref) => {
var _b = _a, { children, style: styleFromProps } = _b, restProps = __objRest(_b, ["children", "style"]);
const { theme } = useBottomSheet("BottomSheetOverlay");
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
import_vaul3.Drawer.Overlay,
__spreadProps(__spreadValues({
asChild: false,
ref,
style: __spreadValues({
position: "relative",
zIndex: import_stack_z_index2.zIndex.overlay
}, styleFromProps)
}, restProps), {
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_stack_core.StackThemeProvider, { theme, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { css: overlayCss, children }) })
})
);
});
BottomSheetOverlay.displayName = "BottomSheetOverlay";
// src/compounds/BottomSheetContent.tsx
var import_jsx_runtime9 = require("@emotion/react/jsx-runtime");
var BottomSheetContent = (0, import_react10.forwardRef)(
(_a, ref) => {
var _b = _a, {
children,
onInteractOutside,
style,
overlay = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(BottomSheetOverlay, {})
} = _b, restProps = __objRest(_b, [
"children",
"onInteractOutside",
"style",
"overlay"
]);
const {
closeOnInteractOutside: closeOnInteractOutsideFromContext,
theme,
dismissible
} = useBottomSheet("BottomSheetContent");
const hasOverlay = overlay !== null;
const closeOnInteractOutside = hasOverlay && dismissible ? closeOnInteractOutsideFromContext : false;
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_vaul4.Drawer.Portal, { children: [
overlay,
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
import_vaul4.Drawer.Content,
__spreadProps(__spreadValues({
"data-stack-color-theme": theme,
ref,
asChild: false,
css: contentWrapperCss,
style,
onInteractOutside: closeOnInteractOutside ? onInteractOutside : (e) => {
e.preventDefault();
onInteractOutside == null ? void 0 : onInteractOutside(e);
}
}, restProps), {
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { css: contentCss, children })
})
)
] });
}
);
BottomSheetContent.displayName = "BottomSheetContent";
// src/compounds/BottomSheetDescription.tsx
var import_stack_text2 = require("@teamsparta/stack-text");
var import_stack_tokens4 = require("@teamsparta/stack-tokens");
var import_react11 = require("react");
var import_vaul5 = require("vaul");
var import_jsx_runtime10 = require("@emotion/react/jsx-runtime");
var BottomSheetDescription = (0, import_react11.forwardRef)(
(_a, ref) => {
var _b = _a, {
children,
font = "bodyCompact",
color = import_stack_tokens4.vars.text.tertiary
} = _b, restProps = __objRest(_b, [
"children",
"font",
"color"
]);
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_vaul5.Drawer.Description, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
import_stack_text2.Text,
__spreadProps(__spreadValues({
ref,
as: "p",
font,
color,
css: descriptionCss
}, restProps), {
children
})
) });
}
);
BottomSheetDescription.displayName = "BottomSheetDescription";
// src/compounds/BottomSheetFooter.tsx
var import_stack_flex2 = require("@teamsparta/stack-flex");
var import_react12 = require("react");
var import_jsx_runtime11 = require("@emotion/react/jsx-runtime");
var BottomSheetFooter = (0, import_react12.forwardRef)((_a, ref) => {
var _b = _a, { children, direction = "column" } = _b, restProps = __objRest(_b, ["children", "direction"]);
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
import_stack_flex2.Flex,
__spreadProps(__spreadValues({
ref,
as: "footer",
direction,
css: footerCss
}, restProps), {
children
})
);
});
BottomSheetFooter.displayName = "BottomSheetFooter";
// src/compounds/BottomSheetHeader.tsx
var import_stack_flex3 = require("@teamsparta/stack-flex");
var import_react14 = require("react");
// src/compounds/BottomSheetGrabber.tsx
var import_react13 = require("react");
var import_vaul6 = require("vaul");
var import_jsx_runtime12 = require("@emotion/react/jsx-runtime");
var BottomSheetGrabber = (0, import_react13.forwardRef)((_a, ref) => {
var restProps = __objRest(_a, []);
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_vaul6.Handle, __spreadValues({ ref, css: grabberCss }, restProps));
});
BottomSheetGrabber.displayName = "BottomSheetGrabber";
// src/compounds/BottomSheetHeader.tsx
var import_jsx_runtime13 = require("@emotion/react/jsx-runtime");
var BottomSheetHeader = (0, import_react14.forwardRef)((_a, ref) => {
var _b = _a, { children, direction = "column" } = _b, restProps = __objRest(_b, ["children", "direction"]);
const { dismissible, hideCloseButton } = useBottomSheet("BottomSheetHeader");
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
import_stack_flex3.Flex,
__spreadProps(__spreadValues({
ref,
as: "header",
direction,
css: [headerCss, dismissible && headerDismissibleCss]
}, restProps), {
children: [
children,
!hideCloseButton && dismissible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BottomSheetCloseButton, {}),
dismissible && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(BottomSheetGrabber, {})
]
})
);
});
BottomSheetHeader.displayName = "BottomSheetHeader";
// src/compounds/BottomSheetRoot.tsx
var import_stack_core2 = require("@teamsparta/stack-core");
var import_stack_utils3 = require("@teamsparta/stack-utils");
var import_vaul7 = require("vaul");
var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
var BottomSheetRoot = (_a) => {
var _b = _a, {
children,
open: openFromProps,
onOpenChange: onOpenChangeFromProps,
defaultOpen: defaultOpenFromProps,
closeOnInteractOutside = true,
theme: themeFromProps,
hideCloseButton = false,
handleOnly = true,
dismissible = true,
repositionInputs = false,
VAUL_DISMISSIBLE = true
} = _b, restProps = __objRest(_b, [
"children",
"open",
"onOpenChange",
"defaultOpen",
"closeOnInteractOutside",
"theme",
"hideCloseButton",
"handleOnly",
"dismissible",
"repositionInputs",
"VAUL_DISMISSIBLE"
]);
const [open = false, onOpenChange] = (0, import_stack_utils3.useControllableState)({
prop: openFromProps,
defaultProp: defaultOpenFromProps,
onChange: onOpenChangeFromProps
});
const { theme: themeFromContext } = (0, import_stack_core2.useThemeContext)("BottomSheet");
const theme = themeFromProps != null ? themeFromProps : themeFromContext;
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
BottomSheetProvider,
{
closeOnInteractOutside,
theme,
hideCloseButton,
dismissible,
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
import_vaul7.Drawer.Root,
__spreadProps(__spreadValues({
open,
onOpenChange,
handleOnly,
dismissible: VAUL_DISMISSIBLE,
repositionInputs
}, restProps), {
children
})
)
}
);
};
// src/compounds/BottomSheetSubTitle.tsx
var import_stack_text3 = require("@teamsparta/stack-text");
var import_stack_tokens5 = require("@teamsparta/stack-tokens");
var import_react15 = require("react");
var import_jsx_runtime15 = require("@emotion/react/jsx-runtime");
var BottomSheetSubTitle = (0, import_react15.forwardRef)(
(_a, ref) => {
var _b = _a, { children, font = "bodyB", color = import_stack_tokens5.vars.text.tertiary } = _b, restProps = __objRest(_b, ["children", "font", "color"]);
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
import_stack_text3.Text,
__spreadProps(__spreadValues({
ref,
as: "h3",
font,
color,
css: subTitleCss
}, restProps), {
children
})
);
}
);
BottomSheetSubTitle.displayName = "BottomSheetSubTitle";
// src/compounds/BottomSheetTitle.tsx
var import_stack_text4 = require("@teamsparta/stack-text");
var import_stack_tokens6 = require("@teamsparta/stack-tokens");
var import_react16 = require("react");
var import_vaul8 = require("vaul");
var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
var BottomSheetTitle = (0, import_react16.forwardRef)(
(_a, ref) => {
var _b = _a, { children, font = "subTitle2", color = import_stack_tokens6.vars.text.primary } = _b, restProps = __objRest(_b, ["children", "font", "color"]);
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_vaul8.Drawer.Title, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_stack_text4.Text,
__spreadProps(__spreadValues({
ref,
as: "h2",
font,
color,
css: titleCss
}, restProps), {
children
})
) });
}
);
BottomSheetTitle.displayName = "BottomSheetTitle";
// src/compounds/BottomSheetTrigger.tsx
var import_react17 = require("react");
var import_vaul9 = require("vaul");
var import_jsx_runtime17 = require("@emotion/react/jsx-runtime");
var BottomSheetTrigger = (0, import_react17.forwardRef)((_a, ref) => {
var _b = _a, { children, asChild = true } = _b, restProps = __objRest(_b, ["children", "asChild"]);
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_vaul9.Drawer.Trigger, __spreadProps(__spreadValues({ ref, asChild }, restProps), { children }));
});
BottomSheetTrigger.displayName = "BottomSheetTrigger";
// src/BottomSheet.tsx
var Root2 = BottomSheetRoot;
var Body = BottomSheetBody;
var Button2 = BottomSheetButton;
var ButtonGroup = BottomSheetButtonGroup;
var Close = BottomSheetClose;
var CloseButton = BottomSheetCloseButton;
var Content = BottomSheetContent;
var Description = BottomSheetDescription;
var Footer = BottomSheetFooter;
var Caption = BottomSheetCaption;
var Header = BottomSheetHeader;
var Overlay = BottomSheetOverlay;
var SubTitle = BottomSheetSubTitle;
var Title = BottomSheetTitle;
var Trigger = BottomSheetTrigger;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Body,
BottomSheetBody,
BottomSheetButton,
BottomSheetButtonGroup,
BottomSheetCaption,
BottomSheetClose,
BottomSheetCloseButton,
BottomSheetContent,
BottomSheetDescription,
BottomSheetFooter,
BottomSheetHeader,
BottomSheetOverlay,
BottomSheetRoot,
BottomSheetSubTitle,
BottomSheetTitle,
BottomSheetTrigger,
Button,
ButtonGroup,
Caption,
Close,
CloseButton,
Content,
Description,
Footer,
Header,
Overlay,
Root,
SubTitle,
Title,
Trigger
});