infinity-ui-elements 1.9.19 → 1.9.21

package/dist/index.js

@@ -1100,33 +1100,6 @@ const Amount = React__namespace.forwardRef(({ value, currency, locale = "en-US",
 });
 Amount.displayName = "Amount";
 
-// Helper function to get the text utility class name
-function getTextClassName(variant = "body", size = "medium", weight = "regular", color = "default") {
-    // Build the base class name
-    let baseClass = `text-${variant}`;
-    // Add size
-    if (size) {
-        baseClass += `-${size}`;
-    }
-    // Add weight
-    if (weight) {
-        baseClass += `-${weight}`;
-    }
-    // Add color class separately
-    const colorClass = `text-color-${color}`;
-    return `${baseClass} ${colorClass}`;
-}
-const Text = React__namespace.forwardRef(({ className, variant = "body", size = "medium", weight = "regular", color = "default", as = "p", children, ...props }, ref) => {
-    const Component = as;
-    const textClass = getTextClassName(variant, size, weight, color);
-    return React__namespace.createElement(Component, {
-        className: cn(textClass, className),
-        ref,
-        ...props,
-    }, children);
-});
-Text.displayName = "Text";
-
 const inverseColorClasses = {
     a1: "bg-avatar-fill-a1-on-bg text-avatar-fill-a1-bg",
     a2: "bg-avatar-fill-a2-on-bg text-avatar-fill-a2-bg",
@@ -1174,7 +1147,7 @@ const statusVariants = classVarianceAuthority.cva("absolute flex items-center ju
         statusColor: "notice",
     },
 });
