infinity-ui-elements 1.9.15 → 1.9.16

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export * from "./components/Alert";
 export * from "./components/Amount";
 export * from "./components/Avatar";
 export * from "./components/Badge";
+export * from "./components/BottomSheet";
 export * from "./components/Button";
 export * from "./components/ButtonGroup";
 export * from "./components/Checkbox";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iCAAiC,CAAC;AAChD,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,IAAI,EACJ,iBAAiB,EACjB,OAAO,EACP,YAAY,EACZ,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,aAAa,CAAC"}

package/dist/index.esm.js

@@ -1317,6 +1317,183 @@ const Badge = React.forwardRef(({ className, variant, size, color, showDot = fal
 });
 Badge.displayName = "Badge";
 
+const dividerVariants = 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.forwardRef(({ className, orientation = "horizontal", thickness = "thin", lineStyle = "solid", variant = "normal", ...props }, ref) => {
+    return (jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cn(dividerVariants({ orientation, thickness, lineStyle, variant }), className), ...props }));
+});
+Divider.displayName = "Divider";
+
+const BottomSheet = React.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.useRef(null);
+    const contentRef = ref || sheetRef;
+    const [isClosing, setIsClosing] = React.useState(false);
+    const [touchStart, setTouchStart] = React.useState(null);
+    const [touchEnd, setTouchEnd] = React.useState(null);
+    // Handle escape key
+    React.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.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.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 (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: [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" }), 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" && (jsx("div", { className: "flex justify-center pt-3 pb-2", children: jsx("div", { className: "w-10 h-1 bg-neutral-300 rounded-full" }) })), hasHeader && (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: [jsxs("div", { className: "flex-1", children: [title && (jsx(Text, { as: "h2", variant: "body", size: "large", weight: "semibold", color: "default", children: title })), description && (jsx(Text, { as: "p", variant: "body", size: "small", weight: "regular", color: "subtle", className: "mt-1", children: description }))] }), showCloseButton && onClose && (jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet", className: "shrink-0" }))] })), !hasHeader && showCloseButton && onClose && (jsx("div", { className: cn("absolute z-10", variant === "default" && "top-4 right-4"), children: jsx(IconButton, { icon: "close", onClick: handleClose, color: "neutral", size: "small", "aria-label": "Close bottom sheet" }) })), 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 && (jsxs("div", { className: "flex flex-col", children: [variant === "default" && (jsx(Divider, { thickness: "thin", variant: "muted" })), 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 = cva("inline-flex", {
     variants: {
         variant: {
@@ -2940,99 +3117,6 @@ const DateRangePicker = React.forwardRef(({ className, value: controlledValue, d
 });
 DateRangePicker.displayName = "DateRangePicker";
 
-const dividerVariants = 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.forwardRef(({ className, orientation = "horizontal", thickness = "thin", lineStyle = "solid", variant = "normal", ...props }, ref) => {
-    return (jsx("div", { ref: ref, role: "separator", "aria-orientation": orientation, className: cn(dividerVariants({ orientation, thickness, lineStyle, variant }), className), ...props }));
-});
-Divider.displayName = "Divider";
-
 const DropdownMenu = React.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) {
@@ -5948,5 +6032,5 @@ const UploadBox = React.forwardRef(({ label, helperText, errorText, successText,
 });
 UploadBox.displayName = "UploadBox";
 
-export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
+export { Alert, Amount, Avatar, AvatarCell, Badge, BottomSheet, Button, ButtonGroup, Checkbox, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
 //# sourceMappingURL=index.esm.js.map