infinity-ui-elements 1.8.10 → 1.8.11

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"
@@ -3967,6 +4029,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;