@longline/aqua-ui 1.0.183 → 1.0.186

package/formatters/DateTime/elements/ShortDate.js

@@ -1,10 +1,37 @@
 import * as React from 'react';
 import { format } from 'date-fns';
 import { toDate } from './toDate';
+/**
+ * `ShortDate` formats a date value into a short date string,
+ * using the format `dd-MM-yyyy` (e.g., `28-05-2025`).
+ *
+ * It shows a tooltip with the full date in a long, human-readable format,
+ * e.g., `"Wednesday, 28 May 2025"`.
+ *
+ * Accepts a `Date` object or a date string as `value`. Returns `null` if input
+ * is `null` or invalid.
+ *
+ * Optionally supports a `locale` prop that affects the date formatting and tooltip.
+ *
+ * The date is wrapped in a semantic `<time>` element with a machine-readable
+ * `dateTime` attribute.
+ *
+ * @example
+ * ```tsx
+ * <ShortDate value={new Date()} />
+ * <ShortDate value="2025-05-28" locale={someLocale} />
+ * ```
+ */
 var ShortDate = function (props) {
     if (props.value == null)
         return null;
     var date = toDate(props.value);
-    return (React.createElement("span", { title: format(date, 'eeee, d MMMM yyyy', props.locale ? { locale: props.locale } : {}) }, format(date, 'dd-MM-yyyy', props.locale ? { locale: props.locale } : {})));
+    if (isNaN(date.getTime()))
+        return null;
+    var longDateFormat = 'eeee, d MMMM yyyy';
+    var shortDateFormat = 'dd-MM-yyyy';
+    var localeOption = props.locale ? { locale: props.locale } : {};
+    return (React.createElement("time", { dateTime: date.toISOString(), title: format(date, longDateFormat, localeOption) }, format(date, shortDateFormat, localeOption)));
 };
+ShortDate.displayName = "DateTime.ShortDate";
 export { ShortDate };

package/formatters/DateTime/elements/ShortDateTime.d.ts

@@ -1,14 +1,28 @@
 import * as React from 'react';
-import { Locale } from 'date-fns';
-interface IProps {
-    /**
-     * Date/time to format.
-     */
-    value: Date | string;
-    /**
-     * Optional locale.
-     */
-    locale?: Locale;
-}
-declare const ShortDateTime: (props: IProps) => React.JSX.Element;
-export { ShortDateTime, IProps };
+import { IDateTimeProps } from '../DateTime';
+/**
+ * `ShortDateTime` formats a date/time value as a short date and time string,
+ * using the format `dd-MM-yyyy HH:mm:ss` (e.g., `28-05-2025 14:30:45`).
+ *
+ * It displays a tooltip showing the full date/time in a long, human-readable format,
+ * e.g., `"Wednesday, 28 May 2025 14:30:45"`.
+ *
+ * Accepts a `Date` object or a date string as `value`. Returns `null` if input
+ * is `null` or invalid.
+ *
+ * Optionally supports a `locale` prop that affects the formatting and tooltip.
+ *
+ * The output is wrapped in a semantic `<time>` element with a machine-readable
+ * `dateTime` attribute.
+ *
+ * @example
+ * ```tsx
+ * <ShortDateTime value={new Date()} />
+ * <ShortDateTime value="2025-05-28T14:30:45" locale={someLocale} />
+ * ```
+ */
+declare const ShortDateTime: {
+    (props: IDateTimeProps): React.JSX.Element;
+    displayName: string;
+};
+export { ShortDateTime };

package/formatters/DateTime/elements/ShortDateTime.js

@@ -1,10 +1,37 @@
 import * as React from 'react';
 import { format } from 'date-fns';
 import { toDate } from './toDate';
