@envive-ai/react-widgets 0.1.2 → 0.1.3

package/dist/packages/components/dist/components/ModalSheet/ModalSheet.js

@@ -0,0 +1,29 @@
+import { ModalSheetMobile } from "./mobile/index.js";
+import { ModalSheetDesktop } from "./desktop/index.js";
+import { useIsSmallScreen } from "@envive-ai/react-hooks/hooks/IsSmallScreen";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../components/dist/components/ModalSheet/ModalSheet.js
+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 };

package/dist/packages/components/dist/components/ModalSheet/desktop/desktopHeader.cjs

@@ -0,0 +1,26 @@
+const require_rolldown_runtime = require('../../../../../../_virtual/rolldown_runtime.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region ../components/dist/components/ModalSheet/desktop/desktopHeader.js
+const modalSheetVariants = { primary: {
+	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
+	"spiffy-tw-text-[--spiffy-colors-text-light]": true
+} };
+const ModalSheetDesktopHeader = ({ headerVariant = "primary", headerContent }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (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]
+		}),
+		children: headerContent
+	});
+};
+
+//#endregion
+exports.ModalSheetDesktopHeader = ModalSheetDesktopHeader;

package/dist/packages/components/dist/components/ModalSheet/desktop/desktopHeader.js

@@ -0,0 +1,24 @@
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region ../components/dist/components/ModalSheet/desktop/desktopHeader.js
+const modalSheetVariants = { primary: {
+	"spiffy-tw-bg-[--spiffy-colors-background-primary]": true,
+	"spiffy-tw-text-[--spiffy-colors-text-light]": true
+} };
+const ModalSheetDesktopHeader = ({ headerVariant = "primary", headerContent }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: 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]
+		}),
+		children: headerContent
+	});
+};
+
+//#endregion
+export { ModalSheetDesktopHeader };

package/dist/packages/components/dist/components/ModalSheet/desktop/index.cjs

@@ -0,0 +1,122 @@
+const require_rolldown_runtime = require('../../../../../../_virtual/rolldown_runtime.cjs');
+const require_desktopHeader = require('./desktopHeader.cjs');
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+
+//#region ../components/dist/components/ModalSheet/desktop/index.js
+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)(require_desktopHeader.ModalSheetDesktopHeader, {
+							headerContent: headerProps.headerContent,
+							headerVariant: headerProps?.headerVariant,
+							chevronColor: "#000"
+						})
+					}),
+					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
+exports.ModalSheetDesktop = ModalSheetDesktop;

package/dist/packages/components/dist/components/ModalSheet/desktop/index.js

@@ -0,0 +1,120 @@
+import { ModalSheetDesktopHeader } from "./desktopHeader.js";
+import { useEffect, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+
+//#region ../components/dist/components/ModalSheet/desktop/index.js
+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,
+							chevronColor: "#000"
+						})
+					}),
+					children,
+					/* @__PURE__ */ jsx("div", { className: "spiffy-tw-flex-grow" }),
+					footerContent && /* @__PURE__ */ jsx("div", {
+						className: footerClassNames,
+						children: footerContent
+					})
+				]
+			})
+		})
+	}) });
+};
+
+//#endregion
+export { ModalSheetDesktop };

package/dist/packages/components/dist/components/ModalSheet/index.cjs

@@ -0,0 +1 @@
+const require_ModalSheet = require('./ModalSheet.cjs');

package/dist/packages/components/dist/components/ModalSheet/index.js

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

package/dist/packages/components/dist/components/ModalSheet/mobile/index.cjs

@@ -0,0 +1,116 @@
+const require_rolldown_runtime = require('../../../../../../_virtual/rolldown_runtime.cjs');
+const require_mobileHeader = require('./mobileHeader.cjs');
+let react = require("react");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+
+//#region ../components/dist/components/ModalSheet/mobile/index.js
+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)(require_mobileHeader.ModalSheetMobileHeader, {
+							headerContent: headerProps.headerContent,
+							headerVariant: headerProps?.headerVariant,
+							handleHeaderClick: closeModal,
+							chevronColor: "#000"
+						})
+					}),
+					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
+exports.ModalSheetMobile = ModalSheetMobile;

package/dist/packages/components/dist/components/ModalSheet/mobile/index.js

@@ -0,0 +1,114 @@
+import { ModalSheetMobileHeader } from "./mobileHeader.js";
+import { useEffect, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+
+//#region ../components/dist/components/ModalSheet/mobile/index.js
+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,
+							chevronColor: "#000"
+						})
+					}),
+					children,
+					/* @__PURE__ */ jsx("div", { className: "spiffy-tw-flex-grow" }),
+					footerContent && /* @__PURE__ */ jsx("div", {
+						className: footerClassNames,
+						children: footerContent
+					})
+				]
+			})
+		})
+	}) });
+};
+
+//#endregion
+export { ModalSheetMobile };

package/dist/packages/components/dist/components/ModalSheet/mobile/mobileHeader.cjs

@@ -0,0 +1,38 @@
+const require_rolldown_runtime = require('../../../../../../_virtual/rolldown_runtime.cjs');
+const require_AnimatedChevron = require('../../AnimatedChevron/AnimatedChevron.cjs');
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+
+//#region ../components/dist/components/ModalSheet/mobile/mobileHeader.js
+const modalSheetVariants = { 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[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)(require_AnimatedChevron.AnimatedChevron, {
+			animationKey,
+			chevronColor
+		}), headerContent]
+	});
+};
+
+//#endregion
+exports.ModalSheetMobileHeader = ModalSheetMobileHeader;

package/dist/packages/components/dist/components/ModalSheet/mobile/mobileHeader.js

@@ -0,0 +1,36 @@
+import { AnimatedChevron } from "../../AnimatedChevron/AnimatedChevron.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion, useMotionValue } from "framer-motion";
+
+//#region ../components/dist/components/ModalSheet/mobile/mobileHeader.js
+const modalSheetVariants = { 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[headerVariant]
+	});
+	return /* @__PURE__ */ jsxs(motion.div, {
+		className: headerClassName,
+		onTouchStart: handleHeaderClick,
+		onMouseDown: handleHeaderClick,
+		children: [/* @__PURE__ */ jsx(AnimatedChevron, {
+			animationKey,
+			chevronColor
+		}), headerContent]
+	});
+};
+
+//#endregion
+export { ModalSheetMobileHeader };