infinity-ui-elements 1.8.10 → 1.8.11

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"
@@ -3945,5 +4007,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