@envive-ai/react-toolkit 0.1.10 → 0.1.11

package/dist/ToggleButton-BKRR_-69.js

@@ -0,0 +1,60 @@
+import { Text } from "./Text-Bod4OMPk.js";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/ToggleButton/ToggleButton.tsx
+const toggleButtonVariants = { default: {
+	button: ({ isSelected }) => classNames({
+		"spiffy-tw-bg-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-border-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-light]": isSelected,
+		"hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]": true,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-primary]": isSelected,
+		"spiffy-tw-bg-[--spiffy-colors-background-light]": !isSelected,
+		"spiffy-tw-border-[--spiffy-colors-border-light]": !isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": !isSelected
+	}),
+	label: () => "",
+	secondaryLabel: ({ isSelected }) => classNames({
+		"spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected
+	})
+} };
+const ToggleButton = ({ isSelected, onClick, label, buttonClassName, labelClassName, secondaryLabel, secondaryLabelClassName, icon, iconClassName, variant }) => {
+	const buttonClassNames = classNames({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-gap-[4px]": true,
+		"spiffy-tw-cursor-pointer": true,
+		"spiffy-tw-py-[8px]": true,
+		"spiffy-tw-px-[12px]": true,
+		"spiffy-tw-rounded-[200px]": true,
+		"spiffy-tw-border": true
+	}, toggleButtonVariants?.[variant]?.button({ isSelected }), buttonClassName);
+	const labelClassNames = classNames({}, toggleButtonVariants?.[variant]?.label({ isSelected }), labelClassName);
+	const secondaryLabelClassNames = classNames({}, toggleButtonVariants?.[variant]?.secondaryLabel({ isSelected }), secondaryLabelClassName);
+	return /* @__PURE__ */ jsxs("button", {
+		className: buttonClassNames,
+		onClick,
+		type: "button",
+		children: [
+			icon && /* @__PURE__ */ jsx("div", {
+				className: iconClassName,
+				children: icon
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				variant: "body3",
+				className: labelClassNames,
+				children: label
+			}),
+			secondaryLabel && /* @__PURE__ */ jsx(Text, {
+				variant: "body4",
+				className: secondaryLabelClassNames,
+				children: secondaryLabel
+			})
+		]
+	});
+};
+
+//#endregion
+export { ToggleButton };

package/dist/ToggleButton-D90UO4qv.cjs

@@ -0,0 +1,68 @@
+const require_chunk = require('./chunk-CUT6urMc.cjs');
+const require_Text = require('./Text-MQjxqgZZ.cjs');
+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);
+
+//#region src/components/ToggleButton/ToggleButton.tsx
+const toggleButtonVariants = { default: {
+	button: ({ isSelected }) => (0, classnames.default)({
+		"spiffy-tw-bg-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-border-[--spiffy-colors-background-dark]": isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-light]": isSelected,
+		"hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]": true,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-primary]": isSelected,
+		"spiffy-tw-bg-[--spiffy-colors-background-light]": !isSelected,
+		"spiffy-tw-border-[--spiffy-colors-border-light]": !isSelected,
+		"spiffy-tw-text-[--spiffy-colors-text-primary]": !isSelected
+	}),
+	label: () => "",
+	secondaryLabel: ({ isSelected }) => (0, classnames.default)({
+		"spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected,
+		"hover:spiffy-tw-text-[--spiffy-colors-text-secondary]": !isSelected
+	})
+} };
+const ToggleButton = ({ isSelected, onClick, label, buttonClassName, labelClassName, secondaryLabel, secondaryLabelClassName, icon, iconClassName, variant }) => {
+	const buttonClassNames = (0, classnames.default)({
+		"spiffy-tw-flex": true,
+		"spiffy-tw-items-center": true,
+		"spiffy-tw-gap-[4px]": true,
+		"spiffy-tw-cursor-pointer": true,
+		"spiffy-tw-py-[8px]": true,
+		"spiffy-tw-px-[12px]": true,
+		"spiffy-tw-rounded-[200px]": true,
+		"spiffy-tw-border": true
+	}, toggleButtonVariants?.[variant]?.button({ isSelected }), buttonClassName);
+	const labelClassNames = (0, classnames.default)({}, toggleButtonVariants?.[variant]?.label({ isSelected }), labelClassName);
+	const secondaryLabelClassNames = (0, classnames.default)({}, toggleButtonVariants?.[variant]?.secondaryLabel({ isSelected }), secondaryLabelClassName);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		className: buttonClassNames,
+		onClick,
+		type: "button",
+		children: [
+			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: iconClassName,
+				children: icon
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+				variant: "body3",
+				className: labelClassNames,
+				children: label
+			}),
+			secondaryLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
+				variant: "body4",
+				className: secondaryLabelClassNames,
+				children: secondaryLabel
+			})
+		]
+	});
+};
+
+//#endregion
+Object.defineProperty(exports, 'ToggleButton', {
+  enumerable: true,
+  get: function () {
+    return ToggleButton;
+  }
+});

