@envive-ai/react-toolkit 0.1.9 → 0.1.11

package/dist/ModalSheet/index.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime13 from "react/jsx-runtime";
+
+//#region src/components/ModalSheet/types.d.ts
+type ModalSheetProps = {
+  children: React.ReactNode;
+  isOpen: boolean;
+  closeModal: () => void;
+  desktopWidth?: number;
+  mobileFullHeight?: number;
+  animationDuration?: number;
+  headerProps: ModalSheetHeaderProps;
+  footerProps?: ModalSheetFooterProps;
+  showOverlay?: boolean;
+};
+type ModalSheetHeaderProps = {
+  headerVariant?: ModalSheetHeaderVariant;
+  headerContent: React.ReactNode;
+  handleHeaderClick?: () => void;
+  chevronColor: string;
+};
+type ModalSheetFooterProps = {
+  footerContent: React.ReactNode;
+  footerClassName?: string;
+};
+type ModalSheetHeaderVariant = 'primary';
+//#endregion
+//#region src/components/ModalSheet/ModalSheet.d.ts
+declare const ModalSheet: ({
+  children,
+  isOpen,
+  closeModal,
+  animationDuration,
+  desktopWidth,
+  headerProps,
+  footerProps
+}: ModalSheetProps) => react_jsx_runtime13.JSX.Element;
+//#endregion
+export { ModalSheet };

package/dist/ModalSheet/index.js

@@ -0,0 +1,3 @@
+import { ModalSheet } from "../ModalSheet-CZd5pssv.js";
+
+export { ModalSheet };

package/dist/ModalSheet-CXZgyZ4a.cjs

