@radix-ng/primitives 0.4.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radix-ng/primitives",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -22,7 +22,6 @@
     "@angular/cdk": "^17.0.0"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.3",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
@@ -38,6 +37,12 @@
       "esm": "./esm2022/radix-ng-primitives.mjs",
       "default": "./fesm2022/radix-ng-primitives.mjs"
     },
+    "./alert-dialog": {
+      "types": "./alert-dialog/index.d.ts",
+      "esm2022": "./esm2022/alert-dialog/radix-ng-primitives-alert-dialog.mjs",
+      "esm": "./esm2022/alert-dialog/radix-ng-primitives-alert-dialog.mjs",
+      "default": "./fesm2022/radix-ng-primitives-alert-dialog.mjs"
+    },
     "./avatar": {
       "types": "./avatar/index.d.ts",
       "esm2022": "./esm2022/avatar/radix-ng-primitives-avatar.mjs",
@@ -50,18 +55,18 @@
       "esm": "./esm2022/checkbox/radix-ng-primitives-checkbox.mjs",
       "default": "./fesm2022/radix-ng-primitives-checkbox.mjs"
     },
+    "./collapsible": {
+      "types": "./collapsible/index.d.ts",
+      "esm2022": "./esm2022/collapsible/radix-ng-primitives-collapsible.mjs",
+      "esm": "./esm2022/collapsible/radix-ng-primitives-collapsible.mjs",
+      "default": "./fesm2022/radix-ng-primitives-collapsible.mjs"
+    },
     "./label": {
       "types": "./label/index.d.ts",
       "esm2022": "./esm2022/label/radix-ng-primitives-label.mjs",
       "esm": "./esm2022/label/radix-ng-primitives-label.mjs",
       "default": "./fesm2022/radix-ng-primitives-label.mjs"
     },
-    "./overlay": {
-      "types": "./overlay/index.d.ts",
-      "esm2022": "./esm2022/overlay/radix-ng-primitives-overlay.mjs",
-      "esm": "./esm2022/overlay/radix-ng-primitives-overlay.mjs",
-      "default": "./fesm2022/radix-ng-primitives-overlay.mjs"
-    },
     "./progress": {
       "types": "./progress/index.d.ts",
       "esm2022": "./esm2022/progress/radix-ng-primitives-progress.mjs",
@@ -98,17 +103,11 @@
       "esm": "./esm2022/toggle/radix-ng-primitives-toggle.mjs",
       "default": "./fesm2022/radix-ng-primitives-toggle.mjs"
     },
-    "./tooltip": {
-      "types": "./tooltip/index.d.ts",
-      "esm2022": "./esm2022/tooltip/radix-ng-primitives-tooltip.mjs",
-      "esm": "./esm2022/tooltip/radix-ng-primitives-tooltip.mjs",
-      "default": "./fesm2022/radix-ng-primitives-tooltip.mjs"
-    },
-    "./visually-hidden": {
-      "types": "./visually-hidden/index.d.ts",
-      "esm2022": "./esm2022/visually-hidden/radix-ng-primitives-visually-hidden.mjs",
-      "esm": "./esm2022/visually-hidden/radix-ng-primitives-visually-hidden.mjs",
-      "default": "./fesm2022/radix-ng-primitives-visually-hidden.mjs"
+    "./toggle-group": {
+      "types": "./toggle-group/index.d.ts",
+      "esm2022": "./esm2022/toggle-group/radix-ng-primitives-toggle-group.mjs",
+      "esm": "./esm2022/toggle-group/radix-ng-primitives-toggle-group.mjs",
+      "default": "./fesm2022/radix-ng-primitives-toggle-group.mjs"
     }
   }
 }

package/progress/index.d.ts

@@ -1,2 +1,3 @@
 export * from './src/progress-indicator.directive';
-export * from './src/progress.directive';
+export * from './src/progress-root.directive';
+export type { ProgressProps } from './src/progress-root.directive';

package/progress/src/progress-indicator.directive.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class RdxProgressIndicatorDirective {
-    protected readonly progress: import("@radix-ng/primitives/progress").RdxProgressDirective;
+    readonly _progress: import("./progress-root.directive").RdxProgressRootDirective;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxProgressIndicatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxProgressIndicatorDirective, "[rdxProgressIndicator]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxProgressIndicatorDirective, "div[ProgressIndicator]", ["ProgressIndicator"], {}, {}, never, never, true, never>;
 }

