infinity-ui-elements 1.8.10 → 1.8.12

package/dist/index.esm.js

@@ -992,6 +992,68 @@ const Alert = React.forwardRef(({ className, emphasis = "subtle", intent = "info
 });
 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.forwardRef(({ value, currency, locale = "en-US", minimumFractionDigits = 2, maximumFractionDigits = 2, showCurrency = true, className, ...props }, ref) => {
+    // Parse the formatted amount into parts
+    const parts = React.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 (jsxs("span", { ref: ref, className: cn("inline-flex items-baseline", className), ...props, children: [parts.currency && jsx("span", { children: parts.currency }), jsx("span", { className: "ml-[0.2em]", children: parts.integer }), parts.hasDecimal && (jsxs(Fragment, { children: [jsx("span", { className: "mx-[0.05em]", children: parts.decimalSeparator }), 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
@@ -3061,7 +3123,7 @@ const textFieldVariants = cva("relative flex items-center gap-2 border rounded-l
         isDisabled: false,
     },
 });
-const TextField = React.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.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.useState("");
     const inputValue = value !== undefined ? value : internalValue;
     const hasValue = inputValue && String(inputValue).length > 0;
@@ -3108,7 +3170,7 @@ const TextField = React.forwardRef(({ label, helperText, errorText, successText,
                     size,
                     validationState: currentValidationState,
                     isDisabled,
-                }), className), children: [prefix && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                }), isLoading && "text-field-loading", className), children: [prefix && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
@@ -3131,7 +3193,7 @@ const defaultFilter = (item, query) => {
     return (item.label.toLowerCase().includes(searchQuery) ||
         (item.description?.toLowerCase().includes(searchQuery) ?? false));
 };
-const SearchableDropdown = React.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.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.useState(defaultSearchValue);
     const [isOpen, setIsOpen] = React.useState(false);
     const [focusedIndex, setFocusedIndex] = React.useState(-1);
@@ -3198,16 +3260,21 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         }
         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();
@@ -3219,6 +3286,7 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         searchValue,
         filteredItems,
         onItemSelect,
+        onAddNew,
         controlledSearchValue,
     ]);
     // Reset focused index when items change
@@ -3945,5 +4013,5 @@ const TextArea = React.forwardRef(({ label, helperText, errorText, successText,
 });
 TextArea.displayName = "TextArea";
 
-export { Alert, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
+export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, SearchableDropdown, Select, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Tooltip, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants };
 //# sourceMappingURL=index.esm.js.map