infinity-ui-elements 1.9.15 → 1.9.16

package/dist/index.js

@@ -1338,6 +1338,183 @@ const Badge = React__namespace.forwardRef(({ className, variant, size, color, sh
 });
 Badge.displayName = "Badge";
 
+const dividerVariants = classVarianceAuthority.cva("", {
+    variants: {
+        orientation: {
+            horizontal: "w-full",
+            vertical: "h-full",
+        },
+        thickness: {
+            thinner: "",
+            thin: "",
+            thick: "",
+            thicker: "",
+        },
+        lineStyle: {
+            solid: "border-solid",
+            dashed: "border-dashed",
+        },
+        variant: {
+            normal: "",
+            subtle: "",
+            muted: "",
+        },
+    },
+    compoundVariants: [
+        // Horizontal orientation with thickness
+        {
+            orientation: "horizontal",
+            thickness: "thinner",
+            class: "border-t-[0.5px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thin",
+            class: "border-t-[1px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thick",
+            class: "border-t-[2px]",
+        },
+        {
+            orientation: "horizontal",
+            thickness: "thicker",
+            class: "border-t-[3px]",
+        },
+        // Vertical orientation with thickness
+        {
+            orientation: "vertical",
+            thickness: "thinner",
+            class: "border-l-[0.5px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thin",
+            class: "border-l-[1px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thick",
+            class: "border-l-[2px]",
+        },
+        {
+            orientation: "vertical",
+            thickness: "thicker",
+            class: "border-l-[3px]",
+        },
+        // Normal variant colors
+        {
+            variant: "normal",
+            class: "border-surface-outline-neutral-normal",
+        },
+        // Subtle variant colors
+        {
+            variant: "subtle",
+            class: "border-surface-outline-neutral-subtle",
+        },
+        // Muted variant colors
+        {
+            variant: "muted",
+            class: "border-surface-outline-neutral-muted",
+        },
+    ],
+    defaultVariants: {
+        orientation: "horizontal",
+        thickness: "thin",
+        lineStyle: "solid",
+        variant: "normal",
+    },
+});
+const Divider = React__namespace.forwardRef(({ className, orientation = "horizontal", thickness = "thin", lineStyle = "solid", variant = "normal", ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cn(dividerVariants({ orientation, thickness, lineStyle, variant }), className), ...props }));
+});
+Divider.displayName = "Divider";
+
+const BottomSheet = React__namespace.forwardRef(({ isOpen, onClose, title, description, footer, children, variant = "default", showCloseButton = true, showDragHandle = true, closeOnOverlayClick = true, closeOnEscape = true, closeOnSwipeDown = true, maxHeight = "90vh", className, contentClassName, headerClassName, bodyClassName, footerClassName, overlayClassName, ariaLabel, ariaDescribedBy, }, ref) => {
+    const sheetRef = React__namespace.useRef(null);
+    const contentRef = ref || sheetRef;
+    const [isClosing, setIsClosing] = React__namespace.useState(false);
+    const [touchStart, setTouchStart] = React__namespace.useState(null);
+    const [touchEnd, setTouchEnd] = React__namespace.useState(null);
+    // Handle escape key
+    React__namespace.useEffect(() => {
+        if (!isOpen || !closeOnEscape || !onClose)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                handleClose();
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
+    }, [isOpen, closeOnEscape, onClose]);
+    // Prevent body scroll when bottom sheet is open
+    React__namespace.useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = "hidden";
+        }
+        else {
+            document.body.style.overflow = "";
+        }
+        return () => {
+            document.body.style.overflow = "";
+        };
+    }, [isOpen]);
+    // Reset closing state when opening
+    React__namespace.useEffect(() => {
+        if (isOpen) {
+            setIsClosing(false);
+        }
+    }, [isOpen]);
+    // Handle close with animation
+    const handleClose = () => {
+        if (!onClose)
+            return;
+        setIsClosing(true);
+        // Wait for animation to complete before calling onClose
+        setTimeout(() => {
+            onClose();
+            setIsClosing(false);
+        }, 300); // Match animation duration
+    };
+    // Handle overlay click
+    const handleOverlayClick = (e) => {
+        if (closeOnOverlayClick && e.target === e.currentTarget) {
+            handleClose();
+        }
+    };
+    // Handle touch events for swipe down
+    const handleTouchStart = (e) => {
+        if (!closeOnSwipeDown)
+            return;
+        setTouchEnd(null);
+        setTouchStart(e.targetTouches[0].clientY);
+    };
+    const handleTouchMove = (e) => {
+        if (!closeOnSwipeDown)
+            return;
+        setTouchEnd(e.targetTouches[0].clientY);
+    };
+    const handleTouchEnd = () => {
+        if (!closeOnSwipeDown || !touchStart || !touchEnd)
+            return;
+        const distance = touchEnd - touchStart;
+        const isSwipeDown = distance > 100; // Minimum swipe distance
+        if (isSwipeDown) {
+            handleClose();
+        }
+        setTouchStart(null);
+        setTouchEnd(null);
+    };
+    // Don't render if not open and not closing
+    if (!isOpen && !isClosing)
+        return null;
+    const hasHeader = title || description;
+    return (jsxRuntime.jsxs("div", { className: cn("fixed inset-0 z-9999 flex items-end justify-center", className), role: "dialog", "aria-modal": "true", "aria-label": ariaLabel || title, "aria-describedby": ariaDescribedBy, children: [jsxRuntime.jsx("div", { className: cn("absolute inset-0 z-0 bg-black/50 backdrop-blur-sm transition-opacity duration-300", isClosing ? "opacity-0" : "opacity-100", overlayClassName), onClick: handleOverlayClick, "aria-hidden": "true" }), jsxRuntime.jsxs("div", { ref: contentRef, className: cn("relative z-10 w-full transition-transform duration-300", "flex flex-col overflow-hidden", variant === "default" && "bg-white rounded-t-2xl shadow-xl", isClosing ? "animate-slide-out-bottom" : "animate-slide-in-bottom", contentClassName), style: { maxHeight }, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, children: [showDragHandle && variant === "default" && (jsxRuntime.jsx("div", { className: "flex justify-center pt-3 pb-2", children: jsxRuntime.jsx("div", { className: "w-10 h-1 bg-neutral-300 rounded-full" }) })), hasHeader && (jsxRuntime.jsxs("div", { className: cn("flex items-start justify-between gap-4", variant === "default" && "px-6", variant === "default" && !showDragHandle && "pt-6", variant === "default" && showDragHandle && "pt-2", variant === "default" && !description && "pb-4", variant === "default" && description && "pb-2", headerClassName), children: [jsxRuntime.jsxs("div", { className: "flex-1", children: [title && (jsxRuntime.jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsxRuntime.jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsxRuntime.jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsxRuntime.jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsxRuntime.jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet" }) })), jsxRuntime.jsx("div", { className: cn("flex-1 overflow-y-auto", variant === "default" && "px-6", variant === "default" && hasHeader && "py-4", variant === "default" && !hasHeader && !showDragHandle && "pt-6 pb-4", variant === "default" && !hasHeader && showDragHandle && "pt-2 pb-4", variant === "default" && !footer && "pb-6", bodyClassName), children: children }), footer && (jsxRuntime.jsxs("div", { className: "flex flex-col", children: [variant === "default" && (jsxRuntime.jsx(Divider, { thickness: "thin", variant: "muted" })), jsxRuntime.jsx("div", { className: cn("flex items-center justify-end gap-3", variant === "default" && "px-6 py-4", footerClassName), children: footer })] }))] })] }));
+});
+BottomSheet.displayName = "BottomSheet";
+
 const buttonGroupVariants = classVarianceAuthority.cva("inline-flex", {
     variants: {
         variant: {
@@ -2961,99 +3138,6 @@ const DateRangePicker = React__namespace.forwardRef(({ className, value: control
 });
 DateRangePicker.displayName = "DateRangePicker";
 
-const dividerVariants = classVarianceAuthority.cva("", {
-    variants: {
-        orientation: {
-            horizontal: "w-full",
-            vertical: "h-full",
-        },
-        thickness: {
-            thinner: "",
-            thin: "",
-            thick: "",
-            thicker: "",
-        },
-        lineStyle: {
-            solid: "border-solid",
-            dashed: "border-dashed",
-        },
-        variant: {
-            normal: "",
-            subtle: "",
-            muted: "",
-        },
-    },
-    compoundVariants: [
-        // Horizontal orientation with thickness
-        {
-            orientation: "horizontal",
-            thickness: "thinner",
-            class: "border-t-[0.5px]",
-        },
-        {
-            orientation: "horizontal",
-            thickness: "thin",
-            class: "border-t-[1px]",
-        },
-        {
-            orientation: "horizontal",
-            thickness: "thick",
-            class: "border-t-[2px]",
-        },
-        {
-            orientation: "horizontal",
-            thickness: "thicker",
-            class: "border-t-[3px]",
-        },
-        // Vertical orientation with thickness
-        {
-            orientation: "vertical",
-            thickness: "thinner",
-            class: "border-l-[0.5px]",
-        },
-        {
-            orientation: "vertical",
-            thickness: "thin",
-            class: "border-l-[1px]",
-        },
-        {
-            orientation: "vertical",
-            thickness: "thick",
-            class: "border-l-[2px]",
-        },
-        {
-            orientation: "vertical",
-            thickness: "thicker",
-            class: "border-l-[3px]",
-        },
-        // Normal variant colors
-        {
-            variant: "normal",
-            class: "border-surface-outline-neutral-normal",
-        },
-        // Subtle variant colors
-        {
-            variant: "subtle",
-            class: "border-surface-outline-neutral-subtle",
-        },
-        // Muted variant colors
-        {
-            variant: "muted",
-            class: "border-surface-outline-neutral-muted",
-        },
-    ],
-    defaultVariants: {
-        orientation: "horizontal",
-        thickness: "thin",
-        lineStyle: "solid",
-        variant: "normal",
-    },
-});
-const Divider = React__namespace.forwardRef(({ className, orientation = "horizontal", thickness = "thin", lineStyle = "solid", variant = "normal", ...props }, ref) => {
-    return (jsxRuntime.jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cn(dividerVariants({ orientation, thickness, lineStyle, variant }), className), ...props }));
-});
-Divider.displayName = "Divider";
-
 const DropdownMenu = React__namespace.forwardRef(({ items = [], customContent, customContentClassName, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", maxHeight = "400px", }, ref) => {
     const renderContent = () => {
         if (isLoading) {
@@ -5974,6 +6058,7 @@ exports.Amount = Amount;
 exports.Avatar = Avatar;
 exports.AvatarCell = AvatarCell;
 exports.Badge = Badge;
+exports.BottomSheet = BottomSheet;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Checkbox = Checkbox;