+/**
+ * `ShortDateTime` formats a date/time value as a short date and time string,
+ * using the format `dd-MM-yyyy HH:mm:ss` (e.g., `28-05-2025 14:30:45`).
+ *
+ * It displays a tooltip showing the full date/time in a long, human-readable format,
+ * e.g., `"Wednesday, 28 May 2025 14:30:45"`.
+ *
+ * Accepts a `Date` object or a date string as `value`. Returns `null` if input
+ * is `null` or invalid.
+ *
+ * Optionally supports a `locale` prop that affects the formatting and tooltip.
+ *
+ * The output is wrapped in a semantic `<time>` element with a machine-readable
+ * `dateTime` attribute.
+ *
+ * @example
+ * ```tsx
+ * <ShortDateTime value={new Date()} />
+ * <ShortDateTime value="2025-05-28T14:30:45" locale={someLocale} />
+ * ```
+ */
 var ShortDateTime = function (props) {
     if (props.value == null)
         return null;
     var date = toDate(props.value);
-    return (React.createElement("span", { title: format(date, 'eeee, d MMMM yyyy HH:mm:ss', props.locale ? { locale: props.locale } : {}) }, format(date, 'dd-MM-yyyy HH:mm:ss', props.locale ? { locale: props.locale } : {})));
+    if (isNaN(date.getTime()))
+        return null;
+    var longDateTimeFormat = 'eeee, d MMMM yyyy HH:mm:ss';
+    var shortDateTimeFormat = 'dd-MM-yyyy HH:mm:ss';
+    var localeOption = props.locale ? { locale: props.locale } : {};
+    return (React.createElement("time", { dateTime: date.toISOString(), title: format(date, longDateTimeFormat, localeOption) }, format(date, shortDateTimeFormat, localeOption)));
 };
+ShortDateTime.displayName = "DateTime.ShortDateTime";
 export { ShortDateTime };

package/formatters/DateTime/elements/ShortTime.d.ts

@@ -1,18 +1,19 @@
 import * as React from 'react';
