ng-primitives 0.91.2 → 0.93.0

package/form-field/index.d.ts

@@ -1,9 +1,9 @@
-import * as ng_primitives_state from 'ng-primitives/state';
-import * as ng_primitives_form_field from 'ng-primitives/form-field';
 import * as _angular_core from '@angular/core';
-import { OnChanges, OnDestroy, SimpleChanges, Signal } from '@angular/core';
-import { BooleanInput } from '@angular/cdk/coercion';
+import { Signal } from '@angular/core';
+import * as ng_primitives_utils from 'ng-primitives/utils';
 import { NgpControlStatus } from 'ng-primitives/utils';
+import { BooleanInput } from '@angular/cdk/coercion';
+import { NgControl } from '@angular/forms';
 
 /**
  * The `NgpDescription` directive is used to mark a description element within a form field. There may be multiple descriptions associated with a form control.
@@ -14,22 +14,61 @@ declare class NgpDescription {
      */
     readonly id: _angular_core.InputSignal<string>;
     /**
-     * Access the form field that the description is associated with.
+     * The description state.
      */
-    protected readonly formField: _angular_core.Signal<ng_primitives_state.State<ng_primitives_form_field.NgpFormField>>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpDescription, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpDescription, "[ngpDescription]", ["ngpDescription"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
- * The `NgpError` directive is used to mark an error message element within a form field. There may be multiple error messages associated with a form control.
+ * The state interface for the Description primitive.
  */
-declare class NgpError implements OnChanges, OnDestroy {
+interface NgpDescriptionState {
     /**
-     * Access the form field that the description is associated with.
+     * The id of the description.
      */
-    protected readonly formField: _angular_core.Signal<ng_primitives_state.State<ng_primitives_form_field.NgpFormField>>;
+    readonly id: Signal<string>;
+}
+/**
+ * The props interface for the Description primitive.
+ */
+interface NgpDescriptionProps {
+    /**
+     * The id of the description.
+     */
+    readonly id: Signal<string>;
+}
+declare const ngpDescription: ({ id }: NgpDescriptionProps) => {
+    id: Signal<string>;
+};
+declare const injectDescriptionState: {
+    (): Signal<{
+        id: Signal<string>;
+    }>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+    }> | Signal<{
+        id: Signal<string>;
+    } | null>;
+};
+declare const provideDescriptionState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * The `NgpError` directive is used to mark an error message element within a form field. There may be multiple error messages associated with a form control.
+ */
+declare class NgpError {
     /**
      * The id of the error message. If not provided, a unique id will be generated.
      */
@@ -38,20 +77,79 @@ declare class NgpError implements OnChanges, OnDestroy {
      * The validator associated with the error message.
      */
     readonly validator: _angular_core.InputSignal<string | null>;
+    /**
+     * The error state.
+     */
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpError, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpError, "[ngpError]", ["ngpError"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "validator": { "alias": "ngpErrorValidator"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The state interface for the Error primitive.
+ */
+interface NgpErrorState {
+    /**
+     * The id of the error message.
+     */
+    readonly id: Signal<string>;
     /**
      * Determine if there is an error message.
      */
-    protected readonly hasError: _angular_core.Signal<boolean>;
+    readonly hasError: Signal<boolean>;
     /**
      * Determine whether the validator associated with this error is failing.
      */
-    protected readonly state: _angular_core.Signal<"fail" | "pass">;
-    constructor();
-    ngOnChanges(changes: SimpleChanges): void;
-    ngOnDestroy(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpError, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpError, "[ngpError]", ["ngpError"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "validator": { "alias": "ngpErrorValidator"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    readonly state: Signal<'fail' | 'pass'>;
+}
+/**
+ * The props interface for the Error primitive.
+ */
+interface NgpErrorProps {
+    /**
+     * The id of the error message.
+     */
+    readonly id: Signal<string>;
+    /**
+     * The validator associated with the error message.
+     */
+    readonly validator?: Signal<string | null>;
 }
+declare const ngpError: ({ id, validator }: NgpErrorProps) => {
+    id: Signal<string>;
+    hasError: Signal<boolean>;
+    state: Signal<"fail" | "pass">;
+};
+declare const injectErrorState: {
+    (): Signal<{
+        id: Signal<string>;
+        hasError: Signal<boolean>;
+        state: Signal<"fail" | "pass">;
+    }>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+        hasError: Signal<boolean>;
+        state: Signal<"fail" | "pass">;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+        hasError: Signal<boolean>;
+        state: Signal<"fail" | "pass">;
+    }> | Signal<{
+        id: Signal<string>;
+        hasError: Signal<boolean>;
+        state: Signal<"fail" | "pass">;
+    } | null>;
+};
+declare const provideErrorState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
 
 /**
  * Typically this primitive would be not be used directly, but instead a more specific form control primitive would be used (e.g. `ngpInput`). All of our form control primitives use `ngpFormControl` internally so they will have the same accessibility features as described below.
@@ -70,168 +168,227 @@ declare class NgpFormControl {
     /**
      * The status of the form control.
      */
-    readonly status: Signal<NgpControlStatus>;
-    /**
-     * The element reference.
-     */
-    private readonly elementRef;
-    /**
-     * Whether the element supports the disabled attribute.
-     */
-    protected readonly supportsDisabledAttribute: boolean;
-    /**
-     * The state of the form control.
-     */
-    private readonly state;
-    constructor();
+    readonly status: _angular_core.Signal<ng_primitives_utils.NgpControlStatus>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpFormControl, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpFormControl, "[ngpFormControl]", ["ngpFormControl"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpFormControlDisabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
+
 interface NgpFormControlProps {
-    id: Signal<string>;
-    disabled?: Signal<boolean>;
+    /**
+     * The id of the form control.
+     */
+    readonly id: Signal<string>;
+    /**
+     * Whether the form control is disabled by a parent.
+     */
+    readonly disabled?: Signal<boolean>;
 }
 declare function ngpFormControl({ id, disabled, }: NgpFormControlProps): Signal<NgpControlStatus>;
 
-/**
- * Provides the FormControl state.
- */
-declare const provideFormControlState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
-/**
- * Injects the FormControl state.
- */
-declare const injectFormControlState: <U = NgpFormControl>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
-
 /**
  * The `NgpFormField` directive is a container for form field elements. Any labels, form controls, or descriptions should be placed within this directive.
  */
-declare class NgpFormField implements OnDestroy {
+declare class NgpFormField {
     /**
-     * Store the form label.
+     * Find any NgControl within the form field.
      * @internal
      */
-    readonly labels: _angular_core.WritableSignal<string[]>;
+    private readonly ngControl;
     /**
-     * Store the form descriptions.
-     * @internal
+     * The form field state.
      */
-    readonly descriptions: _angular_core.WritableSignal<string[]>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpFormField, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpFormField, "[ngpFormField]", ["ngpFormField"], {}, {}, ["ngControl"], never, true, never>;
+}
+
+/**
+ * The state interface for the FormField primitive.
+ */
+interface NgpFormFieldState {
     /**
-     * Store the id of the associated form control.
-     * @internal
+     * The form labels.
      */
-    readonly formControl: _angular_core.WritableSignal<string | null>;
+    readonly labels: Signal<string[]>;
     /**
-     * Find any NgControl within the form field.
-     * @internal
+     * The form descriptions.
      */
-    private readonly ngControl;
+    readonly descriptions: Signal<string[]>;
     /**
-     * Store the validation error messages.
-     * @internal
+     * The id of the associated form control.
      */
-    readonly errors: _angular_core.WritableSignal<string[]>;
+    readonly formControl: Signal<string | null>;
+    /**
+     * The validation error messages.
+     */
+    readonly errors: Signal<string[]>;
     /**
      * Whether the control is pristine.
-     * @internal
      */
-    readonly pristine: _angular_core.WritableSignal<boolean | null>;
+    readonly pristine: Signal<boolean | null>;
     /**
      * Whether the control is touched.
-     * @internal
      */
-    readonly touched: _angular_core.WritableSignal<boolean | null>;
+    readonly touched: Signal<boolean | null>;
     /**
      * Whether the control is dirty.
-     * @internal
      */
-    readonly dirty: _angular_core.WritableSignal<boolean | null>;
+    readonly dirty: Signal<boolean | null>;
     /**
      * Whether the control is valid.
      */
-    readonly valid: _angular_core.WritableSignal<boolean | null>;
+    readonly valid: Signal<boolean | null>;
     /**
      * Whether the control is invalid.
-     * @internal
      */
-    readonly invalid: _angular_core.WritableSignal<boolean | null>;
+    readonly invalid: Signal<boolean | null>;
     /**
      * Whether the control is pending.
-     * @internal
      */
-    readonly pending: _angular_core.WritableSignal<boolean | null>;
+    readonly pending: Signal<boolean | null>;
     /**
      * Whether the control is disabled.
-     * @internal
-     */
-    readonly disabled: _angular_core.WritableSignal<boolean | null>;
-    /**
-     * Store the current status subscription.
-     */
-    private subscription?;
-    /**
-     * Injector for creating effects outside the constructor.
-     */
-    private readonly injector;
-    /**
-     * The form field state.
-     */
-    protected readonly state: ng_primitives_state.CreatedState<NgpFormField>;
-    constructor();
-    ngOnDestroy(): void;
-    /**
-     * Setup a listener for the form control status.
-     * @param control
      */
-    private setupSubscriptions;
-    private updateStatus;
+    readonly disabled: Signal<boolean | null>;
     /**
      * Register the id of the associated form control.
-     * @param id
-     * @internal
      */
     setFormControl(id: string): void;
     /**
      * Register a label with the form field.
-     * @param label
-     * @internal
      */
     addLabel(label: string): void;
     /**
      * Register a description with the form field.
-     * @param description
-     * @internal
      */
     addDescription(description: string): void;
     /**
      * Remove the associated form control.
-     * @internal
      */
     removeFormControl(): void;
     /**
      * Remove a label from the form field.
-     * @param label
-     * @internal
      */
     removeLabel(label: string): void;
     /**
      * Remove a description from the form field.
-     * @param description
-     * @internal
      */
     removeDescription(description: string): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpFormField, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpFormField, "[ngpFormField]", ["ngpFormField"], {}, {}, ["ngControl"], never, true, never>;
 }
-
-/**
- * Provides the FormField state.
- */
-declare const provideFormFieldState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
 /**
- * Injects the FormField state.
+ * The props interface for the FormField primitive.
  */
-declare const injectFormFieldState: <U = NgpFormField>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+interface NgpFormFieldProps {
+    /**
+     * Find any NgControl within the form field.
+     */
+    readonly ngControl: Signal<NgControl | undefined>;
+}
+declare const ngpFormField: ({ ngControl }: NgpFormFieldProps) => {
+    labels: _angular_core.WritableSignal<string[]>;
+    descriptions: _angular_core.WritableSignal<string[]>;
+    formControl: _angular_core.WritableSignal<string | null>;
+    errors: _angular_core.WritableSignal<string[]>;
+    pristine: _angular_core.WritableSignal<boolean | null>;
+    touched: _angular_core.WritableSignal<boolean | null>;
+    dirty: _angular_core.WritableSignal<boolean | null>;
+    valid: _angular_core.WritableSignal<boolean | null>;
+    invalid: _angular_core.WritableSignal<boolean | null>;
+    pending: _angular_core.WritableSignal<boolean | null>;
+    disabled: _angular_core.WritableSignal<boolean | null>;
+    setFormControl: (id: string) => void;
+    addLabel: (label: string) => void;
+    addDescription: (description: string) => void;
+    removeFormControl: () => void;
+    removeLabel: (label: string) => void;
+    removeDescription: (description: string) => void;
+};
+declare const injectFormFieldState: {
+    (): Signal<{
+        labels: _angular_core.WritableSignal<string[]>;
+        descriptions: _angular_core.WritableSignal<string[]>;
+        formControl: _angular_core.WritableSignal<string | null>;
+        errors: _angular_core.WritableSignal<string[]>;
+        pristine: _angular_core.WritableSignal<boolean | null>;
+        touched: _angular_core.WritableSignal<boolean | null>;
+        dirty: _angular_core.WritableSignal<boolean | null>;
+        valid: _angular_core.WritableSignal<boolean | null>;
+        invalid: _angular_core.WritableSignal<boolean | null>;
+        pending: _angular_core.WritableSignal<boolean | null>;
+        disabled: _angular_core.WritableSignal<boolean | null>;
+        setFormControl: (id: string) => void;
+        addLabel: (label: string) => void;
+        addDescription: (description: string) => void;
+        removeFormControl: () => void;
+        removeLabel: (label: string) => void;
+        removeDescription: (description: string) => void;
+    }>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+    }): Signal<{
+        labels: _angular_core.WritableSignal<string[]>;
+        descriptions: _angular_core.WritableSignal<string[]>;
+        formControl: _angular_core.WritableSignal<string | null>;
+        errors: _angular_core.WritableSignal<string[]>;
+        pristine: _angular_core.WritableSignal<boolean | null>;
+        touched: _angular_core.WritableSignal<boolean | null>;
+        dirty: _angular_core.WritableSignal<boolean | null>;
+        valid: _angular_core.WritableSignal<boolean | null>;
+        invalid: _angular_core.WritableSignal<boolean | null>;
+        pending: _angular_core.WritableSignal<boolean | null>;
+        disabled: _angular_core.WritableSignal<boolean | null>;
+        setFormControl: (id: string) => void;
+        addLabel: (label: string) => void;
+        addDescription: (description: string) => void;
+        removeFormControl: () => void;
+        removeLabel: (label: string) => void;
+        removeDescription: (description: string) => void;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+    }): Signal<{
+        labels: _angular_core.WritableSignal<string[]>;
+        descriptions: _angular_core.WritableSignal<string[]>;
+        formControl: _angular_core.WritableSignal<string | null>;
+        errors: _angular_core.WritableSignal<string[]>;
+        pristine: _angular_core.WritableSignal<boolean | null>;
+        touched: _angular_core.WritableSignal<boolean | null>;
+        dirty: _angular_core.WritableSignal<boolean | null>;
+        valid: _angular_core.WritableSignal<boolean | null>;
+        invalid: _angular_core.WritableSignal<boolean | null>;
+        pending: _angular_core.WritableSignal<boolean | null>;
+        disabled: _angular_core.WritableSignal<boolean | null>;
+        setFormControl: (id: string) => void;
+        addLabel: (label: string) => void;
+        addDescription: (description: string) => void;
+        removeFormControl: () => void;
+        removeLabel: (label: string) => void;
+        removeDescription: (description: string) => void;
+    } | null> | Signal<{
+        labels: _angular_core.WritableSignal<string[]>;
+        descriptions: _angular_core.WritableSignal<string[]>;
+        formControl: _angular_core.WritableSignal<string | null>;
+        errors: _angular_core.WritableSignal<string[]>;
+        pristine: _angular_core.WritableSignal<boolean | null>;
+        touched: _angular_core.WritableSignal<boolean | null>;
+        dirty: _angular_core.WritableSignal<boolean | null>;
+        valid: _angular_core.WritableSignal<boolean | null>;
+        invalid: _angular_core.WritableSignal<boolean | null>;
+        pending: _angular_core.WritableSignal<boolean | null>;
+        disabled: _angular_core.WritableSignal<boolean | null>;
+        setFormControl: (id: string) => void;
+        addLabel: (label: string) => void;
+        addDescription: (description: string) => void;
+        removeFormControl: () => void;
+        removeLabel: (label: string) => void;
+        removeDescription: (description: string) => void;
+    }>;
+};
+declare const provideFormFieldState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
 
 /**
  * The `NgpLabel` directive is used to mark a label element within a form field. Preferably, there should use an HTML `<label>` element.
@@ -242,25 +399,65 @@ declare class NgpLabel {
      */
     readonly id: _angular_core.InputSignal<string>;
     /**
-     * Access the form field that the label is associated with.
+     * The label state.
      */
-    protected readonly formField: _angular_core.Signal<ng_primitives_state.State<ng_primitives_form_field.NgpFormField>>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpLabel, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpLabel, "[ngpLabel]", ["ngpLabel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The state interface for the Label primitive.
+ */
+interface NgpLabelState {
     /**
-     * Derive the for attribute value if the label is an HTML label element.
+     * The id of the label.
      */
-    protected readonly htmlFor: _angular_core.Signal<string | null>;
+    readonly id: Signal<string>;
     /**
-     * Access the element that the label is associated with.
+     * The htmlFor attribute value.
      */
-    private readonly elementRef;
+    readonly htmlFor: Signal<string | null>;
+}
+/**
+ * The props interface for the Label primitive.
+ */
+interface NgpLabelProps {
     /**
-     * Determine if the label is an HTML label element.
+     * The id of the label.
      */
-    protected readonly isLabel: boolean;
-    constructor();
-    protected onClick(event: MouseEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpLabel, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpLabel, "[ngpLabel]", ["ngpLabel"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    readonly id: Signal<string>;
 }
+declare const ngpLabel: ({ id }: NgpLabelProps) => {
+    id: Signal<string>;
+    htmlFor: Signal<string | null>;
+};
+declare const injectLabelState: {
+    (): Signal<{
+        id: Signal<string>;
+        htmlFor: Signal<string | null>;
+    }>;
+    (options: {
+        hoisted: true;
+        optional?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+        htmlFor: Signal<string | null>;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+        optional?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+        htmlFor: Signal<string | null>;
+    }> | Signal<{
+        id: Signal<string>;
+        htmlFor: Signal<string | null>;
+    } | null>;
+};
+declare const provideLabelState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
 
-export { NgpDescription, NgpError, NgpFormControl, NgpFormField, NgpLabel, injectFormControlState, injectFormFieldState, ngpFormControl, provideFormControlState, provideFormFieldState };
+export { NgpDescription, NgpError, NgpFormControl, NgpFormField, NgpLabel, injectDescriptionState, injectErrorState, injectFormFieldState, injectLabelState, ngpDescription, ngpError, ngpFormControl, ngpFormField, ngpLabel, provideDescriptionState, provideErrorState, provideFormFieldState, provideLabelState };
+export type { NgpDescriptionProps, NgpDescriptionState, NgpErrorProps, NgpErrorState, NgpFormFieldProps, NgpFormFieldState, NgpLabelProps, NgpLabelState };

package/input/index.d.ts

@@ -63,6 +63,7 @@ declare const injectInputState: {
     }>;
     (options: {
         hoisted: true;
+        optional?: boolean;
     }): Signal<{
         id: Signal<string>;
         disabled: WritableSignal<boolean>;
@@ -70,10 +71,15 @@ declare const injectInputState: {
     } | null>;
     (options?: {
         hoisted?: boolean;
+        optional?: boolean;
     }): Signal<{
         id: Signal<string>;
         disabled: WritableSignal<boolean>;
         status: Signal<ng_primitives_utils.NgpControlStatus>;
+    }> | Signal<{
+        id: Signal<string>;
+        disabled: WritableSignal<boolean>;
+        status: Signal<ng_primitives_utils.NgpControlStatus>;
     } | null>;
 };
 declare const provideInputState: (opts?: {

package/interactions/index.d.ts

@@ -53,9 +53,9 @@ declare class NgpFocusVisible {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpFocusVisible, "[ngpFocusVisible]", ["ngpFocusVisible"], { "disabled": { "alias": "ngpFocusVisibleDisabled"; "required": false; "isSignal": true; }; }, { "focusChange": "ngpFocusVisible"; }, never, never, true, never>;
 }
 
-interface NgpFocusVisibleOptions {
+interface NgpFocusVisibleProps {
     disabled?: Signal<boolean>;
-    focusChange?: (value: boolean) => void;
+    onFocusChange?: (value: boolean) => void;
 }
 interface NgpFocusVisibleState {
     isFocused: Signal<boolean>;
@@ -63,7 +63,7 @@ interface NgpFocusVisibleState {
 /**
  * @internal
  */
-declare function ngpFocusVisibleInteraction({ focusChange, disabled, }: NgpFocusVisibleOptions): NgpFocusVisibleState;
+declare function ngpFocusVisible({ onFocusChange, disabled, }: NgpFocusVisibleProps): NgpFocusVisibleState;
 
 /**
  * This was inspired by the React Aria useFocus hook.
@@ -83,11 +83,11 @@ declare class NgpFocus {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpFocus, "[ngpFocus]", ["ngpFocus"], { "disabled": { "alias": "ngpFocusDisabled"; "required": false; "isSignal": true; }; }, { "focus": "ngpFocus"; }, never, never, true, never>;
 }
 
-interface NgpFocusOptions {
+interface NgpFocusProps {
     disabled?: Signal<boolean>;
     focusWithin?: boolean;
-    focus?: () => void;
-    blur?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
 }
 interface NgpFocusState {
     isFocused: Signal<boolean>;
@@ -95,7 +95,7 @@ interface NgpFocusState {
 /**
  * @internal
  */
-declare function ngpFocusInteraction({ focus, blur, focusWithin, disabled, }: NgpFocusOptions): NgpFocusState;
+declare function ngpFocus({ onFocus, onBlur, focusWithin, disabled, }: NgpFocusProps): NgpFocusState;
 
 /**
  * Apply the `ngpHover` directive to an element that you want to listen for hover events. T
@@ -127,10 +127,10 @@ declare class NgpHover {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpHover, "[ngpHover]", ["ngpHover"], { "disabled": { "alias": "ngpHoverDisabled"; "required": false; "isSignal": true; }; }, { "hoverStart": "ngpHoverStart"; "hoverEnd": "ngpHoverEnd"; "hoverChange": "ngpHover"; }, never, never, true, never>;
 }
 
-interface NgpHoverOptions {
+interface NgpHoverProps {
     disabled?: Signal<boolean>;
-    hoverStart?: () => void;
-    hoverEnd?: () => void;
+    onHoverStart?: () => void;
+    onHoverEnd?: () => void;
 }
 interface NgpHoverState {
     hovered: Signal<boolean>;
@@ -141,7 +141,7 @@ interface NgpHoverState {
  * because there is a chance the directive has already been used.
  * @internal
  */
-declare function ngpHoverInteraction({ hoverStart, hoverEnd, disabled, }: NgpHoverOptions): NgpHoverState;
+declare function ngpHover({ onHoverStart, onHoverEnd, disabled, }: NgpHoverProps): NgpHoverState;
 
 /**
  * The `NgpMove` directive is used to enable the pointer and keyboard move interactions on an element.
@@ -281,15 +281,15 @@ declare class NgpPress {
 interface NgpPressState {
     pressed: Signal<boolean>;
 }
-interface NgpPressOptions {
+interface NgpPressProps {
     disabled?: Signal<boolean>;
-    pressStart?: () => void;
-    pressEnd?: () => void;
+    onPressStart?: () => void;
+    onPressEnd?: () => void;
 }
 /**
  * @internal
  */
-declare function ngpPressInteraction({ pressStart, pressEnd, disabled, }: NgpPressOptions): NgpPressState;
+declare function ngpPress({ onPressStart, onPressEnd, disabled, }: NgpPressProps): NgpPressState;
 
-export { NgpFocus, NgpFocusVisible, NgpHover, NgpMove, NgpPress, ngpFocusInteraction, ngpFocusVisibleInteraction, ngpHoverInteraction, ngpInteractions, ngpPressInteraction, provideInteractionsConfig, ngpInteractions as setupInteractions };
+export { NgpFocus, NgpFocusVisible, NgpHover, NgpMove, NgpPress, ngpFocus, ngpFocusVisible, ngpHover, ngpInteractions, ngpPress, provideInteractionsConfig, ngpInteractions as setupInteractions };
 export type { NgpInteractionsConfig, NgpMoveEvent };