-const Avatar = React__namespace.forwardRef(({ className, appearance = "default", color, size, children, src, alt, showStatus = false, statusColor = "notice", statusIcon, label, trailingComponent, containerClassName, ...props }, ref) => {
+const Avatar = React__namespace.forwardRef(({ className, appearance = "default", color, size, children, src, alt, showStatus = false, statusColor = "notice", statusIcon, label, trailingComponent, containerClassName, labelClassName, ...props }, ref) => {
     const [imageError, setImageError] = React__namespace.useState(false);
     const handleImageError = () => {
         setImageError(true);
@@ -1189,14 +1162,14 @@ const Avatar = React__namespace.forwardRef(({ className, appearance = "default",
                 return "h-4 w-4";
         }
     };
-    const getTextSize = () => {
+    const getTextClass = () => {
         switch (size) {
             case "small":
-                return "small";
+                return "text-body-small-medium text-color-default";
             case "medium":
-                return "medium";
+                return "text-body-medium-medium text-color-default";
             default:
-                return "medium";
+                return "text-body-medium-medium text-color-default";
         }
     };
     const resolvedColor = color ?? "a1";
@@ -1208,7 +1181,7 @@ const Avatar = React__namespace.forwardRef(({ className, appearance = "default",
         return jsxRuntime.jsx("div", { ref: ref, children: avatarElement });
     }
     // Otherwise, return avatar with label and/or trailing component
-    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("inline-flex items-center gap-3", containerClassName), children: [avatarElement, label && (jsxRuntime.jsx(Text, { variant: "body", size: getTextSize(), weight: "medium", color: "default", as: "span", children: label })), trailingComponent && (jsxRuntime.jsx("span", { className: "ml-auto", children: trailingComponent }))] }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("inline-flex items-center gap-3", containerClassName), children: [avatarElement, label && jsxRuntime.jsx("p", { className: cn(getTextClass(), labelClassName), children: label }), trailingComponent && (jsxRuntime.jsx("span", { className: "ml-auto", children: trailingComponent }))] }));
 });
 Avatar.displayName = "Avatar";
 
@@ -1338,6 +1311,33 @@ const Badge = React__namespace.forwardRef(({ className, variant, size, color, sh
 });
 Badge.displayName = "Badge";
 
+// Helper function to get the text utility class name
+function getTextClassName(variant = "body", size = "medium", weight = "regular", color = "default") {
+    // Build the base class name
+    let baseClass = `text-${variant}`;
+    // Add size
+    if (size) {
+        baseClass += `-${size}`;
+    }
+    // Add weight
+    if (weight) {
+        baseClass += `-${weight}`;
+    }
+    // Add color class separately
+    const colorClass = `text-color-${color}`;
+    return `${baseClass} ${colorClass}`;
+}
+const Text = React__namespace.forwardRef(({ className, variant = "body", size = "medium", weight = "regular", color = "default", as = "p", children, ...props }, ref) => {
+    const Component = as;
+    const textClass = getTextClassName(variant, size, weight, color);
+    return React__namespace.createElement(Component, {
+        className: cn(textClass, className),
+        ref,
+        ...props,
+    }, children);
+});
+Text.displayName = "Text";
+
 const dividerVariants = classVarianceAuthority.cva("", {
     variants: {
         orientation: {
@@ -3498,10 +3498,22 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
     const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const [dropdownPlacement, setDropdownPlacement] = React__namespace.useState("bottom");
+    const [isMobile, setIsMobile] = React__namespace.useState(false);
     const containerRef = React__namespace.useRef(null);
     const dropdownContainerRef = React__namespace.useRef(null);
     const inputRef = React__namespace.useRef(null);
     React__namespace.useImperativeHandle(ref, () => inputRef.current);
+    // Detect if we're on mobile (< 768px)
+    React__namespace.useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+        // Check on mount
+        checkMobile();
+        // Add resize listener
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
     const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
     // Find the selected option
     const selectedOption = options.find((opt) => opt.value === value);
@@ -3658,9 +3670,11 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
     // Build the suffix: include both the optional suffix and the chevron icon
     const chevronIcon = (jsxRuntime.jsx(Icon, { name: isOpen ? "chevronUp" : "chevronDown", size: 16, className: "shrink-0 transition-colors" }));
     const displaySuffix = suffix ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [suffix, chevronIcon] })) : (chevronIcon);
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: "relative w-full", children: [jsxRuntime.jsx(TextField, { ref: inputRef, label: label, helperText: helperText, errorText: errorText, successText: successText, validationState: validationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, isLoading: isLoading, size: size, prefix: displayPrefix, suffix: displaySuffix, showClearButton: showClearButton && hasValue && !isLoading, onClear: handleClear, placeholder: placeholder, value: displayValue, readOnly: true, containerClassName: cn("w-full", containerClassName), labelClassName: labelClassName, className: cn("cursor-pointer", triggerClassName, className), inputClassName: "cursor-pointer", infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, onClick: toggleOpen, onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...props }), isOpen && !isDisabled && !isLoading && (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
+    // Render dropdown menu content
+    const renderDropdownContent = () => (jsxRuntime.jsx(DropdownMenu, { items: menuItems, sectionHeading: sectionHeading, isEmpty: options.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyIcon: emptyIcon, disableFooter: true, onClose: () => handleOpenChange(false), className: menuClassName, width: isMobile ? "full" : widthStyle, unstyled: isMobile }));
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: "relative w-full", children: [jsxRuntime.jsx(TextField, { ref: inputRef, label: label, helperText: helperText, errorText: errorText, successText: successText, validationState: validationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, isLoading: isLoading, size: size, prefix: displayPrefix, suffix: displaySuffix, showClearButton: showClearButton && hasValue && !isLoading, onClear: handleClear, placeholder: placeholder, value: displayValue, readOnly: true, containerClassName: cn("w-full", containerClassName), labelClassName: labelClassName, className: cn("cursor-pointer", triggerClassName, className), inputClassName: "cursor-pointer", infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, onClick: toggleOpen, onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...props }), isOpen && !isDisabled && !isLoading && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: () => handleOpenChange(false), title: sectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
                     ? "top-full mt-1"
-                    : "bottom-full mb-1"), children: jsxRuntime.jsx(DropdownMenu, { items: menuItems, sectionHeading: sectionHeading, isEmpty: options.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyIcon: emptyIcon, disableFooter: true, onClose: () => handleOpenChange(false), className: menuClassName, width: widthStyle }) }))] }));
+                    : "bottom-full mb-1"), children: renderDropdownContent() })))] }));
 });
 Select.displayName = "Select";
 
@@ -4373,14 +4387,18 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
             ? true
             : false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: isMobile ? "full" : (dropdownWidth === "full" ? "full" : "auto"), unstyled: isMobile }));
     // Mobile: BottomSheet, Desktop: Regular Dropdown