package/dist/{index-b4yAASuy.d.cts → index-1x_hMlEf.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 import { FC } from "react";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime18.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime5.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime18.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime5.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -312,7 +312,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime18.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime5.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-DV2K-9lE.d.cts → index-CgjZdKpL.d.cts}

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime23 from "react/jsx-runtime";
+import * as react_jsx_runtime20 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
 type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
-type CloseIconVariant = 'light' | 'tertiary' | 'dark';
+type CloseIconVariant$1 = 'light' | 'tertiary' | 'dark';
 //#endregion
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.d.ts
 interface SearchFilterSidebarVariantClasses {
@@ -17,7 +17,7 @@ interface SearchFilterSidebarVariantClasses {
   appliedFilterBackgroundClasses: string;
   applyFiltersUnchangedClasses: string;
   applyFiltersChangedClasses: string;
-  filterCloseIconVariant: CloseIconVariant;
+  filterCloseIconVariant: CloseIconVariant$1;
 }
 declare const searchFilterSidebarVariantClasses: Record<SearchFilterSidebarVariant, SearchFilterSidebarVariantClasses>;
 //#endregion
@@ -42,6 +42,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime23.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime20.JSX.Element;
 //#endregion
-export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };
+export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-agU5rfIs.d.ts → index-Cl4d_pDw.d.ts}

@@ -1,9 +1,9 @@
-import * as react_jsx_runtime14 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 import { SearchFilterDatum, SelectFilterItem } from "@envive-ai/react-hooks/types";
 
 //#region src/components/SearchResultsFilterSidebar/types.d.ts
 type SearchFilterSidebarVariant = 'darkButton' | 'lightButton';
-type CloseIconVariant = 'light' | 'tertiary' | 'dark';
+type CloseIconVariant$1 = 'light' | 'tertiary' | 'dark';
 //#endregion
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.d.ts
 interface SearchFilterSidebarVariantClasses {
@@ -17,7 +17,7 @@ interface SearchFilterSidebarVariantClasses {
   appliedFilterBackgroundClasses: string;
   applyFiltersUnchangedClasses: string;
   applyFiltersChangedClasses: string;
-  filterCloseIconVariant: CloseIconVariant;
+  filterCloseIconVariant: CloseIconVariant$1;
 }
 declare const searchFilterSidebarVariantClasses: Record<SearchFilterSidebarVariant, SearchFilterSidebarVariantClasses>;
 //#endregion
@@ -42,6 +42,6 @@ declare const SearchResultsFilter: ({
   onSelectFilterItem,
   onClearAllFilters,
   filterButtonText
-}: SearchResultsFilterProps) => react_jsx_runtime14.JSX.Element;
+}: SearchResultsFilterProps) => react_jsx_runtime25.JSX.Element;
 //#endregion
-export { CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };
+export { CloseIconVariant$1 as CloseIconVariant, SearchFilterSidebarVariant, SearchResultsFilter, SearchResultsFilterProps, searchFilterSidebarVariantClasses };

package/dist/{index-uU3sIiRx.d.ts → index-H_9LhS_1.d.cts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime15 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/components/SearchInputForm/types.d.ts
 type SearchInputVariant = 'standard';
@@ -31,6 +31,6 @@ declare const SearchInputForm: ({
   onSearchInputChange,
   onSearchSubmit,
   searchInputDataTestId
-}: SearchInputFormProps) => react_jsx_runtime15.JSX.Element;
+}: SearchInputFormProps) => react_jsx_runtime11.JSX.Element;
 //#endregion
 export { SearchInputForm, SearchInputVariant };

