@envive-ai/react-toolkit 0.2.0 → 0.2.1

package/dist/ImageWithFallback/index.d.cts

@@ -1,26 +0,0 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
-import React from "react";
-
-//#region src/components/ImageWithFallback/ImageWithFallback.d.ts
-interface ImageWithFallbackProps {
-  src: string | undefined;
-  alt: string;
-  fallbackClassnames?: string;
-  fallback: React.ReactNode;
-  dataTestId?: string;
-  imageClassnames: string;
-  onLoad?: () => void;
-  onError?: () => void;
-}
-declare const ImageWithFallback: ({
-  src,
-  alt,
-  dataTestId,
-  fallbackClassnames,
-  fallback,
-  imageClassnames,
-  onLoad,
-  onError
-}: ImageWithFallbackProps) => react_jsx_runtime10.JSX.Element;
-//#endregion
-export { ImageWithFallback, ImageWithFallbackProps };

package/dist/ImageWithFallback/index.d.ts

@@ -1,26 +0,0 @@
-import React from "react";
-import * as react_jsx_runtime14 from "react/jsx-runtime";
-
-//#region src/components/ImageWithFallback/ImageWithFallback.d.ts
-interface ImageWithFallbackProps {
-  src: string | undefined;
-  alt: string;
-  fallbackClassnames?: string;
-  fallback: React.ReactNode;
-  dataTestId?: string;
-  imageClassnames: string;
-  onLoad?: () => void;
-  onError?: () => void;
-}
-declare const ImageWithFallback: ({
-  src,
-  alt,
-  dataTestId,
-  fallbackClassnames,
-  fallback,
-  imageClassnames,
-  onLoad,
-  onError
-}: ImageWithFallbackProps) => react_jsx_runtime14.JSX.Element;
-//#endregion
-export { ImageWithFallback, ImageWithFallbackProps };

package/dist/ImageWithFallback/index.js

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

package/dist/ImageWithFallback-CbYsD1_a.js

@@ -1,42 +0,0 @@
-import React, { useState } from "react";
-import classNames from "classnames";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/components/ImageWithFallback/ImageWithFallback.tsx
-const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError }) => {
-	const [isLoaded, setIsLoaded] = useState(false);
-	const [isError, setIsError] = useState(false);
-	const imageExtraClassnames = classNames(imageClassnames, {
-		"spiffy-tw-block": isLoaded,
-		"spiffy-tw-hidden": !isLoaded
-	});
-	const fallbackMergedClassNames = classNames({
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-items-center": true
-	}, fallbackClassnames);
-	if (isError) return /* @__PURE__ */ jsx("div", {
-		className: fallbackMergedClassNames,
-		children: fallback
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [!isLoaded && /* @__PURE__ */ jsx("div", {
-		className: fallbackMergedClassNames,
-		children: fallback
-	}), /* @__PURE__ */ jsx("img", {
-		src,
-		className: imageExtraClassnames,
-		"data-testid": dataTestId,
-		alt,
-		onLoad: () => {
-			setIsLoaded(true);
-			onLoad?.();
-		},
-		onError: () => {
-			setIsError(true);
-			onError?.();
-		}
-	})] });
-};
-
-//#endregion
-export { ImageWithFallback };

package/dist/ImageWithFallback-Km9h16Vz.cjs

@@ -1,51 +0,0 @@
-const require_chunk = require('./chunk-CUT6urMc.cjs');
-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);
-
-//#region src/components/ImageWithFallback/ImageWithFallback.tsx
-const ImageWithFallback = ({ src, alt, dataTestId, fallbackClassnames, fallback, imageClassnames, onLoad, onError }) => {
-	const [isLoaded, setIsLoaded] = (0, react.useState)(false);
-	const [isError, setIsError] = (0, react.useState)(false);
-	const imageExtraClassnames = (0, classnames.default)(imageClassnames, {
-		"spiffy-tw-block": isLoaded,
-		"spiffy-tw-hidden": !isLoaded
-	});
-	const fallbackMergedClassNames = (0, classnames.default)({
-		"spiffy-tw-flex": true,
-		"spiffy-tw-flex-col": true,
-		"spiffy-tw-items-center": true
-	}, fallbackClassnames);
-	if (isError) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: fallbackMergedClassNames,
-		children: fallback
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [!isLoaded && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: fallbackMergedClassNames,
-		children: fallback
-	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
-		src,
-		className: imageExtraClassnames,
-		"data-testid": dataTestId,
-		alt,
-		onLoad: () => {
-			setIsLoaded(true);
-			onLoad?.();
-		},
-		onError: () => {
-			setIsError(true);
-			onError?.();
-		}
-	})] });
-};
-
-//#endregion
-Object.defineProperty(exports, 'ImageWithFallback', {
-  enumerable: true,
-  get: function () {
-    return ImageWithFallback;
-  }
-});

package/dist/ModalSheet/index.cjs

@@ -1,4 +0,0 @@
-require('../AnimatedChevron-e_UzWBl0.cjs');
-const require_ModalSheet = require('../ModalSheet-DwnbbFh7.cjs');
-
-exports.ModalSheet = require_ModalSheet.ModalSheet;

package/dist/ModalSheet/index.d.cts

@@ -1,38 +0,0 @@
-import * as react_jsx_runtime7 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_runtime7.JSX.Element;
-//#endregion
-export { ModalSheet };

package/dist/ModalSheet/index.d.ts

@@ -1,38 +0,0 @@
-import * as react_jsx_runtime12 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_runtime12.JSX.Element;
-//#endregion
-export { ModalSheet };

package/dist/ModalSheet/index.js

@@ -1,4 +0,0 @@
-import "../AnimatedChevron-CwuXgR2r.js";
-import { ModalSheet } from "../ModalSheet-sMg44OLz.js";
-
-export { ModalSheet };

package/dist/ModalSheet-DwnbbFh7.cjs

@@ -1,313 +0,0 @@
-const require_chunk = require('./chunk-CUT6urMc.cjs');
-const require_AnimatedChevron = require('./AnimatedChevron-e_UzWBl0.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_IsSmallScreen = require("@envive-ai/react-hooks/hooks/IsSmallScreen");
-__envive_ai_react_hooks_hooks_IsSmallScreen = require_chunk.__toESM(__envive_ai_react_hooks_hooks_IsSmallScreen);
-
-//#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)(require_AnimatedChevron.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,
-							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
-//#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,
-							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
-//#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_IsSmallScreen.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;
-  }
-});