@@ -0,0 +1,335 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+let framer_motion = require("framer-motion");
+framer_motion = require_chunk.__toESM(framer_motion);
+let react = require("react");
+react = require_chunk.__toESM(react);
+let classnames = require("classnames");
+classnames = require_chunk.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_chunk.__toESM(react_jsx_runtime);
+let __envive_ai_react_hooks_hooks = require("@envive-ai/react-hooks/hooks");
+__envive_ai_react_hooks_hooks = require_chunk.__toESM(__envive_ai_react_hooks_hooks);
+
+//#region src/components/AnimatedChevron/AnimatedChevron.tsx
+const AnimatedChevron = ({ animationKey, chevronColor }) => {
+	const leftRotation = (0, framer_motion.useTransform)(animationKey, [300, 0], [-12, 0]);
+	const rightRotation = (0, framer_motion.useTransform)(animationKey, [300, 0], [12, 0]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: { display: "flex" },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, { style: {
+			x: 1,
+			width: "25px",
+			height: "4px",
+			background: chevronColor,
+			borderRadius: "8px",
+			rotate: leftRotation
+		} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, { style: {
+			x: -1,
+			width: "25px",
+			height: "4px",
+			background: chevronColor,
+			borderRadius: "8px",
+			rotate: rightRotation
+		} })]
+	});
+};
+
+//#endregion
+//#region src/components/ModalSheet/mobile/mobileHeader.tsx
+const modalSheetVariants$1 = { primary: {
+	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
+	"spiffy-tw-text-[--spiffy-colors-text-light]": true
+} };
+const ModalSheetMobileHeader = ({ headerVariant = "primary", headerContent, handleHeaderClick, chevronColor }) => {
+	const animationKey = (0, framer_motion.useMotionValue)(-1);
+	const headerClassName = (0, classnames.default)({
+		"spiffy-modal-sheet-header": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-justify-between": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-pt-[16px]": true,
+		"spiffy-tw-shadow-[0px_-8px_16px_0px_#0000001A]": true,
+		...modalSheetVariants$1[headerVariant]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
+		className: headerClassName,
+		onTouchStart: handleHeaderClick,
+		onMouseDown: handleHeaderClick,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnimatedChevron, {
+			animationKey,
+			chevronColor
+		}), headerContent]
+	});
+};
+
+//#endregion
+//#region src/components/ModalSheet/mobile/index.tsx
+const ModalSheetMobile = ({ children, isOpen, closeModal, mobileFullHeight = 180, animationDuration, headerProps, footerProps }) => {
+	const [isHidden, setIsHidden] = (0, react.useState)(isOpen ? "block" : "none");
+	const [bottom, setBottom] = (0, react.useState)(isOpen ? 0 : 0 - mobileFullHeight);
+	const [overlayOpacity, setOverlayOpacity] = (0, react.useState)(isOpen ? 1 : 0);
+	(0, react.useEffect)(() => {
+		setIsHidden(isOpen ? "block" : "none");
+		setBottom(isOpen ? 0 : 0 - mobileFullHeight);
+		setOverlayOpacity(isOpen ? 1 : 0);
+	}, [mobileFullHeight, isOpen]);
+	const overlayClassNames = (0, classnames.default)({
+		"spiffy-modal-sheet-overlay": true,
+		"spiffy-tw-fixed": true,
+		"spiffy-tw-inset-0": true,
+		"spiffy-tw-top-[0]": true,
+		"spiffy-tw-bottom-[0]": true,
+		"spiffy-tw-left-[0]": true,
+		"spiffy-tw-right-[0]": true,
+		"spiffy-tw-bg-black/30": true,
+		"spiffy-tw-z-[100]": true
+	});
+	const modalClassNames = (0, classnames.default)({
+		"spiffy-modal-sheet": true,
+		"spiffy-modal-sheet-open": isOpen,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-overflow-y-auto": true,
+		"spiffy-tw-shadow-lg": true,
+		"spiffy-tw-fixed": true,
+		"spiffy-tw-bg-white": true,
+		"spiffy-tw-border-box": true,
+		"spiffy-tw-rounded-t-[16px]": true,
+		"spiffy-tw-h-[89%]": true,
+		"spiffy-tw-max-h-[89%]": true
+	});
+	const contentClassNames = (0, classnames.default)({
+		"spiffy-modal-sheet-content": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-h-full": true
+	});
+	const headerClassNames = (0, classnames.default)({
+		"spiffy-tw-sticky": true,
+		"spiffy-tw-top-[0px]": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true
+	});
+	const { footerContent, footerClassName } = footerProps || {};
+	const footerClassNames = (0, classnames.default)({
+		"spiffy-tw-sticky": true,
+		"spiffy-tw-bottom-[0px]": true,
+		"spiffy-modal-sheet-footer": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true
+	}, footerClassName);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		className: overlayClassNames,
+		animate: {
+			opacity: overlayOpacity,
+			display: isHidden
+		},
+		onClick: closeModal,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			role: "dialog",
+			className: modalClassNames,
+			initial: {
+				bottom,
+				display: isHidden
+			},
+			animate: {
+				bottom,
+				display: isHidden
+			},
+			exit: {
+				bottom,
+				display: isHidden
+			},
+			transition: {
+				duration: animationDuration,
+				ease: "easeIn"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: contentClassNames,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: headerClassNames,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetMobileHeader, {
+							headerContent: headerProps.headerContent,
+							headerVariant: headerProps?.headerVariant,
+							handleHeaderClick: closeModal
+						})
+					}),
+					children,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "spiffy-tw-flex-grow" }),
+					footerContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: footerClassNames,
+						children: footerContent
+					})
+				]
+			})
+		})
+	}) });
+};
+
+//#endregion
+//#region src/components/ModalSheet/desktop/desktopHeader.tsx
+const modalSheetVariants = { primary: {
+	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
+	"spiffy-tw-text-[--spiffy-colors-text-light]": true
+} };
+const ModalSheetDesktopHeader = ({ headerVariant = "primary", headerContent }) => {
+	const headerStyles = (0, classnames.default)({
+		"spiffy-modal-sheet-header": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-justify-between": true,
+		"spiffy-tw-w-full": true,
+		...modalSheetVariants[headerVariant]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: headerStyles,
+		children: headerContent
+	});
+};
+
+//#endregion
+//#region src/components/ModalSheet/desktop/index.tsx
+const ModalSheetDesktop = ({ children, isOpen, closeModal, desktopWidth = 512, animationDuration, headerProps, footerProps, showOverlay = false }) => {
+	const [isHidden, setIsHidden] = (0, react.useState)(isOpen ? "block" : "none");
+	const [right, setRight] = (0, react.useState)(isOpen ? 0 : 0 - desktopWidth);
+	const [overlayOpacity, setOverlayOpacity] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		setIsHidden(isOpen ? "block" : "none");
+		setRight(isOpen ? 0 : 0 - desktopWidth);
+		setOverlayOpacity(isOpen ? 1 : 0);
+	}, [desktopWidth, isOpen]);
+	const overlayClassNames = (0, classnames.default)({
+		"spiffy-modal-sheet-overlay": true,
+		"spiffy-tw-fixed": true,
+		"spiffy-tw-inset-0": true,
+		"spiffy-tw-top-[0]": true,
+		"spiffy-tw-bottom-[0]": true,
+		"spiffy-tw-left-[0]": true,
+		"spiffy-tw-right-[0]": true,
+		"spiffy-tw-z-[2147483647]": true,
+		"spiffy-tw-bg-black/30": showOverlay
+	});
+	const modalClassNames = (0, classnames.default)({
+		"spiffy-modal-sheet": true,
+		"spiffy-modal-sheet-open": isOpen,
+		"spiffy-tw-max-h-full": true,
+		"spiffy-tw-h-screen": true,
+		"spiffy-tw-w-[512px]": true,
+		"spiffy-tw-shadow-lg": true,
+		"spiffy-tw-top-[0]": true,
+		"spiffy-tw-bottom-[0]": true,
+		"spiffy-tw-fixed": true,
+		"spiffy-tw-bg-white": true,
+		"spiffy-tw-border-box": true
+	});
+	const contentClassNames = (0, classnames.default)({
+		"spiffy-modal-sheet-content": true,
+		"spiffy-tw-overflow-y-auto": true,
+		"spiffy-tw-overflow-x-hidden": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-h-full": true,
+		"spiffy-tw-w-full": true
+	});
+	const headerClassNames = (0, classnames.default)({
+		"spiffy-tw-sticky": true,
+		"spiffy-tw-top-0": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true
+	});
+	const { footerContent, footerClassName } = footerProps || {};
+	const footerClassNames = (0, classnames.default)({
+		"spiffy-tw-sticky": true,
+		"spiffy-tw-bottom-0": true,
+		"spiffy-modal-sheet-footer": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true
+	}, footerClassName);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+		className: overlayClassNames,
+		initial: {
+			opacity: 0,
+			display: "none"
+		},
+		animate: {
+			opacity: overlayOpacity,
+			display: isHidden
+		},
+		onClick: closeModal,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			role: "dialog",
+			className: modalClassNames,
+			initial: {
+				right,
+				display: isHidden
+			},
+			animate: {
+				right,
+				display: isHidden
+			},
+			exit: {
+				right,
+				display: isHidden
+			},
+			transition: {
+				duration: animationDuration,
+				ease: "easeIn"
+			},
+			style: { width: desktopWidth },
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: contentClassNames,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: headerClassNames,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetDesktopHeader, {
+							headerContent: headerProps.headerContent,
+							headerVariant: headerProps?.headerVariant
+						})
+					}),
+					children,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "spiffy-tw-flex-grow" }),
+					footerContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: footerClassNames,
+						children: footerContent
+					})
+				]
+			})
+		})
+	}) });
+};
+
+//#endregion
+//#region src/components/ModalSheet/ModalSheet.tsx
+const ANIMATION_DURATION = .3;
+const ModalSheet = ({ children, isOpen, closeModal, animationDuration = ANIMATION_DURATION, desktopWidth = 512, headerProps, footerProps }) => {
+	return (0, __envive_ai_react_hooks_hooks.useIsSmallScreen)() ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetMobile, {
+		isOpen,
+		closeModal,
+		desktopWidth,
+		animationDuration,
+		headerProps,
+		footerProps,
+		children
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalSheetDesktop, {
+		isOpen,
+		closeModal,
+		desktopWidth,
+		animationDuration,
+		headerProps,
+		footerProps,
+		children
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'ModalSheet', {
+  enumerable: true,
+  get: function () {
+    return ModalSheet;
+  }
+});

package/dist/ModalSheet-CZd5pssv.js

@@ -0,0 +1,324 @@
+import { motion, useMotionValue, useTransform } from "framer-motion";
+import { useEffect, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useIsSmallScreen } from "@envive-ai/react-hooks/hooks";
+
+//#region src/components/AnimatedChevron/AnimatedChevron.tsx
+const AnimatedChevron = ({ animationKey, chevronColor }) => {
+	const leftRotation = useTransform(animationKey, [300, 0], [-12, 0]);
+	const rightRotation = useTransform(animationKey, [300, 0], [12, 0]);
+	return /* @__PURE__ */ jsxs("div", {
+		style: { display: "flex" },
+		children: [/* @__PURE__ */ jsx(motion.div, { style: {
+			x: 1,
+			width: "25px",
+			height: "4px",
+			background: chevronColor,
+			borderRadius: "8px",
+			rotate: leftRotation
+		} }), /* @__PURE__ */ jsx(motion.div, { style: {
+			x: -1,
+			width: "25px",
+			height: "4px",
+			background: chevronColor,
+			borderRadius: "8px",
+			rotate: rightRotation
+		} })]
+	});
+};
+
+//#endregion
+//#region src/components/ModalSheet/mobile/mobileHeader.tsx
+const modalSheetVariants$1 = { primary: {
+	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
+	"spiffy-tw-text-[--spiffy-colors-text-light]": true
+} };
+const ModalSheetMobileHeader = ({ headerVariant = "primary", headerContent, handleHeaderClick, chevronColor }) => {
+	const animationKey = useMotionValue(-1);
+	const headerClassName = classNames({
+		"spiffy-modal-sheet-header": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-justify-between": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-pt-[16px]": true,
+		"spiffy-tw-shadow-[0px_-8px_16px_0px_#0000001A]": true,
+		...modalSheetVariants$1[headerVariant]
+	});
+	return /* @__PURE__ */ jsxs(motion.div, {
+		className: headerClassName,
+		onTouchStart: handleHeaderClick,
+		onMouseDown: handleHeaderClick,
+		children: [/* @__PURE__ */ jsx(AnimatedChevron, {
+			animationKey,
+			chevronColor
+		}), headerContent]
+	});
+};
+
+//#endregion
+//#region src/components/ModalSheet/mobile/index.tsx
+const ModalSheetMobile = ({ children, isOpen, closeModal, mobileFullHeight = 180, animationDuration, headerProps, footerProps }) => {
+	const [isHidden, setIsHidden] = useState(isOpen ? "block" : "none");
+	const [bottom, setBottom] = useState(isOpen ? 0 : 0 - mobileFullHeight);
+	const [overlayOpacity, setOverlayOpacity] = useState(isOpen ? 1 : 0);
+	useEffect(() => {
+		setIsHidden(isOpen ? "block" : "none");
+		setBottom(isOpen ? 0 : 0 - mobileFullHeight);
+		setOverlayOpacity(isOpen ? 1 : 0);
+	}, [mobileFullHeight, isOpen]);
+	const overlayClassNames = classNames({
+		"spiffy-modal-sheet-overlay": true,
+		"spiffy-tw-fixed": true,
+		"spiffy-tw-inset-0": true,
+		"spiffy-tw-top-[0]": true,
+		"spiffy-tw-bottom-[0]": true,
+		"spiffy-tw-left-[0]": true,
+		"spiffy-tw-right-[0]": true,
+		"spiffy-tw-bg-black/30": true,
+		"spiffy-tw-z-[100]": true
+	});
+	const modalClassNames = classNames({
+		"spiffy-modal-sheet": true,
+		"spiffy-modal-sheet-open": isOpen,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-overflow-y-auto": true,
+		"spiffy-tw-shadow-lg": true,
+		"spiffy-tw-fixed": true,
+		"spiffy-tw-bg-white": true,
+		"spiffy-tw-border-box": true,
+		"spiffy-tw-rounded-t-[16px]": true,
+		"spiffy-tw-h-[89%]": true,
+		"spiffy-tw-max-h-[89%]": true
+	});
+	const contentClassNames = classNames({
+		"spiffy-modal-sheet-content": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-w-full": true,
+		"spiffy-tw-h-full": true
+	});
+	const headerClassNames = classNames({
+		"spiffy-tw-sticky": true,
+		"spiffy-tw-top-[0px]": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true
+	});
+	const { footerContent, footerClassName } = footerProps || {};
+	const footerClassNames = classNames({
+		"spiffy-tw-sticky": true,
+		"spiffy-tw-bottom-[0px]": true,
+		"spiffy-modal-sheet-footer": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true
+	}, footerClassName);
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(motion.div, {
+		className: overlayClassNames,
+		animate: {
+			opacity: overlayOpacity,
+			display: isHidden
+		},
+		onClick: closeModal,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			role: "dialog",
+			className: modalClassNames,
+			initial: {
+				bottom,
+				display: isHidden
+			},
+			animate: {
+				bottom,
+				display: isHidden
+			},
+			exit: {
+				bottom,
+				display: isHidden
+			},
+			transition: {
+				duration: animationDuration,
+				ease: "easeIn"
+			},
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: contentClassNames,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: headerClassNames,
+						children: /* @__PURE__ */ jsx(ModalSheetMobileHeader, {
+							headerContent: headerProps.headerContent,
+							headerVariant: headerProps?.headerVariant,
+							handleHeaderClick: closeModal
+						})
+					}),
+					children,
+					/* @__PURE__ */ jsx("div", { className: "spiffy-tw-flex-grow" }),
+					footerContent && /* @__PURE__ */ jsx("div", {
+						className: footerClassNames,
+						children: footerContent
+					})
+				]
+			})
+		})
+	}) });
+};
+
+//#endregion
+//#region src/components/ModalSheet/desktop/desktopHeader.tsx
+const modalSheetVariants = { primary: {
+	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
+	"spiffy-tw-text-[--spiffy-colors-text-light]": true
+} };
+const ModalSheetDesktopHeader = ({ headerVariant = "primary", headerContent }) => {
+	const headerStyles = classNames({
+		"spiffy-modal-sheet-header": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-justify-between": true,
+		"spiffy-tw-w-full": true,
+		...modalSheetVariants[headerVariant]
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: headerStyles,
+		children: headerContent
+	});
+};
+
+//#endregion
+//#region src/components/ModalSheet/desktop/index.tsx
+const ModalSheetDesktop = ({ children, isOpen, closeModal, desktopWidth = 512, animationDuration, headerProps, footerProps, showOverlay = false }) => {
+	const [isHidden, setIsHidden] = useState(isOpen ? "block" : "none");
+	const [right, setRight] = useState(isOpen ? 0 : 0 - desktopWidth);
+	const [overlayOpacity, setOverlayOpacity] = useState(0);
+	useEffect(() => {
+		setIsHidden(isOpen ? "block" : "none");
+		setRight(isOpen ? 0 : 0 - desktopWidth);
+		setOverlayOpacity(isOpen ? 1 : 0);
+	}, [desktopWidth, isOpen]);
+	const overlayClassNames = classNames({
+		"spiffy-modal-sheet-overlay": true,
+		"spiffy-tw-fixed": true,
+		"spiffy-tw-inset-0": true,
+		"spiffy-tw-top-[0]": true,
+		"spiffy-tw-bottom-[0]": true,
+		"spiffy-tw-left-[0]": true,
+		"spiffy-tw-right-[0]": true,
+		"spiffy-tw-z-[2147483647]": true,
+		"spiffy-tw-bg-black/30": showOverlay
+	});
+	const modalClassNames = classNames({
+		"spiffy-modal-sheet": true,
+		"spiffy-modal-sheet-open": isOpen,
+		"spiffy-tw-max-h-full": true,
+		"spiffy-tw-h-screen": true,
+		"spiffy-tw-w-[512px]": true,
+		"spiffy-tw-shadow-lg": true,
+		"spiffy-tw-top-[0]": true,
+		"spiffy-tw-bottom-[0]": true,
+		"spiffy-tw-fixed": true,
+		"spiffy-tw-bg-white": true,
+		"spiffy-tw-border-box": true
+	});
+	const contentClassNames = classNames({
+		"spiffy-modal-sheet-content": true,
+		"spiffy-tw-overflow-y-auto": true,
+		"spiffy-tw-overflow-x-hidden": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true,
+		"spiffy-tw-h-full": true,
+		"spiffy-tw-w-full": true
+	});
+	const headerClassNames = classNames({
+		"spiffy-tw-sticky": true,
+		"spiffy-tw-top-0": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true
+	});
+	const { footerContent, footerClassName } = footerProps || {};
+	const footerClassNames = classNames({
+		"spiffy-tw-sticky": true,
+		"spiffy-tw-bottom-0": true,
+		"spiffy-modal-sheet-footer": true,
+		"spiffy-tw-flex": true,
+		"spiffy-tw-flex-col": true
+	}, footerClassName);
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(motion.div, {
+		className: overlayClassNames,
+		initial: {
+			opacity: 0,
+			display: "none"
+		},
+		animate: {
+			opacity: overlayOpacity,
+			display: isHidden
+		},
+		onClick: closeModal,
+		children: /* @__PURE__ */ jsx(motion.div, {
+			role: "dialog",
+			className: modalClassNames,
+			initial: {
+				right,
+				display: isHidden
+			},
+			animate: {
+				right,
+				display: isHidden
+			},
+			exit: {
+				right,
+				display: isHidden
+			},
+			transition: {
+				duration: animationDuration,
+				ease: "easeIn"
+			},
+			style: { width: desktopWidth },
+			onClick: (e) => e.stopPropagation(),
+			children: /* @__PURE__ */ jsxs("div", {
+				className: contentClassNames,
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: headerClassNames,
+						children: /* @__PURE__ */ jsx(ModalSheetDesktopHeader, {
+							headerContent: headerProps.headerContent,
+							headerVariant: headerProps?.headerVariant
+						})
+					}),
+					children,
+					/* @__PURE__ */ jsx("div", { className: "spiffy-tw-flex-grow" }),
+					footerContent && /* @__PURE__ */ jsx("div", {
+						className: footerClassNames,
+						children: footerContent
+					})
+				]
+			})
+		})
+	}) });
+};
+
+//#endregion
+//#region src/components/ModalSheet/ModalSheet.tsx
+const ANIMATION_DURATION = .3;
+const ModalSheet = ({ children, isOpen, closeModal, animationDuration = ANIMATION_DURATION, desktopWidth = 512, headerProps, footerProps }) => {
+	return useIsSmallScreen() ? /* @__PURE__ */ jsx(ModalSheetMobile, {
+		isOpen,
+		closeModal,
+		desktopWidth,
+		animationDuration,
+		headerProps,
+		footerProps,
+		children
+	}) : /* @__PURE__ */ jsx(ModalSheetDesktop, {
+		isOpen,
+		closeModal,
+		desktopWidth,
+		animationDuration,
+		headerProps,
+		footerProps,
+		children
+	});
+};
+
+//#endregion
+export { ModalSheet };