package/dist/{index-DggZTKvc.d.ts → index-QMTPxKA9.d.ts}

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import * as react_jsx_runtime21 from "react/jsx-runtime";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
 import { TestProps } from "@envive-ai/react-hooks/types";
 import { ResponseCategory, SearchResponseProduct } from "@spiffy-ai/commerce-api-client";
 
@@ -261,7 +261,7 @@ declare const RatingSummary: ({
   stars,
   reviewCount,
   className
-}: RatingSummaryProps) => react_jsx_runtime21.JSX.Element;
+}: RatingSummaryProps) => react_jsx_runtime14.JSX.Element;
 interface PriceSectionProps {
   originalPrice?: string;
   salePrice?: string;
@@ -271,7 +271,7 @@ declare const PriceSection: ({
   originalPrice,
   salePrice,
   pricePrefix
-}: PriceSectionProps) => react_jsx_runtime21.JSX.Element;
+}: PriceSectionProps) => react_jsx_runtime14.JSX.Element;
 interface ProductCardProps extends TestProps {
   productCardConfig?: ProductCardConfig;
   merchantShortName: string;
@@ -312,7 +312,7 @@ declare const ProductCard: ({
   aspectRatio,
   growWithContainer,
   handleClick
-}: ProductCardProps) => react_jsx_runtime21.JSX.Element;
+}: ProductCardProps) => react_jsx_runtime14.JSX.Element;
 //#endregion
 //#region src/components/ProductCard/ProductCardSkeleton.d.ts
 declare const ProductCardSkeleton: FC<ProductCardSkeletonProps>;

package/dist/{index-Bpjv4lP2.d.cts → index-gfYBM7Ul.d.ts}

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/SearchInputForm/types.d.ts
 type SearchInputVariant = 'standard';
@@ -31,6 +31,6 @@ declare const SearchInputForm: ({
   onSearchInputChange,
   onSearchSubmit,
   searchInputDataTestId
-}: SearchInputFormProps) => react_jsx_runtime2.JSX.Element;
+}: SearchInputFormProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { SearchInputForm, SearchInputVariant };

package/dist/{searchFilterSidebarVariants-BnIcOVWR.js → searchFilterSidebarVariants-CDFCHVeZ.js}

@@ -1,4 +1,4 @@
-import { ColorNames, colorVar } from "./colorsConfig-CYZ8f_gj.js";
+import { ColorNames, colorVar } from "./colorsConfig-5Yf4nrEe.js";
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/dist/{searchFilterSidebarVariants-DVZ7wRlb.cjs → searchFilterSidebarVariants-CtmuwSBQ.cjs}

@@ -1,4 +1,4 @@
-const require_colorsConfig = require('./colorsConfig-CJTKbJsm.cjs');
+const require_colorsConfig = require('./colorsConfig-DFL3mBwB.cjs');
 
 //#region src/components/SearchResultsFilterSidebar/searchFilterSidebarVariants.ts
 const searchFilterSidebarVariantClasses = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-toolkit",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "React component library for Envive services.",
   "keywords": [
     "react",
@@ -23,11 +23,12 @@
   "scripts": {
     "build": "tsdown",
     "build:watch": "tsdown --watch",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "typecheck": "tsc"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "^0.1.5",
     "@envive-ai/react-icons": "0.1.1",
+    "@envive-ai/react-hooks": "^0.1.6",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.12",
@@ -75,6 +76,10 @@
       "import": "./dist/ImageWithFallback/index.js",
       "require": "./dist/ImageWithFallback/index.cjs"
     },
+    "./ModalSheet": {
+      "import": "./dist/ModalSheet/index.js",
+      "require": "./dist/ModalSheet/index.cjs"
+    },
     "./ProductCard": {
       "import": "./dist/ProductCard/index.js",
       "require": "./dist/ProductCard/index.cjs"
@@ -83,6 +88,14 @@
       "import": "./dist/ProductGrid/index.js",
       "require": "./dist/ProductGrid/index.cjs"
     },
+    "./RadioButton": {
+      "import": "./dist/RadioButton/index.js",
+      "require": "./dist/RadioButton/index.cjs"
+    },
+    "./RadioButtonGroup": {
+      "import": "./dist/RadioButtonGroup/index.js",
+      "require": "./dist/RadioButtonGroup/index.cjs"
+    },
     "./SearchAutocomplete": {
       "import": "./dist/SearchAutocomplete/index.js",
       "require": "./dist/SearchAutocomplete/index.cjs"
@@ -135,6 +148,10 @@
       "import": "./dist/TextInput/index.js",
       "require": "./dist/TextInput/index.cjs"
     },
+    "./ToggleButton": {
+      "import": "./dist/ToggleButton/index.js",
+      "require": "./dist/ToggleButton/index.cjs"
+    },
     "./package.json": "./package.json"
   }
 }

