ng-primitives 0.90.0 → 0.91.0

package/slider/index.d.ts

@@ -1,72 +1,229 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy } from '@angular/core';
+import { Signal, WritableSignal, ElementRef, OnDestroy } from '@angular/core';
+import { NgpOrientation } from 'ng-primitives/common';
+import { Subject } from 'rxjs';
+import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
 import * as ng_primitives_state from 'ng-primitives/state';
 import * as ng_primitives_slider from 'ng-primitives/slider';
-import { NumberInput, BooleanInput } from '@angular/cdk/coercion';
-import { NgpOrientation } from 'ng-primitives/common';
 
 /**
  * Apply the `ngpSliderRange` directive to an element that represents the range of the slider.
  */
 declare class NgpSliderRange {
-    /**
-     * Access the slider state.
-     */
-    protected readonly sliderState: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpSlider>>;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSliderRange, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSliderRange, "[ngpSliderRange]", ["ngpSliderRange"], {}, {}, never, never, true, never>;
 }
 
+/**
+ * Public state surface for the Slider Range primitive.
+ */
+interface NgpSliderRangeState {
+}
+/**
+ * Inputs for configuring the Slider Range primitive.
+ */
+interface NgpSliderRangeProps {
+}
+declare const ngpSliderRange: ({}: NgpSliderRangeProps) => NgpSliderRangeState;
+declare const injectSliderRangeState: {
+    (): _angular_core.Signal<NgpSliderRangeState>;
+    (options: {
+        hoisted: true;
+    }): _angular_core.Signal<NgpSliderRangeState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): _angular_core.Signal<NgpSliderRangeState | null>;
+};
+declare const provideSliderRangeState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
 /**
  * Apply the `ngpSliderThumb` directive to an element that represents the thumb of the slider.
  */
 declare class NgpSliderThumb {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSliderThumb, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSliderThumb, "[ngpSliderThumb]", ["ngpSliderThumb"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Public state surface for the Slider Thumb primitive.
+ */
+interface NgpSliderThumbState {
     /**
-     * Access the slider state.
+     * Whether the thumb is currently dragging.
      */
-    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpSlider>>;
+    readonly dragging: Signal<boolean>;
     /**
-     * Access the thumb element.
+     * Focus the thumb element.
      */
-    private readonly elementRef;
+    focus(): void;
+}
+/**
+ * Inputs for configuring the Slider Thumb primitive.
+ */
+interface NgpSliderThumbProps {
+}
+declare const ngpSliderThumb: ({}: NgpSliderThumbProps) => NgpSliderThumbState;
+declare const injectSliderThumbState: {
+    (): Signal<NgpSliderThumbState>;
+    (options: {
+        hoisted: true;
+    }): Signal<NgpSliderThumbState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<NgpSliderThumbState | null>;
+};
+declare const provideSliderThumbState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Apply the `ngpSliderTrack` directive to an element that represents the track of the slider.
+ */
+declare class NgpSliderTrack {
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSliderTrack, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSliderTrack, "[ngpSliderTrack]", ["ngpSliderTrack"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Public state surface for the Slider Track primitive.
+ */
+interface NgpSliderTrackState {
+}
+/**
+ * Inputs for configuring the Slider Track primitive.
+ */
+interface NgpSliderTrackProps {
+}
+declare const ngpSliderTrack: ({}: NgpSliderTrackProps) => NgpSliderTrackState;
+declare const injectSliderTrackState: {
+    (): _angular_core.Signal<NgpSliderTrackState>;
+    (options: {
+        hoisted: true;
+    }): _angular_core.Signal<NgpSliderTrackState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): _angular_core.Signal<NgpSliderTrackState | null>;
+};
+declare const provideSliderTrackState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Public state surface for the Slider primitive.
+ */
+interface NgpSliderState {
     /**
-     * Store the dragging state.
+     * The id of the slider.
      */
-    protected dragging: boolean;
-    constructor();
-    protected handlePointerDown(event: PointerEvent): void;
-    protected handlePointerUp(): void;
-    protected handlePointerMove(event: PointerEvent): void;
+    readonly id: Signal<string>;
     /**
-     * Handle keyboard events.
-     * @param event
+     * The slider value.
      */
-    protected handleKeydown(event: KeyboardEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSliderThumb, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSliderThumb, "[ngpSliderThumb]", ["ngpSliderThumb"], {}, {}, never, never, true, never>;
+    readonly value: WritableSignal<number>;
+    /**
+     * The slider orientation.
+     */
+    readonly orientation: WritableSignal<NgpOrientation>;
+    /**
+     * Whether the slider is disabled (includes form control state).
+     */
+    readonly disabled: WritableSignal<boolean>;
+    /**
+     * The percentage position of the thumb.
+     */
+    readonly percentage: Signal<number>;
+    /**
+     * The minimum value of the slider.
+     */
+    readonly min: Signal<number>;
+    /**
+     * The maximum value of the slider.
+     */
+    readonly max: Signal<number>;
+    /**
+     * The step value of the slider.
+     */
+    readonly step: Signal<number>;
+    /**
+     * @internal The track element reference.
+     */
+    readonly track: Signal<ElementRef<HTMLElement> | undefined>;
+    /**
+     * Emit when the value changes.
+     */
+    readonly valueChange: Subject<number>;
+    /**
+     * Set the current value (clamped).
+     */
+    setValue(value: number): void;
+    /**
+     * Register the track element.
+     */
+    setTrack(track: ElementRef<HTMLElement> | undefined): void;
+    /**
+     * Set the disabled state.
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * Set the orientation.
+     */
+    setOrientation(orientation: NgpOrientation): void;
 }
-
 /**
- * Apply the `ngpSliderTrack` directive to an element that represents the track of the slider.
+ * Inputs for configuring the Slider primitive.
  */
-declare class NgpSliderTrack {
+interface NgpSliderProps {
     /**
-     * Access the slider state.
+     * The id of the slider.
      */
-    protected readonly sliderState: _angular_core.Signal<ng_primitives_state.State<ng_primitives_slider.NgpSlider>>;
+    readonly id?: Signal<string>;
     /**
-     * The element that represents the slider track.
+     * The slider value.
      */
-    readonly element: _angular_core.ElementRef<HTMLElement>;
-    constructor();
+    readonly value?: Signal<number>;
     /**
-     * When the slider track is clicked, update the value.
-     * @param event The click event.
+     * The minimum value.
      */
-    protected handlePointerDown(event: PointerEvent): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSliderTrack, never>;
-    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSliderTrack, "[ngpSliderTrack]", ["ngpSliderTrack"], {}, {}, never, never, true, never>;
+    readonly min?: Signal<number>;
+    /**
+     * The maximum value.
+     */
+    readonly max?: Signal<number>;
+    /**
+     * The step value.
+     */
+    readonly step?: Signal<number>;
+    /**
+     * The slider orientation.
+     */
+    readonly orientation?: Signal<NgpOrientation>;
+    /**
+     * Whether the slider is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * Callback fired when the value changes.
+     */
+    readonly onValueChange?: (value: number) => void;
 }
+declare const ngpSlider: ({ id, value: _value, min, max, step, orientation: _orientation, disabled: _disabled, onValueChange, }: NgpSliderProps) => NgpSliderState;
+declare const injectSliderState: {
+    (): Signal<NgpSliderState>;
+    (options: {
+        hoisted: true;
+    }): Signal<NgpSliderState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<NgpSliderState | null>;
+};
+declare const provideSliderState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
 
 /**
  * Apply the `ngpSlider` directive to an element that represents the slider and contains the track, range, and thumb.
@@ -104,34 +261,15 @@ declare class NgpSlider {
      * The disabled state of the slider.
      */
     readonly disabled: _angular_core.InputSignalWithTransform<boolean, BooleanInput>;
-    /**
-     * Access the slider track.
-     * @internal
-     */
-    readonly track: _angular_core.WritableSignal<NgpSliderTrack | undefined>;
-    /**
-     * The value as a percentage based on the min and max values.
-     */
-    protected readonly percentage: _angular_core.Signal<number>;
     /**
      * The state of the slider. We use this for the slider state rather than relying on the inputs.
      * @internal
      */
-    protected readonly state: ng_primitives_state.CreatedState<NgpSlider>;
-    constructor();
+    protected readonly state: NgpSliderState;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSlider, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSlider, "[ngpSlider]", ["ngpSlider"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "ngpSliderValue"; "required": false; "isSignal": true; }; "min": { "alias": "ngpSliderMin"; "required": false; "isSignal": true; }; "max": { "alias": "ngpSliderMax"; "required": false; "isSignal": true; }; "step": { "alias": "ngpSliderStep"; "required": false; "isSignal": true; }; "orientation": { "alias": "ngpSliderOrientation"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSliderDisabled"; "required": false; "isSignal": true; }; }, { "valueChange": "ngpSliderValueChange"; }, never, never, true, never>;
 }
 
-/**
- * Provides the Slider state.
- */
-declare const provideSliderState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
-/**
- * Injects the Slider state.
- */
-declare const injectSliderState: <U = NgpSlider>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
-
 /**
  * Apply the `ngpRangeSliderRange` directive to an element that represents the range between the low and high values.
  */
@@ -329,4 +467,5 @@ declare const provideRangeSliderState: (options?: ng_primitives_state.CreateStat
  */
 declare const injectRangeSliderState: <U = NgpRangeSlider>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
 
-export { NgpRangeSlider, NgpRangeSliderRange, NgpRangeSliderThumb, NgpRangeSliderTrack, NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack, injectRangeSliderState, injectSliderState, provideRangeSliderState, provideSliderState };
+export { NgpRangeSlider, NgpRangeSliderRange, NgpRangeSliderThumb, NgpRangeSliderTrack, NgpSlider, NgpSliderRange, NgpSliderThumb, NgpSliderTrack, injectRangeSliderState, injectSliderRangeState, injectSliderState, injectSliderThumbState, injectSliderTrackState, ngpSlider, ngpSliderRange, ngpSliderThumb, ngpSliderTrack, provideRangeSliderState, provideSliderRangeState, provideSliderState, provideSliderThumbState, provideSliderTrackState };
+export type { NgpSliderProps, NgpSliderRangeProps, NgpSliderRangeState, NgpSliderState, NgpSliderThumbProps, NgpSliderThumbState, NgpSliderTrackProps, NgpSliderTrackState };

package/state/index.d.ts

@@ -1,4 +1,4 @@
-import { InputSignalWithTransform, WritableSignal, InputSignal, Signal, InjectionToken, ProviderToken, FactoryProvider, InjectOptions } from '@angular/core';
+import { InputSignalWithTransform, WritableSignal, InputSignal, Signal, InjectionToken, ProviderToken, FactoryProvider, InjectOptions, Injector, ElementRef } from '@angular/core';
 
 /**
  * This converts the state object to a writable state object.
@@ -52,6 +52,60 @@ declare function createStateInjector<T>(token: ProviderToken<State<T>>, options?
  * @param token The token for the state
  */
 declare function createState(token: ProviderToken<WritableSignal<State<unknown>>>): <U>(state: U) => CreatedState<U>;
+interface CreatePrimitiveOptions {
+    injector?: Injector;
+    elementRef?: ElementRef<HTMLElement>;
+}
+type PrimitiveState<TFactory extends (...args: any[]) => unknown> = TFactory extends (props: unknown) => infer R ? R : TFactory extends (...args: any[]) => infer R ? R : never;
+type BasePrimitiveInjectionFn<TState> = {
+    (): Signal<TState>;
+    (options: {
+        hoisted: true;
+    }): Signal<TState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<TState | null>;
+};
+type PrimitiveInjectionFn<TFactory extends (...args: any[]) => unknown> = TFactory extends (props: unknown) => infer R ? {
+    (): Signal<R>;
+    (options: {
+        hoisted: true;
+    }): Signal<R | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<R | null>;
+} : BasePrimitiveInjectionFn<PrimitiveState<TFactory>>;
+declare function createPrimitive<TFactory extends (...args: any[]) => unknown>(name: string, fn: TFactory, options?: CreatePrimitiveOptions): [
+    InjectionToken<WritableSignal<PrimitiveState<TFactory>>>,
+    TFactory,
+    PrimitiveInjectionFn<TFactory>,
+    (opts?: {
+        inherit?: boolean;
+    }) => FactoryProvider
+];
+declare function controlled<T>(value: Signal<T>): WritableSignal<T>;
+declare function attrBinding(element: ElementRef<HTMLElement>, attr: string, value: (() => string | number | boolean | null | undefined) | string | number | boolean | null | undefined): void;
+declare function styleBinding(element: ElementRef<HTMLElement>, style: string, value: (() => string | number | null) | string | number | null): void;
+declare function dataBinding(element: ElementRef<HTMLElement>, attr: string, value: (() => string | boolean | null) | string | boolean | null): void;
+declare function listener<K extends keyof HTMLElementEventMap>(element: HTMLElement | ElementRef<HTMLElement>, event: K, handler: (event: HTMLElementEventMap[K]) => void, options?: {
+    injector?: Injector;
+}): void;
+declare function listener(element: HTMLElement | ElementRef<HTMLElement>, event: string, handler: (event: Event) => void, options?: {
+    injector?: Injector;
+}): void;
+declare function onDestroy(callback: () => void): void;
+/**
+ * Previously, with our state approach, we allowed signals to be written directly using their setters.
+ * However, with our new approach, we want people to use the appropriate set method instead. This function takes in a writable
+ * signal and returns a proxy that warns the user when set is called directly.
+ */
+declare function deprecatedSetter<T>(signal: WritableSignal<T>, methodName: string): WritableSignal<T>;
+/**
+ * A utility function to inject an inherited state from a parent injector. This is useful for cases
+ * where a primitive needs to inherit state from a parent primitive, such as in roving focus groups.
+ * We could use inject with a forwardRef, but forwardRef returns an any - no thanks...
+ */
+declare function injectInheritedState<T>(token: () => InjectionToken<T>, injectOptions?: InjectOptions): T | null;
 
-export { createState, createStateInjector, createStateProvider, createStateToken };
-export type { CreateStateProviderOptions, CreatedState, InjectedState, State };
+export { attrBinding, controlled, createPrimitive, createState, createStateInjector, createStateProvider, createStateToken, dataBinding, deprecatedSetter, injectInheritedState, listener, onDestroy, styleBinding };
+export type { CreatePrimitiveOptions, CreateStateProviderOptions, CreatedState, InjectedState, State };

package/switch/index.d.ts

@@ -1,33 +1,121 @@
 import * as _angular_core from '@angular/core';
-import * as ng_primitives_state from 'ng-primitives/state';
-import * as ng_primitives_switch from 'ng-primitives/switch';
+import { Signal, WritableSignal } from '@angular/core';
+import { Subject } from 'rxjs/internal/Subject';
 import { BooleanInput } from '@angular/cdk/coercion';
 
 /**
  * Apply the `ngpSwitchThumb` directive to an element within a switch to represent the thumb.
  */
 declare class NgpSwitchThumb {
-    /**
-     * Access the switch state.
-     */
-    protected readonly state: _angular_core.Signal<ng_primitives_state.State<ng_primitives_switch.NgpSwitch>>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSwitchThumb, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSwitchThumb, "[ngpSwitchThumb]", never, {}, {}, never, never, true, never>;
 }
 
 /**
- * Apply the `ngpSwitch` directive to an element to manage the checked state.
+ * Public state surface for the Switch Thumb primitive.
  */
-declare class NgpSwitch {
+interface NgpSwitchThumbState {
+    /**
+     * Whether the switch is checked.
+     */
+    readonly checked: Signal<boolean>;
+    /**
+     * Whether the switch is disabled.
+     */
+    readonly disabled: Signal<boolean>;
+}
+/**
+ * Inputs for configuring the Switch Thumb primitive.
+ */
+interface NgpSwitchThumbProps {
+}
+declare const ngpSwitchThumb: ({}: NgpSwitchThumbProps) => NgpSwitchThumbState;
+declare const injectSwitchThumbState: {
+    (): Signal<NgpSwitchThumbState>;
+    (options: {
+        hoisted: true;
+    }): Signal<NgpSwitchThumbState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<NgpSwitchThumbState | null>;
+};
+declare const provideSwitchThumbState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Public state surface for the Switch primitive.
+ */
+interface NgpSwitchState {
+    /**
+     * The id of the switch.
+     */
+    readonly id: Signal<string>;
     /**
-     * Access the element ref.
+     * Whether the switch is checked.
      */
-    private readonly elementRef;
+    readonly checked: WritableSignal<boolean>;
     /**
-     * Determine if the switch is a button
+     * Whether the switch is disabled (includes form control state).
+     */
+    readonly disabled: WritableSignal<boolean>;
+    /**
+     * Emits when the checked state changes.
      */
-    protected isButton: boolean;
+    readonly checkedChange: Subject<boolean>;
+    /**
+     * Toggle the switch state.
+     */
+    toggle(event?: Event): void;
+    /**
+     * Update the checked value.
+     */
+    setChecked(value: boolean): void;
+    /**
+     * Update the disabled value.
+     */
+    setDisabled(value: boolean): void;
+}
+/**
+ * Inputs for configuring the Switch primitive.
+ */
+interface NgpSwitchProps {
+    /**
+     * The id of the switch.
+     */
+    readonly id?: Signal<string>;
+    /**
+     * Whether the switch is checked.
+     */
+    readonly checked?: Signal<boolean>;
+    /**
+     * Whether the switch is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+    /**
+     * Callback fired when the checked state changes.
+     */
+    readonly onCheckedChange?: (checked: boolean) => void;
+}
+declare const ngpSwitch: ({ id, checked: _checked, disabled: _disabled, onCheckedChange, }: NgpSwitchProps) => NgpSwitchState;
+declare const injectSwitchState: {
+    (): Signal<NgpSwitchState>;
+    (options: {
+        hoisted: true;
+    }): Signal<NgpSwitchState | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<NgpSwitchState | null>;
+};
+declare const provideSwitchState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
+
+/**
+ * Apply the `ngpSwitch` directive to an element to manage the checked state.
+ */
+declare class NgpSwitch {
     /**
      * The id of the switch. If not provided, a unique id will be generated.
      */
@@ -50,27 +138,14 @@ declare class NgpSwitch {
      * The switch state.
      * @internal
      */
-    readonly state: ng_primitives_state.CreatedState<NgpSwitch>;
-    constructor();
+    readonly state: NgpSwitchState;
     /**
      * Toggle the checked state.
      */
     toggle(): void;
-    /**
-     * Handle the keydown event.
-     */
-    protected onKeyDown(event: KeyboardEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpSwitch, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpSwitch, "[ngpSwitch]", ["ngpSwitch"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "ngpSwitchChecked"; "required": false; "isSignal": true; }; "disabled": { "alias": "ngpSwitchDisabled"; "required": false; "isSignal": true; }; }, { "checkedChange": "ngpSwitchCheckedChange"; }, never, never, true, never>;
 }
 
-/**
- * Provides the Switch state.
- */
-declare const provideSwitchState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
-/**
- * Injects the Switch state.
- */
-declare const injectSwitchState: <U = NgpSwitch>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
-
-export { NgpSwitch, NgpSwitchThumb, injectSwitchState, provideSwitchState };
+export { NgpSwitch, NgpSwitchThumb, injectSwitchState, injectSwitchThumbState, ngpSwitch, ngpSwitchThumb, provideSwitchState, provideSwitchThumbState };
+export type { NgpSwitchProps, NgpSwitchState, NgpSwitchThumbProps, NgpSwitchThumbState };

package/textarea/index.d.ts

@@ -1,5 +1,5 @@
-import * as ng_primitives_state from 'ng-primitives/state';
 import * as _angular_core from '@angular/core';
+import { Signal, WritableSignal } from '@angular/core';
 import { BooleanInput } from '@angular/cdk/coercion';
 
 declare class NgpTextarea {
@@ -14,19 +14,74 @@ declare class NgpTextarea {
     /**
      * The state of the textarea.
      */
-    protected readonly state: ng_primitives_state.CreatedState<NgpTextarea>;
-    constructor();
+    protected readonly state: {
+        id: _angular_core.Signal<string>;
+        disabled: _angular_core.WritableSignal<boolean>;
+        setDisabled: (value: boolean) => void;
+    };
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<NgpTextarea, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<NgpTextarea, "[ngpTextarea]", ["ngpTextarea"], { "id": { "alias": "id"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
- * Provides the Textarea state.
+ * Public state surface for the Textarea primitive.
  */
-declare const provideTextareaState: (options?: ng_primitives_state.CreateStateProviderOptions) => _angular_core.FactoryProvider;
+interface NgpTextareaState {
+    /**
+     * The id of the textarea.
+     */
+    readonly id: Signal<string>;
+    /**
+     * Whether the textarea is disabled.
+     */
+    readonly disabled: WritableSignal<boolean>;
+    /**
+     * Set the disabled state of the textarea.
+     */
+    setDisabled(disabled: boolean): void;
+}
 /**
- * Injects the Textarea state.
+ * Inputs for configuring the Textarea primitive.
  */
-declare const injectTextareaState: <U = NgpTextarea>(injectOptions?: _angular_core.InjectOptions) => _angular_core.Signal<ng_primitives_state.State<U>>;
+interface NgpTextareaProps {
+    /**
+     * The id of the textarea.
+     */
+    readonly id?: Signal<string>;
+    /**
+     * Whether the textarea is disabled.
+     */
+    readonly disabled?: Signal<boolean>;
+}
+declare const ngpTextarea: ({ id, disabled: _disabled, }: NgpTextareaProps) => {
+    id: Signal<string>;
+    disabled: WritableSignal<boolean>;
+    setDisabled: (value: boolean) => void;
+};
+declare const injectTextareaState: {
+    (): Signal<{
+        id: Signal<string>;
+        disabled: WritableSignal<boolean>;
+        setDisabled: (value: boolean) => void;
+    }>;
+    (options: {
+        hoisted: true;
+    }): Signal<{
+        id: Signal<string>;
+        disabled: WritableSignal<boolean>;
+        setDisabled: (value: boolean) => void;
+    } | null>;
+    (options?: {
+        hoisted?: boolean;
+    }): Signal<{
+        id: Signal<string>;
+        disabled: WritableSignal<boolean>;
+        setDisabled: (value: boolean) => void;
+    } | null>;
+};
+declare const provideTextareaState: (opts?: {
+    inherit?: boolean;
+}) => _angular_core.FactoryProvider;
 
-export { NgpTextarea, injectTextareaState, provideTextareaState };
+export { NgpTextarea, injectTextareaState, ngpTextarea, provideTextareaState };
+export type { NgpTextareaProps, NgpTextareaState };