package/progress/src/progress-root.directive.d.ts

@@ -0,0 +1,29 @@
+import * as i0 from "@angular/core";
+export declare function injectProgress(): RdxProgressRootDirective;
+export type ProgressState = 'indeterminate' | 'loading' | 'complete';
+export interface ProgressProps {
+    value?: number | null | undefined;
+    max?: number;
+    getValueLabel?: string;
+}
+export declare class RdxProgressRootDirective implements ProgressProps {
+    id: string;
+    value: number;
+    /**
+     * @default 100
+     */
+    max: number;
+    valueLabel: (value: number, max: number) => string;
+    /**
+     * Get the state of the progress bar.
+     * @returns 'indeterminate' | 'loading' | 'complete'
+     * @internal
+     */
+    get state(): ProgressState;
+    private getProgressState;
+    private defaultGetValueLabel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxProgressRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxProgressRootDirective, "div[ProgressRoot]", ["ProgressRoot"], { "id": { "alias": "id"; "required": false; }; "value": { "alias": "rdxValue"; "required": false; }; "max": { "alias": "rdxMax"; "required": false; }; "valueLabel": { "alias": "rdxValueLabel"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_value: unknown;
+    static ngAcceptInputType_max: unknown;
+}

package/radio/index.d.ts

@@ -1,5 +1,3 @@
-export * from './src/radio-group.directive';
-export * from './src/radio-group.token';
+export * from './src/radio-root.directive';
 export * from './src/radio-indicator.directive';
 export * from './src/radio-item.directive';
-export * from './src/radio-item.token';

package/radio/src/radio-indicator.directive.d.ts

@@ -1,13 +1,7 @@
 import * as i0 from "@angular/core";
 export declare class RdxRadioIndicatorDirective {
-    /**
-     * Access the radio group.
-     */
-    protected readonly radioGroup: import("@radix-ng/primitives/radio").RdxRadioGroupDirective;
-    /**
-     * Access the radio group item.
-     */
-    protected readonly radioItem: import("@radix-ng/primitives/radio").RdxRadioItemDirective;
+    protected readonly radioGroup: import("./radio-root.directive").RdxRadioGroupDirective;
+    protected readonly radioItem: import("./radio-item.directive").RdxRadioItemDirective;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioIndicatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioIndicatorDirective, "[rdxRadioIndicator]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioIndicatorDirective, "[RadioIndicator]", ["RadioIndicator"], {}, {}, never, never, true, never>;
 }

package/radio/src/radio-item.directive.d.ts

@@ -1,36 +1,17 @@
+import { InjectionToken } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/roving-focus";
+export declare const RdxRadioItemToken: InjectionToken<RdxRadioItemDirective>;
+export declare function injectRadioItem(): RdxRadioItemDirective;
 export declare class RdxRadioItemDirective {
-    /**
-     * Access the radio group.
-     */
-    protected readonly radioGroup: import("@radix-ng/primitives/radio").RdxRadioGroupDirective;
-    /**
-     * The value of the radio item.
-     */
+    protected readonly radioGroup: import("./radio-root.directive").RdxRadioGroupDirective;
+    id: string;
     value: string;
-    /**
-     * Whether the radio item is disabled.
-     * @default false
-     */
     disabled: boolean;
-    /**
-     * Handle keydown events.
-     * @param event The keydown event.
-     * @internal
-     */
-    protected onKeydown(event: KeyboardEvent): void;
-    /**
-     * When the item receives focus, select it.
-     * @internal
-     */
-    protected onFocus(): void;
-    /**
-     * When the item receives a click, select it.
-     * @internal
-     */
-    protected onClick(): void;
+    _onKeydown(event: KeyboardEvent): void;
+    _onFocus(): void;
+    _onClick(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioItemDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioItemDirective, "button[rdxRadioItem]", never, { "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioItemDirective, "[RadioItem]", ["RadioItem"], { "id": { "alias": "id"; "required": false; }; "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_disabled: unknown;
 }

package/radio/src/{radio-group.directive.d.ts → radio-root.directive.d.ts}

@@ -1,25 +1,32 @@
-import { EventEmitter } from '@angular/core';
+import { ChangeDetectorRef, EventEmitter, InjectionToken } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/roving-focus";
-export declare class RdxRadioGroupDirective implements ControlValueAccessor {
-    /**
-     * The value of the radio group.
-     */
+export declare const RdxRadioGroupToken: InjectionToken<RdxRadioGroupDirective>;
+export declare function injectRadioGroup(): RdxRadioGroupDirective;
+interface RadioGroupProps {
+    name?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: EventEmitter<string>;
+}
+export declare class RdxRadioGroupDirective implements RadioGroupProps, ControlValueAccessor {
+    private readonly changeDetector;
     value?: string;
-    /**
-     * Whether the radio group is disabled.
-     */
     disabled: boolean;
     /**
-     * The orientation of the radio group.
-     * @default 'horizontal'
+     * The orientation of the radio group only vertical.
+     * Horizontal radio buttons can sometimes be challenging to scan and localize.
+     * The horizontal arrangement of radio buttons may also lead to difficulties in determining which
+     * label corresponds to which button: whether the label is above or below the button.
+     * @default 'vertical'
      */
-    orientation: 'horizontal' | 'vertical';
+    readonly _orientation = "vertical";
     /**
      * Event emitted when the value of the radio group changes.
      */
-    readonly valueChange: EventEmitter<string>;
+    readonly onValueChange: EventEmitter<string>;
     /**
      * The callback function to call when the value of the radio group changes.
      * @internal
@@ -30,6 +37,7 @@ export declare class RdxRadioGroupDirective implements ControlValueAccessor {
      * @internal
      */
     private onTouched?;
+    constructor(changeDetector: ChangeDetectorRef);
     /**
      * Select a radio item.
      * @param value The value of the radio item to select.
@@ -55,11 +63,11 @@ export declare class RdxRadioGroupDirective implements ControlValueAccessor {
      */
     setDisabledState(isDisabled: boolean): void;
     /**
-     * When focus leaves the radio group, mark it as touched.
-     * @internal
+     * When focus leaves the radio group.
      */
-    protected onFocusout(): void;
+    _onFocusout(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRadioGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "[rdxRadioGroup]", never, { "value": { "alias": "rdxRadioGroupValue"; "required": false; }; "disabled": { "alias": "rdxRadioGroupDisabled"; "required": false; }; "orientation": { "alias": "rdxRadioGroupOrientation"; "required": false; }; }, { "valueChange": "rdxRadioGroupValueChange"; }, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRadioGroupDirective, "div[RadioRoot]", ["RadioRoot"], { "value": { "alias": "rdxValue"; "required": false; }; "disabled": { "alias": "rdxDisabled"; "required": false; }; }, { "onValueChange": "rdxOnValueChange"; }, never, never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
     static ngAcceptInputType_disabled: unknown;
 }
+export {};

package/roving-focus/index.d.ts

@@ -1,4 +1,2 @@
 export * from './src/roving-focus-group.directive';
-export * from './src/roving-focus-group.token';
 export * from './src/roving-focus-item.directive';
-export * from './src/roving-focus-item.token';

package/roving-focus/src/roving-focus-group.directive.d.ts

@@ -2,6 +2,8 @@ import { FocusKeyManager } from '@angular/cdk/a11y';
 import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import type { RdxRovingFocusItemDirective } from './roving-focus-item.directive';
 import * as i0 from "@angular/core";
+export type Orientation = 'horizontal' | 'vertical';
+export declare function injectRovingFocusGroup(): RdxRovingFocusGroupDirective;
 export declare class RdxRovingFocusGroupDirective implements OnInit, OnChanges, OnDestroy {
     private readonly directionality;
     private readonly destroyRef;
@@ -10,16 +12,12 @@ export declare class RdxRovingFocusGroupDirective implements OnInit, OnChanges,
      * We don't use ContentChildren as dynamically added items may not be in the correct order.
      */
     private readonly items;
-    /**
-     * Create the focus key manager instance.
-     * @internal
-     */
     readonly keyManager: FocusKeyManager<RdxRovingFocusItemDirective>;
     /**
      * Determine the orientation of the roving focus group.
      * @default vertical
      */
-    orientation: 'horizontal' | 'vertical';
+    orientation: Orientation;
     /**
      * Determine if focus should wrap when the end or beginning is reached.
      * @default true
@@ -48,8 +46,8 @@ export declare class RdxRovingFocusGroupDirective implements OnInit, OnChanges,
      * Set the orientation of the roving focus group.
      * @param orientation The orientation of the roving focus group.
      */
-    setOrientation(orientation: 'horizontal' | 'vertical'): void;
+    setOrientation(orientation: Orientation): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxRovingFocusGroupDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRovingFocusGroupDirective, "[rdxRovingFocusGroup]", never, { "orientation": { "alias": "orientation"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxRovingFocusGroupDirective, "[rdxRovingFocusGroup]", never, { "orientation": { "alias": "rdxRovingFocusGroupOrientation"; "required": false; }; "wrap": { "alias": "rdxRovingFocusGroupWrap"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_wrap: unknown;
 }

package/roving-focus/src/roving-focus-item.directive.d.ts

@@ -1,6 +1,7 @@
 import { FocusableOption } from '@angular/cdk/a11y';
 import { OnDestroy, OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
+export declare function injectRovingFocusItem(): RdxRovingFocusItemDirective;
 export declare class RdxRovingFocusItemDirective implements OnInit, OnDestroy, FocusableOption {
     /**
      * Access the group the roving focus item belongs to.
@@ -26,22 +27,19 @@ export declare class RdxRovingFocusItemDirective implements OnInit, OnDestroy, F
      * Define if the item is disabled.
      */
     disabled: boolean;
-    /**
-     * Derive the tabindex of the roving focus item.
-     * @internal
-     */
-    get tabindex(): number;
     ngOnInit(): void;
     ngOnDestroy(): void;
     /**
      * Handle key events on the roving focus item.
      * @param event The key event.
-     * @internal
      */
-    onKeydown(event: KeyboardEvent): void;
+    _onKeydown(event: KeyboardEvent): void;
+    /**
+     * Derive the tabindex of the roving focus item.
+     */
+    _tabindex(): number;
     /**
      * Focus the roving focus item.
-     * @param origin The origin of the focus request.
      * @internal
      */
     focus(): void;

package/separator/src/separator.directive.d.ts

@@ -1,16 +1,22 @@
 import * as i0 from "@angular/core";
-export declare class RdxSeparatorDirective {
+declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type Orientation = (typeof ORIENTATIONS)[number];
+export interface SeparatorProps {
     /**
-     * The orientation of the separator.
-     * @default 'horizontal'
+     * Either `vertical` or `horizontal`. Defaults to `horizontal`.
      */
-    orientation: 'horizontal' | 'vertical';
+    orientation?: Orientation;
     /**
-     * Whether the separator is for decoration purposes. If true, the separator will not be included in the accessibility tree.
-     * @default false
+     * Whether the component is purely decorative. When true, accessibility-related attributes
+     * are updated so that the rendered element is removed from the accessibility tree.
      */
+    decorative?: boolean;
+}
+export declare class RdxSeparatorRootDirective implements SeparatorProps {
+    orientation: Orientation;
     decorative: boolean;
-    static ɵfac: i0.ɵɵFactoryDeclaration<RdxSeparatorDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSeparatorDirective, "[rdxSeparator]", never, { "orientation": { "alias": "rdxSeparatorOrientation"; "required": false; }; "decorative": { "alias": "rdxSeparatorDecorative"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxSeparatorRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSeparatorRootDirective, "div[SeparatorRoot]", never, { "orientation": { "alias": "rdxOrientation"; "required": false; }; "decorative": { "alias": "rdxDecorative"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_decorative: unknown;
 }
+export {};

package/switch/index.d.ts

@@ -1,3 +1,3 @@
 export * from './src/switch-thumb.directive';
-export * from './src/switch.directive';
-export * from './src/switch.token';
+export * from './src/switch-root.directive';
+export type { SwitchProps } from './src/switch-root.directive';

package/switch/src/switch-root.directive.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter, InjectionToken } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i0 from "@angular/core";
+export declare const RdxSwitchToken: InjectionToken<RdxSwitchRootDirective>;
+export declare function injectSwitch(): RdxSwitchRootDirective;
+export interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    required?: boolean;
+    onCheckedChange?: EventEmitter<boolean>;
+}
+export declare class RdxSwitchRootDirective implements SwitchProps, ControlValueAccessor {
+    required: boolean;
+    checked: boolean;
+    disabled: boolean;
+    readonly onCheckedChange: EventEmitter<boolean>;
+    /**
+     * The method to be called in order to update ngModel.
+     */
+    _onChange?: (checked: boolean) => void;
+    /**
+     * onTouch function registered via registerOnTouch (ControlValueAccessor).
+     */
+    _onTouched?: () => void;
+    registerOnChange(fn: (checked: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    writeValue(checked: boolean): void;
+    setDisabledState(isDisabled: boolean): void;
+    _toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxSwitchRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSwitchRootDirective, "button[SwitchRoot]", ["SwitchRoot"], { "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onCheckedChange": "onCheckedChange"; }, never, never, true, never>;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_checked: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}

package/switch/src/switch-thumb.directive.d.ts

@@ -1,9 +1,6 @@
 import * as i0 from "@angular/core";
 export declare class RdxSwitchThumbDirective {
-    /**
-     * Access the switch directive.
-     */
-    protected readonly switch: import("@radix-ng/primitives/switch").RdxSwitchDirective;
+    protected readonly switchRoot: import("./switch-root.directive").RdxSwitchRootDirective;
     static ɵfac: i0.ɵɵFactoryDeclaration<RdxSwitchThumbDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSwitchThumbDirective, "[rdxSwitchThumb]", never, {}, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxSwitchThumbDirective, "span[SwitchThumb]", ["SwitchThumb"], {}, {}, never, never, true, never>;
 }

package/toggle/index.d.ts

@@ -1 +1,2 @@
-export * from './src/toggle.directive';
+export * from './src/toggle-root.directive';
+export type { ToggleProps } from './src/toggle-root.directive';

package/toggle/src/toggle-root.directive.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+export interface ToggleProps {
+    /**
+     * The controlled state of the toggle.
+     */
+    pressed?: boolean;
+    /**
+     * The state of the toggle when initially rendered. Use `defaultPressed`
+     * if you do not need to control the state of the toggle.
+     * @defaultValue false
+     */
+    defaultPressed?: boolean;
+    /**
+     * The callback that fires when the state of the toggle changes.
+     */
+    onPressedChange?: EventEmitter<boolean>;
+}
+export declare class RdxToggleRootDirective implements ToggleProps {
+    pressed: boolean;
+    disabled: boolean;
+    id: string;
+    /**
+     * Event emitted when the toggle is pressed.
+     */
+    readonly onPressedChange: EventEmitter<boolean>;
+    _toggle(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleRootDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleRootDirective, "button[ToggleRoot]", ["ToggleRoot"], { "pressed": { "alias": "rdxTogglePressed"; "required": false; }; "disabled": { "alias": "rdxToggleDisabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "onPressedChange": "rdxToggleOnPressedChange"; }, never, never, true, never>;
+    static ngAcceptInputType_pressed: unknown;
+    static ngAcceptInputType_disabled: unknown;
+}

package/toggle-group/README.md

@@ -0,0 +1,3 @@
+# @radix-ng/primitives/toggle-group
+
+Secondary entry point of `@radix-ng/primitives/toggle-group`.

package/toggle-group/index.d.ts

@@ -0,0 +1,5 @@
+export * from './src/toggle-group-button.directive';
+export * from './src/toggle-group-button.token';
+export * from './src/toggle-group-multi.directive';
+export * from './src/toggle-group.directive';
+export * from './src/toggle-group.token';

package/toggle-group/src/toggle-group-button.directive.d.ts

@@ -0,0 +1,39 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/roving-focus";
+export declare class RdxToggleGroupButtonDirective implements OnChanges {
+    /**
+     * Access the toggle group.
+     */
+    protected readonly toggleGroup: import("@radix-ng/primitives/toggle-group").RdxToggleGroupDirective | import("@radix-ng/primitives/toggle-group").RdxToggleGroupMultiDirective;
+    /**
+     * Access the roving focus item.
+     */
+    private readonly rovingFocusItem;
+    /**
+     * The value of this toggle button.
+     */
+    value: string;
+    /**
+     * Whether this toggle button is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether this toggle button is checked.
+     */
+    protected get checked(): boolean;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * Toggle this toggle button.
+     */
+    toggle(): void;
+    /**
+     * Ensure the disabled state is propagated to the roving focus item.
+     * @internal
+     */
+    updateDisabled(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupButtonDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupButtonDirective, "button[rdxToggleGroupButton]", never, { "value": { "alias": "rdxToggleGroupButtonValue"; "required": true; }; "disabled": { "alias": "rdxToggleGroupButtonDisabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.RdxRovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_disabled: unknown;
+}

package/toggle-group/src/toggle-group-button.token.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';
+export declare const RdxToggleGroupButtonToken: InjectionToken<RdxToggleGroupButtonDirective>;
+export declare function injectToggleGroupButton(): RdxToggleGroupButtonDirective;

package/toggle-group/src/toggle-group-multi.directive.d.ts

@@ -0,0 +1,90 @@
+import { AfterContentInit, EventEmitter, OnChanges, OnInit, QueryList, SimpleChanges } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import type { RdxToggleGroupButtonDirective } from './toggle-group-button.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/roving-focus";
+export declare class RdxToggleGroupMultiDirective implements OnInit, OnChanges, AfterContentInit, ControlValueAccessor {
+    /**
+     * Access the roving focus group
+     */
+    private readonly rovingFocusGroup;
+    /**
+     * The selected toggle button.
+     */
+    value: ReadonlyArray<string>;
+    /**
+     * The orientation of the toggle group.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Whether the toggle group is disabled.
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Whether the toggle group roving focus should wrap.
+     * @default true
+     */
+    wrap: boolean;
+    /**
+     * Event emitted when the selected toggle button changes.
+     */
+    readonly valueChange: EventEmitter<readonly string[]>;
+    /**
+     * Access the buttons in the toggle group.
+     */
+    protected buttons?: QueryList<RdxToggleGroupButtonDirective>;
+    /**
+     * The value change callback.
+     */
+    private onChange?;
+    /**
+     * onTouch function registered via registerOnTouch (ControlValueAccessor).
+     */
+    protected onTouched?: () => void;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterContentInit(): void;
+    /**
+     * Determine if a value is selected.
+     * @param value The value to check.
+     * @returns Whether the value is selected.
+     * @internal
+     */
+    isSelected(value: string): boolean;
+    /**
+     * Toggle a value.
+     * @param value The value to toggle.
+     * @internal
+     */
+    toggle(value: string): void;
+    /**
+     * Select a value from Angular forms.
+     * @param value The value to select.
+     * @internal
+     */
+    writeValue(value: ReadonlyArray<string>): void;
+    /**
+     * Register a callback to be called when the value changes.
+     * @param fn The callback to register.
+     * @internal
+     */
+    registerOnChange(fn: (value: ReadonlyArray<string>) => void): void;
+    /**
+     * Register a callback to be called when the toggle group is touched.
+     * @param fn The callback to register.
+     * @internal
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Set the disabled state of the toggle group.
+     * @param isDisabled Whether the toggle group is disabled.
+     * @internal
+     */
+    setDisabledState(isDisabled: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RdxToggleGroupMultiDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RdxToggleGroupMultiDirective, "[rdxToggleGroupMulti]", never, { "value": { "alias": "rdxToggleGroupMultiValue"; "required": false; }; "orientation": { "alias": "rdxToggleGroupMultiOrientation"; "required": false; }; "disabled": { "alias": "rdxToggleGroupMultiDisabled"; "required": false; }; "wrap": { "alias": "rdxToggleGroupMultiWrap"; "required": false; }; "valueChange": { "alias": "rdxToggleGroupMultiValueChange"; "required": false; }; }, {}, ["buttons"], never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: { "rdxRovingFocusGroupWrap": "wrap"; "rdxRovingFocusGroupOrientation": "orientation"; }; outputs: {}; }]>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_wrap: unknown;
+}