package/src/components/AnimatedChevron/AnimatedChevron.tsx

@@ -0,0 +1,37 @@
+import { MotionValue, motion, useTransform } from 'framer-motion';
+import { FC } from 'react';
+
+interface AnimatedChevronProps {
+  animationKey: MotionValue;
+  chevronColor: string;
+}
+
+export const AnimatedChevron: FC<AnimatedChevronProps> = ({ animationKey, chevronColor }) => {
+  const leftRotation = useTransform(animationKey, [300, 0], [-12, 0]);
+  const rightRotation = useTransform(animationKey, [300, 0], [12, 0]);
+
+  return (
+    <div style={{ display: 'flex' }}>
+      <motion.div
+        style={{
+          x: 1,
+          width: '25px',
+          height: '4px',
+          background: chevronColor,
+          borderRadius: '8px',
+          rotate: leftRotation,
+        }}
+      />
+      <motion.div
+        style={{
+          x: -1,
+          width: '25px',
+          height: '4px',
+          background: chevronColor,
+          borderRadius: '8px',
+          rotate: rightRotation,
+        }}
+      />
+    </div>
+  );
+};

package/src/components/ModalSheet/ModalSheet.tsx

@@ -0,0 +1,42 @@
+import { ModalSheetMobile } from './mobile';
+import { ModalSheetDesktop } from './desktop';
+import { ModalSheetProps } from './types';
+import { useIsSmallScreen } from '@envive-ai/react-hooks/hooks';
+
+const ANIMATION_DURATION = 0.3;
+
+export const ModalSheet = ({
+  children,
+  isOpen,
+  closeModal,
+  animationDuration = ANIMATION_DURATION,
+  desktopWidth = 512,
+  headerProps,
+  footerProps,
+}: ModalSheetProps) => {
+  const isSmallScreen = useIsSmallScreen();
+
+  return isSmallScreen ? (
+    <ModalSheetMobile
+      isOpen={isOpen}
+      closeModal={closeModal}
+      desktopWidth={desktopWidth}
+      animationDuration={animationDuration}
+      headerProps={headerProps}
+      footerProps={footerProps}
+    >
+      {children}
+    </ModalSheetMobile>
+  ) : (
+    <ModalSheetDesktop
+      isOpen={isOpen}
+      closeModal={closeModal}
+      desktopWidth={desktopWidth}
+      animationDuration={animationDuration}
+      headerProps={headerProps}
+      footerProps={footerProps}
+    >
+      {children}
+    </ModalSheetDesktop>
+  );
+};

