@radix-ng/primitives 0.43.0 → 0.44.0

package/core/index.d.ts

@@ -1,27 +1,898 @@
-export * from './src/accessor/control-value-accessor';
-export * from './src/accessor/provide-value-accessor';
-export * from './src/auto-focus.directive';
-export * from './src/clamp';
-export * from './src/document';
-export * from './src/focus-initial.directive';
-export * from './src/getActiveElement';
-export * from './src/id-generator';
-export * from './src/inject-ng-control';
-export * from './src/is-client';
-export * from './src/is-equal';
-export * from './src/is-inside-form';
-export * from './src/is-nullish';
-export * from './src/is-number';
-export * from './src/isValueEqualOrExist';
-export * from './src/kbd-constants';
-export * from './src/provide-token';
-export * from './src/window';
-export * from './src/create-context';
-export * from './src/date-time';
-export * from './src/positioning/constants';
-export * from './src/positioning/types';
-export * from './src/positioning/utils';
-export * from './src/types';
-export * from './src/useArrowNavigation';
-export * from './src/useResizeObserver';
-export * from './src/watch';
+import * as i0 from '@angular/core';
+import { Type, Provider, ElementRef, Injector, InjectionToken, InputSignal, WritableSignal, ModelSignal, Signal, EffectRef, EffectCleanupRegisterFn, CreateEffectOptions } from '@angular/core';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { ControlValueAccessor, FormControlDirective, FormControlName, NgModel } from '@angular/forms';
+import { DateValue, DayOfWeek, CalendarDateTime, ZonedDateTime, Time } from '@internationalized/date';
+import { ConnectionPositionPair, ConnectedPosition } from '@angular/cdk/overlay';
+import { Direction } from '@angular/cdk/bidi';
+
+/**
+ * A reusable ControlValueAccessor implementation for form controls
+ * @template T The type of the control's value
+ */
+declare class RdxControlValueAccessor<T> implements ControlValueAccessor {
+    /**
+     * Input for the control's value with alias 'value'
+     * @default undefined
+     */
+    readonly valueInput: i0.InputSignal<T | undefined>;
+    /**
+     * Input for the disabled state with alias 'disabled'
+     * Uses booleanAttribute transform to convert string attributes to booleans
+     * @default false
+     */
+    readonly disabledInput: i0.InputSignalWithTransform<boolean, BooleanInput>;
+    readonly valueChange: i0.OutputEmitterRef<T>;
+    private readonly _value;
+    /**
+     * Readonly access to the current value
+     */
+    readonly value: i0.Signal<T | undefined>;
+    private readonly _disabled;
+    /**
+     * Readonly access to the disabled state
+     */
+    readonly disabled: i0.Signal<boolean>;
+    onChange?: (value: T | undefined) => void;
+    private onTouched?;
+    /**
+     * Writes a new value to the control (ControlValueAccessor interface)
+     * @param value The new value for the control
+     */
+    writeValue(value: T | undefined): void;
+    /**
+     * Registers a callback for when the control value changes (ControlValueAccessor interface)
+     * @param fn The callback function
+     */
+    registerOnChange(fn: (value: T | undefined) => void): void;
+    /**
+     * Registers a callback for when the control is touched (ControlValueAccessor interface)
+     * @param fn The callback function
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Sets the disabled state of the control (ControlValueAccessor interface)
+     * @param isDisabled Whether the control should be disabled
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * Updates the control's value and triggers change detection
+     * @param value The new value
+     */
+    setValue(value: T): void;
+    markAsTouched(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxControlValueAccessor<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxControlValueAccessor<any>, never, ["rdxControlValueAccessor"], { "valueInput": { "alias": "value"; "required": false; "isSignal": true; }; "disabledInput": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+/**
+ * Provides a type-safe way to inject the RdxControlValueAccessor
+ * @template T The type of the control's value
+ * @returns An instance of RdxControlValueAccessor<T>
+ */
+declare function injectControlValueAccessor<T>(): RdxControlValueAccessor<T>;
+
+/**
+ * Include in the providers section of a component which utilizes ControlValueAccessor to redundant code.
+ *
+ * ```ts
+ * @Directive({
+ *   providers: [provideValueAccessor(ExampleDirective)]
+ *}
+ * export class ExampleDirective{}
+ * ```
+ */
+declare function provideValueAccessor<T>(type: Type<T>): Provider;
+
+declare class RdxAutoFocusDirective {
+    #private;
+    private _autoSelect;
+    /**
+     * @default false
+     */
+    set autoFocus(value: boolean);
+    set autoSelect(value: boolean);
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxAutoFocusDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxAutoFocusDirective, "[rdxAutoFocus]", never, { "autoFocus": { "alias": "rdxAutoFocus"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_autoFocus: unknown;
+    static ngAcceptInputType_autoSelect: unknown;
+}
+
+/**
+ * The `clamp` function restricts a number within a specified range by returning the value itself if it
+ * falls within the range, or the closest boundary value if it exceeds the range.
+ * @param {number} value - The `value` parameter represents the number that you want to clamp within
+ * the specified range defined by `min` and `max` values.
+ * @param {number} min - If the `value` parameter is less than the `min` value, the
+ * function will return the `min` value.
+ * @param {number} max - If the `value` parameter is greater than the `max` value,
+ * the function will return `max`.
+ * @returns The `clamp` function returns the value of `value` constrained within the range defined by
+ * `min` and `max`.
+ */
+declare function clamp(value: number, min?: number, max?: number): number;
+/**
+ * The function `roundToStepPrecision` rounds a number to a specified precision step.
+ * @param {number} value - The `value` parameter is the number that you want to round to a specific
+ * precision based on the `step` parameter.
+ * @param {number} step - The `step` parameter in the `roundToStepPrecision` function represents the
+ * interval at which you want to round the `value`. For example, if `step` is 0.5, the `value` will be
+ * rounded to the nearest half.
+ * @returns the `roundedValue` after rounding it to the precision specified by the `step`.
+ */
+declare function roundToStepPrecision(value: number, step: number): number;
+/**
+ * The function `snapValueToStep` snaps a given value to the nearest step within a specified range.
+ * @param {number} value - The `value` parameter represents the number that you want to snap to the
+ * nearest step value.
+ * @param {number | undefined} min - The `min` parameter represents the minimum value that the `value`
+ * should be snapped to. If `value` is less than `min`, it will be snapped to `min`. If `min` is not
+ * provided (undefined), then the snapping will not consider a minimum value.
+ * @param {number | undefined} max - The `max` parameter represents the maximum value that the `value`
+ * should be snapped to. It ensures that the snapped value does not exceed this maximum value.
+ * @param {number} step - The `step` parameter in the `snapValueToStep` function represents the
+ * interval at which the `value` should be snapped to. It determines the granularity of the snapping
+ * operation. For example, if `step` is 5, the `value` will be snapped to the nearest multiple of
+ * @returns a number that has been snapped to the nearest step value within the specified range of minimum and maximum values.
+ */
+declare function snapValueToStep(value: number, min: number | undefined, max: number | undefined, step: number): number;
+
+declare function injectDocument(): Document;
+
+declare function elementSize({ elementRef, injector }: {
+    elementRef: ElementRef<HTMLElement>;
+    injector: Injector;
+}): i0.Signal<{
+    width: number;
+    height: number;
+}>;
+
+declare class RdxFocusInitialDirective {
+    /** @ignore */
+    private readonly nativeElement;
+    /** @ignore */
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxFocusInitialDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxFocusInitialDirective, "[rdxFocusInitial]", never, {}, {}, never, never, true, never>;
+}
+
+declare function getActiveElement(): Element | null;
+
+/** Service that generates unique IDs for DOM nodes. */
+declare class _IdGenerator {
+    private readonly _appId;
+    /**
+     * Generates a unique ID with a specific prefix.
+     * @param prefix Prefix to add to the ID.
+     */
+    getId(prefix: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<_IdGenerator, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<_IdGenerator>;
+}
+
+declare function injectNgControl(params: {
+    optional: true;
+}): FormControlDirective | FormControlName | NgModel | undefined;
+declare function injectNgControl(params: {
+    optional: false;
+}): FormControlDirective | FormControlName | NgModel;
+declare function injectNgControl(): FormControlDirective | FormControlName | NgModel;
+
+declare function injectIsClient(): boolean;
+
+/**
+ * Compare two objects using reference equality and stable deep hashing.
+ * @param {any} object1 First object
+ * @param {any} object2 Second object
+ * @return {boolean} true if equal and false if not
+ */
+declare function isEqual(object1: any, object2: any): boolean;
+
+declare function isInsideForm(el: ElementRef<HTMLElement> | null): boolean;
+
+declare function isNullish(value: any): value is null | undefined;
+
+declare const isNumber: (v: any) => v is number;
+
+/**
+ * The function `isValueEqualOrExist` checks if a value is equal to or exists in another value or
+ * array.
+ * @param {T | T[] | undefined} base - It represents the base value that you want to compare with the `current` value.
+ * @param {T | T[] | undefined} current - The `current` parameter represents the current value that you want to compare with the `base` value or values.
+ * @returns The `isValueEqualOrExist` function returns a boolean value. It checks if the `base` value
+ * is equal to the `current` value or if the `current` value exists within the `base` value. The
+ * function handles cases where `base` can be a single value, an array of values, or undefined.
+ */
+declare function isValueEqualOrExist<T>(base: T | T[] | undefined, current: T | T[] | undefined): boolean;
+
+declare const ALT = "Alt";
+declare const ARROW_DOWN = "ArrowDown";
+declare const ARROW_LEFT = "ArrowLeft";
+declare const ARROW_RIGHT = "ArrowRight";
+declare const ARROW_UP = "ArrowUp";
+declare const BACKSPACE = "Backspace";
+declare const CAPS_LOCK = "CapsLock";
+declare const CONTROL = "Control";
+declare const DELETE = "Delete";
+declare const END = "End";
+declare const ENTER = "Enter";
+declare const ESCAPE = "Escape";
+declare const F1 = "F1";
+declare const F10 = "F10";
+declare const F11 = "F11";
+declare const F12 = "F12";
+declare const F2 = "F2";
+declare const F3 = "F3";
+declare const F4 = "F4";
+declare const F5 = "F5";
+declare const F6 = "F6";
+declare const F7 = "F7";
+declare const F8 = "F8";
+declare const F9 = "F9";
+declare const HOME = "Home";
+declare const META = "Meta";
+declare const PAGE_DOWN = "PageDown";
+declare const PAGE_UP = "PageUp";
+declare const SHIFT = "Shift";
+declare const SPACE = " ";
+declare const TAB = "Tab";
+declare const CTRL = "Control";
+declare const ASTERISK = "*";
+declare const a = "a";
+declare const P = "P";
+declare const A = "A";
+declare const p = "p";
+declare const n = "n";
+declare const j = "j";
+declare const k = "k";
+declare const SPACE_CODE = "Space";
+
+/**
+ * Creates an Angular provider that binds the given token to the existing instance
+ * of the specified class. This is especially useful when you want multiple
+ * tokens (or interfaces) to resolve to the same directive/component instance.
+ *
+ * @template T - The type associated with the injection token.
+ * @param token - The InjectionToken or abstract type you want to provide.
+ * @param type  - The class type whose existing instance will be used for this token.
+ * @returns A Provider configuration object for Angular's DI system.
+ *
+ * @example
+ *
+ * @Directive({
+ *   providers: [
+ *     provideToken(RdxToggleGroupToken, RdxToggleGroupDirective),
+ *     provideValueAccessor(RdxToggleGroupDirective)
+ *   ]
+ * })
+ * export class RdxToggleGroupDirective {}
+ */
+declare function provideToken<T>(token: InjectionToken<T>, type: Type<unknown>): Provider;
+
+declare const WINDOW: InjectionToken<Window & typeof globalThis>;
+declare function injectWindow(): Window & typeof globalThis;
+
+/**
+ * Creates a context with injector and provider functions for a given type
+ * @template T The type of the context value
+ * @param description Descriptive string for the context (used in token creation)
+ * @returns A tuple containing:
+ *   - injectContext: Function to retrieve the context value
+ *   - provideContext: Function to create a provider for the context
+ */
+declare function createContext<T>(description: string): readonly [injectContext: (optional?: boolean) => T | null, provideContext: (useFactory: () => T) => Provider];
+
+declare const DATE_SEGMENT_PARTS: readonly ["day", "month", "year"];
+declare const TIME_SEGMENT_PARTS: readonly ["hour", "minute", "second", "dayPeriod"];
+declare const NON_EDITABLE_SEGMENT_PARTS: readonly ["literal", "timeZoneName"];
+declare const EDITABLE_SEGMENT_PARTS: readonly ["day", "month", "year", "hour", "minute", "second", "dayPeriod"];
+
+type DateMatcher = (date: DateValue) => boolean;
+type DateStep = {
+    year?: number;
+    month?: number;
+    day?: number;
+    hour?: number;
+    minute?: number;
+    second?: number;
+    millisecond?: number;
+};
+type DateRange = {
+    start: DateValue | undefined;
+    end: DateValue | undefined;
+};
+type HourCycle = 12 | 24 | undefined;
+type Month<T> = {
+    /**
+     * A `DateValue` used to represent the month. Since days
+     * from the previous and next months may be included in the
+     * calendar grid, we need a source of truth for the value
+     * the grid is representing.
+     */
+    value: DateValue;
+    /**
+     * An array of (rows) arrays representing the weeks in the calendar.
+     * Each sub-array represents a week, and contains the dates for each
+     * day in that week. This structure is useful for rendering the calendar
+     * grid using a table, where each row represents a week and each cell
+     * represents a day.
+     */
+    weeks: T[][];
+    /**
+     * An array of (cells) all the dates in the current month, including dates from
+     * the previous and next months that are used to fill out the calendar grid.
+     * This array is useful for rendering the calendar grid in a customizable way,
+     * as it provides all the dates that should be displayed in the grid in a flat
+     * array.
+     */
+    dates: T[];
+};
+type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number];
+type TimeSegmentPart = (typeof TIME_SEGMENT_PARTS)[number];
+type EditableSegmentPart = (typeof EDITABLE_SEGMENT_PARTS)[number];
+type NonEditableSegmentPart = (typeof NON_EDITABLE_SEGMENT_PARTS)[number];
+type SegmentPart = EditableSegmentPart | NonEditableSegmentPart;
+type AnyExceptLiteral = Exclude<SegmentPart, 'literal'>;
+type DayPeriod = 'AM' | 'PM' | null;
+type DateSegmentObj = {
+    [K in DateSegmentPart]: number | null;
+};
+type TimeSegmentObj = {
+    [K in TimeSegmentPart]: K extends 'dayPeriod' ? DayPeriod : number | null;
+};
+type DateAndTimeSegmentObj = DateSegmentObj & TimeSegmentObj;
+type SegmentValueObj = DateSegmentObj | DateAndTimeSegmentObj;
+type SegmentContentObj = Record<EditableSegmentPart, string>;
+
+type CreateMonthProps = {
+    /**
+     * The date object representing the month's date (usually the first day of the month).
+     */
+    dateObj: DateValue;
+    /**
+     * The day of the week to start the calendar on (0 for Sunday, 1 for Monday, etc.).
+     */
+    weekStartsOn: number;
+    /**
+     * Whether to always render 6 weeks in the calendar, even if the month doesn't
+     * span 6 weeks.
+     */
+    fixedWeeks: boolean;
+    /**
+     * The locale to use when creating the calendar month.
+     */
+    locale: string;
+};
+/**
+ * Retrieves an array of date values representing the days between
+ * the provided start and end dates.
+ */
+declare function getDaysBetween(start: DateValue, end: DateValue): DateValue[];
+declare function createMonth(props: CreateMonthProps): Month<DateValue>;
+type SetMonthProps = CreateMonthProps & {
+    numberOfMonths: number | undefined;
+    currentMonths?: Month<DateValue>[];
+};
+declare function createMonths(props: SetMonthProps): Month<DateValue>[];
+/**
+ * Returns the locale-specific week number
+ */
+declare function getWeekNumber(date: DateValue, locale?: string, firstDayOfWeek?: DayOfWeek): number;
+
+/**
+ * Given a `DateValue` object, convert it to a native `Date` object.
+ * If a timezone is provided, the date will be converted to that timezone.
+ * If no timezone is provided, the date will be converted to the local timezone.
+ */
+declare function toDate(dateValue: DateValue, tz?: string): Date;
+declare function isCalendarDateTime(dateValue: DateValue): dateValue is CalendarDateTime;
+declare function isZonedDateTime(dateValue: DateValue): dateValue is ZonedDateTime;
+declare function hasTime(dateValue: DateValue): dateValue is CalendarDateTime | ZonedDateTime;
+/**
+ * Given a date, return the number of days in the month.
+ */
+declare function getDaysInMonth(date: Date | DateValue): number;
+/**
+ * Determine if a date is before the reference date.
+ * @param dateToCompare - is this date before the `referenceDate`
+ * @param referenceDate - is the `dateToCompare` before this date
+ *
+ * @see {@link isBeforeOrSame} for inclusive
+ */
+declare function isBefore(dateToCompare: DateValue, referenceDate: DateValue): boolean;
+/**
+ * Determine if a date is after the reference date.
+ * @param dateToCompare - is this date after the `referenceDate`
+ * @param referenceDate - is the `dateToCompare` after this date
+ *
+ * @see {@link isAfterOrSame} for inclusive
+ */
+declare function isAfter(dateToCompare: DateValue, referenceDate: DateValue): boolean;
+/**
+ * Determine if a date is before or the same as the reference date.
+ *
+ * @param dateToCompare - the date to compare
+ * @param referenceDate - the reference date to make the comparison against
+ *
+ * @see {@link isBefore} for non-inclusive
+ */
+declare function isBeforeOrSame(dateToCompare: DateValue, referenceDate: DateValue): boolean;
+/**
+ * Determine if a date is after or the same as the reference date.
+ *
+ * @param dateToCompare - is this date after or the same as the `referenceDate`
+ * @param referenceDate - is the `dateToCompare` after or the same as this date
+ *
+ * @see {@link isAfter} for non-inclusive
+ */
+declare function isAfterOrSame(dateToCompare: DateValue, referenceDate: DateValue): boolean;
+/**
+ * Determine if a date is inclusively between a start and end reference date.
+ *
+ * @param date - is this date inclusively between the `start` and `end` dates
+ * @param start - the start reference date to make the comparison against
+ * @param end - the end reference date to make the comparison against
+ *
+ * @see {@link isBetween} for non-inclusive
+ */
+declare function isBetweenInclusive(date: DateValue, start: DateValue, end: DateValue): boolean;
+/**
+ * Determine if a date is between a start and end reference date.
+ *
+ * @param date - is this date between the `start` and `end` dates
+ * @param start - the start reference date to make the comparison against
+ * @param end - the end reference date to make the comparison against
+ *
+ * @see {@link isBetweenInclusive} for inclusive
+ */
+declare function isBetween(date: DateValue, start: DateValue, end: DateValue): boolean;
+declare function getLastFirstDayOfWeek<T extends DateValue = DateValue>(date: T, firstDayOfWeek: number, locale: string): T;
+declare function getNextLastDayOfWeek<T extends DateValue = DateValue>(date: T, firstDayOfWeek: number, locale: string): T;
+declare function areAllDaysBetweenValid(start: DateValue, end: DateValue, isUnavailable: DateMatcher | undefined, isDisabled: DateMatcher | undefined): boolean;
+type TimeValue = Time | CalendarDateTime | ZonedDateTime;
+type Granularity = 'day' | 'hour' | 'minute' | 'second';
+type TimeGranularity = 'hour' | 'minute' | 'second';
+type GetDefaultDateProps = {
+    defaultValue?: DateValue | DateValue[] | undefined;
+    defaultPlaceholder?: DateValue | undefined;
+    granularity?: Granularity;
+    locale?: string;
+};
+/**
+ * A helper function used throughout the various date builders
+ * to generate a default `DateValue` using the `defaultValue`,
+ * `defaultPlaceholder`, and `granularity` props.
+ *
+ * It's important to match the `DateValue` type being used
+ * elsewhere in the builder, so they behave according to the
+ * behavior the user expects based on the props they've provided.
+ *
+ */
+declare function getDefaultDate(props: GetDefaultDateProps): DateValue;
+type GetDefaultTimeProps = {
+    defaultValue?: TimeValue | undefined;
+    defaultPlaceholder?: TimeValue | undefined;
+};
+declare function getDefaultTime(props: GetDefaultTimeProps): TimeValue;
+
+interface DateFormatterOptions extends Intl.DateTimeFormatOptions {
+    calendar?: string;
+}
+type Formatter = {
+    getLocale: () => string;
+    setLocale: (newLocale: string) => void;
+    custom: (date: Date, options: DateFormatterOptions) => string;
+    selectedDate: (date: DateValue, includeTime?: boolean) => string;
+    dayOfWeek: (date: Date, length?: DateFormatterOptions['weekday']) => string;
+    fullMonthAndYear: (date: Date, options?: DateFormatterOptions) => string;
+    fullMonth: (date: Date, options?: DateFormatterOptions) => string;
+    fullYear: (date: Date, options?: DateFormatterOptions) => string;
+    dayPeriod: (date: Date) => string;
+    part: (dateObj: DateValue, type: Intl.DateTimeFormatPartTypes, options?: DateFormatterOptions) => string;
+    toParts: (date: DateValue, options?: DateFormatterOptions) => Intl.DateTimeFormatPart[];
+    getMonths: () => {
+        label: string;
+        value: number;
+    }[];
+};
+/**
+ * Creates a wrapper around the `DateFormatter`, which is
+ * an improved version of the {@link Intl.DateTimeFormat} API,
+ * that is used internally by the various date builders to
+ * easily format dates in a consistent way.
+ *
+ * @see [DateFormatter](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html)
+ */
+declare function createFormatter(initialLocale: string, opts?: DateFormatterOptions): Formatter;
+
+type SyncDateSegmentValuesProps = {
+    value: DateValue;
+    formatter: Formatter;
+};
+type SyncTimeSegmentValuesProps = {
+    value: DateValue;
+    formatter: Formatter;
+};
+declare function syncTimeSegmentValues(props: SyncTimeSegmentValuesProps): SegmentValueObj;
+declare function initializeSegmentValues(granularity: Granularity): SegmentValueObj;
+type SharedContentProps = {
+    granularity: Granularity;
+    dateRef: DateValue;
+    formatter: Formatter;
+    hideTimeZone: boolean;
+    hourCycle: HourCycle;
+    isTimeValue?: boolean;
+};
+type CreateContentObjProps = SharedContentProps & {
+    segmentValues: SegmentValueObj;
+    locale: InputSignal<string>;
+};
+declare function syncSegmentValues(props: SyncDateSegmentValuesProps): SegmentValueObj;
+type CreateContentProps = CreateContentObjProps;
+declare function createContent(props: CreateContentProps): {
+    obj: SegmentContentObj;
+    arr: {
+        part: SegmentPart;
+        value: string;
+    }[];
+};
+
+declare const supportedLocales: readonly ["ach", "af", "am", "an", "ar", "ast", "az", "be", "bg", "bn", "br", "bs", "ca", "cak", "ckb", "cs", "cy", "da", "de", "dsb", "el", "en", "eo", "es", "et", "eu", "fa", "ff", "fi", "fr", "fy", "ga", "gd", "gl", "he", "hr", "hsb", "hu", "ia", "id", "it", "ja", "ka", "kk", "kn", "ko", "lb", "lo", "lt", "lv", "meh", "ml", "ms", "nl", "nn", "no", "oc", "pl", "pt", "rm", "ro", "ru", "sc", "scn", "sk", "sl", "sr", "sv", "szl", "tg", "th", "tr", "uk", "zh-CN", "zh-TW"];
+declare const placeholderFields: readonly ["year", "month", "day"];
+type SupportedLocale = (typeof supportedLocales)[number];
+type PlaceholderField = (typeof placeholderFields)[number];
+type PlaceholderMap = Record<SupportedLocale, Record<PlaceholderField, string>>;
+type Field = 'era' | 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second' | 'dayPeriod';
+declare function getPlaceholder(field: Field, value: string, locale: SupportedLocale | (string & {})): string;
+
+declare function isSegmentNavigationKey(key: string): boolean;
+declare function isNumberString(value: string): boolean;
+declare function isAcceptableSegmentKey(key: string): boolean;
+declare function getSegmentElements(parentElement: HTMLElement): Element[];
+
+type UseDateFieldProps = {
+    hasLeftFocus: WritableSignal<boolean>;
+    lastKeyZero: WritableSignal<boolean>;
+    placeholder: ModelSignal<DateValue> | WritableSignal<DateValue>;
+    hourCycle: HourCycle;
+    formatter: Formatter;
+    segmentValues: WritableSignal<SegmentValueObj>;
+    step: Signal<DateStep>;
+    disabled: InputSignal<boolean>;
+    readonly: InputSignal<boolean>;
+    part: SegmentPart;
+    modelValue: ModelSignal<DateValue | undefined> | WritableSignal<DateValue | undefined>;
+    focusNext: () => void;
+};
+type SegmentAttrProps = {
+    disabled: boolean;
+    segmentValues: SegmentValueObj;
+    hourCycle: HourCycle;
+    placeholder: DateValue;
+    formatter: Formatter;
+};
+declare function daySegmentAttrs(props: SegmentAttrProps): {
+    'aria-label': string;
+    'aria-valuemin': number;
+    'aria-valuemax': number;
+    'aria-valuenow': number;
+    'aria-valuetext': string;
+    'data-placeholder': string | undefined;
+    role: string;
+    contenteditable: boolean;
+    tabindex: number | undefined;
+    spellcheck: boolean;
+    inputmode: string;
+    autocorrect: string;
+    enterkeyhint: string;
+    style: string;
+};
+declare function monthSegmentAttrs(props: SegmentAttrProps): {
+    'aria-label': string;
+    contenteditable: boolean;
+    'aria-valuemin': number;
+    'aria-valuemax': number;
+    'aria-valuenow': number;
+    'aria-valuetext': string;
+    'data-placeholder': string | undefined;
+    role: string;
+    tabindex: number | undefined;
+    spellcheck: boolean;
+    inputmode: string;
+    autocorrect: string;
+    enterkeyhint: string;
+    style: string;
+};
+declare function yearSegmentAttrs(props: SegmentAttrProps): {
+    'aria-label': string;
+    'aria-valuemin': number;
+    'aria-valuemax': number;
+    'aria-valuenow': number;
+    'aria-valuetext': string;
+    'data-placeholder': string | undefined;
+    role: string;
+    contenteditable: boolean;
+    tabindex: number | undefined;
+    spellcheck: boolean;
+    inputmode: string;
+    autocorrect: string;
+    enterkeyhint: string;
+    style: string;
+};
+declare function hourSegmentAttrs(props: SegmentAttrProps): {};
+declare function minuteSegmentAttrs(props: SegmentAttrProps): {};
+declare function secondSegmentAttrs(props: SegmentAttrProps): {};
+declare function dayPeriodSegmentAttrs(props: SegmentAttrProps): {};
+declare function literalSegmentAttrs(_props: SegmentAttrProps): {
+    'aria-hidden': boolean;
+    'data-segment': string;
+};
+declare function timeZoneSegmentAttrs(props: SegmentAttrProps): {
+    role: string;
+    'aria-label': string;
+    'data-readonly': boolean;
+    'data-segment': string;
+    tabindex: number | undefined;
+    style: string;
+};
+declare function eraSegmentAttrs(props: SegmentAttrProps): {
+    'aria-label': string;
+    'aria-valuemin': number;
+    'aria-valuemax': number;
+    'aria-valuenow': number;
+    'aria-valuetext': unknown;
+    role: string;
+    contenteditable: boolean;
+    tabindex: number | undefined;
+    spellcheck: boolean;
+    inputmode: string;
+    autocorrect: string;
+    enterkeyhint: string;
+    style: string;
+};
+declare const segmentBuilders: {
+    day: {
+        attrs: typeof daySegmentAttrs;
+    };
+    month: {
+        attrs: typeof monthSegmentAttrs;
+    };
+    year: {
+        attrs: typeof yearSegmentAttrs;
+    };
+    hour: {
+        attrs: typeof hourSegmentAttrs;
+    };
+    minute: {
+        attrs: typeof minuteSegmentAttrs;
+    };
+    second: {
+        attrs: typeof secondSegmentAttrs;
+    };
+    dayPeriod: {
+        attrs: typeof dayPeriodSegmentAttrs;
+    };
+    literal: {
+        attrs: typeof literalSegmentAttrs;
+    };
+    timeZoneName: {
+        attrs: typeof timeZoneSegmentAttrs;
+    };
+    era: {
+        attrs: typeof eraSegmentAttrs;
+    };
+};
+declare function useDateField(props: UseDateFieldProps): {
+    handleSegmentClick: (e: MouseEvent) => void;
+    handleSegmentKeydown: (e: KeyboardEvent) => void;
+    attributes: Signal<{}>;
+};
+
+declare function getOptsByGranularity(granularity: Granularity, hourCycle: HourCycle, isTimeValue?: boolean): Intl.DateTimeFormatOptions;
+declare function normalizeDateStep(step?: DateStep): DateStep;
+declare function handleCalendarInitialFocus(calendar: HTMLElement): void;
+declare function normalizeHourCycle(hourCycle: HourCycle): "h11" | "h23" | undefined;
+declare function normalizeHour12(hourCycle: HourCycle): boolean | undefined;
+
+declare enum RdxPositionSide {
+    Top = "top",
+    Right = "right",
+    Bottom = "bottom",
+    Left = "left"
+}
+declare enum RdxPositionAlign {
+    Start = "start",
+    Center = "center",
+    End = "end"
+}
+type RdxPositionSideAndAlign = {
+    side: RdxPositionSide;
+    align: RdxPositionAlign;
+};
+type RdxPositionSideAndAlignOffsets = {
+    sideOffset: number;
+    alignOffset: number;
+};
+type RdxPositions = Readonly<{
+    [key in RdxPositionSide]: Readonly<{
+        [key in RdxPositionAlign]: Readonly<ConnectionPositionPair>;
+    }>;
+}>;
+type RdxPositioningDefaults = Readonly<{
+    offsets: Readonly<{
+        side: number;
+        align: number;
+    }>;
+    arrow: Readonly<{
+        width: number;
+        height: number;
+    }>;
+}>;
+type RdxAllPossibleConnectedPositions = ReadonlyMap<`${RdxPositionSide}|${RdxPositionAlign}`, ConnectionPositionPair>;
+type RdxArrowPositionParams = {
+    top: string;
+    left: string;
+    transform: string;
+    transformOrigin: string;
+};
+
+declare const RDX_POSITIONS: RdxPositions;
+declare const RDX_POSITIONING_DEFAULTS: RdxPositioningDefaults;
+
+declare function getContentPosition(sideAndAlignWithOffsets: RdxPositionSideAndAlign & RdxPositionSideAndAlignOffsets): ConnectedPosition;
+declare function getAllPossibleConnectedPositions(): RdxAllPossibleConnectedPositions;
+declare function getSideAndAlignFromAllPossibleConnectedPositions(position: ConnectionPositionPair): RdxPositionSideAndAlign;
+declare function getArrowPositionParams(sideAndAlign: RdxPositionSideAndAlign, arrowWidthAndHeight: {
+    width: number;
+    height: number;
+}, triggerWidthAndHeight: {
+    width: number;
+    height: number;
+}): RdxArrowPositionParams;
+
+type DataOrientation = 'vertical' | 'horizontal';
+/**
+ * Nullable from `Type` adds `null` and `undefined`
+ *
+ * @example ```ts
+ *  // Expect: string | number | undefined | null
+ *  type Value = Nulling<string | number>;
+ * ```
+ */
+type Nullable<Type> = null | Type | undefined;
+/**
+ * SafeFunction is a type for functions that accept any number of arguments of unknown types
+ * and return a value of an unknown type. This is useful when you want to define a function
+ * without being strict about the input or output types, maintaining flexibility.
+ *
+ * @example ```ts
+ *  const safeFn: SafeFunction = (...args) => {
+ *    return args.length > 0 ? args[0] : null;
+ *  };
+ *
+ *  const result = safeFn(1, 'hello'); // result: 1
+ * ```
+ */
+type SafeFunction = (...args: unknown[]) => unknown;
+type AcceptableValue = string | number | Record<string, any> | null;
+
+type ArrowKeyOptions = 'horizontal' | 'vertical' | 'both';
+interface ArrowNavigationOptions {
+    /**
+     * The arrow key options to allow navigation
+     *
+     * @defaultValue "both"
+     */
+    arrowKeyOptions?: ArrowKeyOptions;
+    /**
+     * The attribute name to find the collection items in the parent element.
+     *
+     * @defaultValue "data-rdx-collection-item"
+     */
+    attributeName?: string;
+    /**
+     * The parent element where contains all the collection items, this will collect every item to be used when nav
+     * It will be ignored if attributeName is provided
+     *
+     * @defaultValue []
+     */
+    itemsArray?: HTMLElement[];
+    /**
+     * Allow loop navigation. If false, it will stop at the first and last element
+     *
+     * @defaultValue true
+     */
+    loop?: boolean;
+    /**
+     * The orientation of the collection
+     *
+     * @defaultValue "ltr"
+     */
+    dir?: Direction;
+    /**
+     * Prevent the scroll when navigating. This happens when the direction of the
+     * key matches the scroll direction of any ancestor scrollable elements.
+     *
+     * @defaultValue true
+     */
+    preventScroll?: boolean;
+    /**
+     * By default all currentElement would trigger navigation. If `true`, currentElement nodeName in the ignore list will return null
+     *
+     * @defaultValue false
+     */
+    enableIgnoredElement?: boolean;
+    /**
+     * Focus the element after navigation
+     *
+     * @defaultValue false
+     */
+    focus?: boolean;
+}
+/**
+ * Allow arrow navigation for every html element with data-rdx-collection-item tag
+ *
+ * @param e               Keyboard event
+ * @param currentElement  Event initiator element or any element that wants to handle the navigation
+ * @param parentElement   Parent element where contains all the collection items, this will collect every item to be used when nav
+ * @param options         further options
+ * @returns               the navigated html element or null if none
+ */
+declare function useArrowNavigation(e: KeyboardEvent, currentElement: HTMLElement, parentElement: HTMLElement | undefined, options?: ArrowNavigationOptions): HTMLElement | null;
+
+/**
+ * Creates a resize observer effect for element
+ *
+ * @param options Configuration options
+ * @param options.injector Angular injector
+ * @param options.element Signal returning the element to observe
+ * @param options.onResize Callback when element is resized
+ * @returns EffectRef that can be destroyed when needed
+ */
+declare function resizeEffect(options: {
+    injector: Injector;
+    element: Signal<ElementRef | HTMLElement | null | undefined>;
+    onResize: ResizeObserverCallback;
+}): EffectRef;
+
+/**
+ * We want to have the Tuple in order to use the types in the function signature
+ */
+type ExplicitEffectValues<T> = {
+    [K in keyof T]: () => T[K];
+};
+/**
+ * Extend the regular set of effect options
+ */
+declare interface CreateExplicitEffectOptions extends CreateEffectOptions {
+    /**
+     * Option that allows the computation not to execute immediately, but only run on first change.
+     */
+    defer?: boolean;
+}
+/**
+ * This explicit effect function will take the dependencies and the function to run when the dependencies change.
+ *
+ * @example
+ * ```typescript
+ * import { watch } from 'radix-ng/primitives/core';
+ *
+ * const count = signal(0);
+ * const state = signal('idle');
+ *
+ * watch([count, state], ([count, state], cleanup) => {
+ *   console.log('count updated', count, state);
+ *
+ *   cleanup(() => {
+ *     console.log('cleanup');
+ *   });
+ * });
+ * ```
+ *
+ * @param deps - The dependencies that the effect will run on
+ * @param fn - The function to run when the dependencies change
+ * @param options - The options for the effect with the addition of defer (it allows the computation to run on first change, not immediately)
+ */
+declare function watch<Input extends readonly unknown[], Params = Input>(deps: readonly [...ExplicitEffectValues<Input>], fn: (deps: Params, onCleanup: EffectCleanupRegisterFn) => void, options?: CreateExplicitEffectOptions | undefined): EffectRef;
+
+export { A, ALT, ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, ASTERISK, BACKSPACE, CAPS_LOCK, CONTROL, CTRL, DELETE, END, ENTER, ESCAPE, F1, F10, F11, F12, F2, F3, F4, F5, F6, F7, F8, F9, HOME, META, P, PAGE_DOWN, PAGE_UP, RDX_POSITIONING_DEFAULTS, RDX_POSITIONS, RdxAutoFocusDirective, RdxControlValueAccessor, RdxFocusInitialDirective, RdxPositionAlign, RdxPositionSide, SHIFT, SPACE, SPACE_CODE, TAB, WINDOW, _IdGenerator, a, areAllDaysBetweenValid, clamp, createContent, createContext, createFormatter, createMonth, createMonths, elementSize, getActiveElement, getAllPossibleConnectedPositions, getArrowPositionParams, getContentPosition, getDaysBetween, getDaysInMonth, getDefaultDate, getDefaultTime, getLastFirstDayOfWeek, getNextLastDayOfWeek, getOptsByGranularity, getPlaceholder, getSegmentElements, getSideAndAlignFromAllPossibleConnectedPositions, getWeekNumber, handleCalendarInitialFocus, hasTime, initializeSegmentValues, injectControlValueAccessor, injectDocument, injectIsClient, injectNgControl, injectWindow, isAcceptableSegmentKey, isAfter, isAfterOrSame, isBefore, isBeforeOrSame, isBetween, isBetweenInclusive, isCalendarDateTime, isEqual, isInsideForm, isNullish, isNumber, isNumberString, isSegmentNavigationKey, isValueEqualOrExist, isZonedDateTime, j, k, n, normalizeDateStep, normalizeHour12, normalizeHourCycle, p, provideToken, provideValueAccessor, resizeEffect, roundToStepPrecision, segmentBuilders, snapValueToStep, syncSegmentValues, syncTimeSegmentValues, toDate, useArrowNavigation, useDateField, watch };
+export type { AcceptableValue, AnyExceptLiteral, CreateMonthProps, DataOrientation, DateAndTimeSegmentObj, DateFormatterOptions, DateMatcher, DateRange, DateSegmentObj, DateSegmentPart, DateStep, DayPeriod, EditableSegmentPart, Formatter, Granularity, HourCycle, Month, NonEditableSegmentPart, Nullable, PlaceholderMap, RdxAllPossibleConnectedPositions, RdxArrowPositionParams, RdxPositionSideAndAlign, RdxPositionSideAndAlignOffsets, RdxPositioningDefaults, RdxPositions, SafeFunction, SegmentContentObj, SegmentPart, SegmentValueObj, TimeGranularity, TimeSegmentObj, TimeSegmentPart, TimeValue, UseDateFieldProps };