sit-onyx 1.0.0-beta.99 → 1.0.0

package/dist/composables/useCustomValidity.d.ts

@@ -1,27 +1,35 @@
-import type { DateValue, OnyxDatePickerProps } from "../components/OnyxDatePicker/types";
-import type { InputType } from "../components/OnyxInput/types";
-import enUS from "../i18n/locales/en-US.json";
-import type { BaseSelectOption } from "../types";
+import { MaybeRefOrGetter } from 'vue';
+import { DateValue, OnyxDatePickerProps } from '../components/OnyxDatePicker/types.js';
+import { InputType } from '../components/OnyxInput/types.js';
+import { default as enUS } from '../i18n/locales/en-US.json';
+import { MaxLength } from './useLenientMaxLengthValidation.js';
 export type CustomMessageType = string | FormMessages;
 export type CustomValidityProp = {
     /**
-     * Custom error message to show. Will only show up after the user has interacted with the input.
+     * Custom error message to show. Takes precedence over intrinsic error messages.
      */
-    customError?: CustomMessageType;
+    error?: CustomMessageType;
 };
 export type UseCustomValidityOptions = {
     /**
-     * Component props as defined with `const props = defineProps()`
+     * Explicitly set custom error. Any non-nullish value will set the input to be invalid.
+     * If both, `options.customError` and `options.props.error` are provided, the message from the props will take precedence.
      */
-    props: CustomValidityProp & {
+    error?: MaybeRefOrGetter<CustomMessageType | undefined>;
+    /**
+     * Component props as defined with `const props = defineProps()`.
+     * These prop values are used for the error messages of the native validation errors.
+     */
+    props: {
+        error?: CustomMessageType;
         modelValue?: unknown;
         type?: InputType | OnyxDatePickerProps["type"];
-        maxlength?: number;
+        maxlength?: MaxLength;
         minlength?: number;
         min?: DateValue;
         max?: DateValue;
-        precision?: number;
-    } & Pick<BaseSelectOption, "hideLabel" | "label">;
+        validStepSize?: number;
+    };
     /**
      * Component emit as defined with `const emit = defineEmits()`
      */
@@ -60,7 +68,7 @@ export declare const getFormMessages: (customMessage?: CustomMessageType) => For
  * Returns a string combining short + long message or just the customMessage if it was provided as single string.
  * Will be used e.g. for customInvalidity and showing a tooltip e.g. in RadioButtons
  */
-export declare const getFormMessageText: (customError?: CustomMessageType) => string | undefined;
+export declare const getFormMessageText: (error?: CustomMessageType) => string | undefined;
 /**
  * Composable for unified handling of custom messages for form components.
  * Will call `setCustomValidity()` accordingly and emit the "validityChange" event
@@ -90,5 +98,5 @@ export declare const useCustomValidity: (options: UseCustomValidityOptions) => {
     /**
      * A custom error or the default translation of the first invalid state if one exists.
      */
-    errorMessages: import("vue").ComputedRef<FormMessages | undefined>;
+    errorMessages: import('vue').ComputedRef<FormMessages | undefined>;
 };

package/dist/composables/useErrorClass.d.ts

@@ -1,4 +1,4 @@
-import { type Ref } from "vue";
+import { Ref } from 'vue';
 /**
  * All possible `showError` values.
  */