package/src/components/ModalSheet/common/closeIcon.tsx

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import classNames from 'classnames';
+import { GrFormClose } from 'react-icons/gr';
+import { IconContext } from 'react-icons/lib';
+import { ModalSheetCloseIconProps } from '../types';
+
+const closeIconVariantMapping = {
+  light: {
+    'spiffy-tw-bg-[--spiffy-colors-background-light]': true,
+    'spiffy-tw-text-[--spiffy-colors-text-primary]': true,
+  },
+  dark: {
+    'spiffy-tw-bg-[--spiffy-colors-background-dark]': true,
+    'spiffy-tw-text-[--spiffy-colors-background-primary]': true,
+  },
+  tertiary: {
+    'spiffy-tw-text-[--spiffy-colors-background-primary]': true,
+    'spiffy-tw-bg-[--spiffy-colors-background-tertiary]': true,
+  },
+};
+
+export const ModalSheetCloseIcon = ({
+  closeIconVariant = 'tertiary',
+  closeIcon = <GrFormClose />,
+  iconSize = '20px',
+  closeModal,
+}: ModalSheetCloseIconProps) => {
+  const closeIconClassNames = classNames({
+    'spiffy-modal-sheet-close-icon': true,
+    'spiffy-tw-rounded-[99px]': true,
+    ...closeIconVariantMapping[closeIconVariant],
+  });
+
+  const closeIconContextValue = useMemo(() => ({ size: iconSize }), [iconSize]);
+  return (
+    <div className={closeIconClassNames} onClick={closeModal}>
+      <IconContext.Provider value={closeIconContextValue}>{closeIcon}</IconContext.Provider>
+    </div>
+  );
+};

package/src/components/ModalSheet/common/enviveWatermark.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames';
+import { useAtomValue } from 'jotai';
+import { WatermarkLogo } from 'src/assets';
+import { orgUIConfigAtom } from 'src/atoms/org/orgUIConfig';
+
+export const EnviveWatermark = () => {
+  const { floatingChatConfig } = useAtomValue(orgUIConfigAtom);
+  if (!floatingChatConfig.enableWatermark) {
+    return null;
+  }
+  const wrapperClasses = classNames({
+    'spiffy-watermark-wrapper': true,
+    'spiffy-tw-flex': true,
+    'spiffy-tw-align-middle': true,
+    'spiffy-tw-pt-[4px]': true,
+    'spiffy-tw-justify-center': true,
+  });
+  const watermarkClasses = classNames({
+    'spiffy-watermark-logo': true,
+    'spiffy-tw-py-[4px]': true,
+    'spiffy-tw-px-[8px]': true,
+  });
+  return (
+    <a className={wrapperClasses} target="_blank" rel="noreferrer" href="https://www.envive.ai/">
+      <div title="Powered by Envive" className={watermarkClasses}>
+        <WatermarkLogo />
+      </div>
+    </a>
+  );
+};

package/src/components/ModalSheet/desktop/desktopHeader.tsx

@@ -0,0 +1,24 @@
+import classNames from 'classnames';
+import { ModalSheetHeaderProps } from '../types';
+
+const modalSheetVariants = {
+  primary: {
+    'spiffy-tw-bg-[--spiffy-colors-background-primary]': true,
+    'spiffy-tw-text-[--spiffy-colors-text-light]': true,
+  },
+};
+
+export const ModalSheetDesktopHeader = ({
+  headerVariant = 'primary',
+  headerContent,
+}: ModalSheetHeaderProps) => {
+  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 <div className={headerStyles}>{headerContent}</div>;
+};

package/src/components/ModalSheet/desktop/index.tsx

@@ -0,0 +1,118 @@
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { motion } from 'framer-motion';
+
+import { ModalSheetProps } from '../types';
+import { ModalSheetDesktopHeader } from './desktopHeader';
+
+export const ModalSheetDesktop = ({
+  children,
+  isOpen,
+  closeModal,
+  desktopWidth = 512,
+  animationDuration,
+  headerProps,
+  footerProps,
+  showOverlay = false,
+}: ModalSheetProps) => {
+  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 (
+    <div>
+      <motion.div
+        className={overlayClassNames}
+        initial={{ opacity: 0, display: 'none' }}
+        animate={{ opacity: overlayOpacity, display: isHidden }}
+        onClick={closeModal}
+      >
+        <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()}
+        >
+          <div className={contentClassNames}>
+            <div className={headerClassNames}>
+              <ModalSheetDesktopHeader
+                headerContent={headerProps.headerContent}
+                headerVariant={headerProps?.headerVariant}
+              />
+            </div>
+            {children}
+            {/* this div will grow to fill the remaining space */}
+            <div className="spiffy-tw-flex-grow" />
+            {footerContent && <div className={footerClassNames}>{footerContent}</div>}
+          </div>
+        </motion.div>
+      </motion.div>
+    </div>
+  );
+};

package/src/components/ModalSheet/index.ts

@@ -0,0 +1 @@
+export * from './ModalSheet';