ngx-com 0.0.1 → 0.0.4

package/types/ngx-com-components-form-field.d.ts

@@ -0,0 +1,531 @@
+import * as i0 from '@angular/core';
+import { Signal, InputSignal, InjectionToken, OnInit, InputSignalWithTransform } from '@angular/core';
+import { NgControl, AbstractControl, FormGroupDirective, NgForm } from '@angular/forms';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Contract that any control inside a form field must implement.
+ *
+ * This allows the form field to read state from any inner control
+ * (input, textarea, custom controls) without knowing implementation details.
+ *
+ * @example Implementing for a custom phone input
+ * ```ts
+ * @Directive({
+ *   selector: 'com-phone-input',
+ *   providers: [{ provide: FormFieldControl, useExisting: PhoneInputComponent }],
+ * })
+ * export class PhoneInputComponent extends FormFieldControl<string> {
+ *   // ... implement all abstract members
+ * }
+ * ```
+ */
+declare abstract class FormFieldControl<T = unknown> {
+    /** The NgControl bound to this control (if any). */
+    abstract readonly ngControl: NgControl | null;
+    /** Whether the control is focused. */
+    abstract readonly focused: Signal<boolean>;
+    /** Whether the label should float (focused or non-empty). */
+    abstract readonly shouldLabelFloat: Signal<boolean>;
+    /** Whether the control is required. */
+    abstract readonly required: Signal<boolean>;
+    /** Whether the control is disabled. */
+    abstract readonly disabled: Signal<boolean>;
+    /** Whether the control is in an error state. */
+    abstract readonly errorState: Signal<boolean>;
+    /** Unique ID for the control element. */
+    abstract readonly id: Signal<string>;
+    /** Called when the form field container is clicked. */
+    abstract onContainerClick(event: MouseEvent): void;
+}
+
+/**
+ * Directive to mark the label element inside a form field.
+ *
+ * The form field automatically associates this label with the inner control
+ * and positions it appropriately based on appearance and float state.
+ *
+ * @example
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Email address</label>
+ *   <input comInput formControlName="email" />
+ * </com-form-field>
+ * ```
+ */
+declare class ComLabel {
+    readonly labelId: string;
+    private readonly _forId;
+    readonly forId: Signal<string | null>;
+    /** Sets the `for` attribute to link to the control. Called by form field. */
+    setForId(id: string): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComLabel, "[comLabel]", ["comLabel"], {}, {}, never, never, true, never>;
+}
+
+/** Alignment of hint text in the subscript area. */
+type HintAlign = 'start' | 'end';
+/**
+ * Directive for hint text displayed below the form field.
+ *
+ * The hint provides supplementary information to help users fill out the field.
+ * It is automatically added to the control's `aria-describedby`.
+ *
+ * @tokens `--color-muted-foreground`
+ *
+ * @example Basic hint
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Password</label>
+ *   <input comInput formControlName="password" />
+ *   <span comHint>At least 8 characters</span>
+ * </com-form-field>
+ * ```
+ *
+ * @example Right-aligned hint (e.g., character count)
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Bio</label>
+ *   <textarea comInput formControlName="bio"></textarea>
+ *   <span comHint>Keep it brief</span>
+ *   <span comHint align="end">{{ bioLength }}/150</span>
+ * </com-form-field>
+ * ```
+ */
+declare class ComHint {
+    readonly id: string;
+    readonly align: InputSignal<HintAlign>;
+    protected readonly hostClasses: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComHint, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComHint, "[comHint]", ["comHint"], { "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive for error messages displayed below the form field.
+ *
+ * Errors replace hints when the control is in an error state.
+ * Uses `role="alert"` and `aria-live="polite"` for screen reader announcement.
+ *
+ * The optional `match` input allows showing errors only for specific validation errors.
+ *
+ * @tokens `--color-warn`
+ *
+ * @example Basic error
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Email</label>
+ *   <input comInput formControlName="email" />
+ *   <span comError>Please enter a valid email</span>
+ * </com-form-field>
+ * ```
+ *
+ * @example Matching specific errors
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Email</label>
+ *   <input comInput formControlName="email" />
+ *   <span comError match="required">Email is required.</span>
+ *   <span comError match="email">Must be a valid email address.</span>
+ * </com-form-field>
+ * ```
+ */
+declare class ComError {
+    readonly id: string;
+    /** Reference to the form control, set by the parent form field. */
+    private readonly _control;
+    /**
+     * Show this error only when a specific validation error key is present.
+     * If empty, the error is always shown when the control is in error state.
+     */
+    readonly match: InputSignal<string>;
+    protected readonly errorVariants: () => string;
+    /**
+     * Whether this error should be displayed based on the match condition.
+     * Used by the form field to filter which errors to show.
+     */
+    readonly shouldShow: Signal<boolean>;
+    /**
+     * Sets the form control reference.
+     * Called by the parent form field component.
+     */
+    setControl(control: AbstractControl | null): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComError, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComError, "[comError]", ["comError"], { "match": { "alias": "match"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to mark content as the prefix slot in a form field.
+ *
+ * Prefix content appears before the input (e.g., currency symbol, icon).
+ *
+ * @tokens `--color-muted-foreground`
+ *
+ * @example Currency prefix
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Amount</label>
+ *   <span comPrefix>$</span>
+ *   <input comInput type="number" formControlName="amount" />
+ * </com-form-field>
+ * ```
+ *
+ * @example Icon prefix
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Search</label>
+ *   <svg comPrefix class="size-4">...</svg>
+ *   <input comInput formControlName="query" />
+ * </com-form-field>
+ * ```
+ */
+declare class ComPrefix {
+    protected readonly prefixVariants: () => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComPrefix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComPrefix, "[comPrefix]", ["comPrefix"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Directive to mark content as the suffix slot in a form field.
+ *
+ * Suffix content appears after the input (e.g., unit, clear button, visibility toggle).
+ *
+ * @tokens `--color-muted-foreground`
+ *
+ * @example Unit suffix
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Weight</label>
+ *   <input comInput type="number" formControlName="weight" />
+ *   <span comSuffix>kg</span>
+ * </com-form-field>
+ * ```
+ *
+ * @example Clear button suffix
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Search</label>
+ *   <input comInput formControlName="query" />
+ *   <button comSuffix type="button" (click)="clearSearch()">
+ *     <svg class="size-4">...</svg>
+ *   </button>
+ * </com-form-field>
+ * ```
+ *
+ * @example Password visibility toggle
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Password</label>
+ *   <input comInput [type]="showPassword ? 'text' : 'password'" formControlName="password" />
+ *   <button comSuffix type="button" (click)="showPassword = !showPassword">
+ *     <svg class="size-4">...</svg>
+ *   </button>
+ * </com-form-field>
+ * ```
+ */
+declare class ComSuffix {
+    protected readonly suffixVariants: () => string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComSuffix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComSuffix, "[comSuffix]", ["comSuffix"], {}, {}, never, never, true, never>;
+}
+
+/**
+ * Strategy for determining when to display errors in a form field.
+ *
+ * The default behavior shows errors when the control is invalid AND
+ * either touched OR the parent form has been submitted.
+ *
+ * @example Override globally with eager error display
+ * ```ts
+ * @Injectable()
+ * export class EagerErrorStateMatcher extends ErrorStateMatcher {
+ *   override isErrorState(control: AbstractControl | null): boolean {
+ *     return !!(control?.invalid && control.dirty);
+ *   }
+ * }
+ *
+ * // In app config
+ * providers: [{ provide: ErrorStateMatcher, useClass: EagerErrorStateMatcher }]
+ * ```
+ *
+ * @example Per-field override
+ * ```html
+ * <com-form-field>
+ *   <input comInput [errorStateMatcher]="eagerMatcher" />
+ * </com-form-field>
+ * ```
+ */
+declare class ErrorStateMatcher {
+    isErrorState(control: AbstractControl | null, form: FormGroupDirective | NgForm | null): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ErrorStateMatcher, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ErrorStateMatcher>;
+}
+
+type FormFieldAppearance = 'fill' | 'outline';
+type FormFieldColor = 'primary' | 'accent' | 'warn';
+type FormFieldFloatLabel = 'auto' | 'always';
+type FormFieldSubscriptSizing = 'fixed' | 'dynamic';
+/**
+ * CVA variants for the form field wrapper.
+ *
+ * @tokens `--color-foreground`
+ */
+declare const formFieldVariants: (props?: {
+    disabled?: boolean | null | undefined;
+}) => string;
+type FormFieldVariants = VariantProps<typeof formFieldVariants>;
+/**
+ * CVA variants for the input container (the bordered/filled area).
+ *
+ * @tokens `--color-input-border`, `--color-input-background`, `--color-primary`,
+ *         `--color-accent`, `--color-warn`, `--color-ring`, `--color-muted`,
+ *         `--color-disabled`, `--radius-input`
+ */
+declare const formFieldContainerVariants: (props?: {
+    appearance?: FormFieldAppearance | null | undefined;
+    color?: FormFieldColor | null | undefined;
+    focused?: boolean | null | undefined;
+    error?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+}) => string;
+type FormFieldContainerVariants = VariantProps<typeof formFieldContainerVariants>;
+/**
+ * CVA variants for the floating label.
+ *
+ * @tokens `--color-muted-foreground`, `--color-primary`, `--color-accent`,
+ *         `--color-warn`, `--color-background`
+ */
+declare const formFieldLabelVariants: (props?: {
+    appearance?: FormFieldAppearance | null | undefined;
+    floating?: boolean | null | undefined;
+    color?: FormFieldColor | null | undefined;
+    error?: boolean | null | undefined;
+    focused?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+}) => string;
+type FormFieldLabelVariants = VariantProps<typeof formFieldLabelVariants>;
+/**
+ * CVA variants for the subscript area (hints/errors).
+ *
+ * @tokens (inherits from children)
+ */
+declare const formFieldSubscriptVariants: (props?: {
+    sizing?: FormFieldSubscriptSizing | null | undefined;
+}) => string;
+type FormFieldSubscriptVariants = VariantProps<typeof formFieldSubscriptVariants>;
+/**
+ * CVA variants for hint text.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const hintVariants: () => string;
+/**
+ * CVA variants for error messages.
+ *
+ * @tokens `--color-warn`
+ */
+declare const errorVariants: () => string;
+/**
+ * CVA variants for prefix slot.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const prefixVariants: () => string;
+/**
+ * CVA variants for suffix slot.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const suffixVariants: () => string;
+
+/**
+ * Global configuration defaults for form fields.
+ *
+ * @example Set defaults in app config
+ * ```ts
+ * providers: [
+ *   {
+ *     provide: FORM_FIELD_DEFAULTS,
+ *     useValue: {
+ *       appearance: 'fill',
+ *       floatLabel: 'always',
+ *       color: 'primary',
+ *     }
+ *   }
+ * ]
+ * ```
+ */
+interface FormFieldDefaults {
+    appearance?: FormFieldAppearance;
+    color?: FormFieldColor;
+    floatLabel?: FormFieldFloatLabel;
+    hideRequiredMarker?: boolean;
+    subscriptSizing?: FormFieldSubscriptSizing;
+}
+declare const FORM_FIELD_DEFAULTS: InjectionToken<FormFieldDefaults>;
+
+/**
+ * Directive applied to native `<input>` and `<textarea>` elements to bridge
+ * them to the form field wrapper. Implements the `FormFieldControl` contract.
+ *
+ * This directive does NOT implement `ControlValueAccessor` - it relies on
+ * Angular's built-in value accessors (`DefaultValueAccessor`, `NumberValueAccessor`, etc.)
+ * that are already applied to native elements with `formControlName` or `ngModel`.
+ *
+ * Instead, this directive reports state (focused, empty, disabled, error) to the
+ * parent form field for proper visual presentation.
+ *
+ * @tokens (styling is controlled by the parent form field)
+ *
+ * @example Basic usage
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Email</label>
+ *   <input comInput formControlName="email" placeholder="you@example.com" />
+ * </com-form-field>
+ * ```
+ *
+ * @example Textarea
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Description</label>
+ *   <textarea comInput formControlName="description"></textarea>
+ * </com-form-field>
+ * ```
+ *
+ * @example Custom error state matcher
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Code</label>
+ *   <input comInput formControlName="code" [errorStateMatcher]="eagerMatcher" />
+ * </com-form-field>
+ * ```
+ */
+declare class ComInput implements FormFieldControl<string>, OnInit {
+    private readonly elementRef;
+    private readonly destroyRef;
+    private readonly autofillMonitor;
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    /** NgControl bound to this input (if using reactive forms). */
+    readonly ngControl: NgControl | null;
+    readonly inputId: InputSignal<string | undefined>;
+    readonly inputDisabled: InputSignalWithTransform<boolean, unknown>;
+    readonly inputRequired: InputSignalWithTransform<boolean, unknown>;
+    readonly userAriaDescribedBy: InputSignal<string>;
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    private readonly _focused;
+    private readonly _autofilled;
+    private readonly _empty;
+    private readonly _uniqueId;
+    private readonly _appearance;
+    readonly focused: Signal<boolean>;
+    readonly id: Signal<string>;
+    readonly shouldLabelFloat: Signal<boolean>;
+    readonly disabled: Signal<boolean>;
+    readonly required: Signal<boolean>;
+    readonly errorState: Signal<boolean>;
+    /** Combined aria-describedby including user-provided and form-field-generated IDs. */
+    private readonly _describedByIds;
+    readonly ariaDescribedBy: Signal<string>;
+    /** Computed host classes including appearance-based padding. */
+    protected readonly hostClasses: Signal<string>;
+    ngOnInit(): void;
+    protected onFocus(): void;
+    protected onBlur(): void;
+    protected onInput(): void;
+    private updateEmpty;
+    onContainerClick(event: MouseEvent): void;
+    /**
+     * Sets the describedBy IDs from the form field.
+     * Called by the parent form field component.
+     */
+    setDescribedByIds(ids: string): void;
+    /**
+     * Sets the appearance for styling.
+     * Called by the parent form field component.
+     */
+    setAppearance(appearance: FormFieldAppearance): void;
+    /** Focus the native element. */
+    focus(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComInput, "input[comInput], textarea[comInput]", ["comInput"], { "inputId": { "alias": "id"; "required": false; "isSignal": true; }; "inputDisabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "inputRequired": { "alias": "required"; "required": false; "isSignal": true; }; "userAriaDescribedBy": { "alias": "aria-describedby"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Form field wrapper providing visual structure for form inputs.
+ *
+ * Provides floating labels, borders (outline/fill appearance), hints, errors,
+ * and prefix/suffix slots. Automatically wires ARIA attributes for accessibility.
+ *
+ * The form field reads state from its inner `FormFieldControl` child (typically
+ * a `ComInput` directive) and renders UI accordingly.
+ *
+ * @tokens `--color-foreground`, `--color-input-border`, `--color-input-background`,
+ *         `--color-primary`, `--color-accent`, `--color-warn`, `--color-ring`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-disabled`,
+ *         `--color-disabled-foreground`, `--color-background`, `--radius-input`
+ *
+ * @example Basic outline field
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Email</label>
+ *   <input comInput formControlName="email" />
+ *   <span comHint>We'll never share your email.</span>
+ *   <span comError match="required">Email is required.</span>
+ * </com-form-field>
+ * ```
+ *
+ * @example Fill appearance
+ * ```html
+ * <com-form-field appearance="fill">
+ *   <label comLabel>Username</label>
+ *   <input comInput formControlName="username" />
+ * </com-form-field>
+ * ```
+ *
+ * @example With prefix and suffix
+ * ```html
+ * <com-form-field>
+ *   <label comLabel>Amount</label>
+ *   <span comPrefix>$</span>
+ *   <input comInput type="number" formControlName="amount" />
+ *   <span comSuffix>.00</span>
+ * </com-form-field>
+ * ```
+ */
+declare class ComFormField {
+    private readonly defaults;
+    readonly control: Signal<FormFieldControl | undefined>;
+    readonly inputDirective: Signal<ComInput | undefined>;
+    readonly labelChild: Signal<ComLabel | undefined>;
+    readonly hintChildren: Signal<readonly ComHint[]>;
+    readonly errorChildren: Signal<readonly ComError[]>;
+    readonly prefixChild: Signal<ComPrefix | undefined>;
+    readonly suffixChild: Signal<ComSuffix | undefined>;
+    readonly appearance: InputSignal<FormFieldAppearance>;
+    readonly color: InputSignal<FormFieldColor>;
+    readonly floatLabel: InputSignal<FormFieldFloatLabel>;
+    readonly hideRequiredMarker: InputSignalWithTransform<boolean, unknown>;
+    readonly subscriptSizing: InputSignal<FormFieldSubscriptSizing>;
+    readonly userClass: InputSignal<string>;
+    readonly shouldLabelFloat: Signal<boolean>;
+    readonly isFocused: Signal<boolean>;
+    readonly isDisabled: Signal<boolean>;
+    readonly hasError: Signal<boolean>;
+    readonly hasPrefix: Signal<boolean>;
+    readonly hasSuffix: Signal<boolean>;
+    readonly showRequiredMarker: Signal<boolean>;
+    readonly showErrors: Signal<boolean>;
+    protected readonly hostClasses: Signal<string>;
+    protected readonly containerClasses: Signal<string>;
+    protected readonly labelClasses: Signal<string>;
+    protected readonly subscriptClasses: Signal<string>;
+    constructor();
+    protected onContainerClick(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComFormField, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComFormField, "com-form-field", ["comFormField"], { "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "floatLabel": { "alias": "floatLabel"; "required": false; "isSignal": true; }; "hideRequiredMarker": { "alias": "hideRequiredMarker"; "required": false; "isSignal": true; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, ["control", "inputDirective", "labelChild", "hintChildren", "errorChildren", "prefixChild", "suffixChild"], ["[comPrefix]", "[comLabel]", "*", "[comSuffix]", "[comError]", "[comHint]:not([align='end'])", "[comHint][align='end']"], true, never>;
+}
+
+export { ComError, ComFormField, ComHint, ComInput, ComLabel, ComPrefix, ComSuffix, ErrorStateMatcher, FORM_FIELD_DEFAULTS, FormFieldControl, errorVariants, formFieldContainerVariants, formFieldLabelVariants, formFieldSubscriptVariants, formFieldVariants, hintVariants, prefixVariants, suffixVariants };
+export type { FormFieldAppearance, FormFieldColor, FormFieldContainerVariants, FormFieldDefaults, FormFieldFloatLabel, FormFieldLabelVariants, FormFieldSubscriptSizing, FormFieldSubscriptVariants, FormFieldVariants, HintAlign };

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

@@ -0,0 +1,94 @@
+import * as i0 from '@angular/core';
+import { InputSignal, Signal, Provider } from '@angular/core';
+import { LucideIconData, LucideIcons } from 'lucide-angular';
+import { VariantProps } from 'class-variance-authority';
+
+type IconColor = 'current' | 'primary' | 'accent' | 'warn' | 'success' | 'muted' | 'disabled';
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+declare const iconVariants: (props?: {
+    color?: IconColor;
+    size?: IconSize;
+}) => string;
+/** Pixel values matching the CSS tokens — passed to Lucide's numeric [size] prop */
+declare const ICON_SIZE_PX: Record<IconSize, number>;
+type IconVariants = VariantProps<typeof iconVariants>;
+
+/**
+ * Icon component — renders Lucide icons with CVA-powered color and size variants.
+ *
+ * Icons inherit `currentColor` by default, making them automatically match
+ * surrounding text. Use the `color` input for semantic color variants that
+ * respond to theme changes.
+ *
+ * @tokens `--color-primary`, `--color-accent`, `--color-warn`, `--color-success`,
+ *         `--color-muted-foreground`, `--color-disabled-foreground`,
+ *         `--size-icon-xs`, `--size-icon-sm`, `--size-icon-md`,
+ *         `--size-icon-lg`, `--size-icon-xl`, `--size-icon-2xl`
+ *
+ * @example Basic usage (requires icon registration via provideComIcons)
+ * ```html
+ * <com-icon name="star" />
+ * <com-icon name="check" color="success" size="sm" />
+ * <com-icon name="alert-triangle" color="warn" />
+ * ```
+ *
+ * @example Direct icon reference (no provider needed)
+ * ```html
+ * <com-icon [img]="StarIcon" color="accent" size="2xl" />
+ * ```
+ *
+ * @example Accessible icon (not decorative)
+ * ```html
+ * <com-icon name="check" color="success" ariaLabel="Task completed" />
+ * ```
+ *
+ * @example Inline with text (inherits parent color)
+ * ```html
+ * <span class="text-primary">
+ *   <com-icon name="star" size="sm" /> Favorite
+ * </span>
+ * ```
+ */
+declare class ComIcon {
+    /** Icon name in kebab-case (e.g. 'chevron-right'). Requires provideComIcons registration. */
+    readonly name: InputSignal<string | undefined>;
+    /** Direct Lucide icon reference. Takes precedence over `name`. */
+    readonly img: InputSignal<LucideIconData | undefined>;
+    /** Semantic color variant. Defaults to 'current' (inherits from parent). */
+    readonly color: InputSignal<IconColor>;
+    /** Size variant. Defaults to 'lg' (24px). */
+    readonly size: InputSignal<IconSize>;
+    /** Stroke width. Defaults to 2. */
+    readonly strokeWidth: InputSignal<number>;
+    /** When true, stroke width doesn't scale with icon size. */
+    readonly absoluteStrokeWidth: InputSignal<boolean>;
+    /** Applies aria-label and removes aria-hidden. Use for meaningful icons. */
+    readonly ariaLabel: InputSignal<string | undefined>;
+    protected readonly sizeInPx: Signal<number>;
+    protected readonly hostClasses: Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComIcon, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComIcon, "com-icon", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "img": { "alias": "img"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "absoluteStrokeWidth": { "alias": "absoluteStrokeWidth"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Provides Lucide icons for use with `com-icon`.
+ *
+ * Register icons in your application config to use them by name:
+ *
+ * @example
+ * ```ts
+ * // app.config.ts
+ * import { provideComIcons } from 'ngx-com/components/icon';
+ * import { ChevronRight, Star, Check, AlertTriangle } from 'lucide-angular';
+ *
+ * export const appConfig = {
+ *   providers: [
+ *     provideComIcons({ ChevronRight, Star, Check, AlertTriangle })
+ *   ]
+ * };
+ * ```
+ */
+declare function provideComIcons(icons: LucideIcons): Provider;
+
+export { ComIcon, ICON_SIZE_PX, iconVariants, provideComIcons };
+export type { IconColor, IconSize, IconVariants };