@@ -11,4 +11,4 @@ export declare const ShowErrorModes: readonly [true, false, "touched"];
  * See [:user-invalid](https://drafts.csswg.org/selectors/#user-invalid-pseudo).
  */
 export type ShowErrorMode = (typeof ShowErrorModes)[number];
-export declare const useErrorClass: (showError: Readonly<Ref<ShowErrorMode>>) => import("vue").ComputedRef<"onyx-form-element--immediate-invalid" | "onyx-form-element--suppress-invalid" | "onyx-form-element--touched-invalid">;
+export declare const useErrorClass: (showError: Readonly<Ref<ShowErrorMode>>) => import('vue').ComputedRef<"onyx-form-element--immediate-invalid" | "onyx-form-element--suppress-invalid" | "onyx-form-element--touched-invalid">;

package/dist/composables/useFileSize.d.ts

@@ -0,0 +1,10 @@
+import { BinaryPrefixedSize } from '../utils/numbers.js';
+/**
+ * Small composable for formatting file sizes with i18n.
+ */
+export declare const useFileSize: () => {
+    /**
+     * Formats the given file size to a human readable string.
+     */
+    formatFileSize: import('vue').ComputedRef<(size: number | BinaryPrefixedSize) => string>;
+};

package/dist/composables/useIntersectionObserver.d.ts

@@ -0,0 +1,25 @@
+import { Ref } from 'vue';
+import { VueTemplateRefElement } from './useResizeObserver.js';
+export type UseIntersectionObserverOptions = {
+    /**
+     * Sets the root element to use for intersection checking.
+     *
+     * @default null
+     */
+    root?: Element | null;
+    /**
+     * Margin around the root element.
+     *
+     * @default '0px'
+     */
+    rootMargin?: string;
+    /**
+     * Thresholds at which to trigger the callback.
+     *
+     * @default [0]
+     */
+    thresholds?: number | number[];
+};
+export declare const useIntersectionObserver: (target?: Ref<VueTemplateRefElement>, options?: UseIntersectionObserverOptions) => {
+    isIntersecting: Ref<boolean, boolean>;
+};

package/dist/composables/useLenientMaxLengthValidation.ct-utils.d.ts

@@ -0,0 +1,3 @@
+import { default as OnyxInput } from '../components/OnyxInput/OnyxInput.vue';
+import { default as OnyxTextarea } from '../components/OnyxTextarea/OnyxTextarea.vue';
+export declare const testMaxLengthBehavior: (FormElement: typeof OnyxInput | typeof OnyxTextarea) => void;

package/dist/composables/useLenientMaxLengthValidation.d.ts

@@ -0,0 +1,93 @@
+import { MaybeRefOrGetter } from 'vue';
+import { Nullable } from '../types/index.js';
+/**
+ * @see [MDN autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize)
+ */
+export declare const AUTOCAPITALIZE: readonly ["none", "sentences", "words", "characters"];
+export type Autocapitalize = (typeof AUTOCAPITALIZE)[number];
+/**
+ * Same as TypeScript native "Autofill" type but without "AutoFillSection" because
+ * the Vue compiler currently can not handle it (too complex union type).
+ *
+ * @since TypeScript version 5.2
+ */
+export type Autocomplete = Exclude<AutoFill, AutoFillSection | "">;
+export type MaxLength = number | {
+    /**
+     * Maximum number of characters that are allowed to be entered.
+     */
+    max: number;
+    /**
+     * Restricts the user from typing more characters than allowed.
+     */
+    strict?: boolean;
+};
+/**
+ * Shared types for all kind of text inputs, namely: `<input type="text">` and `<textarea>`
+ */
+export type SharedTextInputProps = {
+    /**
+     * Maximum number of characters that are allowed to be entered.
+     * Warning: when the value is (pre)set programmatically,
+     * the input invalidity will not be detected by the browser, it will only turn invalid
+     * as soon as a user interacts with the input (types something).
+     */
+    maxlength?: MaxLength;
+    /**
+     * If `true`, a character counter will be displayed if `maxLength` is set.
+     */
+    withCounter?: boolean;
+    /**
+     * Minimum number of characters that have to to be entered.
+     * Warning: when the value is (pre)set programmatically,
+     * the input invalidity will not be detected by the browser, it will only turn invalid
+     * as soon as a user interacts with the input (types something).
+     */
+    minlength?: number;
+    /**
+     * If and how text should be automatically be capitalized when using non-physical keyboards
+     * (such as virtual keyboard on mobile devices or voice input).
+     *
+     * Has no effect when `type` is set to "url", "email" or "password".
+     *
+     * @see [MDN autocapitalize](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize)
+     */
+    autocapitalize?: Autocapitalize;
+    /**
+     * Specify how to provide automated assistance in filling out the input.
+     * Some autocomplete values might required specific browser permissions to be allowed by the user.
+     * Also browsers might require a `name` property.
+     *
+     * @see [MDN autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+     */
+    autocomplete?: Autocomplete;
+    /**
+     * Current input value.
+     */
+    modelValue?: Nullable<string>;
+};
+export type HtmlTextInputElements = HTMLInputElement | HTMLTextAreaElement;
+export type UseTextInputOptions = {
+    modelValue: MaybeRefOrGetter<string | undefined | null>;
+    props: SharedTextInputProps;
+};
+/**
+ * This composable returns a computed property `maxLengthError` that checks if the `modelValue` prop is longer than the specified `maxlength`.
+ * If so, it returns a custom error message.
+ *
+ * The native [maxlength attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/maxlength) restricts the user from entering more characters then allowed.
+ * This custom validation circumvents that restrictions.
+ */
+export declare const useLenientMaxLengthValidation: (options: UseTextInputOptions) => {
+    /**
+     * Custom maxlength error, if we are unable to use the native maxlength attribute.
+     */
+    maxLengthError: import('vue').ComputedRef<{
+        longMessage: string;
+        shortMessage: string;
+    } | undefined>;
+    /**
+     * In strict mode, the native maxlength attribute is used.
+     */
+    maxLength: import('vue').ComputedRef<number | undefined>;
+};

package/dist/composables/useLink.d.ts

@@ -0,0 +1,29 @@
+import { InjectionKey, Ref } from 'vue';
+import { SharedLinkProps } from '../components/OnyxRouterLink/types.js';
+/**
+ * Internal behavior of the `OnyxRouterLink`. Should be used for navigation. Considers the user provided [router](https://onyx.schwarz/development/router.html).
+ */
+export declare const useLink: () => {
+    navigate: (e: MouseEvent, href: string) => void;
+    currentRoute: import('vue').ComputedRef<{
+        path: string;
+        hash?: string;
+    } | undefined>;
+    isActive: import('vue').ComputedRef<(link?: string | SharedLinkProps) => boolean>;
+};
+export type ProvideRouterOptions = {
+    /**
+     * Programmatically navigate to a new URL.
+     * @see https://router.vuejs.org/api/interfaces/Router.html#push-
+     */
+    push: (to: string) => void;
+    /**
+     * Currently active route.
+     * @see https://router.vuejs.org/api/interfaces/Router.html#currentRoute
+     */
+    currentRoute: Ref<string | {
+        path: string;
+        hash?: string;
+    }>;
+};
+export declare const ROUTER_INJECTION_KEY: InjectionKey<ProvideRouterOptions>;

package/dist/composables/useLink.spec-d.d.ts

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

package/dist/composables/useMoreList.d.ts

@@ -1,5 +1,5 @@
-import { type InjectionKey, type Ref } from "vue";
-import { type VueTemplateRefElement } from "./useResizeObserver";
+import { InjectionKey, MaybeRefOrGetter, Ref } from 'vue';
+import { VueTemplateRefElement } from './useResizeObserver.js';
 /**
  * Injection key for providing "more" data to child components of a list to e.g. render a "+3 more" indicator.
  */
@@ -17,6 +17,12 @@ export type UseMoreListOptions = {
      * Vue template ref for the more indicator element that might be shown if not all elements are visible.
      */
     moreIndicatorRef: Ref<VueTemplateRefElement>;
+    /**
+     * From which direction the list items should start to be hidden, when space is limited.
+     *
+     * @default "rtl"
+     */
+    direction: MaybeRefOrGetter<"rtl" | "ltr">;
 };
 /**
  * Composable for managing a list of components where e.g. a "+3" more indicator should be shown if not all components
@@ -40,7 +46,7 @@ export type UseMoreListOptions = {
  * <template>
  *   <div ref="parentRef" class="more-list">
  *     <div ref="listRef" class="more-list__elements">
- *        <OnyxNavButton v-for="i in 16" ref="componentRefs" :key="i" :label="`Nav button ${i}`" />
+ *        <OnyxNavItem v-for="i in 16" ref="componentRefs" :key="i" :label="`Nav button ${i}`" />
  *     </div>
  *
  *     <div ref="moreIndicatorRef" class="more-list__indicator">
@@ -73,19 +79,21 @@ export type UseMoreListOptions = {
 export declare const useMoreList: (options: UseMoreListOptions) => {
     /**
      * IDs of currently completely visible components in the list.
+     * Initially `undefined`, in that case treat all components as visible.
      */
-    visibleElements: Ref<string[], string[]>;
+    visibleElements: Ref<string[] | undefined, string[] | undefined>;
     /**
      * IDs of currently fully or partially hidden components in the list.
+     * Initially `undefined`, in that case treat all components as visible.
      */
-    hiddenElements: Ref<string[], string[]>;
+    hiddenElements: Ref<string[] | undefined, string[] | undefined>;
     /**
      * Map of widths for all components in the list. Key = component ID.
      * Components in the list must inject this map and add a ref for their width to it.
      *
      * @see `useMoreListChild()`
      */
-    componentMap: import("vue").Reactive<Map<string, number>>;
+    componentMap: import('vue').Reactive<Map<string, number>>;
 };
 /**
  * Composable that must be implemented in all list children when using `useMoreList` to correctly observe the visibility of the elements.
@@ -111,5 +119,5 @@ export declare const useMoreListChild: (injectionKey: MoreListInjectionKey) => {
      * Whether the component is currently visible.
      * Should hide itself visually (e.g. using `v-show="isVisible"`).
      */
