@radix-ng/primitives 0.1.0 → 0.2.0

package/fesm2022/radix-ng-primitives-switch.mjs

@@ -0,0 +1,158 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, EventEmitter, booleanAttribute, Directive, Input, Output, HostListener } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+const SwitchToken = new InjectionToken('SwitchToken');
+function injectSwitch() {
+    return inject(SwitchToken);
+}
+
+class SwitchDirective {
+    constructor() {
+        /**
+         * Access the element ref.
+         */
+        this.elementRef = inject(ElementRef);
+        /**
+         * Determine if the switch is a button
+         */
+        this.isButton = this.elementRef.nativeElement.tagName === 'BUTTON';
+        /**
+         * Determine if the switch is checked.
+         * The controlled state of the switch.
+         * @default false
+         */
+        this.checked = false;
+        /**
+         * Determine if the switch is disabled.
+         * When true, prevents the user from interacting with the switch.
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Event emitted when the checked state changes.
+         */
+        this.checkedChange = new EventEmitter();
+    }
+    /**
+     * Register the onChange callback.
+     * @param fn The onChange callback.
+     * @internal
+     */
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    /**
+     * Register the onTouched callback.
+     * @param fn The onTouched callback.
+     * @internal
+     */
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /**
+     * Write the value to the checked state.
+     * @param checked The checked state.
+     * @internal
+     */
+    writeValue(checked) {
+        this.checked = checked;
+    }
+    /**
+     * Set the disabled state.
+     * @param isDisabled The disabled state.
+     * @internal
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /**
+     * Toggle the checked state.
+     */
+    toggle() {
+        if (this.disabled) {
+            return;
+        }
+        this.checked = !this.checked;
+        this.checkedChange.emit(this.checked);
+        this.onChange?.(this.checked);
+    }
+    /**
+     * Handle the keydown event.
+     */
+    onKeyDown() {
+        // If the switch is not a button then the space key will not toggle the checked state automatically,
+        // so we need to do it manually.
+        if (!this.isButton) {
+            this.toggle();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SwitchDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "17.3.3", type: SwitchDirective, isStandalone: true, selector: "[rdxSwitch]", inputs: { checked: ["checked", "checked", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { checkedChange: "checkedChange" }, host: { attributes: { "role": "switch" }, listeners: { "focus": "onTouched?.()", "click": "toggle()", "keydown.space": "onKeyDown()" }, properties: { "attr.type": "isButton ? \"button\" : null", "attr.aria-checked": "checked", "attr.data-state": "checked ? \"checked\" : \"unchecked\"", "attr.data-disabled": "disabled ? \"true\" : null", "attr.disabled": "isButton && disabled ? disabled : null" } }, providers: [
+            { provide: SwitchToken, useExisting: SwitchDirective },
+            { provide: NG_VALUE_ACCESSOR, useExisting: SwitchDirective, multi: true }
+        ], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SwitchDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSwitch]',
+                    standalone: true,
+                    providers: [
+                        { provide: SwitchToken, useExisting: SwitchDirective },
+                        { provide: NG_VALUE_ACCESSOR, useExisting: SwitchDirective, multi: true }
+                    ],
+                    host: {
+                        role: 'switch',
+                        '[attr.type]': 'isButton ? "button" : null',
+                        '[attr.aria-checked]': 'checked',
+                        '[attr.data-state]': 'checked ? "checked" : "unchecked"',
+                        '[attr.data-disabled]': 'disabled ? "true" : null',
+                        '[attr.disabled]': 'isButton && disabled ? disabled : null',
+                        '(focus)': 'onTouched?.()'
+                    }
+                }]
+        }], propDecorators: { checked: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], checkedChange: [{
+                type: Output
+            }], toggle: [{
+                type: HostListener,
+                args: ['click']
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown.space']
+            }] } });
+
+class SwitchThumbDirective {
+    constructor() {
+        /**
+         * Access the switch directive.
+         */
+        this.switch = injectSwitch();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SwitchThumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: SwitchThumbDirective, isStandalone: true, selector: "[rdxSwitchThumb]", host: { properties: { "attr.data-state": "switch.checked ? \"checked\" : \"unchecked\"", "attr.data-disabled": "switch.disabled ? \"true\" : null" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SwitchThumbDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxSwitchThumb]',
+                    standalone: true,
+                    host: {
+                        '[attr.data-state]': 'switch.checked ? "checked" : "unchecked"',
+                        '[attr.data-disabled]': 'switch.disabled ? "true" : null'
+                    }
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { SwitchDirective, SwitchThumbDirective, SwitchToken, injectSwitch };
+//# sourceMappingURL=radix-ng-primitives-switch.mjs.map

package/fesm2022/radix-ng-primitives-switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-switch.mjs","sources":["../../../packages/primitives/switch/src/switch.token.ts","../../../packages/primitives/switch/src/switch.directive.ts","../../../packages/primitives/switch/src/switch-thumb.directive.ts","../../../packages/primitives/switch/radix-ng-primitives-switch.ts"],"sourcesContent":["import { InjectionToken, inject } from '@angular/core';\nimport type { SwitchDirective } from './switch.directive';\n\nexport const SwitchToken = new InjectionToken<SwitchDirective>('SwitchToken');\n\nexport function injectSwitch(): SwitchDirective {\n    return inject(SwitchToken);\n}\n","import {\n    Directive,\n    ElementRef,\n    EventEmitter,\n    HostListener,\n    Input,\n    Output,\n    booleanAttribute,\n    inject\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { SwitchToken } from './switch.token';\n\n@Directive({\n    selector: '[rdxSwitch]',\n    standalone: true,\n    providers: [\n        { provide: SwitchToken, useExisting: SwitchDirective },\n        { provide: NG_VALUE_ACCESSOR, useExisting: SwitchDirective, multi: true }\n    ],\n    host: {\n        role: 'switch',\n        '[attr.type]': 'isButton ? \"button\" : null',\n        '[attr.aria-checked]': 'checked',\n        '[attr.data-state]': 'checked ? \"checked\" : \"unchecked\"',\n        '[attr.data-disabled]': 'disabled ? \"true\" : null',\n        '[attr.disabled]': 'isButton && disabled ? disabled : null',\n        '(focus)': 'onTouched?.()'\n    }\n})\nexport class SwitchDirective implements ControlValueAccessor {\n    /**\n     * Access the element ref.\n     */\n    private readonly elementRef = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    /**\n     * Determine if the switch is a button\n     */\n    protected isButton = this.elementRef.nativeElement.tagName === 'BUTTON';\n\n    /**\n     * Determine if the switch is checked.\n     * The controlled state of the switch.\n     * @default false\n     */\n    @Input({ transform: booleanAttribute }) checked = false;\n\n    /**\n     * Determine if the switch is disabled.\n     * When true, prevents the user from interacting with the switch.\n     * @default false\n     */\n    @Input({ transform: booleanAttribute }) disabled = false;\n\n    /**\n     * Event emitted when the checked state changes.\n     */\n    @Output() readonly checkedChange = new EventEmitter<boolean>();\n\n    /**\n     * Store the onChange callback.\n     */\n    private onChange?: (checked: boolean) => void;\n\n    /**\n     * Store the onTouched callback.\n     */\n    protected onTouched?: () => void;\n\n    /**\n     * Register the onChange callback.\n     * @param fn The onChange callback.\n     * @internal\n     */\n    registerOnChange(fn: (checked: boolean) => void): void {\n        this.onChange = fn;\n    }\n\n    /**\n     * Register the onTouched callback.\n     * @param fn The onTouched callback.\n     * @internal\n     */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /**\n     * Write the value to the checked state.\n     * @param checked The checked state.\n     * @internal\n     */\n    writeValue(checked: boolean): void {\n        this.checked = checked;\n    }\n\n    /**\n     * Set the disabled state.\n     * @param isDisabled The disabled state.\n     * @internal\n     */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    /**\n     * Toggle the checked state.\n     */\n    @HostListener('click')\n    toggle(): void {\n        if (this.disabled) {\n            return;\n        }\n\n        this.checked = !this.checked;\n        this.checkedChange.emit(this.checked);\n        this.onChange?.(this.checked);\n    }\n\n    /**\n     * Handle the keydown event.\n     */\n    @HostListener('keydown.space')\n    protected onKeyDown(): void {\n        // If the switch is not a button then the space key will not toggle the checked state automatically,\n        // so we need to do it manually.\n        if (!this.isButton) {\n            this.toggle();\n        }\n    }\n}\n","import { Directive } from '@angular/core';\nimport { injectSwitch } from './switch.token';\n\n@Directive({\n    selector: '[rdxSwitchThumb]',\n    standalone: true,\n    host: {\n        '[attr.data-state]': 'switch.checked ? \"checked\" : \"unchecked\"',\n        '[attr.data-disabled]': 'switch.disabled ? \"true\" : null'\n    }\n})\nexport class SwitchThumbDirective {\n    /**\n     * Access the switch directive.\n     */\n    protected readonly switch = injectSwitch();\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/radix-ng-primitives-visually-hidden.mjs

@@ -0,0 +1,49 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive } from '@angular/core';
+
+class VisuallyHiddenDirective {
+    constructor() {
+        /**
+         * Access the element.
+         */
+        this.element = inject(ElementRef);
+    }
+    ngOnInit() {
+        // hide the element
+        Object.assign(this.element.nativeElement.style, {
+            position: 'absolute',
+            border: 0,
+            width: '1px',
+            height: '1px',
+            padding: 0,
+            margin: '-1px',
+            overflow: 'hidden',
+            clip: 'rect(0, 0, 0, 0)',
+            whiteSpace: 'nowrap',
+            wordWrap: 'normal',
+            // Avoid browsers rendering the focus ring in some cases.
+            outline: 'none',
+            appearance: 'none',
+            // Avoid some cases where the browser will still render the native controls
+            '-webkit-appearance': 'none',
+            '-moz-appearance': 'none',
+            left: 0
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: VisuallyHiddenDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", type: VisuallyHiddenDirective, isStandalone: true, selector: "[rdxVisuallyHidden]", ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: VisuallyHiddenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxVisuallyHidden]',
+                    standalone: true
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { VisuallyHiddenDirective };
+//# sourceMappingURL=radix-ng-primitives-visually-hidden.mjs.map

package/fesm2022/radix-ng-primitives-visually-hidden.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives-visually-hidden.mjs","sources":["../../../packages/primitives/visually-hidden/src/visually-hidden.directive.ts","../../../packages/primitives/visually-hidden/radix-ng-primitives-visually-hidden.ts"],"sourcesContent":["import { Directive, ElementRef, OnInit, inject } from '@angular/core';\n\n@Directive({\n    selector: '[rdxVisuallyHidden]',\n    standalone: true\n})\nexport class VisuallyHiddenDirective implements OnInit {\n    /**\n     * Access the element.\n     */\n    private readonly element = inject<ElementRef<HTMLElement>>(ElementRef);\n\n    ngOnInit(): void {\n        // hide the element\n        Object.assign(this.element.nativeElement.style, {\n            position: 'absolute',\n            border: 0,\n            width: '1px',\n            height: '1px',\n            padding: 0,\n            margin: '-1px',\n            overflow: 'hidden',\n            clip: 'rect(0, 0, 0, 0)',\n            whiteSpace: 'nowrap',\n            wordWrap: 'normal',\n            // Avoid browsers rendering the focus ring in some cases.\n            outline: 'none',\n            appearance: 'none',\n            // Avoid some cases where the browser will still render the native controls\n            '-webkit-appearance': 'none',\n            '-moz-appearance': 'none',\n            left: 0\n        });\n    }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;MAMa,uBAAuB,CAAA;AAJpC,IAAA,WAAA,GAAA;AAKI;;AAEG;AACc,QAAA,IAAA,CAAA,OAAO,GAAG,MAAM,CAA0B,UAAU,CAAC,CAAC;AAwB1E,KAAA;IAtBG,QAAQ,GAAA;;QAEJ,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,EAAE;AAC5C,YAAA,QAAQ,EAAE,UAAU;AACpB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,KAAK,EAAE,KAAK;AACZ,YAAA,MAAM,EAAE,KAAK;AACb,YAAA,OAAO,EAAE,CAAC;AACV,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,IAAI,EAAE,kBAAkB;AACxB,YAAA,UAAU,EAAE,QAAQ;AACpB,YAAA,QAAQ,EAAE,QAAQ;;AAElB,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,UAAU,EAAE,MAAM;;AAElB,YAAA,oBAAoB,EAAE,MAAM;AAC5B,YAAA,iBAAiB,EAAE,MAAM;AACzB,YAAA,IAAI,EAAE,CAAC;AACV,SAAA,CAAC,CAAC;KACN;8GA3BQ,uBAAuB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA,EAAA;kGAAvB,uBAAuB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qBAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA,EAAA;;2FAAvB,uBAAuB,EAAA,UAAA,EAAA,CAAA;kBAJnC,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACP,oBAAA,QAAQ,EAAE,qBAAqB;AAC/B,oBAAA,UAAU,EAAE,IAAI;AACnB,iBAAA,CAAA;;;ACLD;;AAEG;;;;"}

package/fesm2022/radix-ng-primitives.mjs

@@ -0,0 +1,4 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=radix-ng-primitives.mjs.map

package/fesm2022/radix-ng-primitives.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"radix-ng-primitives.mjs","sources":["../../../packages/primitives/radix-ng-primitives.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA;;AAEG"}

package/label/src/label.directive.d.ts

@@ -0,0 +1,14 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class LabelDirective {
+    private el;
+    /**
+     * The id of the element the label is associated with.
+     * @default '-'
+     */
+    htmlFor: string;
+    constructor(el: ElementRef);
+    onMouseDown(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LabelDirective, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<LabelDirective, "label[rdxLabel]", never, { "htmlFor": { "alias": "htmlFor"; "required": false; }; }, {}, never, never, true, never>;
+}

package/package.json

@@ -1,25 +1,89 @@
 {
-    "name": "@radix-ng/primitives",
-    "version": "0.1.0",
-    "license": "MIT",
-    "publishConfig": {
-        "access": "public"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/radix-ng/primitives.git",
-        "directory": "packages/primitives"
-    },
-    "keywords": [
-        "components",
-        "ui",
-        "angular",
-        "radix-ng",
-        "headless"
-    ],
-    "peerDependencies": {
-        "@angular/core": "^17.3.3",
-        "@angular/cdk": "^17.3.3"
-    },
-    "sideEffects": false
-}
+  "name": "@radix-ng/primitives",
+  "version": "0.2.0",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/radix-ng/primitives.git",
+    "directory": "packages/primitives"
+  },
+  "keywords": [
+    "components",
+    "ui",
+    "angular",
+    "radix-ng",
+    "headless"
+  ],
+  "peerDependencies": {
+    "@angular/core": "^17.0.0",
+    "@angular/cdk": "^17.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/radix-ng-primitives.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/radix-ng-primitives.mjs",
+      "esm": "./esm2022/radix-ng-primitives.mjs",
+      "default": "./fesm2022/radix-ng-primitives.mjs"
+    },
+    "./checkbox": {
+      "types": "./checkbox/index.d.ts",
+      "esm2022": "./esm2022/checkbox/radix-ng-primitives-checkbox.mjs",
+      "esm": "./esm2022/checkbox/radix-ng-primitives-checkbox.mjs",
+      "default": "./fesm2022/radix-ng-primitives-checkbox.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"
+    },
+    "./progress": {
+      "types": "./progress/index.d.ts",
+      "esm2022": "./esm2022/progress/radix-ng-primitives-progress.mjs",
+      "esm": "./esm2022/progress/radix-ng-primitives-progress.mjs",
+      "default": "./fesm2022/radix-ng-primitives-progress.mjs"
+    },
+    "./radio": {
+      "types": "./radio/index.d.ts",
+      "esm2022": "./esm2022/radio/radix-ng-primitives-radio.mjs",
+      "esm": "./esm2022/radio/radix-ng-primitives-radio.mjs",
+      "default": "./fesm2022/radix-ng-primitives-radio.mjs"
+    },
+    "./roving-focus": {
+      "types": "./roving-focus/index.d.ts",
+      "esm2022": "./esm2022/roving-focus/radix-ng-primitives-roving-focus.mjs",
+      "esm": "./esm2022/roving-focus/radix-ng-primitives-roving-focus.mjs",
+      "default": "./fesm2022/radix-ng-primitives-roving-focus.mjs"
+    },
+    "./separator": {
+      "types": "./separator/index.d.ts",
+      "esm2022": "./esm2022/separator/radix-ng-primitives-separator.mjs",
+      "esm": "./esm2022/separator/radix-ng-primitives-separator.mjs",
+      "default": "./fesm2022/radix-ng-primitives-separator.mjs"
+    },
+    "./switch": {
+      "types": "./switch/index.d.ts",
+      "esm2022": "./esm2022/switch/radix-ng-primitives-switch.mjs",
+      "esm": "./esm2022/switch/radix-ng-primitives-switch.mjs",
+      "default": "./fesm2022/radix-ng-primitives-switch.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"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

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

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

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

@@ -0,0 +1,26 @@
+import * as i0 from "@angular/core";
+export declare class ProgressDirective {
+    /**
+     * Define the progress value.
+     */
+    value: number;
+    /**
+     * Define the progress max value.
+     * @default 100
+     */
+    max: number;
+    /**
+     * Define a function that returns the progress value label.
+     */
+    valueLabel: (value: number, max: number) => string;
+    /**
+     * Get the state of the progress bar.
+     * @returns 'indeterminate' | 'loading' | 'complete'
+     * @internal
+     */
+    get state(): 'indeterminate' | 'loading' | 'complete';
+    static ɵfac: i0.ɵɵFactoryDeclaration<ProgressDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ProgressDirective, "[rdxProgress]", never, { "value": { "alias": "rdxProgressValue"; "required": false; }; "max": { "alias": "rdxProgressMax"; "required": false; }; "valueLabel": { "alias": "rdxProgressValueLabel"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_value: unknown;
+    static ngAcceptInputType_max: unknown;
+}

package/progress/src/progress.token.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import type { ProgressDirective } from './progress.directive';
+export declare const ProgressToken: InjectionToken<ProgressDirective>;
+export declare function injectProgress(): ProgressDirective;

package/radio/README.md

@@ -0,0 +1 @@
+# @radix-ng/primitives/radio

package/radio/index.d.ts

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

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

@@ -0,0 +1,65 @@
+import { EventEmitter } 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 RadioGroupDirective implements ControlValueAccessor {
+    /**
+     * The value of the radio group.
+     */
+    value?: string;
+    /**
+     * Whether the radio group is disabled.
+     */
+    disabled: boolean;
+    /**
+     * The orientation of the radio group.
+     * @default 'horizontal'
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Event emitted when the value of the radio group changes.
+     */
+    readonly valueChange: EventEmitter<string>;
+    /**
+     * The callback function to call when the value of the radio group changes.
+     * @internal
+     */
+    private onChange?;
+    /**
+     * The callback function to call when the radio group is touched.
+     * @internal
+     */
+    private onTouched?;
+    /**
+     * Select a radio item.
+     * @param value The value of the radio item to select.
+     */
+    select(value: string): void;
+    /**
+     * Update the value of the radio group.
+     * @param value The new value of the radio group.
+     * @internal
+     */
+    writeValue(value: string): void;
+    /**
+     * Register a callback function to call when the value of the radio group changes.
+     * @param fn The callback function to call when the value of the radio group changes.
+     * @internal
+     */
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Set the disabled state of the radio group.
+     * @param isDisabled Whether the radio group is disabled.
+     * @internal
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /**
+     * When focus leaves the radio group, mark it as touched.
+     * @internal
+     */
+    protected onFocusout(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioGroupDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RadioGroupDirective, "[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.RovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_disabled: unknown;
+}

package/radio/src/radio-group.token.d.ts

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import type { RadioGroupDirective } from './radio-group.directive';
+export declare const RadioGroupToken: InjectionToken<RadioGroupDirective>;
+export declare function injectRadioGroup(): RadioGroupDirective;

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

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

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

@@ -0,0 +1,36 @@
+import * as i0 from "@angular/core";
+import * as i1 from "@radix-ng/primitives/roving-focus";
+export declare class RadioItemDirective {
+    /**
+     * Access the radio group.
+     */
+    protected readonly radioGroup: import("@radix-ng/primitives/radio").RadioGroupDirective;
+    /**
+     * The value of the radio item.
+     */
+    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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioItemDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RadioItemDirective, "button[rdxRadioItem]", never, { "value": { "alias": "value"; "required": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, [{ directive: typeof i1.RovingFocusItemDirective; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_disabled: unknown;
+}

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

@@ -0,0 +1,4 @@
+import { InjectionToken } from '@angular/core';
+import type { RadioItemDirective } from './radio-item.directive';
+export declare const RadioItemToken: InjectionToken<RadioItemDirective>;
+export declare function injectRadioItem(): RadioItemDirective;

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

@@ -0,0 +1,55 @@
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import type { RovingFocusItemDirective } from './roving-focus-item.directive';
+import * as i0 from "@angular/core";
+export declare class RovingFocusGroupDirective implements OnInit, OnChanges, OnDestroy {
+    private readonly directionality;
+    private readonly destroyRef;
+    /**
+     * Create a query list of all the roving focus items.
+     * 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<RovingFocusItemDirective>;
+    /**
+     * Determine the orientation of the roving focus group.
+     * @default vertical
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Determine if focus should wrap when the end or beginning is reached.
+     * @default true
+     */
+    wrap: boolean;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    /**
+     * Register a roving focus item.
+     * @param item The roving focus item to register.
+     */
+    register(item: RovingFocusItemDirective): void;
+    /**
+     * Unregister a roving focus item.
+     * @param item The roving focus item to unregister.
+     */
+    unregister(item: RovingFocusItemDirective): void;
+    /**
+     * Handle key events on the roving focus items.
+     * @param event The key event.
+     * @internal
+     */
+    onKeydown(event: KeyboardEvent): void;
+    /**
+     * Set the orientation of the roving focus group.
+     * @param orientation The orientation of the roving focus group.
+     */
+    setOrientation(orientation: 'horizontal' | 'vertical'): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RovingFocusGroupDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<RovingFocusGroupDirective, "[rdxRovingFocusGroup]", never, { "orientation": { "alias": "orientation"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_wrap: unknown;
+}

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

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+import type { RovingFocusGroupDirective } from './roving-focus-group.directive';
+export declare const RovingFocusGroupToken: InjectionToken<RovingFocusGroupDirective>;
+/**
+ * Inject the roving focus directive instance.
+ */
+export declare function injectRovingFocusGroup(): RovingFocusGroupDirective;