ngx-com 0.0.1 → 0.0.4

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 };

package/types/ngx-com-components-segmented-control.d.ts

@@ -0,0 +1,274 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, InputSignal, ModelSignal, InputSignalWithTransform, Signal } from '@angular/core';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Template context provided to custom segment templates.
+ *
+ * @example
+ * ```html
+ * <ng-template comSegmentDef let-option let-active="active">
+ *   <com-icon [name]="option.value" />
+ *   <span>{{ option.label }}</span>
+ * </ng-template>
+ * ```
+ */
+interface SegmentTemplateContext<T = unknown> {
+    /** The option object (default for `let-option`). */
+    $implicit: SegmentOption<T>;
+    /** Whether this segment is currently selected. */
+    active: boolean;
+    /** Whether this segment is disabled. */
+    disabled: boolean;
+    /** Position in the options list (0-indexed). */
+    index: number;
+}
+/**
+ * Directive to mark a custom template for segment content.
+ *
+ * The template receives a `SegmentTemplateContext` with the option data,
+ * active state, disabled state, and index. Use this to customize the
+ * inner content of each segment while the component manages the button,
+ * styling, and ARIA attributes.
+ *
+ * @example Icon + text
+ * ```html
+ * <com-segmented-control [options]="viewOptions" [(value)]="currentView">
+ *   <ng-template comSegmentDef let-option let-active="active">
+ *     <com-icon [name]="option.value" size="sm" />
+ *     <span>{{ option.label }}</span>
+ *   </ng-template>
+ * </com-segmented-control>
+ * ```
+ *
+ * @example Icon only (label used for accessibility)
+ * ```html
+ * <com-segmented-control [options]="alignmentOptions" [(value)]="alignment">
+ *   <ng-template comSegmentDef let-option>
+ *     <com-icon [name]="'align-' + option.value" size="sm" />
+ *   </ng-template>
+ * </com-segmented-control>
+ * ```
+ */
+declare class ComSegmentDef<T = unknown> {
+    readonly templateRef: TemplateRef<SegmentTemplateContext<T>>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSegmentDef<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComSegmentDef<any>, "ng-template[comSegmentDef]", never, {}, {}, never, never, true, never>;
+}
+
+type SegmentedControlSize = 'sm' | 'md' | 'lg';
+type SegmentedControlColor = 'primary' | 'accent' | 'muted';
+type SegmentedControlVariant = 'filled' | 'outline';
+/**
+ * CVA variants for the segmented control container (track).
+ * Controls overall sizing, padding, and track background.
+ */
+declare const segmentedControlContainerVariants: (props?: {
+    size?: SegmentedControlSize;
+    fullWidth?: boolean;
+}) => string;
+/**
+ * CVA variants for individual segment buttons.
+ * Controls per-segment sizing, typography, and active/inactive color states.
+ */
+declare const segmentedControlSegmentVariants: (props?: {
+    size?: SegmentedControlSize;
+    color?: SegmentedControlColor;
+    variant?: SegmentedControlVariant;
+    active?: boolean;
+    fullWidth?: boolean;
+}) => string;
+/**
+ * Classes to apply when a segment is disabled.
+ * Separate from CVA to avoid complex variant combinations.
+ */
+declare const SEGMENT_DISABLED_CLASSES = "bg-disabled text-disabled-foreground cursor-not-allowed hover:bg-disabled";
+type SegmentedControlContainerVariants = VariantProps<typeof segmentedControlContainerVariants>;
+type SegmentedControlSegmentVariants = VariantProps<typeof segmentedControlSegmentVariants>;
+
+/**
+ * Represents a single option in the segmented control.
+ */
+interface SegmentOption<T = unknown> {
+    /** The value associated with this option. */
+    value: T;
+    /** Display label (also used as aria-label fallback for custom templates). */
+    label: string;
+    /** Whether this option is disabled. */
+    disabled?: boolean | undefined;
+}
+/**
+ * Segmented control component — a horizontal group of mutually exclusive options
+ * where one is always selected. Think of it as a styled radio group in pill form.
+ *
+ * Supports two rendering modes:
+ * - **Simple mode**: Plain text labels from the `label` property
+ * - **Custom template mode**: Full control via `ng-template[comSegmentDef]`
+ *
+ * @tokens `--color-primary`, `--color-primary-foreground`,
+ *         `--color-accent`, `--color-accent-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-background`, `--color-foreground`,
+ *         `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-border`, `--color-ring`
+ *
+ * @example Basic two-option toggle
+ * ```html
+ * <com-segmented-control
+ *   [options]="[
+ *     { value: 'admin', label: 'Admin' },
+ *     { value: 'user', label: 'User' }
+ *   ]"
+ *   [(value)]="selectedRole"
+ * />
+ * ```
+ *
+ * @example Multiple options with variants
+ * ```html
+ * <com-segmented-control
+ *   [options]="viewOptions"
+ *   [(value)]="currentView"
+ *   color="primary"
+ *   size="sm"
+ * />
+ * ```
+ *
+ * @example Custom template with icons
+ * ```html
+ * <com-segmented-control [options]="viewOptions" [(value)]="currentView" color="primary">
+ *   <ng-template comSegmentDef let-option let-active="active">
+ *     <com-icon [name]="option.value === 'grid' ? 'grid' : 'list'" size="sm" />
+ *     <span>{{ option.label }}</span>
+ *   </ng-template>
+ * </com-segmented-control>
+ * ```
+ *
+ * @example Custom template with badges
+ * ```html
+ * <com-segmented-control [options]="statusOptions" [(value)]="statusFilter" color="accent">
+ *   <ng-template comSegmentDef let-option let-active="active">
+ *     <span>{{ option.label }}</span>
+ *     <span
+ *       class="ml-1.5 rounded-pill px-1.5 text-xs"
+ *       [class]="active ? 'bg-accent-foreground/20 text-accent-foreground' : 'bg-muted text-muted-foreground'"
+ *     >
+ *       {{ option.value === 'open' ? openCount : closedCount }}
+ *     </span>
+ *   </ng-template>
+ * </com-segmented-control>
+ * ```
+ *
+ * @example Icon only (label used for accessibility)
+ * ```html
+ * <com-segmented-control
+ *   [options]="[
+ *     { value: 'left', label: 'Align left' },
+ *     { value: 'center', label: 'Align center' },
+ *     { value: 'right', label: 'Align right' }
+ *   ]"
+ *   [(value)]="alignment"
+ *   size="sm"
+ * >
+ *   <ng-template comSegmentDef let-option>
+ *     <com-icon [name]="'align-' + option.value" size="sm" />
+ *   </ng-template>
+ * </com-segmented-control>
+ * ```
+ *
+ * @example Full width + outline variant
+ * ```html
+ * <com-segmented-control
+ *   [options]="plans"
+ *   [(value)]="selectedPlan"
+ *   variant="outline"
+ *   color="primary"
+ *   [fullWidth]="true"
+ * />
+ * ```
+ *
+ * @example Disabled options
+ * ```html
+ * <com-segmented-control
+ *   [options]="[
+ *     { value: 'free', label: 'Free' },
+ *     { value: 'pro', label: 'Pro' },
+ *     { value: 'enterprise', label: 'Enterprise', disabled: true }
+ *   ]"
+ *   [(value)]="plan"
+ *   color="primary"
+ *   size="lg"
+ * />
+ * ```
+ */
+declare class ComSegmentedControl<T = unknown> {
+    /** References to all segment buttons for focus management. */
+    private readonly segmentButtons;
+    /** The list of options to display. */
+    readonly options: InputSignal<SegmentOption<T>[]>;
+    /** Currently selected value. Two-way bindable with `[(value)]`. */
+    readonly value: ModelSignal<T | undefined>;
+    /** Controls segment height, padding, and font size. */
+    readonly size: InputSignal<SegmentedControlSize>;
+    /** Color scheme for the active segment. */
+    readonly color: InputSignal<SegmentedControlColor>;
+    /** Visual variant: filled (solid background) or outline (ring border). */
+    readonly variant: InputSignal<SegmentedControlVariant>;
+    /** When true, segments stretch equally to fill available width. */
+    readonly fullWidth: InputSignalWithTransform<boolean, unknown>;
+    /** Accessible label for the radiogroup container. */
+    readonly ariaLabel: InputSignal<string | null>;
+    /** Custom CSS classes to merge with container classes. */
+    readonly userClass: InputSignal<string>;
+    /** Optional custom template for segment content. */
+    readonly customTemplate: Signal<ComSegmentDef<T> | undefined>;
+    /** Classes for the container/track element. */
+    protected readonly containerClasses: Signal<string>;
+    /**
+     * Checks if the given option is currently selected.
+     */
+    isActive(option: SegmentOption<T>): boolean;
+    /**
+     * Selects the given option (if not disabled).
+     */
+    select(option: SegmentOption<T>): void;
+    /**
+     * Returns the tabindex for a segment at the given index.
+     * Implements roving tabindex: only the selected (or first focusable) segment has tabindex="0".
+     */
+    tabIndexFor(index: number): number;
+    /**
+     * Returns computed classes for a segment button.
+     */
+    segmentClasses(option: SegmentOption<T>): string;
+    /**
+     * Builds the template context for custom templates.
+     */
+    getTemplateContext(option: SegmentOption<T>, index: number): SegmentTemplateContext<T>;
+    /**
+     * Handles keyboard navigation for the segmented control.
+     * Implements ARIA radiogroup keyboard patterns.
+     */
+    onKeydown(event: KeyboardEvent, currentIndex: number): void;
+    /**
+     * Finds the next focusable (non-disabled) option index in the given direction.
+     * Wraps around to the beginning/end of the list.
+     */
+    private findNextFocusableIndex;
+    /**
+     * Finds the first focusable (non-disabled) option index.
+     */
+    private findFirstFocusableIndex;
+    /**
+     * Finds the last focusable (non-disabled) option index.
+     */
+    private findLastFocusableIndex;
+    /**
+     * Focuses the segment button at the given index.
+     */
+    private focusSegmentAt;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSegmentedControl<any>, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComSegmentedControl<any>, "com-segmented-control", ["comSegmentedControl"], { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, ["customTemplate"], never, true, never>;
+}
+
+export { ComSegmentDef, ComSegmentedControl, SEGMENT_DISABLED_CLASSES, segmentedControlContainerVariants, segmentedControlSegmentVariants };
+export type { SegmentOption, SegmentTemplateContext, SegmentedControlColor, SegmentedControlContainerVariants, SegmentedControlSegmentVariants, SegmentedControlSize, SegmentedControlVariant };

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

@@ -0,0 +1,133 @@
+import * as i0 from '@angular/core';
+import { OnInit, InputSignal, InputSignalWithTransform, Signal, ModelSignal, OutputEmitterRef } from '@angular/core';
+
+/** Sort direction — three states */
+type SortDirection = 'asc' | 'desc' | undefined;
+/** Configures the three-state sort cycle */
+type SortCycle = SortDirection[];
+/** Emitted when sort state changes */
+interface SortEvent {
+    /** The active column id, or undefined if unsorted */
+    active: string | undefined;
+    /** The sort direction */
+    direction: SortDirection;
+}
+/**
+ * @tokens `--color-foreground`, `--color-muted-foreground`
+ */
+declare const sortHeaderVariants: (props?: {
+    sortable?: boolean;
+    active?: boolean;
+    disabled?: boolean;
+}) => string;
+/**
+ * @tokens `--color-foreground`, `--color-muted-foreground`
+ */
+declare const sortIconVariants: (props?: {
+    size?: 'sm' | 'md' | 'lg';
+    state?: 'asc' | 'desc' | 'unsorted' | 'hidden';
+}) => string;
+
+/**
+ * Sortable header component — child of [uiSort] directive.
+ *
+ * Apply to table headers, div columns, or any clickable element that should trigger sorting.
+ *
+ * @tokens `--color-foreground`, `--color-muted-foreground`, `--color-disabled-foreground`
+ *
+ * @example Basic usage
+ * ```html
+ * <tr comSort (sortChange)="onSort($event)">
+ *   <th comSortHeader="name">Name</th>
+ *   <th comSortHeader="age">Age</th>
+ * </tr>
+ * ```
+ *
+ * @example Arrow placement
+ * ```html
+ * <th comSortHeader="name" comSortHeaderArrowPosition="before">Name</th>
+ * ```
+ */
+declare class SortHeaderComponent implements OnInit {
+    private readonly sort;
+    private readonly destroyRef;
+    /** The column id — aliased from the selector */
+    readonly id: InputSignal<string>;
+    /** Disable sorting for this specific header */
+    readonly sortHeaderDisabled: InputSignalWithTransform<boolean, unknown>;
+    /** Override parent's sortShowIndicator for this header */
+    readonly sortHeaderShowIndicator: InputSignal<boolean | undefined>;
+    /** Arrow placement relative to content */
+    readonly sortHeaderArrowPosition: InputSignal<'before' | 'after'>;
+    /** Whether this header is the currently active sort column */
+    readonly isActive: Signal<boolean>;
+    /** Current direction if active, undefined otherwise */
+    readonly direction: Signal<SortDirection>;
+    /** Whether this header is sorted (active + has direction) */
+    readonly isSorted: Signal<boolean>;
+    /** Whether to show the muted indicator when unsorted */
+    readonly showUnsortedIndicator: Signal<boolean>;
+    /** Whether sorting is disabled for this header */
+    readonly isDisabled: Signal<boolean>;
+    /** aria-sort attribute value */
+    readonly ariaSort: Signal<'ascending' | 'descending' | 'none'>;
+    /** CVA-generated host classes */
+    readonly hostClasses: Signal<string>;
+    constructor();
+    ngOnInit(): void;
+    protected onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SortHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SortHeaderComponent, "[comSortHeader]", never, { "id": { "alias": "comSortHeader"; "required": true; "isSignal": true; }; "sortHeaderDisabled": { "alias": "sortHeaderDisabled"; "required": false; "isSignal": true; }; "sortHeaderShowIndicator": { "alias": "sortHeaderShowIndicator"; "required": false; "isSignal": true; }; "sortHeaderArrowPosition": { "alias": "comSortHeaderArrowPosition"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Parent directive that manages sort state for a group of sortable headers.
+ *
+ * Apply to a container element (e.g., `<tr>`, `<div>`) that contains `[uiSortHeader]` children.
+ * Children inject this directive via DI and read its signals directly.
+ *
+ * @tokens `--color-foreground`, `--color-muted-foreground`
+ *
+ * @example Basic usage
+ * ```html
+ * <tr comSort (sortChange)="onSort($event)">
+ *   <th comSortHeader="name">Name</th>
+ *   <th comSortHeader="age">Age</th>
+ * </tr>
+ * ```
+ *
+ * @example Two-way binding
+ * ```html
+ * <tr comSort [(sortActive)]="column" [(sortDirection)]="direction">
+ *   <th comSortHeader="name">Name</th>
+ * </tr>
+ * ```
+ */
+declare class SortDirective {
+    /** Currently active sort column id — two-way via model() */
+    readonly sortActive: ModelSignal<string | undefined>;
+    /** Current sort direction — two-way via model() */
+    readonly sortDirection: ModelSignal<SortDirection>;
+    /** Disables all sorting in this container */
+    readonly sortDisabled: InputSignalWithTransform<boolean, unknown>;
+    /** Customize the click cycle (e.g., ['asc', 'desc'] to skip unsorted) */
+    readonly sortCycle: InputSignal<SortCycle>;
+    /** Show a muted arrow on unsorted headers */
+    readonly sortShowIndicator: InputSignalWithTransform<boolean, unknown>;
+    /** Emitted when active column or direction changes */
+    readonly sortChange: OutputEmitterRef<SortEvent>;
+    private readonly headers;
+    /** Register a sort header with this parent */
+    register(header: SortHeaderComponent): void;
+    /** Deregister a sort header */
+    deregister(id: string): void;
+    /** Programmatically sort by a column */
+    sort(id: string): void;
+    /** Returns the next direction in the cycle for a given column */
+    getNextDirection(id: string): SortDirection;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SortDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SortDirective, "[comSort]", ["comSort"], { "sortActive": { "alias": "sortActive"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "sortDisabled": { "alias": "sortDisabled"; "required": false; "isSignal": true; }; "sortCycle": { "alias": "sortCycle"; "required": false; "isSignal": true; }; "sortShowIndicator": { "alias": "sortShowIndicator"; "required": false; "isSignal": true; }; }, { "sortActive": "sortActiveChange"; "sortDirection": "sortDirectionChange"; "sortChange": "sortChange"; }, never, never, true, never>;
+}
+
+export { SortDirective, SortHeaderComponent, sortHeaderVariants, sortIconVariants };
+export type { SortCycle, SortDirection, SortEvent };