-import { Locale } from 'date-fns';
-interface IProps {
-    /**
-     * Time to format.
-     */
-    value: Date | string;
-    /**
-     * Optional locale.
-     */
-    locale?: Locale;
+import { IDateTimeProps } from '../DateTime';
+interface IShortTimeProps extends IDateTimeProps {
     /**
      * Seconds are shown if set.
      */
     seconds?: boolean;
 }
-declare const ShortTime: (props: IProps) => React.JSX.Element;
-export { ShortTime, IProps };
+/**
+ * Formats a time value to a short string (HH:mm or HH:mm:ss).
+ * Supports optional locale and seconds display.
+ *
+ * ```tsx
+ * <ShortTime value={new Date()} />
+ * <ShortTime value="2023-05-28T14:30:00" seconds locale={someLocale} />
+ * ```
+ */
+declare const ShortTime: React.MemoExoticComponent<({ value, locale, seconds }: IShortTimeProps) => React.JSX.Element>;
+export { ShortTime, IShortTimeProps };

package/formatters/DateTime/elements/ShortTime.js

@@ -1,10 +1,24 @@
 import * as React from 'react';
 import { format } from 'date-fns';
 import { toDate } from './toDate';
-var ShortTime = function (props) {
-    if (props.value == null)
+/**
+ * Formats a time value to a short string (HH:mm or HH:mm:ss).
+ * Supports optional locale and seconds display.
+ *
+ * ```tsx
+ * <ShortTime value={new Date()} />
+ * <ShortTime value="2023-05-28T14:30:00" seconds locale={someLocale} />
+ * ```
+ */
+var ShortTime = React.memo(function (_a) {
+    var value = _a.value, locale = _a.locale, _b = _a.seconds, seconds = _b === void 0 ? false : _b;
+    if (value == null)
         return null;
-    var date = toDate(props.value);
-    return (React.createElement("span", null, format(date, 'HH:mm')));
-};
+    var date = toDate(value);
+    if (isNaN(date.getTime()))
+        return null; // handle invalid dates gracefully
+    var formatString = seconds ? 'HH:mm:ss' : 'HH:mm';
+    return (React.createElement("span", null, format(date, formatString, { locale: locale })));
+});
+ShortTime.displayName = "DateTime.ShortTime";
 export { ShortTime };

package/formatters/DateTime/elements/index.d.ts

@@ -0,0 +1,8 @@
+export * from './ShortTime';
+export * from './LongTime';
+export * from './ShortDate';
+export * from './LongDate';
+export * from './ShortDateTime';
+export * from './LongDateTime';
+export * from './DistanceDate';
+export * from './Custom';

package/formatters/DateTime/elements/index.js

@@ -0,0 +1,8 @@
+export * from './ShortTime';
+export * from './LongTime';
+export * from './ShortDate';
+export * from './LongDate';
+export * from './ShortDateTime';
+export * from './LongDateTime';
+export * from './DistanceDate';
+export * from './Custom';

package/formatters/Filesize/Filesize.d.ts

@@ -1,29 +1,38 @@
 import * as React from 'react';
 interface IProps {
-    /**
-     * File size in bytes
-     */
+    /** File size in bytes */
     value: number | string;
     /**
-     * Unit type, `si` or `binary`
-     * @default si
+     * Unit type, `si` (base 1000) or `binary` (base 1024)
+     * @default 'si'
      */
     unit?: 'si' | 'binary';
+    /**
+     * Optional locale string (e.g., 'en-US', 'fr-FR')
+     * @default 'en'
+     */
+    locale?: string;
+    /**
+     * Number of digits to show after decimal point
+     * @default 2
+     */
+    decimals?: number;
 }
 /**
- * Filesize takes a `value` prop (in bytes) and renders a human-readable filesize
- * string.  If provided with a string, `Filesize` will convert it to a number
- * first.
+ * `Filesize` displays a human-readable file size string from a number of bytes.
  *
- * E.g. `10000` => `10.0 kB`
+ * Supports SI (base 1000) and binary (base 1024) unit systems.
  *
- * The `unit` type can optionally be specified, either `si` (International
- * System of Units, where 1 kilobyte is 1,000 byes), or `binary (where 1
- * kilobyte equals 1,024 bytes).
+ * Localized formatting via `Intl.NumberFormat`.
  *
  * ```tsx
- * <Filesize value={10000} unit='binary'/>
+ * <Filesize value={10000} unit="si" />        // "10.00 kB"
+ * <Filesize value={1048576} unit="binary" />  // "1.00 MiB"
+ * <Filesize value="2048000" locale="de-DE" /> // "2,05 MB"
  * ```
  */
-declare const Filesize: ({ unit, ...props }: IProps) => React.JSX.Element;
+declare const Filesize: {
+    ({ value, unit, locale, decimals, }: IProps): string | React.JSX.Element;
+    displayName: string;
+};
 export { Filesize, IProps };

package/formatters/Filesize/Filesize.js

@@ -1,54 +1,45 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 /**
- * Filesize takes a `value` prop (in bytes) and renders a human-readable filesize
- * string.  If provided with a string, `Filesize` will convert it to a number
- * first.
+ * `Filesize` displays a human-readable file size string from a number of bytes.
  *
- * E.g. `10000` => `10.0 kB`
+ * Supports SI (base 1000) and binary (base 1024) unit systems.
  *
- * The `unit` type can optionally be specified, either `si` (International
- * System of Units, where 1 kilobyte is 1,000 byes), or `binary (where 1
- * kilobyte equals 1,024 bytes).
+ * Localized formatting via `Intl.NumberFormat`.
  *
  * ```tsx
- * <Filesize value={10000} unit='binary'/>
+ * <Filesize value={10000} unit="si" />        // "10.00 kB"
+ * <Filesize value={1048576} unit="binary" />  // "1.00 MiB"
+ * <Filesize value="2048000" locale="de-DE" /> // "2,05 MB"
  * ```
  */
 var Filesize = function (_a) {
-    var _b = _a.unit, unit = _b === void 0 ? "si" : _b, props = __rest(_a, ["unit"]);
-    /**
-     * Convert bytes to size string (kB, MB, GB etc.)
-     */
-    var humanFileSize = function (bytes, unit) {
-        var thresh = unit == 'si' ? 1000 : 1024;
-        if (Math.abs(bytes) < thresh) {
-            return bytes + ' B';
-        }
-        var units = unit == 'si'
-            ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-            : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
-        var u = -1;
-        do {
-            bytes /= thresh;
-            ++u;
-        } while (Math.abs(bytes) >= thresh && u < units.length - 1);
-        return bytes.toFixed(2) + ' ' + units[u];
-    };
-    if (props.value == null)
+    var value = _a.value, _b = _a.unit, unit = _b === void 0 ? 'si' : _b, _c = _a.locale, locale = _c === void 0 ? 'en' : _c, _d = _a.decimals, decimals = _d === void 0 ? 2 : _d;
+    if (value == null)
+        return null;
+    var num = typeof value === 'string' ? parseFloat(value) : value;
+    if (isNaN(num))
         return null;
-    // Make sure value is a number.
-    var val = (typeof props.value === 'string') ? parseFloat(props.value) : props.value;
-    return (React.createElement(React.Fragment, null, humanFileSize(val, unit)));
+    var threshold = unit === 'si' ? 1000 : 1024;
+    var units = unit === 'si'
+        ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+        : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    if (Math.abs(num) < threshold) {
+        return "".concat(num, " B");
+    }
+    var size = num;
+    var u = -1;
+    do {
+        size /= threshold;
+        ++u;
+    } while (Math.abs(size) >= threshold && u < units.length - 1);
+    var formatter = new Intl.NumberFormat(locale, {
+        maximumFractionDigits: decimals,
+        minimumFractionDigits: 0,
+    });
+    return (React.createElement(React.Fragment, null,
+        formatter.format(size),
+        " ",
+        units[u]));
 };
+Filesize.displayName = 'Filesize';
 export { Filesize };

package/formatters/GIS/Latitude.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface IProps {
+interface ILatitudeProps {
     /**
      * Value to format.
      */
@@ -8,16 +8,22 @@ interface IProps {
      * String to show if formatting fails.
      * @default "(no coordinates)"
      */
-    default?: string;
+    defaultStr?: string;
 }
 /**
  * Formats a fractional latitude value as degrees, minutes and seconds (as a string).
  * If provided with a string, `Longitude` will convert it to a number first.
+ * Returns the fallback string if formatting fails or value is out of range.
+ *
+ * Latitude must be between -90 and 90 degrees.
  *
  * ```tsx
  * <Latitude value={34.2216}/>
- * <Latitude value={34.2216} default="Bad latitude"/>
+ * <Latitude value={null} defaultStr="Invalid latitude"/>
  * ```
  */
-declare const Latitude: (props: IProps) => React.JSX.Element;
-export { Latitude, IProps as ILatitudeProps };
+declare const Latitude: {
+    ({ value, defaultStr, ...props }: ILatitudeProps): React.JSX.Element;
+    displayName: string;
+};
+export { Latitude, ILatitudeProps };

package/formatters/GIS/Latitude.js

@@ -1,13 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import * as React from 'react';
-import { toDMS } from "./toDMS";
+import { DMS } from '../../helper/DMS';
 /**
  * Formats a fractional latitude value as degrees, minutes and seconds (as a string).
  * If provided with a string, `Longitude` will convert it to a number first.
+ * Returns the fallback string if formatting fails or value is out of range.
+ *
+ * Latitude must be between -90 and 90 degrees.
  *
  * ```tsx
  * <Latitude value={34.2216}/>
- * <Latitude value={34.2216} default="Bad latitude"/>
+ * <Latitude value={null} defaultStr="Invalid latitude"/>
  * ```
  */
-var Latitude = function (props) { return React.createElement(React.Fragment, null, toDMS(props.value, props.default, 90, "N", "S")); };
+var Latitude = function (_a) {
+    var value = _a.value, _b = _a.defaultStr, defaultStr = _b === void 0 ? "(no coordinates)" : _b, props = __rest(_a, ["value", "defaultStr"]);
+    // Value and defaultStr and mostly stable. Memoize the formatted string to
+    // avoid unnecessary recalculations on every render.
+    var formatted = React.useMemo(function () {
+        return DMS.toDMSString(value, defaultStr, 90, "N", "S");
+    }, [value, defaultStr]);
+    return (React.createElement(React.Fragment, null, formatted));
+};
+Latitude.displayName = "Latitude";
 export { Latitude };

package/formatters/GIS/Longitude.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-interface IProps {
+interface ILongitudeProps {
     /**
      * Value to format.
      */
@@ -8,16 +8,20 @@ interface IProps {
      * String to show if formatting fails.
      * @default "(no coordinates)"
      */
-    default?: string;
+    defaultStr?: string;
 }
 /**
  * Formats a fractional longitude value as degrees, minutes and seconds (as a string).
  * If provided with a string, `Longitude` will convert it to a number first.
+ * Returns the fallback string if formatting fails or value is out of range.
  *
  * ```tsx
  * <Longitude value={34.2216}/>
- * <Longitude value={34.2216} default="Bad longitude"/>
+ * <Longitude value={null} defaultStr="Invalid longitude"/>
  * ```*
  */
-declare const Longitude: (props: IProps) => React.JSX.Element;
-export { Longitude, IProps as ILongitudeProps };
+declare const Longitude: {
+    ({ value, defaultStr, ...props }: ILongitudeProps): React.JSX.Element;
+    displayName: string;
+};
+export { Longitude, ILongitudeProps };

package/formatters/GIS/Longitude.js

@@ -1,13 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import * as React from 'react';
-import { toDMS } from "./toDMS";
+import { DMS } from '../../helper/DMS';
 /**
  * Formats a fractional longitude value as degrees, minutes and seconds (as a string).
  * If provided with a string, `Longitude` will convert it to a number first.
+ * Returns the fallback string if formatting fails or value is out of range.
  *
  * ```tsx
  * <Longitude value={34.2216}/>
- * <Longitude value={34.2216} default="Bad longitude"/>
+ * <Longitude value={null} defaultStr="Invalid longitude"/>
  * ```*
  */
-var Longitude = function (props) { return React.createElement(React.Fragment, null, toDMS(props.value, props.default, 180, "E", "W")); };
+var Longitude = function (_a) {
+    var value = _a.value, _b = _a.defaultStr, defaultStr = _b === void 0 ? "(no coordinates)" : _b, props = __rest(_a, ["value", "defaultStr"]);
+    // Value and defaultStr and mostly stable. Memoize the formatted string to
+    // avoid unnecessary recalculations on every render.
+    var formatted = React.useMemo(function () {
+        return DMS.toDMSString(value, defaultStr, 180, "E", "W");
+    }, [value, defaultStr]);
+    return (React.createElement(React.Fragment, null, formatted));
+};
+Longitude.displayName = "Longitude";
 export { Longitude };

package/formatters/Highlight/Highlight.d.ts

@@ -1,22 +1,37 @@
 import * as React from 'react';
 interface IProps {
-    /** @ignore */
-    className?: string;
     value: string;
     /**
-     * String to search for. Only the first occurrence is highlighted.
+     * String to search for. Only the first occurrence is highlighted, unless
+     * `matchAll` is set.
      * Matching is case-insensitive.
      */
     q: string;
+    /**
+     * Whether the match should be case-sensitive.
+     * @default false
+     */
+    caseSensitive?: boolean;
+    /**
+     * Highlight all occurrences, not just the first.
+     */
+    matchAll?: boolean;
+    /**
+     * Color used for the highlight. If not provided, the theme's accent color
+     * is used.
+     */
+    color?: string;
 }
 /**
  * Given an input string and a search query, `Highlight` highlights the first
- * occurrence (if any) of the search query and returns a styled string (as a
- * `ReactNode`). String matching is case-insensitive.
+ * occurrence or all occurrences (if any) of the search query and returns a
+ * styled string (as a `ReactNode`). By default, matching is case-insensitive,
+ * but this can be changed with the `caseSensitive` prop.
  *
  * ```tsx
  * <Highlight value="Hello, world" q="hello"/>
+ * <Highlight value="Hello, world" q="Hello" caseSensitive />
  * ```
  */
-declare const Highlight: (props: IProps) => string | React.JSX.Element;
+declare const Highlight: ({ value, q, caseSensitive, matchAll, color }: IProps) => React.ReactNode;
 export { Highlight };

package/formatters/Highlight/Highlight.js

@@ -2,31 +2,49 @@ import * as React from 'react';
 import { useTheme } from 'styled-components';
 /**
  * Given an input string and a search query, `Highlight` highlights the first
- * occurrence (if any) of the search query and returns a styled string (as a
- * `ReactNode`). String matching is case-insensitive.
+ * occurrence or all occurrences (if any) of the search query and returns a
+ * styled string (as a `ReactNode`). By default, matching is case-insensitive,
+ * but this can be changed with the `caseSensitive` prop.
  *
  * ```tsx
  * <Highlight value="Hello, world" q="hello"/>
+ * <Highlight value="Hello, world" q="Hello" caseSensitive />
  * ```
  */
-var Highlight = function (props) {
+var Highlight = function (_a) {
+    var _b;
+    var value = _a.value, q = _a.q, _c = _a.caseSensitive, caseSensitive = _c === void 0 ? false : _c, _d = _a.matchAll, matchAll = _d === void 0 ? false : _d, color = _a.color;
     var theme = useTheme();
     // Is there a search string? If not, do not highlight.
-    if (!props.q)
-        return props.value;
-    if (!props.value)
-        return props.value;
-    // Does q occur inside input string? If not, do not highlight.
-    var pos = props.value.toLowerCase().indexOf(props.q.toLowerCase());
-    if (pos == -1)
-        return props.value;
-    // Styling is done with inline styles so as not to generate too many styled-components classes.
-    var left = props.value.substring(0, pos);
-    var match = props.value.substring(pos, pos + props.q.length);
-    var right = props.value.substring(pos + props.q.length);
-    return React.createElement(React.Fragment, null,
-        left,
-        React.createElement("span", { style: { backgroundColor: theme.colors.accent } }, match),
-        right);
+    if (!q || !value)
+        return (React.createElement(React.Fragment, null, value));
+    var escapedQ = q.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&');
+    var flags = 'g' + (caseSensitive ? '' : 'i');
+    var regex = new RegExp(escapedQ, flags);
+    var matches = Array.from(value.matchAll(regex));
+    // If there are no matches, return the original value.
+    if (matches.length === 0)
+        return (React.createElement(React.Fragment, null, value));
+    var parts = [];
+    var lastIndex = 0;
+    for (var i = 0; i < matches.length; i++) {
+        var match = matches[i];
+        var index = (_b = match.index) !== null && _b !== void 0 ? _b : 0;
+        if (index > lastIndex) {
+            parts.push(value.slice(lastIndex, index));
+        }
+        parts.push(
+        // Styling is done with inline styles so as not to generate too many 
+        // styled-components classes.      
+        React.createElement("mark", { key: "".concat(index, "-").concat(i), style: { backgroundColor: color !== null && color !== void 0 ? color : theme.colors.accent } }, value.slice(index, index + match[0].length)));
+        lastIndex = index + match[0].length;
+        // Unless matchAll, stop processing after the first match.
+        if (!matchAll)
+            break;
+    }
+    if (lastIndex < value.length) {
+        parts.push(value.slice(lastIndex));
+    }
+    return (React.createElement(React.Fragment, null, parts));
 };
 export { Highlight };

package/formatters/Human/Human.d.ts

@@ -1,18 +1,29 @@
 import * as React from 'react';
 interface IProps {
+    /** Input value to be humanized (e.g., 10000 → 10K) */
+    value: number | string;
     /**
-     * Input value
+     * Locale string (e.g., 'en-US', 'de-DE')
+     * @default 'en'
      */
-    value: number | string;
+    locale?: string;
+    /**
+     * Number of decimal places to show (overrides default formatting)
+     * @default undefined
+     */
+    decimals?: number;
 }
 /**
- * `Human` takes a `value` prop and formats it in a human-readable way.
- *
- * E.g. `10000` => `10K`
+ * `Human` formats large numbers using `Intl.NumberFormat` for locale-aware
+ * output and optional compact display (e.g. "10K", "1.2M").
  *
  * ```tsx
- * <Human value={150000}/>
+ * <Human value={1200}/>           // => "1.2K"
+ * <Human value={999999} locale="de-DE" /> // => "1 Mio."
  * ```
  */
-declare const Human: (props: IProps) => React.JSX.Element;
+declare const Human: {
+    ({ value, locale, decimals }: IProps): React.JSX.Element;
+    displayName: string;
+};
 export { Human, IProps };