@envive-ai/react-toolkit 0.1.13 → 0.2.1

package/dist/ImageWithFallback/index.d.cts

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

package/dist/ImageWithFallback/index.d.ts

@@ -1,26 +0,0 @@
-import React from "react";
-import * as react_jsx_runtime25 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_runtime25.JSX.Element;
-//#endregion
-export { ImageWithFallback, ImageWithFallbackProps };

package/dist/ImageWithFallback/index.js

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

package/dist/ImageWithFallback-Cx-KNi-D.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/ImageWithFallback-DqxjwO3i.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/ModalSheet/index.cjs

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

package/dist/ModalSheet/index.d.cts

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

package/dist/ModalSheet/index.d.ts

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

package/dist/ModalSheet/index.js

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

package/dist/ModalSheet-01pxpy_K.js

@@ -1,326 +0,0 @@
-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/IsSmallScreen";
-
-//#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,
-							chevronColor: "#000"
-						})
-					}),
-					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,
-							chevronColor: "#000"
-						})
-					}),
-					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 };