@variocube/app-ui 1.14.0

package/esm/formats/CurrencyFormat.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+export type CurrencyDisplay = "symbol" | "name" | "narrowSymbol" | "code";
+export type CurrencySign = "accounting" | "standard";
+export interface CurrencyFormatProps {
+    /**
+     * The numeric amount of currency.
+     */
+    value: number | bigint | null | undefined;
+    /**
+     * The 3-letter currency identifier.
+     */
+    currency: string;
+    /**
+     * How to display the currency. Default depends on the browser.
+     */
+    currencyDisplay?: CurrencyDisplay;
+    /**
+     * The currency sign to use. Default depends on the browser.
+     */
+    currencySign?: CurrencySign;
+    /**
+     * Minimum fraction digits. Default depends on the browser.
+     */
+    minimumFractionDigits?: number;
+    /**
+     * Maximum fraction digits. Default depends on the browser.
+     */
+    maximumFractionDigits?: number;
+    /**
+     * Overrides the user's locale. Use for testing only.
+     */
+    locale?: string;
+}
+/**
+ * Returns a string representing the specified `value` in the specified `currency` in the user's locale.
+ * @param props
+ * @constructor
+ */
+export declare function CurrencyFormat(props: CurrencyFormatProps): JSX.Element;

package/esm/formats/CurrencyFormat.js

@@ -0,0 +1,25 @@
+import { useNumberFormat } from "./useNumberFormat";
+import { Fragment, useMemo } from "react";
+import * as React from "react";
+/**
+ * Returns a string representing the specified `value` in the specified `currency` in the user's locale.
+ * @param props
+ * @constructor
+ */
+export function CurrencyFormat(props) {
+    const { value, currency, currencyDisplay, currencySign, minimumFractionDigits, maximumFractionDigits, locale, } = props;
+    const options = useMemo(() => ({
+        style: "currency",
+        currency,
+        currencyDisplay,
+        currencySign,
+        minimumFractionDigits,
+        maximumFractionDigits,
+    }), [currency, currencyDisplay, currencySign, minimumFractionDigits, maximumFractionDigits]);
+    const numberFormat = useNumberFormat(options, locale);
+    const str = useMemo(() => {
+        return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
+    }, [numberFormat, value]);
+    return React.createElement(Fragment, null, str);
+}
+//# sourceMappingURL=CurrencyFormat.js.map

package/esm/formats/CurrencyFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrencyFormat.js","sourceRoot":"","sources":["../../src/formats/CurrencyFormat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0C/B;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,KAA0B;IACrD,MAAM,EACF,KAAK,EACL,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,qBAAqB,EACrB,qBAAqB,EACrB,MAAM,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3B,KAAK,EAAE,UAAU;QACjB,QAAQ;QACR,eAAe;QACf,YAAY;QACZ,qBAAqB;QACrB,qBAAqB;KACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,eAAe,EAAE,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAE7F,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAEtD,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE;QACrB,OAAO,CAAC,OAAO,KAAK,IAAI,QAAQ,IAAI,OAAO,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACpG,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1B,OAAO,oBAAC,QAAQ,QAAE,GAAG,CAAY,CAAC;AACtC,CAAC"}

package/esm/formats/CurrencyFormat.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/formats/CurrencyFormat.spec.js

