ngx-com 0.0.1 → 0.0.3

package/types/ngx-com-components-popover.d.ts

@@ -0,0 +1,309 @@
+import * as i0 from '@angular/core';
+import { InputSignal, TemplateRef, Type, InputSignalWithTransform, ModelSignal, OutputEmitterRef, Signal, InjectionToken } from '@angular/core';
+import { VariantProps, cva } from 'class-variance-authority';
+import { ConnectedPosition, ConnectionPositionPair } from '@angular/cdk/overlay';
+
+type PopoverPosition = 'above' | 'below' | 'left' | 'right' | 'auto';
+type PopoverAlignment = 'start' | 'center' | 'end';
+type PopoverTriggerOn = 'click' | 'focus' | 'manual';
+type PopoverVariant = 'default' | 'compact' | 'wide' | 'flush';
+type PopoverBackdrop = 'transparent' | 'dimmed' | 'none';
+type PopoverSide = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Popover panel styling variants.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--radius-popover`, `--radius-overlay`
+ */
+declare const popoverPanelVariants: ReturnType<typeof cva<{
+    variant: Record<PopoverVariant, string>;
+}>>;
+type PopoverPanelVariants = VariantProps<typeof popoverPanelVariants>;
+/**
+ * Popover arrow positioning variants.
+ * The arrow is positioned on the edge of the popover pointing toward the trigger.
+ *
+ * @tokens `--color-popover`, `--color-border`
+ */
+declare const popoverArrowVariants: ReturnType<typeof cva<{
+    side: Record<PopoverSide, string>;
+}>>;
+type PopoverArrowVariants = VariantProps<typeof popoverArrowVariants>;
+
+/**
+ * Popover trigger directive — manages the popover overlay lifecycle.
+ * Applied to the trigger element, it handles opening, closing, positioning,
+ * and accessibility for floating popover content.
+ *
+ * @tokens `--color-popover`, `--color-popover-foreground`, `--color-border`, `--shadow-lg`, `--color-ring`
+ *
+ * @example Basic usage with template
+ * ```html
+ * <button comButton [comPopoverTrigger]="helpContent">Help</button>
+ * <ng-template #helpContent>
+ *   <p>This is help content.</p>
+ * </ng-template>
+ * ```
+ *
+ * @example With positioning
+ * ```html
+ * <button
+ *   comButton
+ *   [comPopoverTrigger]="menuContent"
+ *   popoverPosition="below"
+ *   popoverAlignment="start"
+ *   [popoverShowArrow]="false"
+ * >
+ *   Menu
+ * </button>
+ * ```
+ *
+ * @example With component content
+ * ```html
+ * <button
+ *   comButton
+ *   [comPopoverTrigger]="UserProfilePopover"
+ *   [popoverData]="{ userId: user.id }"
+ * >
+ *   Profile
+ * </button>
+ * ```
+ *
+ * @example Manual control
+ * ```html
+ * <button
+ *   comButton
+ *   [comPopoverTrigger]="content"
+ *   popoverTriggerOn="manual"
+ *   [(popoverOpen)]="isOpen"
+ * >
+ *   Controlled
+ * </button>
+ * ```
+ */
+declare class PopoverTriggerDirective {
+    private readonly overlay;
+    private readonly elementRef;
+    private readonly viewContainerRef;
+    private readonly injector;
+    private readonly destroyRef;
+    private readonly focusTrapFactory;
+    private readonly document;
+    private overlayRef;
+    private focusTrap;
+    private scrollCleanup;
+    private readonly popoverId;
+    /** Content to render: TemplateRef or Component class. */
+    readonly comPopoverTrigger: InputSignal<TemplateRef<unknown> | Type<unknown>>;
+    /** Preferred position direction. */
+    readonly popoverPosition: InputSignal<PopoverPosition>;
+    /** Alignment along the cross-axis. */
+    readonly popoverAlignment: InputSignal<PopoverAlignment>;
+    /** What interaction opens the popover. */
+    readonly popoverTriggerOn: InputSignal<PopoverTriggerOn>;
+    /** Gap in px between trigger and popover edge. */
+    readonly popoverOffset: InputSignal<number>;
+    /** Whether to render the connecting arrow. */
+    readonly popoverShowArrow: InputSignalWithTransform<boolean, unknown>;
+    /** Size/padding preset for the content panel. */
+    readonly popoverVariant: InputSignal<PopoverVariant>;
+    /** Backdrop behavior. */
+    readonly popoverBackdrop: InputSignal<PopoverBackdrop>;
+    /** Close when clicking outside the popover. */
+    readonly popoverCloseOnOutside: InputSignalWithTransform<boolean, unknown>;
+    /** Close on Escape key. */
+    readonly popoverCloseOnEscape: InputSignalWithTransform<boolean, unknown>;
+    /** Close when ancestor scrollable container scrolls. */
+    readonly popoverCloseOnScroll: InputSignalWithTransform<boolean, unknown>;
+    /** Prevents opening when true. */
+    readonly popoverDisabled: InputSignalWithTransform<boolean, unknown>;
+    /** Two-way bindable open state. */
+    readonly popoverOpen: ModelSignal<boolean>;
+    /** Arbitrary data passed to the content component/template. */
+    readonly popoverData: InputSignal<unknown>;
+    /** Custom CSS class(es) on the overlay panel. */
+    readonly popoverPanelClass: InputSignal<string | string[]>;
+    /** Trap focus inside popover. */
+    readonly popoverTrapFocus: InputSignalWithTransform<boolean, unknown>;
+    /** Optional accessibility label for the popover dialog. */
+    readonly popoverAriaLabel: InputSignal<string | undefined>;
+    /** Emitted after popup opens and is visible. */
+    readonly popoverOpened: OutputEmitterRef<void>;
+    /** Emitted after popup closes and is detached. */
+    readonly popoverClosed: OutputEmitterRef<void>;
+    private readonly activeSide;
+    private readonly activeAlignment;
+    private readonly animationState;
+    private contentComponentRef;
+    private readonly hasBackdrop;
+    private readonly backdropClass;
+    protected readonly ariaControls: Signal<string | null>;
+    private readonly panelClassArray;
+    constructor();
+    /** Programmatically open the popover. */
+    open(): void;
+    /** Programmatically close the popover. */
+    close(): void;
+    /** Toggle the popover open/close state. */
+    toggle(): void;
+    /** Force recalculation of position. */
+    reposition(): void;
+    protected onTriggerClick(event: MouseEvent): void;
+    protected onTriggerFocus(): void;
+    protected onTriggerBlur(): void;
+    protected onEscapeKey(event: Event): void;
+    private openPopover;
+    private closePopover;
+    private subscribeToScrollEvents;
+    private unsubscribeFromScrollEvents;
+    private createOverlay;
+    private attachContent;
+    private updateContentComponentInputs;
+    private detachContent;
+    private subscribeToCloseEvents;
+    private setupFocusTrap;
+    private destroyFocusTrap;
+    private disposeOverlay;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverTriggerDirective, "[comPopoverTrigger]", ["comPopoverTrigger"], { "comPopoverTrigger": { "alias": "comPopoverTrigger"; "required": true; "isSignal": true; }; "popoverPosition": { "alias": "popoverPosition"; "required": false; "isSignal": true; }; "popoverAlignment": { "alias": "popoverAlignment"; "required": false; "isSignal": true; }; "popoverTriggerOn": { "alias": "popoverTriggerOn"; "required": false; "isSignal": true; }; "popoverOffset": { "alias": "popoverOffset"; "required": false; "isSignal": true; }; "popoverShowArrow": { "alias": "popoverShowArrow"; "required": false; "isSignal": true; }; "popoverVariant": { "alias": "popoverVariant"; "required": false; "isSignal": true; }; "popoverBackdrop": { "alias": "popoverBackdrop"; "required": false; "isSignal": true; }; "popoverCloseOnOutside": { "alias": "popoverCloseOnOutside"; "required": false; "isSignal": true; }; "popoverCloseOnEscape": { "alias": "popoverCloseOnEscape"; "required": false; "isSignal": true; }; "popoverCloseOnScroll": { "alias": "popoverCloseOnScroll"; "required": false; "isSignal": true; }; "popoverDisabled": { "alias": "popoverDisabled"; "required": false; "isSignal": true; }; "popoverOpen": { "alias": "popoverOpen"; "required": false; "isSignal": true; }; "popoverData": { "alias": "popoverData"; "required": false; "isSignal": true; }; "popoverPanelClass": { "alias": "popoverPanelClass"; "required": false; "isSignal": true; }; "popoverTrapFocus": { "alias": "popoverTrapFocus"; "required": false; "isSignal": true; }; "popoverAriaLabel": { "alias": "popoverAriaLabel"; "required": false; "isSignal": true; }; }, { "popoverOpen": "popoverOpenChange"; "popoverOpened": "popoverOpened"; "popoverClosed": "popoverClosed"; }, never, never, true, never>;
+}
+
+/**
+ * Convenience directive that closes the parent popover when clicked.
+ * Applied to elements inside the popover that should dismiss it.
+ *
+ * @example
+ * ```html
+ * <ng-template #confirmPop>
+ *   <div class="space-y-3">
+ *     <p>Are you sure?</p>
+ *     <div class="flex gap-2">
+ *       <button comButton variant="ghost" comPopoverClose>Cancel</button>
+ *       <button comButton (click)="confirm()" comPopoverClose>Confirm</button>
+ *     </div>
+ *   </div>
+ * </ng-template>
+ * ```
+ *
+ * @example With a result value
+ * ```html
+ * <button [comPopoverClose]="'confirmed'" (click)="onConfirm()">Yes</button>
+ * <button [comPopoverClose]="'cancelled'">No</button>
+ * ```
+ */
+declare class PopoverCloseDirective {
+    private readonly popoverRef;
+    /**
+     * Optional result value to pass when closing.
+     * This value is emitted via the trigger's close event.
+     */
+    readonly comPopoverClose: InputSignal<unknown>;
+    protected closePopover(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverCloseDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverCloseDirective, "[comPopoverClose]", ["comPopoverClose"], { "comPopoverClose": { "alias": "comPopoverClose"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Marker directive for lazy popover content templates.
+ * Applied to `<ng-template>` to indicate content that should be
+ * lazily instantiated when the popover opens.
+ *
+ * This directive is primarily semantic — it marks the template as popover content
+ * and provides access to the TemplateRef for potential content queries.
+ *
+ * @example
+ * ```html
+ * <button [comPopoverTrigger]="helpContent">Help</button>
+ * <ng-template comPopoverTemplate #helpContent>
+ *   <p>This is help content.</p>
+ * </ng-template>
+ * ```
+ *
+ * Note: You can also pass a template reference directly without this directive:
+ * ```html
+ * <button [comPopoverTrigger]="helpContent">Help</button>
+ * <ng-template #helpContent>
+ *   <p>This also works.</p>
+ * </ng-template>
+ * ```
+ */
+declare class PopoverTemplateDirective {
+    /** Reference to the template for rendering. */
+    readonly templateRef: TemplateRef<unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PopoverTemplateDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PopoverTemplateDirective, "[comPopoverTemplate]", ["comPopoverTemplate"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Interface for the popover reference injected into content.
+ * Provides methods to control the popover from within content.
+ */
+interface PopoverRef {
+    /** Programmatically open the popover. */
+    open(): void;
+    /** Programmatically close the popover. */
+    close(): void;
+    /** Toggle the popover open/close state. */
+    toggle(): void;
+    /** Force recalculation of position. */
+    reposition(): void;
+}
+/**
+ * Data passed to a component rendered inside the popover.
+ * Inject this token to access the data provided via `popoverData` input.
+ *
+ * @example
+ * ```ts
+ * @Component({ ... })
+ * export class UserProfilePopover {
+ *   readonly data = inject(POPOVER_DATA); // { userId: '123' }
+ * }
+ * ```
+ */
+declare const POPOVER_DATA: InjectionToken<unknown>;
+/**
+ * Reference to the popover trigger directive for closing from inside the popover.
+ * Inject this token to programmatically close the popover from within content.
+ *
+ * @example
+ * ```ts
+ * @Component({ ... })
+ * export class UserProfilePopover {
+ *   readonly popoverRef = inject(POPOVER_REF);
+ *
+ *   save(): void {
+ *     // ... save logic
+ *     this.popoverRef.close();
+ *   }
+ * }
+ * ```
+ */
+declare const POPOVER_REF: InjectionToken<PopoverRef>;
+
+/**
+ * Build an ordered list of position pairs for the CDK overlay.
+ * The first position is the preferred position; remaining positions are fallbacks.
+ *
+ * @param position - Preferred position direction ('above', 'below', 'left', 'right', 'auto')
+ * @param alignment - Alignment along the cross-axis ('start', 'center', 'end')
+ * @param offset - Gap in pixels between trigger and popover edge (default: 8)
+ * @returns Array of ConnectedPosition for FlexibleConnectedPositionStrategy
+ */
+declare function buildPopoverPositions(position: PopoverPosition, alignment: PopoverAlignment, offset?: number): ConnectedPosition[];
+/**
+ * Derive which side of the trigger the popover is on from a connection pair.
+ * Used to position the arrow correctly.
+ *
+ * The returned side indicates where the popover sits relative to the trigger:
+ * - 'bottom': popover is below trigger, arrow at top pointing up
+ * - 'top': popover is above trigger, arrow at bottom pointing down
+ * - 'right': popover is right of trigger, arrow at left pointing left
+ * - 'left': popover is left of trigger, arrow at right pointing right
+ */
+declare function deriveSideFromPosition(pair: ConnectionPositionPair): PopoverSide;
+/**
+ * Derive alignment from a connection pair.
+ */
+declare function deriveAlignmentFromPosition(pair: ConnectionPositionPair): PopoverAlignment;
+
+export { POPOVER_DATA, POPOVER_REF, PopoverCloseDirective, PopoverTemplateDirective, PopoverTriggerDirective, buildPopoverPositions, deriveAlignmentFromPosition, deriveSideFromPosition, popoverArrowVariants, popoverPanelVariants };
+export type { PopoverAlignment, PopoverArrowVariants, PopoverBackdrop, PopoverPanelVariants, PopoverPosition, PopoverRef, PopoverSide, PopoverTriggerOn, PopoverVariant };

package/types/ngx-com-components-radio.d.ts

@@ -0,0 +1,258 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Signal, InputSignal, ModelSignal, InputSignalWithTransform, OutputEmitterRef, OnInit, ElementRef } from '@angular/core';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ErrorStateMatcher } from 'ngx-com/components/form-field';
+
+/** Radio size variants. */
+type RadioSize = 'sm' | 'md' | 'lg';
+/** Radio color variants. */
+type RadioVariant = 'primary' | 'accent' | 'warn';
+/** Radio group orientation. */
+type RadioOrientation = 'vertical' | 'horizontal';
+/**
+ * CVA variants for the visual radio circle.
+ *
+ * Uses `peer` selectors to style based on native input state:
+ * - `peer-checked:` for checked state
+ * - `peer-focus-visible:` for keyboard focus
+ * - `peer-disabled:` for disabled state
+ *
+ * @tokens `--color-border`, `--color-primary`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-hover`,
+ *         `--color-disabled`, `--color-ring`
+ */
+declare const radioCircleVariants: (props?: {
+    variant?: RadioVariant;
+    size?: RadioSize;
+}) => string;
+/** Size-based classes for the inner dot indicator. */
+declare const RADIO_DOT_SIZES: Record<RadioSize, string>;
+/** Size-based classes for the label content. */
+declare const RADIO_LABEL_SIZES: Record<RadioSize, string>;
+/** Orientation-based classes for the radio group container. */
+declare const RADIO_GROUP_ORIENTATIONS: Record<RadioOrientation, string>;
+
+/** Event emitted when radio group value changes. */
+interface RadioGroupChange {
+    value: string | null;
+}
+/** Interface for radio items that register with the group. */
+interface RadioItem {
+    value: () => string;
+    isDisabled: () => boolean;
+    focus: () => void;
+}
+/** Context provided to child radio components via DI. */
+interface ComRadioGroupContext {
+    name: Signal<string>;
+    value: Signal<string | null>;
+    disabled: Signal<boolean>;
+    size: Signal<RadioSize>;
+    variant: Signal<RadioVariant>;
+    orientation: Signal<RadioOrientation>;
+    focusedValue: Signal<string | null>;
+    select: (value: string) => void;
+    focusNext: (currentValue: string) => void;
+    focusPrevious: (currentValue: string) => void;
+    register: (radio: RadioItem) => void;
+    unregister: (radio: RadioItem) => void;
+    onTouched?: () => void;
+}
+/** Injection token for radio group context. */
+declare const COM_RADIO_GROUP: InjectionToken<ComRadioGroupContext>;
+/**
+ * Radio group component that manages a set of radio buttons.
+ *
+ * Provides mutual exclusion, shared name, and roving tabindex keyboard navigation.
+ * Implements `ControlValueAccessor` for Reactive Forms integration.
+ *
+ * @tokens `--color-border`, `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,
+ *         `--color-disabled`, `--color-disabled-foreground`, `--color-ring`
+ *
+ * @example Basic usage
+ * ```html
+ * <com-radio-group [(value)]="selectedFruit" aria-label="Select a fruit">
+ *   <com-radio value="apple">Apple</com-radio>
+ *   <com-radio value="banana">Banana</com-radio>
+ *   <com-radio value="cherry">Cherry</com-radio>
+ * </com-radio-group>
+ * ```
+ *
+ * @example With reactive forms
+ * ```html
+ * <com-radio-group formControlName="size" aria-label="Select size">
+ *   <com-radio value="sm">Small</com-radio>
+ *   <com-radio value="md">Medium</com-radio>
+ *   <com-radio value="lg">Large</com-radio>
+ * </com-radio-group>
+ * ```
+ *
+ * @example Horizontal orientation
+ * ```html
+ * <com-radio-group [(value)]="color" orientation="horizontal">
+ *   <com-radio value="red">Red</com-radio>
+ *   <com-radio value="green">Green</com-radio>
+ *   <com-radio value="blue">Blue</com-radio>
+ * </com-radio-group>
+ * ```
+ *
+ * @example With variants
+ * ```html
+ * <com-radio-group [(value)]="priority" variant="warn" size="lg">
+ *   <com-radio value="low">Low</com-radio>
+ *   <com-radio value="medium">Medium</com-radio>
+ *   <com-radio value="high">High</com-radio>
+ * </com-radio-group>
+ * ```
+ */
+declare class ComRadioGroup implements ControlValueAccessor {
+    /** Optional NgControl for reactive forms integration. */
+    readonly ngControl: NgControl | null;
+    /** Error state matcher for determining when to show validation errors. */
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    /** Unique ID for this radio group instance. */
+    private readonly uniqueId;
+    /** ID for the error message element. */
+    readonly errorId: string;
+    /** Registered radio items. */
+    private readonly registeredRadios;
+    readonly name: InputSignal<string>;
+    readonly value: ModelSignal<string | null>;
+    readonly disabled: ModelSignal<boolean>;
+    readonly required: InputSignalWithTransform<boolean, unknown>;
+    readonly orientation: InputSignal<RadioOrientation>;
+    readonly size: InputSignal<RadioSize>;
+    readonly variant: InputSignal<RadioVariant>;
+    readonly errorMessage: InputSignal<string>;
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    /** Internal signal to track when control is touched, used to trigger error state re-evaluation. */
+    private readonly _touched;
+    readonly ariaLabel: InputSignal<string | null>;
+    readonly ariaLabelledby: InputSignal<string | null>;
+    readonly ariaDescribedby: InputSignal<string | null>;
+    /** Emits when the selection changes, with full event details. */
+    readonly selectionChange: OutputEmitterRef<RadioGroupChange>;
+    /**
+     * Tracks the currently focused radio value for roving tabindex.
+     * Resets to the current selection (or first focusable) when value or radios change.
+     */
+    private readonly focusedValueSignal;
+    /**
+     * Computed error state derived from form validation.
+     * Shows errors when control is invalid and touched/submitted.
+     */
+    readonly errorState: Signal<boolean>;
+    readonly computedAriaDescribedby: Signal<string | null>;
+    protected readonly groupClasses: Signal<string>;
+    private onChange;
+    private onTouchedCallback;
+    constructor();
+    /** Creates the context object for child radios. */
+    createContext(): ComRadioGroupContext;
+    /** Register a radio item with the group. */
+    private register;
+    /** Unregister a radio item from the group. */
+    private unregister;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** Selects a radio by value. */
+    select(newValue: string): void;
+    /** Focuses the next non-disabled radio (with cyclic wrap). */
+    focusNext(currentValue: string): void;
+    /** Focuses the previous non-disabled radio (with cyclic wrap). */
+    focusPrevious(currentValue: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComRadioGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComRadioGroup, "com-radio-group", ["comRadioGroup"], { "name": { "alias": "name"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
+}
+
+/** Event emitted when a radio is selected. */
+interface RadioChange {
+    value: string;
+    source: ComRadio;
+}
+/**
+ * Production-grade radio component with full accessibility support.
+ *
+ * Uses a native `<input type="radio">` for built-in keyboard handling,
+ * `:checked` pseudo-class, and screen reader support.
+ *
+ * Must be used within a `ComRadioGroup` which manages the selected value
+ * and provides the shared `name` attribute.
+ *
+ * @tokens `--color-border`, `--color-primary`, `--color-primary-foreground`, `--color-primary-hover`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-hover`,
+ *         `--color-warn`, `--color-warn-foreground`, `--color-warn-hover`,
+ *         `--color-disabled`, `--color-disabled-foreground`, `--color-ring`
+ *
+ * @example Basic usage within a group
+ * ```html
+ * <com-radio-group [(value)]="selectedOption">
+ *   <com-radio value="option1">Option 1</com-radio>
+ *   <com-radio value="option2">Option 2</com-radio>
+ *   <com-radio value="option3">Option 3</com-radio>
+ * </com-radio-group>
+ * ```
+ *
+ * @example Disabled option
+ * ```html
+ * <com-radio-group [(value)]="selected">
+ *   <com-radio value="enabled">Enabled option</com-radio>
+ *   <com-radio value="disabled" [disabled]="true">Disabled option</com-radio>
+ * </com-radio-group>
+ * ```
+ */
+declare class ComRadio implements OnInit, RadioItem {
+    /** Optional parent radio group context. */
+    private readonly group;
+    /** DestroyRef for cleanup. */
+    private readonly destroyRef;
+    /** Reference to the native input element. */
+    readonly inputRef: Signal<ElementRef<HTMLInputElement> | undefined>;
+    /** Unique ID for this radio instance. */
+    private readonly uniqueId;
+    readonly value: InputSignal<string>;
+    readonly size: InputSignal<RadioSize>;
+    readonly variant: InputSignal<RadioVariant>;
+    readonly disabled: ModelSignal<boolean>;
+    readonly id: InputSignal<string | undefined>;
+    readonly ariaLabel: InputSignal<string | null>;
+    readonly ariaLabelledby: InputSignal<string | null>;
+    readonly ariaDescribedby: InputSignal<string | null>;
+    readonly changed: OutputEmitterRef<RadioChange>;
+    readonly inputId: Signal<string>;
+    /** Resolve size from group or local input. */
+    readonly resolvedSize: Signal<RadioSize>;
+    /** Resolve variant from group or local input. */
+    readonly resolvedVariant: Signal<RadioVariant>;
+    /** Whether this radio is checked based on group value. */
+    readonly isChecked: Signal<boolean>;
+    /** Whether this radio is disabled (from local or group). */
+    readonly isDisabled: Signal<boolean>;
+    /** Get name from group. */
+    readonly groupName: Signal<string | undefined>;
+    /** Tab index for roving tabindex pattern. */
+    readonly tabIndex: Signal<number>;
+    protected readonly circleClasses: Signal<string>;
+    protected readonly dotSizeClass: Signal<string>;
+    protected readonly labelSizeClass: Signal<string>;
+    ngOnInit(): void;
+    protected onInputChange(event: Event): void;
+    protected onBlur(): void;
+    protected onKeyDown(event: KeyboardEvent): void;
+    /** Focuses this radio's input element. */
+    focus(): void;
+    /** Selects this radio programmatically. */
+    select(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComRadio, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComRadio, "com-radio", ["comRadio"], { "value": { "alias": "value"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; }, { "disabled": "disabledChange"; "changed": "changed"; }, never, ["*"], true, never>;
+}
+
+export { COM_RADIO_GROUP, ComRadio, ComRadioGroup, RADIO_DOT_SIZES, RADIO_GROUP_ORIENTATIONS, RADIO_LABEL_SIZES, radioCircleVariants };
+export type { ComRadioGroupContext, RadioChange, RadioGroupChange, RadioItem, RadioOrientation, RadioSize, RadioVariant };