infinity-ui-elements 1.8.10 → 1.8.12

package/dist/index.js

@@ -1013,6 +1013,68 @@ const Alert = React__namespace.forwardRef(({ className, emphasis = "subtle", int
 });
 Alert.displayName = "Alert";
 
+/**
+ * Amount component that displays formatted currency amounts with decimal numbers in superscript.
+ *
+ * @example
+ * ```tsx
+ * <Amount value={1234.56} currency="USD" />
+ * // Renders: USD 1,234.<sup>56</sup>
+ *
+ * <Amount value={5000} currency="INR" />
+ * // Renders: INR 5,000.<sup>00</sup>
+ * ```
+ */
+const Amount = React__namespace.forwardRef(({ value, currency, locale = "en-US", minimumFractionDigits = 2, maximumFractionDigits = 2, showCurrency = true, className, ...props }, ref) => {
+    // Parse the formatted amount into parts
+    const parts = React__namespace.useMemo(() => {
+        // Always format as a number (not currency style) to get number formatting
+        const formatter = new Intl.NumberFormat(locale, {
+            minimumFractionDigits,
+            maximumFractionDigits,
+        });
+        // Use formatToParts to get structured parts
+        const formattedParts = formatter.formatToParts(value);
+        let integerPart = "";
+        let decimalPart = "";
+        let decimalSeparator = ".";
+        formattedParts.forEach((part) => {
+            switch (part.type) {
+                case "integer":
+                    integerPart += part.value;
+                    break;
+                case "decimal":
+                    decimalSeparator = part.value;
+                    break;
+                case "fraction":
+                    decimalPart = part.value;
+                    break;
+                case "group":
+                    integerPart += part.value;
+                    break;
+            }
+        });
+        // Use currency code as prefix if provided and showCurrency is true
+        const currencyPrefix = currency && showCurrency ? `${currency} ` : "";
+        return {
+            currency: currencyPrefix,
+            integer: integerPart,
+            decimal: decimalPart,
+            decimalSeparator: decimalSeparator,
+            hasDecimal: decimalPart.length > 0,
+        };
+    }, [
+        value,
+        currency,
+        locale,
+        minimumFractionDigits,
+        maximumFractionDigits,
+        showCurrency,
+    ]);
+    return (jsxRuntime.jsxs("span", { ref: ref, className: cn("inline-flex items-baseline", className), ...props, children: [parts.currency && jsxRuntime.jsx("span", { children: parts.currency }), jsxRuntime.jsx("span", { className: "ml-[0.2em]", children: parts.integer }), parts.hasDecimal && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "mx-[0.05em]", children: parts.decimalSeparator }), jsxRuntime.jsx("sup", { className: "text-[0.75em] leading-none", children: parts.decimal })] }))] }));
+});
+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
@@ -3082,7 +3144,7 @@ const textFieldVariants = classVarianceAuthority.cva("relative flex items-center
         isDisabled: false,
     },
 });
-const TextField = React__namespace.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, LinkComponent, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
+const TextField = React__namespace.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isLoading = false, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, LinkComponent, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
     const [internalValue, setInternalValue] = React__namespace.useState("");
     const inputValue = value !== undefined ? value : internalValue;
     const hasValue = inputValue && String(inputValue).length > 0;
@@ -3129,7 +3191,7 @@ const TextField = React__namespace.forwardRef(({ label, helperText, errorText, s
                     size,
                     validationState: currentValidationState,
                     isDisabled,
-                }), className), children: [prefix && (jsxRuntime.jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                }), isLoading && "text-field-loading", className), children: [prefix && (jsxRuntime.jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
@@ -3152,7 +3214,7 @@ const defaultFilter = (item, query) => {
     return (item.label.toLowerCase().includes(searchQuery) ||
         (item.description?.toLowerCase().includes(searchQuery) ?? false));
 };
-const SearchableDropdown = React__namespace.forwardRef(({ className, items = [], sectionHeading, isLoading = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText, secondaryButtonText, onPrimaryClick, onSecondaryClick, dropdownWidth = "full", showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onSearchChange, onItemSelect, filterFunction = defaultFilter, searchValue: controlledSearchValue, defaultSearchValue = "", dropdownClassName, minSearchLength = 0, showOnFocus = true, showAddNew = false, containerClassName, ...textFieldProps }, ref) => {
+const SearchableDropdown = React__namespace.forwardRef(({ className, items = [], sectionHeading, isLoading = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText, secondaryButtonText, onPrimaryClick, onSecondaryClick, dropdownWidth = "full", showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onSearchChange, onItemSelect, filterFunction = defaultFilter, searchValue: controlledSearchValue, defaultSearchValue = "", dropdownClassName, minSearchLength = 0, showOnFocus = true, showAddNew = false, onAddNew, containerClassName, ...textFieldProps }, ref) => {
     const [uncontrolledSearchValue, setUncontrolledSearchValue] = React__namespace.useState(defaultSearchValue);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const [focusedIndex, setFocusedIndex] = React__namespace.useState(-1);
@@ -3219,16 +3281,21 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
         }
         const addNewItem = {
             value: searchValue,
-            label: `+ Add ${searchValue}`,
+            label: `+ Add "${searchValue}"`,
             variant: "primary",
             onClick: () => {
-                const newItem = {
-                    value: searchValue,
-                    label: searchValue,
-                };
-                onItemSelect?.(newItem);
-                if (controlledSearchValue === undefined) {
-                    setUncontrolledSearchValue(searchValue);
+                if (onAddNew) {
+                    onAddNew(searchValue);
+                }
+                else {
+                    const newItem = {
+                        value: searchValue,
+                        label: searchValue,
+                    };
+                    onItemSelect?.(newItem);
+                    if (controlledSearchValue === undefined) {
+                        setUncontrolledSearchValue(searchValue);
+                    }
                 }
                 setIsOpen(false);
                 inputRef.current?.focus();
@@ -3240,6 +3307,7 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
         searchValue,
         filteredItems,
         onItemSelect,
+        onAddNew,
         controlledSearchValue,
     ]);
     // Reset focused index when items change
@@ -3967,6 +4035,7 @@ const TextArea = React__namespace.forwardRef(({ label, helperText, errorText, su
 TextArea.displayName = "TextArea";
 
 exports.Alert = Alert;
+exports.Amount = Amount;
 exports.Avatar = Avatar;
 exports.AvatarCell = AvatarCell;
 exports.Badge = Badge;