@@ -0,0 +1,22 @@
+import { act, create } from "react-test-renderer";
+import * as React from "react";
+import { CurrencyFormat } from "./CurrencyFormat";
+describe("CurrencyFormat", () => {
+    test("render de-AT", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(CurrencyFormat, { value: 1234.5, currency: "EUR", locale: "de-AT" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("€\u00a01.234,50"); // \u00a0 is a non-breaking space
+    });
+    test("render en-US", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(CurrencyFormat, { value: 1234.5, currency: "USD", locale: "en-US" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("$1,234.50");
+    });
+});
+//# sourceMappingURL=CurrencyFormat.spec.js.map

package/esm/formats/CurrencyFormat.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrencyFormat.spec.js","sourceRoot":"","sources":["../../src/formats/CurrencyFormat.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAE,MAAM,EAAoB,MAAM,qBAAqB,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAEhD,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAE5B,IAAI,CAAC,cAAc,EAAE,GAAG,EAAE;QACtB,IAAI,OAA0B,CAAC;QAC/B,GAAG,CAAC,GAAG,EAAE;YACL,OAAO,GAAG,MAAM,CAAC,oBAAC,cAAc,IAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,GAAG,CAAC,CAAC;QACtF,CAAC,CAAC,CAAA;QACF,MAAM,KAAK,GAAG,OAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACxC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,iCAAiC;IAC5E,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,cAAc,EAAE,GAAG,EAAE;QACtB,IAAI,OAA0B,CAAC;QAC/B,GAAG,CAAC,GAAG,EAAE;YACL,OAAO,GAAG,MAAM,CAAC,oBAAC,cAAc,IAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,GAAG,CAAC,CAAC;QACtF,CAAC,CAAC,CAAA;QACF,MAAM,KAAK,GAAG,OAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACxC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;AAEP,CAAC,CAAC,CAAC"}

package/esm/formats/DecimalFormat.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export interface DecimalFormatProps {
+    /**
+     * The numeric amount of currency.
+     */
+    value: number | bigint | null | undefined;
+    /**
+     * Minimum fraction digits. Default depends on the browser.
+     */
+    minimumFractionDigits?: number;
+    /**
+     * Maximum fraction digits. Default depends on the browser.
+     */
+    maximumFractionDigits?: number;
+    /**
+     * Fraction digits. Shorthand to set both `minimumFractionDigits` and `maximumFractionDigits`.
+     */
+    fractionDigits?: number;
+    /**
+     * Overrides the user's locale. Use for testing only.
+     */
+    locale?: string;
+}
+/**
+ * Returns a string representing the specified `value` formatted according to the user's locale.
+ * @param props
+ * @constructor
+ */
+export declare function DecimalFormat(props: DecimalFormatProps): JSX.Element;

package/esm/formats/DecimalFormat.js

@@ -0,0 +1,22 @@
+import { useNumberFormat } from "./useNumberFormat";
+import { Fragment, useMemo } from "react";
+import * as React from "react";
+/**
+ * Returns a string representing the specified `value` formatted according to the user's locale.
+ * @param props
+ * @constructor
+ */
+export function DecimalFormat(props) {
+    const { value, fractionDigits, minimumFractionDigits = fractionDigits, maximumFractionDigits = fractionDigits, locale, } = props;
+    const options = useMemo(() => ({
+        style: "decimal",
+        minimumFractionDigits,
+        maximumFractionDigits,
+    }), [minimumFractionDigits, maximumFractionDigits]);
+    const numberFormat = useNumberFormat(options, locale);
+    const str = useMemo(() => {
+        return (typeof value == "number" || typeof value == "bigint") ? numberFormat.format(value) : "";
+    }, [numberFormat, value]);
+    return React.createElement(Fragment, null, str);
+}
+//# sourceMappingURL=DecimalFormat.js.map

package/esm/formats/DecimalFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecimalFormat.js","sourceRoot":"","sources":["../../src/formats/DecimalFormat.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA6B/B;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACnD,MAAM,EACF,KAAK,EACL,cAAc,EACd,qBAAqB,GAAG,cAAc,EACtC,qBAAqB,GAAG,cAAc,EACtC,MAAM,GACT,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3B,KAAK,EAAE,SAAS;QAChB,qBAAqB;QACrB,qBAAqB;KACxB,CAAC,EAAE,CAAC,qBAAqB,EAAE,qBAAqB,CAAC,CAAC,CAAC;IAEpD,MAAM,YAAY,GAAG,eAAe,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAEtD,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,EAAE;QACrB,OAAO,CAAC,OAAO,KAAK,IAAI,QAAQ,IAAI,OAAO,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IACpG,CAAC,EAAE,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1B,OAAO,oBAAC,QAAQ,QAAE,GAAG,CAAY,CAAC;AACtC,CAAC"}

package/esm/formats/DecimalFormat.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/formats/DecimalFormat.spec.js

@@ -0,0 +1,22 @@
+import { act, create } from "react-test-renderer";
+import * as React from "react";
+import { DecimalFormat } from "./DecimalFormat";
+describe("DecimalFormat", () => {
+    test("render de-AT", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(DecimalFormat, { value: 1234.5, locale: "de-AT" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("1\u00a0234,5");
+    });
+    test("render en-US", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(DecimalFormat, { value: 1234.5, locale: "en-US" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("1,234.5");
+    });
+});
+//# sourceMappingURL=DecimalFormat.spec.js.map

package/esm/formats/DecimalFormat.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DecimalFormat.spec.js","sourceRoot":"","sources":["../../src/formats/DecimalFormat.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAE,MAAM,EAAoB,MAAM,qBAAqB,CAAC;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAE9C,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAE3B,IAAI,CAAC,cAAc,EAAE,GAAG,EAAE;QACtB,IAAI,OAA0B,CAAC;QAC/B,GAAG,CAAC,GAAG,EAAE;YACL,OAAO,GAAG,MAAM,CAAC,oBAAC,aAAa,IAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAC,OAAO,GAAG,CAAC,CAAC;QACtE,CAAC,CAAC,CAAA;QACF,MAAM,KAAK,GAAG,OAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACxC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,cAAc,EAAE,GAAG,EAAE;QACtB,IAAI,OAA0B,CAAC;QAC/B,GAAG,CAAC,GAAG,EAAE;YACL,OAAO,GAAG,MAAM,CAAC,oBAAC,aAAa,IAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAC,OAAO,GAAG,CAAC,CAAC;QACtE,CAAC,CAAC,CAAA;QACF,MAAM,KAAK,GAAG,OAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;QACxC,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;AAEP,CAAC,CAAC,CAAC"}

package/esm/formats/DurationFormat.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Duration } from "../temporal";
+import { DateStyle, TimeStyle } from "./types";
+interface DurationFormatProps {
+    /**
+     * The duration value to format.
+     */
+    value?: Duration | null | undefined;
+    /**
+     * The style of the date format.
+     */
+    dateStyle?: DateStyle | undefined;
+    /**
+     * The style of the time format.
+     */
+    timeStyle?: TimeStyle | undefined;
+    /**
+     * Overrides the user's locale. Use for testing only.
+     */
+    locale?: string;
+}
+export declare function DurationFormat(props: DurationFormatProps): JSX.Element | null;
+export {};

package/esm/formats/DurationFormat.js

@@ -0,0 +1,35 @@
+import { getSupportedFormatLocale } from "../getSupportedFormatLocale";
+import * as React from "react";
+import { Fragment, useMemo } from "react";
+export function DurationFormat(props) {
+    const { value, dateStyle, timeStyle, locale: suppliedLocale } = props;
+    if (!value) {
+        return null;
+    }
+    const options = useMemo(() => ({
+        dateStyle,
+        timeStyle,
+    }), [dateStyle, timeStyle]);
+    const locale = useMemo(() => suppliedLocale !== null && suppliedLocale !== void 0 ? suppliedLocale : getSupportedFormatLocale("dateTime"), [suppliedLocale]);
+    const strValue = useMemo(() => {
+        // TODO: this can only be supported once a polyfill or browser support for DurationFormat is available
+        // https://github.com/tc39/proposal-intl-duration-format/
+        // In the meantime, we format the duration in a simple neural format.
+        return formatDuration(value);
+    }, [value, locale, options]);
+    return React.createElement(Fragment, null, strValue);
+}
+function formatDuration(value) {
+    const parts = ["years", "months", "weeks", "days"]
+        .map(prop => [prop, value[prop]])
+        .filter(([_, value]) => Boolean(value))
+        .map(([prop, value]) => value + prop.charAt(0));
+    if (value.hours || value.minutes || value.seconds) {
+        const time = [value.hours || 0, value.minutes || 0, value.seconds]
+            .map(value => value.toString().padStart(2, "0"))
+            .join(":");
+        parts.push(time);
+    }
+    return parts.join(" ");
+}
+//# sourceMappingURL=DurationFormat.js.map

package/esm/formats/DurationFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DurationFormat.js","sourceRoot":"","sources":["../../src/formats/DurationFormat.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,wBAAwB,EAAC,MAAM,6BAA6B,CAAC;AACrE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAyBxC,MAAM,UAAU,cAAc,CAAC,KAA0B;IACrD,MAAM,EACF,KAAK,EACL,SAAS,EACT,SAAS,EACT,MAAM,EAAE,cAAc,EACzB,GAAG,KAAK,CAAC;IAEV,IAAI,CAAC,KAAK,EAAE,CAAC;QACT,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC3B,SAAS;QACT,SAAS;KACZ,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,MAAM,MAAM,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,cAAc,aAAd,cAAc,cAAd,cAAc,GAAI,wBAAwB,CAAC,UAAU,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAEvG,MAAM,QAAQ,GAAG,OAAO,CAAC,GAAG,EAAE;QAC1B,sGAAsG;QACtG,yDAAyD;QACzD,qEAAqE;QACrE,OAAO,cAAc,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;IAE7B,OAAO,oBAAC,QAAQ,QAAE,QAAQ,CAAY,CAAC;AAC3C,CAAC;AAED,SAAS,cAAc,CAAC,KAAe;IACnC,MAAM,KAAK,GAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAW;SACxD,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC,CAAU,CAAC;SACzC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;SACtC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IAEpD,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,EAAE,CAAC;QAChD,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,EAAE,KAAK,CAAC,OAAO,IAAI,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC;aAC7D,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;aAC/C,IAAI,CAAC,GAAG,CAAC,CAAC;QACf,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrB,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC3B,CAAC"}

package/esm/formats/DurationFormat.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/formats/DurationFormat.spec.js

@@ -0,0 +1,52 @@
+import { act, create } from "react-test-renderer";
+import * as React from "react";
+import { DurationFormat } from "./DurationFormat";
+import { Duration, Now } from "../temporal";
+describe("DurationFormat", () => {
+    test("render de-AT", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(DurationFormat, { value: Duration.from({ days: 5, hours: 2, seconds: 2 }), locale: "de-AT" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("5d 02:00:02");
+    });
+    test("render en-US", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(DurationFormat, { value: Duration.from({ days: 5, hours: 2, seconds: 2 }), locale: "en-US" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("5d 02:00:02");
+    });
+    test("balance seconds de-AT", () => {
+        let element;
+        act(() => {
+            const duration = Now.instant().until(Now.instant().add({ seconds: 10000 }))
+                .round({ largestUnit: "hours" });
+            element = create(React.createElement(DurationFormat, { value: duration, locale: "de-AT" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("02:46:40");
+    });
+    test("balance days de-AT", () => {
+        let element;
+        act(() => {
+            const duration = Now.instant().until(Now.instant().add({ hours: 5 * 24 }))
+                .round({ largestUnit: "days" });
+            element = create(React.createElement(DurationFormat, { value: duration, locale: "de-AT" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("5d");
+    });
+    test("complex de-AT", () => {
+        let element;
+        act(() => {
+            const duration = Duration.from({ years: 3, months: 4, weeks: 1, days: 6 });
+            element = create(React.createElement(DurationFormat, { value: duration, locale: "de-AT" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("3y 4m 1w 6d");
+    });
+});
+//# sourceMappingURL=DurationFormat.spec.js.map

package/esm/formats/DurationFormat.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DurationFormat.spec.js","sourceRoot":"","sources":["../../src/formats/DurationFormat.spec.tsx"],"names":[],"mappings":"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"}

package/esm/formats/RelativeTemporalFormat.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { Instant, PlainDate, PlainDateTime, ZonedDateTime } from "../temporal";
+export interface RelativeTemporalFormatProps {
+    /** The value to format. */
+    value?: PlainDate | PlainDateTime | ZonedDateTime | Instant | null | undefined;
+    /** The format of output message. */
+    numeric?: "always" | "auto" | undefined;
+    /** The length of the internationalized message */
+    style?: "long" | "short" | "narrow" | undefined;
+    /**
+     * Overrides the user's locale. Use for testing only.
+     */
+    locale?: string;
+}
+/**
+ * Returns a Temporal type formatted as relative time.
+ */
+export declare function useRelativeTemporalFormat(props: RelativeTemporalFormatProps): string;
+/**
+ * Displays a Temporal type formatted as relative time.
+ */
+export declare function RelativeTemporalFormat(props: RelativeTemporalFormatProps): JSX.Element;

package/esm/formats/RelativeTemporalFormat.js

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { Fragment, useMemo } from "react";
+import { Instant, Now, PlainDate, PlainDateTime, ZonedDateTime } from "../temporal";
+import { useRelativeTimeFormat } from "./useRelativeTimeFormat";
+/**
+ * Returns a Temporal type formatted as relative time.
+ */
+export function useRelativeTemporalFormat(props) {
+    const { value, numeric = "auto", style, locale, } = props;
+    const options = useMemo(() => ({
+        numeric,
+        style,
+    }), [numeric, style]);
+    // Convert the given value to a duration relative to "now", rounded to the largest unit.
+    // Unfortunately this is not straightforward and there might even be bugs in the polyfill.
+    const duration = useMemo(() => {
+        if (value instanceof PlainDate) {
+            const relativeTo = Now.plainDateISO();
+            return value.since(relativeTo, { largestUnit: "auto" })
+                .round({ largestUnit: "years", relativeTo });
+        }
+        if (value instanceof PlainDateTime) {
+            const relativeTo = Now.plainDateTimeISO();
+            return value.since(relativeTo, { largestUnit: "auto" })
+                .round({ largestUnit: "years", relativeTo });
+        }
+        if (value instanceof ZonedDateTime) {
+            const relativeTo = Now.zonedDateTimeISO();
+            return value.since(relativeTo, { largestUnit: "auto" })
+                .round({ largestUnit: "years", relativeTo });
+        }
+        if (value instanceof Instant) {
+            const now = Now.instant();
+            const relativeTo = now.toZonedDateTimeISO(Now.timeZone());
+            return value.since(now, { largestUnit: "auto" })
+                .round({ largestUnit: "years", relativeTo }) // first time rounds to hours
+                .round({ largestUnit: "years", relativeTo }); // second time round to years
+        }
+        return undefined;
+    }, [value]);
+    const format = useRelativeTimeFormat(options, locale);
+    return useMemo(() => {
+        return duration ? format.format(...convertDuration(duration)) : "";
+    }, [format, duration]);
+}
+/**
+ * Displays a Temporal type formatted as relative time.
+ */
+export function RelativeTemporalFormat(props) {
+    return React.createElement(Fragment, null, useRelativeTemporalFormat(props));
+}
+function convertDuration(duration) {
+    const props = ["years", "months", "weeks", "days", "hours", "minutes", "seconds"];
+    const prop = props.find(prop => Boolean(duration[prop]));
+    return prop ? [duration[prop], prop] : [0, "seconds"];
+}
+//# sourceMappingURL=RelativeTemporalFormat.js.map

package/esm/formats/RelativeTemporalFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTemporalFormat.js","sourceRoot":"","sources":["../../src/formats/RelativeTemporalFormat.tsx"],"names":[],"mappings":"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"}

package/esm/formats/RelativeTemporalFormat.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/formats/RelativeTemporalFormat.spec.js

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { act, create } from "react-test-renderer";
+import { Now } from "../temporal";
+import { RelativeTemporalFormat } from "./RelativeTemporalFormat";
+describe("RelativeTemporalFormat", () => {
+    test("plainDate de-AT", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(RelativeTemporalFormat, { value: Now.plainDateISO().subtract({ days: 1 }), locale: "de-AT" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("gestern");
+    });
+    test("plainDate en-US", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(RelativeTemporalFormat, { value: Now.plainDateISO().subtract({ days: 1 }), locale: "en-US" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("yesterday");
+    });
+    // TODO: Does not round correctly on Node, but works in browser
+    test.skip("plainDateTime de-AT", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(RelativeTemporalFormat, { value: Now.plainDateTimeISO().add({ hours: 3 }), locale: "de-AT" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("in 3 Stunden");
+    });
+    // TODO: Does not round correctly on Node, but works in browser
+    test.skip("plainDateTime en-US", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(RelativeTemporalFormat, { value: Now.plainDateTimeISO().add({ hours: 3 }), locale: "en-US" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("in 3 hours");
+    });
+    // TODO: Does not round correctly on Node, but works in browser
+    test.skip("zonedDateTime de-AT", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(RelativeTemporalFormat, { value: Now.zonedDateTimeISO().add({ hours: 3 }), locale: "de-AT" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("in 3 Stunden");
+    });
+    // TODO: Does not round correctly on Node, but works in browser
+    test.skip("zonedDateTime en-US", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(RelativeTemporalFormat, { value: Now.zonedDateTimeISO().add({ hours: 3 }), locale: "en-US" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("in 3 hours");
+    });
+    // TODO: Does not round correctly on Node, but works in browser
+    test.skip("instant de-AT", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(RelativeTemporalFormat, { value: Now.instant().add({ hours: 3 }), locale: "de-AT" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("in 3 Stunden");
+    });
+    // TODO: Does not round correctly on Node, but works in browser
+    test.skip("instant en-US", () => {
+        let element;
+        act(() => {
+            element = create(React.createElement(RelativeTemporalFormat, { value: Now.instant().add({ hours: 3 }), locale: "en-US" }));
+        });
+        const value = element.root.children[0];
+        expect(value).toBe("in 3 hours");
+    });
+});
+//# sourceMappingURL=RelativeTemporalFormat.spec.js.map

package/esm/formats/RelativeTemporalFormat.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTemporalFormat.spec.js","sourceRoot":"","sources":["../../src/formats/RelativeTemporalFormat.spec.tsx"],"names":[],"mappings":"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"}

package/esm/formats/SwitchableTemporalFormat.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { RelativeTemporalFormatProps } from "./RelativeTemporalFormat";
+import { TemporalFormatProps } from "./TemporalFormat";
+export type SwitchableTemporalFormatProps = TemporalFormatProps & RelativeTemporalFormatProps;
+export declare function SwitchableTemporalFormat(props: SwitchableTemporalFormatProps): JSX.Element;

package/esm/formats/SwitchableTemporalFormat.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { useFlag } from "../utils";
+import { useRelativeTemporalFormat } from "./RelativeTemporalFormat";
+import { useTemporalFormat } from "./TemporalFormat";
+export function SwitchableTemporalFormat(props) {
+    const [isRelative, , , toggleRelative] = useFlag(true);
+    const relative = useRelativeTemporalFormat(props);
+    const absolute = useTemporalFormat(props);
+    return (React.createElement("abbr", { title: isRelative ? absolute : relative, onClick: toggleRelative }, isRelative ? relative : absolute));
+}
+//# sourceMappingURL=SwitchableTemporalFormat.js.map

package/esm/formats/SwitchableTemporalFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchableTemporalFormat.js","sourceRoot":"","sources":["../../src/formats/SwitchableTemporalFormat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AACjC,OAAO,EAA8B,yBAAyB,EAAC,MAAM,0BAA0B,CAAC;AAChG,OAAO,EAAsB,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAIxE,MAAM,UAAU,wBAAwB,CAAC,KAAoC;IAC5E,MAAM,CAAC,UAAU,EAAE,AAAD,EAAG,AAAD,EAAG,cAAc,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,yBAAyB,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CACN,8BAAM,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,OAAO,EAAE,cAAc,IACpE,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAC3B,CACP,CAAC;AACH,CAAC"}

package/esm/formats/TemporalFormat.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { Formattable } from "../temporal";
+import { DateStyle, TimeStyle } from "./types";
+export interface TemporalFormatProps {
+    /**
+     * The date value to format.
+     */
+    value?: Formattable | null | undefined;
+    /**
+     * The style of the date format.
+     */
+    dateStyle?: DateStyle | undefined;
+    /**
+     * The style of the time format.
+     */
+    timeStyle?: TimeStyle | undefined;
+    /**
+     * Overrides the user's locale. Use for testing only.
+     */
+    locale?: string;
+    /**
+     * Overrides the user's time zone. Use for testing only.
+     */
+    timeZone?: string;
+}
+export declare function useTemporalFormat(props: TemporalFormatProps): string;
+export declare function TemporalFormat(props: TemporalFormatProps): JSX.Element;

package/esm/formats/TemporalFormat.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Fragment, useMemo } from "react";
+import { useDateTimeFormat } from "./useDateTimeFormat";
+export function useTemporalFormat(props) {
+    const { value, dateStyle, timeStyle, locale, timeZone, } = props;
+    const options = useMemo(() => ({
+        dateStyle,
+        timeStyle,
+        timeZone,
+    }), [dateStyle, timeStyle]);
+    const dateTimeFormat = useDateTimeFormat(options, locale);
+    return useMemo(() => {
+        return value != null ? dateTimeFormat.format(value) : "";
+    }, [dateTimeFormat, value]);
+}
+export function TemporalFormat(props) {
+    return React.createElement(Fragment, null, useTemporalFormat(props));
+}
+//# sourceMappingURL=TemporalFormat.js.map

package/esm/formats/TemporalFormat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemporalFormat.js","sourceRoot":"","sources":["../../src/formats/TemporalFormat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,QAAQ,EAAE,OAAO,EAAC,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAC,iBAAiB,EAAC,MAAM,qBAAqB,CAAC;AA6BtD,MAAM,UAAU,iBAAiB,CAAC,KAA0B;IAC3D,MAAM,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,MAAM,EACN,QAAQ,GACR,GAAG,KAAK,CAAC;IAEV,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC9B,SAAS;QACT,SAAS;QACT,QAAQ;KACR,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC;IAE5B,MAAM,cAAc,GAAG,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAE1D,OAAO,OAAO,CAAC,GAAG,EAAE;QACnB,OAAO,KAAK,IAAI,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1D,CAAC,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC,CAAC;AAC7B,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,KAA0B;IACxD,OAAO,oBAAC,QAAQ,QAAE,iBAAiB,CAAC,KAAK,CAAC,CAAY,CAAC;AACxD,CAAC"}

package/esm/formats/TemporalFormat.spec.d.ts

@@ -0,0 +1 @@
+export {};