ngx-com 0.0.21 → 0.1.0

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

@@ -7,6 +7,8 @@ import { VariantProps } from 'class-variance-authority';
  *
  * Use with the star syntax inside a `comColumnDef` container.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <ng-container comColumnDef="name">
@@ -32,6 +34,8 @@ interface CellDefContext<T> {
  *
  * Use with the star syntax inside a `comColumnDef` container.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <ng-container comColumnDef="name">
@@ -51,6 +55,8 @@ declare class ComCellDef<T = unknown> {
  *
  * Use with the star syntax inside a `comColumnDef` container.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <ng-container comColumnDef="amount">
@@ -71,6 +77,8 @@ declare class ComFooterCellDef {
  *
  * Contains a header cell template, a body cell template, and an optional footer cell template.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <ng-container comColumnDef="name">
@@ -95,6 +103,8 @@ declare class ComColumnDef {
 /**
  * Defines which columns appear in the header row and their order.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <tr comHeaderRowDef="['name', 'email', 'role']"></tr>
@@ -117,6 +127,8 @@ declare class ComHeaderRowDef {
 /**
  * Defines which columns appear in each body row and their order.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <tr comRowDef [comRowDefColumns]="['name', 'email', 'role']"></tr>
@@ -132,6 +144,8 @@ declare class ComRowDef {
 /**
  * Defines which columns appear in the footer row and their order.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <tr comFooterRowDef="['description', 'amount']"></tr>
@@ -149,6 +163,8 @@ declare class ComFooterRowDef {
  *
  * Place inside `com-table`. The template receives the column count for colspan.
  *
+ * @tokens none
+ *
  * @example
  * ```html
  * <com-table [dataSource]="data()">
@@ -350,8 +366,6 @@ declare class ComTable<T> {
     /** @internal Map of column name → column definition for O(1) lookup. */
     protected readonly columnDefMap: Signal<Map<string, ComColumnDef>>;
     /** @internal Resolved render data — handles both array and DataSource inputs. */
-    private readonly dataSourceSignal;
-    /** @internal The actual data array to render. */
     readonly renderData: Signal<readonly T[]>;
     /** @internal Header column names. */
     protected readonly headerColumns: Signal<string[]>;

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

@@ -6,7 +6,9 @@ import { VariantProps } from 'class-variance-authority';
  * Marker directive for custom tab label templates.
  *
  * Provides a custom label template for rich tab headers (icons, badges, counters).
- * Applied to an `<ng-template>` inside `<ui-tab>`.
+ * Applied to an `<ng-template>` inside `<com-tab>`.
+ *
+ * @tokens none
  *
  * @example
  * ```html
@@ -20,11 +22,11 @@ import { VariantProps } from 'class-variance-authority';
  * </com-tab>
  * ```
  */
-declare class TabLabelDirective {
+declare class ComTabLabel {
     readonly templateRef: TemplateRef<void>;
-    static ngTemplateContextGuard(_dir: TabLabelDirective, ctx: unknown): ctx is void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TabLabelDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TabLabelDirective, "ng-template[comTabLabel]", never, {}, {}, never, never, true, never>;
+    static ngTemplateContextGuard(_dir: ComTabLabel, ctx: unknown): ctx is void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComTabLabel, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComTabLabel, "ng-template[comTabLabel]", never, {}, {}, never, never, true, never>;
 }
 
 /**
@@ -33,6 +35,8 @@ declare class TabLabelDirective {
  * Content wrapped in `<ng-template comTabContent>` is only instantiated
  * when the tab becomes active for the first time.
  *
+ * @tokens none
+ *
  * @example Lazy loaded content
  * ```html
  * <com-tab label="Analytics">
@@ -55,18 +59,20 @@ declare class TabLabelDirective {
  * </com-tab>
  * ```
  */
-declare class TabContentDirective {
+declare class ComTabContent {
     readonly templateRef: TemplateRef<void>;
-    static ngTemplateContextGuard(_dir: TabContentDirective, ctx: unknown): ctx is void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TabContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TabContentDirective, "ng-template[comTabContent]", never, {}, {}, never, never, true, never>;
+    static ngTemplateContextGuard(_dir: ComTabContent, ctx: unknown): ctx is void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComTabContent, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComTabContent, "ng-template[comTabContent]", never, {}, {}, never, never, true, never>;
 }
 
 /**
  * Individual tab definition component.
  *
  * This is a **definition component** — it doesn't render anything itself.
- * It provides a label and content template to the parent `TabGroupComponent`.
+ * It provides a label and content template to the parent `ComTabGroup`.
+ *
+ * @tokens none
  *
  * @example Basic usage
  * ```html
@@ -102,7 +108,7 @@ declare class TabContentDirective {
  * </com-tab>
  * ```
  */
-declare class TabComponent {
+declare class ComTab {
     /** Plain text label; ignored if `[comTabLabel]` template is provided. */
     readonly label: InputSignal<string>;
     /** Prevents selection when true. */
@@ -112,12 +118,12 @@ declare class TabComponent {
     /** Emitted when the close button is clicked. */
     readonly closed: OutputEmitterRef<void>;
     /** Custom label template (queried from content). */
-    readonly customLabel: Signal<TabLabelDirective | undefined>;
+    readonly customLabel: Signal<ComTabLabel | undefined>;
     /** Lazy content template (queried from content). */
-    readonly lazyContent: Signal<TabContentDirective | undefined>;
+    readonly lazyContent: Signal<ComTabContent | undefined>;
     /** Implicit content template from ng-content. */
     readonly implicitContent: Signal<TemplateRef<unknown> | undefined>;
-    /** Whether this tab is currently active. Set by TabGroupComponent. */
+    /** Whether this tab is currently active. Set by ComTabGroup. */
     readonly isActive: WritableSignal<boolean>;
     /** Whether this tab content has been rendered at least once. */
     readonly hasBeenActivated: WritableSignal<boolean>;
@@ -134,8 +140,8 @@ declare class TabComponent {
      * Whether this tab uses lazy loading.
      */
     readonly isLazy: Signal<boolean>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "com-tab", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, ["customLabel", "lazyContent"], ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComTab, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComTab, "com-tab", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, ["customLabel", "lazyContent"], ["*"], true, never>;
 }
 
 type TabVariant = 'underline' | 'pill' | 'outline' | 'solid';
@@ -174,7 +180,7 @@ type TabPanelVariants = VariantProps<typeof tabPanelVariants>;
 /** Event emitted when the selected tab changes. */
 interface TabChangeEvent {
     index: number;
-    tab: TabComponent;
+    tab: ComTab;
 }
 /**
  * Tab group component — orchestrates tab state and renders header + panels.
@@ -223,7 +229,7 @@ interface TabChangeEvent {
  * </com-tab-group>
  * ```
  */
-declare class TabGroupComponent {
+declare class ComTabGroup {
     /** Unique ID for this tab group instance. */
     readonly baseId: string;
     /** Visual treatment of tab buttons. */
@@ -244,10 +250,10 @@ declare class TabGroupComponent {
     readonly selectedTabChange: OutputEmitterRef<TabChangeEvent>;
     /** Emits the index of the focused (not yet selected) tab for keyboard navigation feedback. */
     readonly focusChange: OutputEmitterRef<number>;
-    /** All TabComponent children. */
-    readonly tabs: Signal<readonly TabComponent[]>;
+    /** All ComTab children. */
+    readonly tabs: Signal<readonly ComTab[]>;
     /** The currently active tab. */
-    readonly activeTab: Signal<TabComponent | undefined>;
+    readonly activeTab: Signal<ComTab | undefined>;
     /** ID of the active tab button. */
     readonly activeTabId: Signal<string>;
     /** ID of the active panel. */
@@ -261,12 +267,12 @@ declare class TabGroupComponent {
      * Determines whether a tab's content should be rendered.
      * For lazy tabs, content is only rendered after first activation.
      */
-    shouldRenderTab(tab: TabComponent, index: number): boolean;
+    shouldRenderTab(tab: ComTab, _index: number): boolean;
     protected onTabSelected(index: number): void;
     protected onTabFocused(index: number): void;
     protected onTabClosed(index: number): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TabGroupComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabGroupComponent, "com-tab-group", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "animationEnabled": { "alias": "animationEnabled"; "required": false; "isSignal": true; }; "preserveContent": { "alias": "preserveContent"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; "selectedTabChange": "selectedTabChange"; "focusChange": "focusChange"; }, ["tabs"], never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComTabGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComTabGroup, "com-tab-group", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "animationEnabled": { "alias": "animationEnabled"; "required": false; "isSignal": true; }; "preserveContent": { "alias": "preserveContent"; "required": false; "isSignal": true; }; }, { "selectedIndex": "selectedIndexChange"; "selectedTabChange": "selectedTabChange"; "focusChange": "focusChange"; }, ["tabs"], never, true, never>;
 }
 
 /**
@@ -275,6 +281,12 @@ declare class TabGroupComponent {
  * Applied to anchor or button elements inside `com-tab-nav-bar`.
  * Automatically detects active state from `routerLinkActive` if present.
  *
+ * @tokens `--color-primary`, `--color-primary-foreground`, `--color-primary-subtle`,
+ *         `--color-accent`, `--color-accent-foreground`, `--color-accent-subtle`,
+ *         `--color-foreground`, `--color-muted-foreground`, `--color-muted`,
+ *         `--color-border`, `--color-ring`,
+ *         `--color-disabled`, `--color-disabled-foreground`
+ *
  * @example Basic usage with router
  * ```html
  * <nav com-tab-nav-bar>
@@ -293,7 +305,7 @@ declare class TabGroupComponent {
  * <a comTabLink [disabled]="true">Coming Soon</a>
  * ```
  */
-declare class TabLinkDirective {
+declare class ComTabLink {
     private readonly routerLinkActive;
     private readonly elementRef;
     /** Manual active state control. */
@@ -321,8 +333,8 @@ declare class TabLinkDirective {
     readonly computedClass: Signal<string>;
     /** Focus this tab link element. */
     focus(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TabLinkDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TabLinkDirective, "a[comTabLink], button[comTabLink]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComTabLink, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComTabLink, "a[comTabLink], button[comTabLink]", never, { "active": { "alias": "active"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -351,7 +363,7 @@ declare class TabLinkDirective {
  * </nav>
  * ```
  */
-declare class TabNavBarComponent {
+declare class ComTabNavBar {
     private readonly destroyRef;
     /** Unique ID for this nav bar instance. */
     readonly baseId: string;
@@ -363,8 +375,8 @@ declare class TabNavBarComponent {
     readonly color: InputSignal<TabColor>;
     /** Tab alignment within the bar. */
     readonly alignment: InputSignal<TabAlignment>;
-    /** All TabLinkDirective children. */
-    readonly tabLinks: Signal<readonly TabLinkDirective[]>;
+    /** All ComTabLink children. */
+    readonly tabLinks: Signal<readonly ComTabLink[]>;
     readonly scrollContainer: Signal<ElementRef<HTMLElement> | undefined>;
     private readonly scrollLeftValue;
     private readonly containerWidth;
@@ -374,7 +386,7 @@ declare class TabNavBarComponent {
     private keyManager;
     private resizeObserver;
     /** The currently active link. */
-    readonly activeLink: Signal<TabLinkDirective | undefined>;
+    readonly activeLink: Signal<ComTabLink | undefined>;
     readonly hasOverflow: Signal<boolean>;
     readonly showScrollLeft: Signal<boolean>;
     readonly showScrollRight: Signal<boolean>;
@@ -391,9 +403,9 @@ declare class TabNavBarComponent {
     private updateScrollState;
     private setupKeyManager;
     private createKeyManagerItems;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TabNavBarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabNavBarComponent, "com-tab-nav-bar, nav[com-tab-nav-bar]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; }, {}, ["tabLinks"], ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComTabNavBar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComTabNavBar, "com-tab-nav-bar, nav[com-tab-nav-bar]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "alignment": { "alias": "alignment"; "required": false; "isSignal": true; }; }, {}, ["tabLinks"], ["*"], true, never>;
 }
 
-export { TabComponent, TabContentDirective, TabGroupComponent, TabLabelDirective, TabLinkDirective, TabNavBarComponent, tabCloseButtonVariants, tabHeaderVariants, tabItemVariants, tabPanelVariants, tabScrollButtonVariants };
+export { ComTab, ComTabContent, ComTabGroup, ComTabLabel, ComTabLink, ComTabNavBar, tabCloseButtonVariants, tabHeaderVariants, tabItemVariants, tabPanelVariants, tabScrollButtonVariants };
 export type { TabAlignment, TabChangeEvent, TabCloseButtonVariants, TabColor, TabHeaderVariants, TabItemVariants, TabPanelVariants, TabScrollButtonVariants, TabSize, TabVariant };

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

@@ -0,0 +1,273 @@
+import { VariantProps } from 'class-variance-authority';
+import * as i0 from '@angular/core';
+import { ModelSignal, InputSignal, OutputEmitterRef, WritableSignal, Signal } from '@angular/core';
+import { ControlValueAccessor, Validator, NgControl, ValidationErrors } from '@angular/forms';
+import { FormFieldControl, ErrorStateMatcher, FormFieldAppearance } from 'ngx-com/components/form-field';
+
+/**
+ * Types and interfaces for the TimePicker component.
+ */
+/** Value type for the standalone time picker */
+interface ComTimeValue {
+    /** Hours (0-23, always stored in 24h format internally) */
+    hours: number;
+    /** Minutes (0-59) */
+    minutes: number;
+    /** Seconds (0-59) */
+    seconds: number;
+}
+/** Creates a ComTimeValue */
+declare function createTimeValue(hours?: number, minutes?: number, seconds?: number): ComTimeValue;
+/**
+ * Compares two ComTimeValue objects.
+ * @returns negative if a < b, 0 if equal, positive if a > b
+ */
+declare function compareTime(a: ComTimeValue, b: ComTimeValue): number;
+declare function generateTimePickerId(): string;
+/** Size variants for time picker */
+type TimePickerSize = 'sm' | 'default' | 'lg';
+/** Visual variant */
+type TimePickerVariant = 'standalone' | 'embedded' | 'naked';
+/** Validation state */
+type TimePickerState = 'default' | 'error' | 'success';
+/** Period for 12-hour format */
+type TimePeriod = 'AM' | 'PM';
+/** Segment type */
+type TimeSegment = 'hours' | 'minutes' | 'seconds';
+
+/**
+ * CVA variants for the time picker container.
+ *
+ * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
+ *         `--color-ring`, `--color-warn`, `--color-success`, `--radius-input`
+ */
+declare const timepickerContainerVariants: (props?: {
+    variant?: TimePickerVariant;
+    size?: TimePickerSize;
+    state?: TimePickerState;
+}) => string;
+type TimepickerContainerVariants = VariantProps<typeof timepickerContainerVariants>;
+/**
+ * CVA variants for the disabled state of time picker.
+ *
+ * @tokens `--color-disabled`, `--color-disabled-foreground`
+ */
+declare const timepickerDisabledVariants: () => string;
+type TimepickerDisabledVariants = VariantProps<typeof timepickerDisabledVariants>;
+/**
+ * CVA variants for each time segment input.
+ *
+ * @tokens `--color-primary-subtle`, `--color-primary-subtle-foreground`, `--radius-interactive-sm`
+ */
+declare const timepickerSegmentVariants: (props?: {
+    size?: TimePickerSize;
+}) => string;
+type TimepickerSegmentVariants = VariantProps<typeof timepickerSegmentVariants>;
+/**
+ * CVA variants for the colon separator.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const timepickerSeparatorVariants: (props?: {
+    size?: TimePickerSize;
+}) => string;
+type TimepickerSeparatorVariants = VariantProps<typeof timepickerSeparatorVariants>;
+/**
+ * CVA variants for the AM/PM toggle button.
+ *
+ * @tokens `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`, `--color-ring`,
+ *         `--radius-control-sm`
+ */
+declare const timepickerPeriodVariants: (props?: {
+    size?: TimePickerSize;
+}) => string;
+type TimepickerPeriodVariants = VariantProps<typeof timepickerPeriodVariants>;
+/**
+ * CVA variants for the time section divider in datepicker panel.
+ *
+ * @tokens `--color-border-subtle`
+ */
+declare const timepickerSectionVariants: (props?: {
+    size?: TimePickerSize;
+}) => string;
+type TimepickerSectionVariants = VariantProps<typeof timepickerSectionVariants>;
+/**
+ * CVA variants for time labels in date range picker.
+ *
+ * @tokens `--color-muted-foreground`
+ */
+declare const timepickerLabelVariants: (props?: {
+    size?: TimePickerSize;
+}) => string;
+type TimepickerLabelVariants = VariantProps<typeof timepickerLabelVariants>;
+
+/**
+ * Time picker component with segmented numeric input fields.
+ * Supports standalone usage with ControlValueAccessor and embedded usage
+ * within datepicker/date-range-picker panels.
+ *
+ * Visual layout: `[HH] : [MM] : [SS] [AM|PM]`
+ *
+ * @tokens `--color-input-background`, `--color-input-foreground`, `--color-input-border`,
+ *         `--color-ring`, `--color-primary-subtle`, `--color-primary-subtle-foreground`,
+ *         `--color-muted`, `--color-muted-foreground`, `--color-muted-hover`,
+ *         `--color-disabled`, `--color-disabled-foreground`,
+ *         `--color-warn`, `--color-success`, `--color-border`
+ *
+ * @example
+ * ```html
+ * <!-- Standalone with reactive forms -->
+ * <com-time-picker formControlName="startTime" />
+ *
+ * <!-- 12-hour format with seconds -->
+ * <com-time-picker formControlName="alarm" [use12HourFormat]="true" [showSeconds]="true" />
+ *
+ * <!-- 15-minute steps -->
+ * <com-time-picker formControlName="meeting" [minuteStep]="15" />
+ *
+ * <!-- Embedded inside datepicker panel -->
+ * <com-time-picker variant="embedded" [value]="time" (timeChange)="onTime($event)" />
+ * ```
+ */
+declare class ComTimePicker implements ControlValueAccessor, FormFieldControl<ComTimeValue | null>, Validator {
+    private readonly localeId;
+    readonly ngControl: NgControl | null;
+    private readonly defaultErrorStateMatcher;
+    private readonly parentForm;
+    private readonly parentFormGroup;
+    private readonly timepickerId;
+    private readonly hoursInputRef;
+    private readonly minutesInputRef;
+    private readonly secondsInputRef;
+    private readonly periodButtonRef;
+    /** Current time value. */
+    readonly value: ModelSignal<ComTimeValue | null>;
+    /** Whether the time picker is disabled. */
+    readonly disabled: ModelSignal<boolean>;
+    /** Whether the time picker is required. */
+    readonly required: InputSignal<boolean>;
+    /** Whether to show the seconds segment. */
+    readonly showSeconds: InputSignal<boolean>;
+    /** 12h vs 24h format. `null` = auto-detect from locale. */
+    readonly use12HourFormat: InputSignal<boolean | null>;
+    /** Step interval for minutes. */
+    readonly minuteStep: InputSignal<number>;
+    /** Step interval for seconds. */
+    readonly secondStep: InputSignal<number>;
+    /** Minimum selectable time. */
+    readonly minTime: InputSignal<ComTimeValue | null>;
+    /** Maximum selectable time. */
+    readonly maxTime: InputSignal<ComTimeValue | null>;
+    /** Visual variant. */
+    readonly variant: InputSignal<TimePickerVariant>;
+    /** Size variant. */
+    readonly size: InputSignal<TimePickerSize>;
+    /** Validation state. */
+    readonly state: InputSignal<TimePickerState>;
+    /** Accessible label for the group. */
+    readonly ariaLabel: InputSignal<string | null>;
+    /** Additional CSS classes. */
+    readonly userClass: InputSignal<string>;
+    /** Placeholder text for empty segments. */
+    readonly placeholder: InputSignal<string>;
+    /** Custom error state matcher for determining when to show errors. */
+    readonly errorStateMatcher: InputSignal<ErrorStateMatcher | undefined>;
+    readonly touched: ModelSignal<boolean>;
+    readonly invalid: InputSignal<boolean>;
+    readonly sfErrors: InputSignal<readonly unknown[]>;
+    /** Emitted when time value changes. */
+    readonly timeChange: OutputEmitterRef<ComTimeValue | null>;
+    /** Internal value state. */
+    readonly internalValue: WritableSignal<ComTimeValue | null>;
+    /** Which segment is currently focused. */
+    readonly activeSegment: WritableSignal<TimeSegment | 'period' | null>;
+    /** Pending typed digits for auto-advance. */
+    readonly pendingDigits: WritableSignal<string>;
+    /** Live announcements for screen readers. */
+    readonly liveAnnouncement: WritableSignal<string>;
+    /** IDs for aria-describedby (set by form-field). */
+    private readonly _describedByIds;
+    /** Form field appearance (set by form-field). */
+    private readonly _appearance;
+    /** Whether the time picker is focused. Implements FormFieldControl. */
+    readonly focused: Signal<boolean>;
+    /** Whether the label should float. */
+    readonly shouldLabelFloat: Signal<boolean>;
+    /** Whether the control is in an error state. Implements FormFieldControl. */
+    readonly errorState: Signal<boolean>;
+    /** Structured validation errors from Signal Forms. */
+    readonly errors: Signal<readonly unknown[] | null>;
+    /** Unique ID for the control (maps to hours input). Implements FormFieldControl. */
+    readonly id: Signal<string>;
+    /**
+     * Effective state combining manual state with automatic error detection.
+     */
+    readonly effectiveState: Signal<TimePickerState>;
+    /** Combined aria-describedby from form-field. */
+    readonly effectiveAriaDescribedBy: Signal<string | null>;
+    /** Whether to use 12-hour format. */
+    readonly is12Hour: Signal<boolean>;
+    /** Current period (AM/PM). */
+    readonly period: Signal<TimePeriod>;
+    /** Display hours (converted from 24h to 12h when needed). */
+    readonly displayHours: Signal<number | null>;
+    /** Formatted hours string. */
+    readonly formattedHours: Signal<string>;
+    /** Formatted minutes string. */
+    readonly formattedMinutes: Signal<string>;
+    /** Formatted seconds string. */
+    readonly formattedSeconds: Signal<string>;
+    /** Container classes. */
+    readonly containerClasses: Signal<string>;
+    /** Segment input classes. */
+    readonly segmentClasses: Signal<string>;
+    /** Separator classes. */
+    readonly separatorClasses: Signal<string>;
+    /** Period button classes. */
+    readonly periodClasses: Signal<string>;
+    private onChange;
+    private onTouched;
+    private onValidatorChange;
+    constructor();
+    writeValue(value: ComTimeValue | null): void;
+    registerOnChange(fn: (value: ComTimeValue | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    validate(): ValidationErrors | null;
+    registerOnValidatorChange(fn: () => void): void;
+    protected onSegmentFocus(segment: TimeSegment): void;
+    protected onSegmentBlur(segment: TimeSegment): void;
+    protected onSegmentInput(event: Event, segment: TimeSegment): void;
+    protected onSegmentKeydown(event: KeyboardEvent, segment: TimeSegment): void;
+    protected onPeriodKeydown(event: KeyboardEvent): void;
+    protected togglePeriod(): void;
+    /**
+     * Called when the form field container is clicked.
+     * Implements FormFieldControl.
+     */
+    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;
+    private setPeriod;
+    private incrementSegment;
+    private handleDigitInput;
+    private snapToStep;
+    private setSegmentToMin;
+    private setSegmentToMax;
+    private focusNextSegment;
+    private focusPrevSegment;
+    private updateValue;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComTimePicker, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ComTimePicker, "com-time-picker", ["comTimePicker"], { "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "showSeconds": { "alias": "showSeconds"; "required": false; "isSignal": true; }; "use12HourFormat": { "alias": "use12HourFormat"; "required": false; "isSignal": true; }; "minuteStep": { "alias": "minuteStep"; "required": false; "isSignal": true; }; "secondStep": { "alias": "secondStep"; "required": false; "isSignal": true; }; "minTime": { "alias": "minTime"; "required": false; "isSignal": true; }; "maxTime": { "alias": "maxTime"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "userClass": { "alias": "class"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "sfErrors": { "alias": "errors"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "disabled": "disabledChange"; "touched": "touchedChange"; "timeChange": "timeChange"; }, never, never, true, never>;
+}
+
+export { ComTimePicker, compareTime, createTimeValue, generateTimePickerId, timepickerContainerVariants, timepickerDisabledVariants, timepickerLabelVariants, timepickerPeriodVariants, timepickerSectionVariants, timepickerSegmentVariants, timepickerSeparatorVariants };
+export type { ComTimeValue, TimePeriod, TimePickerSize, TimePickerState, TimePickerVariant, TimeSegment, TimepickerContainerVariants, TimepickerDisabledVariants, TimepickerLabelVariants, TimepickerPeriodVariants, TimepickerSectionVariants, TimepickerSegmentVariants, TimepickerSeparatorVariants };

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

@@ -187,7 +187,7 @@ declare function provideComToastConfig(config: ComToastConfig): Provider;
  *         `--color-warn`, `--color-warn-foreground`,
  *         `--color-warn-subtle`, `--color-warn-subtle-foreground`,
  *         `--color-primary-subtle`, `--color-primary-subtle-foreground`,
- *         `--color-border`, `--shadow-lg`, `--radius-card`
+ *         `--color-border`, `--shadow-overlay`, `--radius-card`
  */
 declare const toastVariants: (props?: {
     type?: ComToastType;
@@ -207,7 +207,9 @@ declare const toastProgressVariants: (props?: {
 /**
  * CVA variants for the toast close button.
  *
- * @tokens `--color-ring`, `--radius-card`
+ * @tokens `--color-ring`, `--radius-card`,
+ *         `--color-success-foreground-muted`, `--color-warn-subtle-foreground-muted`,
+ *         `--color-warn-foreground-muted`, `--color-primary-subtle-foreground-muted`
  */
 declare const toastCloseButtonVariants: (props?: {
     type?: ComToastType;

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

@@ -153,7 +153,7 @@ declare class ComTooltip {
     protected onFocusIn(): void;
     protected onFocusOut(): void;
     protected onEscapeKey(): void;
-    protected onTouchStart(event: TouchEvent): void;
+    protected onTouchStart(_event: TouchEvent): void;
     /** Called when mouse enters the tooltip panel. */
     private onPanelMouseEnter;
     /** Called when mouse leaves the tooltip panel. */

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

@@ -1,12 +1,11 @@
 /**
  * ngx-com/components
- * Component exports for ngx-com library
  *
- * Note: Components are exposed as secondary entry points:
- * - ngx-com/components/calendar
- *
- * Import from the specific secondary entry points for tree-shaking.
+ * This secondary entry point is intentionally empty.
+ * Individual components are imported from their own entry points
+ * (e.g. `ngx-com/components/button`, `ngx-com/components/calendar`)
+ * to enable tree-shaking.
  */
-declare const COMPONENTS_PLACEHOLDER = true;
+type ComComponentsEntryPoint = never;
 
-export { COMPONENTS_PLACEHOLDER };
+export type { ComComponentsEntryPoint };

package/types/ngx-com-tokens.d.ts

@@ -1,7 +1,9 @@
 /**
  * ngx-com/tokens
- * Injection token exports for ngx-com library
+ *
+ * Reserved secondary entry point for design token utilities.
+ * Tokens will be added here as needed.
  */
-declare const TOKENS_PLACEHOLDER: boolean;
+type ComTokensEntryPoint = never;
 
-export { TOKENS_PLACEHOLDER };
+export type { ComTokensEntryPoint };

package/types/ngx-com-utils.d.ts

@@ -15,6 +15,16 @@ import { ClassValue } from 'clsx';
  */
 declare function mergeClasses(...inputs: ClassValue[]): string;
 
+/**
+ * Joins CSS class strings, filtering out null/undefined values.
+ * Unlike `mergeClasses` from utils, this does NOT resolve Tailwind conflicts -
+ * it simply concatenates class strings. Use when classes are guaranteed not to conflict.
+ *
+ * @param classes - Class strings (may include null/undefined)
+ * @returns Space-separated class string
+ */
+declare function joinClasses(...classes: (string | undefined | null)[]): string;
+
 /**
  * A debounced function wrapper with cancel and flush capabilities.
  *
@@ -420,5 +430,5 @@ declare function partition<T>(array: T[], predicate: (item: T) => boolean): [T[]
  */
 declare function groupBy<K extends string | number | symbol, V>(collection: V[], predicate: (item: V) => K): Record<K, V[]>;
 
-export { chunk, debounce, deepClone, deepEqual, deepMerge, groupBy, isPlainObject, mergeClasses, omit, partition, pick, resolvePath, retry, throttle };
+export { chunk, debounce, deepClone, deepEqual, deepMerge, groupBy, isPlainObject, joinClasses, mergeClasses, omit, partition, pick, resolvePath, retry, throttle };
 export type { DebounceOptions, DebouncedFn, ResolvePath, RetryOptions, ThrottledFn };