-    isVisible: import("vue").ComputedRef<boolean>;
+    isVisible: import('vue').ComputedRef<boolean>;
 };

package/dist/composables/useOpenAlignment.d.ts

@@ -0,0 +1,13 @@
+import { ShallowRef } from 'vue';
+export type OpenAlignment = "center" | "left" | "right";
+export declare const useOpenAlignment: (element: Readonly<ShallowRef<Element | null>>, tooltipElement: Readonly<ShallowRef<Element | null>>, defaultPosition?: OpenAlignment) => {
+    /**
+     * Direction in which the popover should open to.
+     */
+    openAlignment: import('vue').Ref<OpenAlignment, OpenAlignment>;
+    /**
+     * Detects in which direction a popover should be opened, depending on the available space in each direction.
+     * Should only be called onBeforeMount or later to support server side rendering.
+     */
+    updateOpenAlignment: () => void;
+};

package/dist/composables/useOpenDirection.d.ts

@@ -1,12 +1,12 @@
-import { type MaybeRef } from "vue";
+import { ShallowRef } from 'vue';
 export type OpenDirection = "top" | "bottom";
-export declare const useOpenDirection: (element: MaybeRef<Element | undefined>, defaultDirection?: OpenDirection) => {
+export declare const useOpenDirection: (element: Readonly<ShallowRef<Element | null | undefined>>, defaultDirection?: OpenDirection) => {
     /**
-     * Direction in which the flyout etc. should open to.
+     * Direction in which the popover should open to.
      */
-    openDirection: import("vue").Ref<OpenDirection, OpenDirection>;
+    openDirection: import('vue').Ref<OpenDirection, OpenDirection>;
     /**
-     * Detects in which direction a flyout etc. should be opened, depending on the available space in each direction.
+     * Detects in which direction a popover should be opened, depending on the available space in each direction.
      * Should only be called onBeforeMount or later to support server side rendering.
      */
     updateOpenDirection: () => void;

package/dist/composables/useRelativeTimeFormat.d.ts

@@ -0,0 +1,23 @@
+import { MaybeRef } from 'vue';
+import { DateValue } from '../components/OnyxDatePicker/types.js';
+export type UseRelativeTimeFormatOptions = {
+    /**
+     * Time/date to format.
+     */
+    time: MaybeRef<DateValue>;
+    /**
+     * Options to use for the formatter.
+     */
+    options?: MaybeRef<Intl.RelativeTimeFormatOptions>;
+};
+/**
+ * Reactive wrapper/utilities around the `Intl.RelativeTimeFormat` API.
+ */
+export declare const useRelativeTimeFormat: (options: UseRelativeTimeFormatOptions) => {
+    /**
+     * Formatted relative time string.
+     *
+     * @example "42 minutes ago"
+     */
+    timeAgo: import('vue').ComputedRef<string>;
+};

package/dist/composables/useResizeObserver.d.ts

@@ -1,4 +1,4 @@
-import { type Ref } from "vue";
+import { Ref } from 'vue';
 export type UseResizeObserverOptions = {
     /**
      * Sets which box model the observer will observe changes to.
@@ -13,7 +13,11 @@ export type UseResizeObserverOptions = {
 export type VueTemplateRefElement = Element | {
     $el: Element;
 } | null | undefined;
-export declare const useResizeObserver: (target?: Ref<VueTemplateRefElement>, options?: UseResizeObserverOptions) => {
+export declare const useResizeObserver: (
+/**
+ * Target to observe. If undefined, the documentElement will be observed.
+ */
+target?: Ref<VueTemplateRefElement>, options?: UseResizeObserverOptions) => {
     width: Ref<number, number>;
     height: Ref<number, number>;
 };

package/dist/composables/useRipple.d.ts

@@ -1,15 +1,15 @@
-import { type Ref } from "vue";
+import { ShallowRef } from 'vue';
 export type RippleInstance = {
     id: string;
     left: string;
     top: string;
     animationEnded: boolean;
 };
-export declare const useRipple: (container: Ref<Pick<HTMLElement, "getBoundingClientRect"> | undefined>) => {
-    isPointerDown: Ref<boolean, boolean>;
-    ripples: import("vue").Reactive<Map<string, RippleInstance>>;
+export declare const useRipple: (container: Readonly<ShallowRef<Pick<HTMLElement, "getBoundingClientRect"> | null>>) => {
+    isPointerDown: import('vue').Ref<boolean, boolean>;
+    ripples: import('vue').Reactive<Map<string, RippleInstance>>;
     startRipple: (event: MouseEvent) => string | undefined;
     hideRipples: () => void;
     hideRipple: (el: Pick<HTMLElement, "dataset">) => void;
-    events: Ref<Record<string, (event: MouseEvent) => void>, Record<string, (event: MouseEvent) => void>>;
+    events: import('vue').Ref<Record<string, (event: MouseEvent) => void>, Record<string, (event: MouseEvent) => void>>;
 };

package/dist/composables/useSkeletonState.d.ts

@@ -1,4 +1,4 @@
-import { type ComputedRef, type Reactive } from "vue";
+import { ComputedRef, Reactive } from 'vue';
 /**
  * Prop on the parent component.
  * It's value is provided, so that it can be used in child components.

package/dist/composables/useTimer.d.ts

@@ -1,4 +1,4 @@
-import { type Ref } from "vue";
+import { Ref } from 'vue';
 /**
  * Composable for managing a single timer.
  */
@@ -6,9 +6,9 @@ export declare const useTimer: (endTime: Ref<ConstructorParameters<typeof Date>[
     /**
      * Time (in milliseconds) that the timer has left.
      */
-    timeLeft: Ref<number, number>;
+    timeLeft: Readonly<Ref<number, number>>;
     /**
      * Whether the timer is ended.
      */
-    isEnded: import("vue").ComputedRef<boolean>;
+    isEnded: import('vue').ComputedRef<boolean>;
 };

package/dist/composables/useVModel.d.ts

@@ -0,0 +1,34 @@
+import { Ref } from 'vue';
+import { Nullable, PrimitiveType } from '../types/index.js';
+export type UseVModelOptions<TProps extends object, TKey extends keyof TProps & string, TValue extends TProps[TKey] = TProps[TKey], TDefaultValue = undefined | (TValue extends Nullable<PrimitiveType> ? TValue : () => TValue), TComputed extends Nullable<TValue> = TDefaultValue extends undefined | null ? TValue : NonNullable<TValue>, TEmit extends (...args: any[]) => void = (evt: `update:${TKey}`, value: TComputed) => void> = {
+    key: TKey;
+    props: TProps;
+    emit: TEmit;
+    default?: TDefaultValue;
+};
+/**
+ * Composable for managing the v-model behavior of a prop.
+ * It's behavior differs from the `defineModel` behavior, in that it will always prefer the bound value over the internal state.
+ * This allows for better control over the component's state, e.g. a flyout can be kept open even when it was supposed to close.
+ *
+ * There is currently no way to differentiate between an explicitly bound `undefined` prop value (e.g. `<Comp :value="undefined" />`) and a implicit `undefined` from not defined prop (e.g. `<Comp />`).
+ * Therefore for `null` or `undefined` values, the internal state or default value will always be used.
+ *
+ * For default values with non-primitive types, it's required to use a factory function that returns the default value to avoid mutating the former value.
+ *
+ * @example ```typescript
+ *    const props = defineProps<{
+ *        modelValue?: string;
+ *    }>();
+ *
+ *    const emit = defineEmits<{ "update:modelValue": [string] }>();
+ *
+ *    const modelValue = useVModel({
+ *      props,
+ *      emit,
+ *      key: "modelValue",
+ *      default: "",
+ *    });
+```
+ */
+export declare const useVModel: <TProps extends object, TKey extends keyof TProps & string, TValue extends TProps[TKey] = TProps[TKey], TDefaultValue = undefined | (TValue extends Nullable<PrimitiveType> ? TValue : () => TValue), TComputed extends Nullable<TValue> = TDefaultValue extends undefined | null ? TValue : NonNullable<TValue>, TEmit extends (...args: any[]) => void = (evt: `update:${TKey}`, value: TComputed) => void>(options: UseVModelOptions<TProps, TKey, TValue, TDefaultValue, TComputed, TEmit>) => Ref<TComputed>;

package/dist/composables/useVModel.spec-d.d.ts

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

package/dist/i18n/datetime-formats.d.ts

@@ -0,0 +1,22 @@
+export declare const DATETIME_FORMATS: {
+    date: {
+        dateStyle: "medium";
+    };
+    "datetime-local": {
+        dateStyle: "medium";
+        timeStyle: "short";
+    };
+    time: {
+        timeStyle: "short";
+    };
+    timestamp: {
+        year: "numeric";
+        month: "2-digit";
+        day: "2-digit";
+        hour: "2-digit";
+        minute: "2-digit";
+        second: "2-digit";
+        timeZoneName: "shortOffset";
+    };
+};
+export type DatetimeFormat = keyof typeof DATETIME_FORMATS;

package/dist/i18n/index.d.ts

@@ -1,7 +1,10 @@
-import { type App, type InjectionKey, type MaybeRef } from "vue";
-import type { FlattenedKeysOf } from "../types/i18n";
-import type { DeepPartial } from "../types/utils";
-import enUS from "./locales/en-US.json";
+import { App, InjectionKey, MaybeRef } from 'vue';
+import { DateValue } from '../components/OnyxDatePicker/types.js';
+import { FlattenedKeysOf } from '../types/i18n.js';
+import { DeepPartial } from '../types/utils.js';
+import { DatetimeFormat } from './datetime-formats.js';
+import { default as enUS } from './locales/en-US.json';
+import { NumberFormat } from './number-formats.js';
 /**
  * The type of the imported `enUS` above is a concrete type so the value type of each message
  * is e.g. "{ myKey: 'HelloWorld'}" but it should be "{ myKey: string }".
@@ -14,6 +17,8 @@ type GetTypeOfTranslations<T> = T extends object ? {
 /** Available translations that are used by onyx components. */
 export type OnyxTranslations = GetTypeOfTranslations<typeof enUS>;
 export type OnyxTranslationKey = FlattenedKeysOf<OnyxTranslations>;
+export type OnyxNumberFormatOptions = NumberFormat | Intl.NumberFormatOptions;
+export type OnyxDateFormatOptions = DatetimeFormat | Intl.DateTimeFormatOptions;
 export type ProvideI18nOptions = {
     /**
      * Current locale / language to use.
@@ -63,28 +68,35 @@ export type TranslationFunction = (key: OnyxTranslationKey,
 placeholders?: Record<string, string | number | undefined> & {
     n?: number;
 }) => string;
-export declare const I18N_INJECTION_KEY: InjectionKey<ReturnType<typeof createI18n>>;
+export declare const I18N_INJECTION_KEY: InjectionKey<OnyxI18n>;
+export type OnyxI18n = ReturnType<typeof createI18n>;
 /**
  * Creates a new i18n instance.
  */
-declare const createI18n: (options?: ProvideI18nOptions) => {
-    t: Readonly<import("vue").Ref<TranslationFunction, TranslationFunction>>;
-    locale: Readonly<import("vue").Ref<string, string>>;
+export declare const createI18n: (options?: ProvideI18nOptions) => {
+    t: Readonly<import('vue').Ref<TranslationFunction, TranslationFunction>>;
+    locale: Readonly<import('vue').Ref<string, string>>;
+    d: import('vue').ComputedRef<(date: DateValue, format?: OnyxDateFormatOptions) => string>;
+    n: import('vue').ComputedRef<(value: number, format?: OnyxNumberFormatOptions) => string>;
 };
 /**
  * Provides a global i18n instance that is used by onyx.
  * Must only be called once in the `App.vue` file of a project that consumes onyx.
  */
 export declare const provideI18n: (app: App, options?: ProvideI18nOptions) => {
-    t: Readonly<import("vue").Ref<TranslationFunction, TranslationFunction>>;
-    locale: Readonly<import("vue").Ref<string, string>>;
+    t: Readonly<import('vue').Ref<TranslationFunction, TranslationFunction>>;
+    locale: Readonly<import('vue').Ref<string, string>>;
+    d: import('vue').ComputedRef<(date: DateValue, format?: OnyxDateFormatOptions) => string>;
+    n: import('vue').ComputedRef<(value: number, format?: OnyxNumberFormatOptions) => string>;
 };
 /**
  * Injects the onyx i18n instance.
  * Creates a fallback if provide was never called.
  */
 export declare const injectI18n: () => {
-    t: Readonly<import("vue").Ref<TranslationFunction, TranslationFunction>>;
-    locale: Readonly<import("vue").Ref<string, string>>;
+    t: Readonly<import('vue').Ref<TranslationFunction, TranslationFunction>>;
+    locale: Readonly<import('vue').Ref<string, string>>;
+    d: import('vue').ComputedRef<(date: DateValue, format?: OnyxDateFormatOptions) => string>;
+    n: import('vue').ComputedRef<(value: number, format?: OnyxNumberFormatOptions) => string>;
 };
 export {};