-    const dropdownMenu = showDropdown && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: menuRef, style: {
+    const dropdownMenu = showDropdown && (isMobile ? (jsxRuntime.jsxs(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: [jsxRuntime.jsx("div", { className: "mb-4", children: jsxRuntime.jsx(TextField, { value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, containerClassName: "mb-0", placeholder: textFieldProps.placeholder || "Search...", autoFocus: true, ...textFieldProps }) }), renderDropdownContent()] })) : (jsxRuntime.jsx("div", { ref: menuRef, style: {
             position: "absolute",
             top: `${position.top + 8}px`,
             left: `${position.left}px`,
             width: dropdownWidth === "full" ? `${position.width}px` : "auto",
             zIndex: isInsideModal ? 10001 : 9999,
         }, children: renderDropdownContent() })));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: jsxRuntime.jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps }) }), typeof document !== "undefined" &&
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: [!isMobile && (jsxRuntime.jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps })), isMobile && (jsxRuntime.jsx(TextField, { ref: inputRef, value: searchValue, onFocus: () => {
+                            if (showOnFocus && searchValue.length >= minSearchLength) {
+                                setIsOpen(true);
+                            }
+                        }, onClick: () => setIsOpen(true), readOnly: true, containerClassName: "mb-0", ...textFieldProps }))] }), typeof document !== "undefined" &&
                 dropdownMenu &&
                 reactDom.createPortal(dropdownMenu, document.body)] }));
 });
@@ -4558,9 +4576,21 @@ const SelectTextField = React__namespace.forwardRef(({ textValue: controlledText
     const [uncontrolledSelectValue, setUncontrolledSelectValue] = React__namespace.useState(defaultSelectValue);
     const [isSelectOpen, setIsSelectOpen] = React__namespace.useState(false);
     const [dropdownPlacement, setDropdownPlacement] = React__namespace.useState("bottom");
+    const [isMobile, setIsMobile] = React__namespace.useState(false);
     const selectRef = React__namespace.useRef(null);
     const dropdownContainerRef = React__namespace.useRef(null);
     const componentRef = React__namespace.useRef(null);
+    // Detect if we're on mobile (< 768px)
+    React__namespace.useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+        // Check on mount
+        checkMobile();
+        // Add resize listener
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
     const textValue = controlledTextValue !== undefined
         ? controlledTextValue
         : uncontrolledTextValue;
@@ -4708,6 +4738,8 @@ const SelectTextField = React__namespace.forwardRef(({ textValue: controlledText
             gap: "gap-3",
         },
     };
+    // Render dropdown menu content
+    const renderDropdownContent = () => (jsxRuntime.jsx(DropdownMenu, { items: menuItems, sectionHeading: selectSectionHeading, isEmpty: selectOptions.length === 0, emptyTitle: selectEmptyTitle, emptyDescription: selectEmptyDescription, emptyIcon: selectEmptyIcon, disableFooter: true, onClose: () => handleSelectOpenChange(false), className: selectMenuClassName, width: isMobile ? "full" : widthStyle, unstyled: isMobile }));
     // Create the select component (prefix or suffix)
     const selectComponent = (jsxRuntime.jsxs("div", { className: cn("relative flex items-stretch h-full"), children: [jsxRuntime.jsxs("div", { ref: selectRef, className: cn(selectTriggerVariants({
                     size,
@@ -4725,9 +4757,9 @@ const SelectTextField = React__namespace.forwardRef(({ textValue: controlledText
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50", position === "prefix" ? "left-[-12px]" : "right-[-12px]", dropdownPlacement === "bottom"
+                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isSelectOpen, onClose: () => handleSelectOpenChange(false), title: selectSectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50", position === "prefix" ? "left-[-12px]" : "right-[-12px]", dropdownPlacement === "bottom"
                     ? "top-[30px] mt-1"
-                    : "bottom-full mb-1"), children: jsxRuntime.jsx(DropdownMenu, { items: menuItems, sectionHeading: selectSectionHeading, isEmpty: selectOptions.length === 0, emptyTitle: selectEmptyTitle, emptyDescription: selectEmptyDescription, emptyIcon: selectEmptyIcon, disableFooter: true, onClose: () => handleSelectOpenChange(false), className: selectMenuClassName, width: widthStyle }) }))] }));
+                    : "bottom-full mb-1"), children: renderDropdownContent() })))] }));
     return (jsxRuntime.jsxs("div", { ref: componentRef, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsxRuntime.jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: textFieldProps.infoHeading, infoDescription: textFieldProps.infoDescription, LinkComponent: textFieldProps.LinkComponent, linkText: textFieldProps.linkText, linkHref: textFieldProps.linkHref, onLinkClick: textFieldProps.onLinkClick, htmlFor: textFieldProps.id, className: "mb-2", labelClassName: labelClassName })), jsxRuntime.jsx(TextField, { ref: ref, value: textValue, onChange: handleTextChange, ...(position === "prefix"
                     ? { prefix: selectComponent }
                     : { suffix: selectComponent }), size: size, validationState: currentValidationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, containerClassName: "gap-0", className: className, inputClassName: inputClassName, ...textFieldProps }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"