@tekus/design-system 5.17.0 → 5.19.0

package/assets/tokens/tk-foundations.json

@@ -527,7 +527,7 @@
       }
     },
     "paddingX": {
-      "nome": {
+      "none": {
         "value": "{tk-spacing.base.0}",
         "type": "number"
       },
@@ -553,7 +553,7 @@
       }
     },
     "paddingY": {
-      "nome": {
+      "none": {
         "value": "{tk-spacing.base.0}",
         "type": "number"
       },
@@ -579,7 +579,7 @@
       }
     },
     "gap": {
-      "nome": {
+      "none": {
         "value": "{tk-spacing.base.0}",
         "type": "number"
       },
@@ -608,11 +608,11 @@
     },
     "weight": {
       "400": {
-        "value": "Regular",
+        "value": "400",
         "type": "text"
       },
       "600": {
-        "value": "SemiBold",
+        "value": "600",
         "type": "text"
       }
     },

package/components/checkbox/src/checkbox.component.d.ts

@@ -55,12 +55,19 @@ export declare class CheckboxComponent implements ControlValueAccessor, OnInit,
      * Message to display when the control is invalid and touched.
      */
     errorMessage: import("@angular/core").InputSignal<string>;
+    /**
+     * @property {ModelSignal<boolean>} indeterminate
+     * @description
+     * Indeterminate state of the checkbox (reactive).
+     * Useful for parent checkboxes in lists with partial selection.
+     */
+    indeterminate: import("@angular/core").ModelSignal<boolean>;
     /**
      * @property {boolean} disabled
      * @description
      * Whether the checkbox is disabled.
      */
-    disabled: import("@angular/core").WritableSignal<boolean>;
+    disabled: import("@angular/core").ModelSignal<boolean>;
     get effectiveControl(): FormControl;
     onChange: (value: unknown) => void;
     onTouched: () => void;
@@ -74,5 +81,5 @@ export declare class CheckboxComponent implements ControlValueAccessor, OnInit,
     onModelChange(value: unknown): void;
     onBlur(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "tk-checkbox", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "binary": { "alias": "binary"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "tk-checkbox", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "binary": { "alias": "binary"; "required": false; "isSignal": true; }; "control": { "alias": "control"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "indeterminate": "indeterminateChange"; "disabled": "disabledChange"; }, never, never, true, never>;
 }

package/components/drawer/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/drawer" />
+export * from './public-api';

package/components/drawer/public-api.d.ts

@@ -0,0 +1,3 @@
+export * from './src/drawer.component';
+export * from './src/services/drawer.service';
+export * from './src/drawer.types';

package/components/drawer/src/drawer.component.d.ts

@@ -0,0 +1,78 @@
+import { EventEmitter, Type, ElementRef } from '@angular/core';
+import { DrawerHeaderAction, DrawerSizeType } from './drawer.types';
+import * as i0 from "@angular/core";
+/**
+ * @component DrawerComponent
+ * @description
+ * A programmatically controlled drawer overlay used for displaying dynamic content,
+ * titles, and header actions. The drawer is opened through a service with a configuration object,
+ * similar to tk-modal.
+ *
+ * This component supports:
+ * - Required title with ellipsis for long text.
+ * - Optional header action button + close button.
+ * - Content as string or component.
+ * - Position: always right.
+ * - Sizes: small (500px), large (1024px).
+ * - Closable and dismissible mask behavior.
+ *
+ * @usage
+ * ### Open a drawer from TypeScript using the drawer service
+ * ```ts
+ * this.drawerService.open({
+ *   title: 'Drawer name',
+ *   content: 'Content text drawer example',
+ *   headerAction: {
+ *     label: 'Action',
+ *     severity: 'primary',
+ *     action: () => console.log('Action clicked'),
+ *     returnValue: true,
+ *   },
+ *   size: 'small',
+ * }).subscribe((result) => {
+ *   console.log('Drawer closed with value:', result);
+ * });
+ * ```
+ */
+export declare class DrawerComponent {
+    private readonly elementRef;
+    constructor(elementRef: ElementRef);
+    /** The required title displayed at the top left of the drawer header */
+    title: import("@angular/core").InputSignal<string>;
+    /** The main content of the drawer */
+    content: import("@angular/core").InputSignal<string | Type<unknown> | null>;
+    /** Optional header action button (displayed before close button) */
+    headerAction: import("@angular/core").InputSignal<DrawerHeaderAction | null>;
+    /** Drawer size: 'small' (500px), 'large' (1024px) */
+    size: import("@angular/core").InputSignal<DrawerSizeType>;
+    /** Whether the drawer can be closed by the user via close button */
+    closable: import("@angular/core").InputSignal<boolean>;
+    /** Whether clicking the mask closes the drawer */
+    dismissible: import("@angular/core").InputSignal<boolean>;
+    isContentString: import("@angular/core").Signal<boolean>;
+    hasHeaderAction: import("@angular/core").Signal<boolean>;
+    /** Computed: drawer width (responsive) and max-width based on `size`. Always right position. */
+    drawerStyle: import("@angular/core").Signal<{
+        width: string;
+        maxWidth: string;
+    }>;
+    /** Visibility flag. Use model for two-way binding when using drawer in template. */
+    isOpened: import("@angular/core").ModelSignal<boolean>;
+    /** Emits when the drawer closes, passing the return value from header action or null */
+    readonly onClose: EventEmitter<unknown>;
+    private alreadyEmitted;
+    private returnValueOnClose;
+    /** Opens the drawer */
+    open(): void;
+    /** Closes the drawer and emits onClose */
+    handleClose(): void;
+    /** Closes the drawer without emitting an event */
+    close(): void;
+    /**
+     * Handles header action button click.
+     * Executes the action callback, emits onClose with the provided returnValue, then closes the drawer.
+     */
+    handleHeaderAction(action: (() => void) | undefined, returnValue: unknown): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DrawerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<DrawerComponent, "tk-drawer", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "content": { "alias": "content"; "required": false; "isSignal": true; }; "headerAction": { "alias": "headerAction"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "isOpened": { "alias": "isOpened"; "required": false; "isSignal": true; }; }, { "isOpened": "isOpenedChange"; }, never, never, true, never>;
+}

package/components/drawer/src/drawer.types.d.ts

@@ -0,0 +1,19 @@
+import { Type } from '@angular/core';
+import { Variant } from '@tekus/design-system/components/button';
+import { SeverityType } from '@tekus/design-system/components/modal';
+export type DrawerSizeType = 'small' | 'large';
+export interface DrawerHeaderAction {
+    label: string;
+    severity: SeverityType;
+    action?: () => void;
+    returnValue?: unknown;
+    variant?: Variant;
+}
+export interface DrawerConfig {
+    title: string;
+    content?: string | Type<unknown>;
+    headerAction?: DrawerHeaderAction;
+    size?: DrawerSizeType;
+    closable?: boolean;
+    dismissible?: boolean;
+}

package/components/drawer/src/services/drawer.service.d.ts

@@ -0,0 +1,15 @@
+import { ApplicationRef, ComponentRef } from '@angular/core';
+import { DrawerComponent } from '../drawer.component';
+import { Observable } from 'rxjs';
+import { DrawerConfig } from '../drawer.types';
+import * as i0 from "@angular/core";
+export declare class DrawerService {
+    private readonly appRef;
+    private drawerRef;
+    constructor(appRef: ApplicationRef);
+    get _drawerRefForTesting(): ComponentRef<DrawerComponent> | null;
+    set _drawerRefForTesting(ref: ComponentRef<DrawerComponent> | null);
+    open(config: DrawerConfig): Observable<unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DrawerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DrawerService>;
+}

package/components/icon/core/icons/arrows-rotate.d.ts

@@ -0,0 +1,2 @@
+import { IconRegister } from "../icon-catalog";
+export declare const arrowsRotateIcon: IconRegister;

package/components/icon/core/icons/edit.d.ts

@@ -0,0 +1,2 @@
+import { IconRegister } from '../icon-catalog';
+export declare const editIcon: IconRegister;

package/components/icon/core/icons/globe-pointer.d.ts

@@ -0,0 +1,2 @@
+import { IconRegister } from '../icon-catalog';
+export declare const globePointerIcon: IconRegister;

package/components/icon/core/icons/grip-vertical.d.ts

@@ -0,0 +1,2 @@
+import { IconRegister } from '../icon-catalog';
+export declare const gridVerticalIcon: IconRegister;

package/components/multiselect/src/multiselect.component.d.ts

@@ -1,21 +1,27 @@
-import { EventEmitter } from '@angular/core';
-import { FormControl } from '@angular/forms';
+import { ControlValueAccessor, FormControl, NgControl } from '@angular/forms';
 import { MultiSelectOption } from './multiselect.types';
 import * as i0 from "@angular/core";
-export declare class MultiselectComponent {
+export declare class MultiselectComponent implements ControlValueAccessor {
+    readonly ngControl: NgControl | null;
+    constructor();
     /**
-     * @property {FormControl<MultiSelectOption[] | null>} control
+     * @property {Signal<MultiSelectOption[]>} selectionPool
      * @description
-     * External FormControl used to read/set the selected options.
-     * If not provided, an internal FormControl is created with an empty array value.
+     * Internal signal to keep track of selected items even if they are filtered out from the main options list.
      */
-    control: FormControl<MultiSelectOption[] | null>;
+    private readonly selectionPool;
+    /**
+     * @property {ModelSignal<MultiSelectOption[] | null>} model
+     * @description
+     * The model signal for two-way binding.
+     */
+    readonly model: import("@angular/core").ModelSignal<MultiSelectOption[] | null>;
     /**
      * @property {MultiSelectOption[]} options
      * @description
      * Array of available options shown in the multiselect dropdown.
      */
-    options: MultiSelectOption[];
+    options: import("@angular/core").InputSignal<MultiSelectOption[]>;
     /**
      * @property {string} labelText
      * @description
@@ -23,7 +29,7 @@ export declare class MultiselectComponent {
      *
      * @default 'Select'
      */
-    labelText: string;
+    labelText: import("@angular/core").InputSignal<string>;
     /**
      * @property {string} display
      * @description
@@ -31,7 +37,7 @@ export declare class MultiselectComponent {
      *
      * @default 'chip'
      */
-    display: string;
+    display: import("@angular/core").InputSignal<string>;
     /**
      * @property {number} maxSelectedLabels
      * @description
@@ -39,7 +45,7 @@ export declare class MultiselectComponent {
      *
      * @default 4
      */
-    maxSelectedLabels: number;
+    maxSelectedLabels: import("@angular/core").InputSignal<number>;
     /**
      * @property {string} selectedItemsLabel
      * @description
@@ -47,7 +53,7 @@ export declare class MultiselectComponent {
      *
      * @default '{0} elementos seleccionados'
      */
-    selectedItemsLabel: string;
+    selectedItemsLabel: import("@angular/core").InputSignal<string>;
     /**
      * @property {string} emptyFilterMessage
      * @description
@@ -55,7 +61,7 @@ export declare class MultiselectComponent {
      *
      * @default 'No hay resultados'
      */
-    emptyFilterMessage: string;
+    emptyFilterMessage: import("@angular/core").InputSignal<string>;
     /**
      * @property {boolean} filter
      * @description
@@ -63,13 +69,13 @@ export declare class MultiselectComponent {
      *
      * @default true
      */
-    filter: boolean;
+    filter: import("@angular/core").InputSignal<boolean>;
     /**
      * @property {string} filterPlaceHolder
      * @description
      * Placeholder text for the filter input.
      */
-    filterPlaceHolder: string;
+    filterPlaceHolder: import("@angular/core").InputSignal<string>;
     /**
      * @property {string} id
      * @description
@@ -77,13 +83,25 @@ export declare class MultiselectComponent {
      *
      * @default 'multiselect'
      */
-    id: string;
+    id: import("@angular/core").InputSignal<string>;
     /**
      * @property {string} styleClass
      * @description
      * Additional CSS class applied to the multiselect container.
      */
-    styleClass: string;
+    styleClass: import("@angular/core").InputSignal<string>;
+    /**
+   * @property {InputSignal<string>} errorMessage
+   * @description
+   * Message to display when the control is invalid and touched.
+   */
+    errorMessage: import("@angular/core").InputSignal<string>;
+    /**
+   * @property {InputSignal<string>} hint
+   * @description
+   * Hint text to display below the input.
+   */
+    hint: import("@angular/core").InputSignal<string>;
     /**
      * @event selectionChange
      * @description
@@ -93,7 +111,42 @@ export declare class MultiselectComponent {
      * @example
      * <tk-multiselect (selectionChange)="onChange($event)"></tk-multiselect>
      */
-    selectionChange: EventEmitter<MultiSelectOption[] | null>;
+    selectionChange: import("@angular/core").OutputEmitterRef<MultiSelectOption[] | null>;
+    /**
+     * @event filterChange
+     * @description
+     * Emits the filter text when the user types in the search input.
+     */
+    readonly filterChange: import("@angular/core").OutputEmitterRef<string>;
+    /**
+     * @property internalOptions
+     * @description
+     * Computed signal that merges the current options with the selected items pool
+     * to ensure selected items are always visible.
+     */
+    readonly internalOptions: import("@angular/core").Signal<any[]>;
+    /**
+     * @method handleFilter
+     * @description
+     * Handles the filter event from the PrimeNG component and emits the filter value.
+     *
+     * @param event - The filter event object.
+     */
+    handleFilter(event: {
+        filter: string;
+    }): void;
+    /**
+     * @callback onChange
+     * @description
+     * Callback function to notify the parent component of value changes.
+     */
+    onChange: (value: MultiSelectOption[] | null) => void;
+    /**
+     * @callback onTouched
+     * @description
+     * Callback function to notify the parent component when the control is touched.
+     */
+    onTouched: () => void;
     /**
      * @method handleChange
      * @description
@@ -105,6 +158,49 @@ export declare class MultiselectComponent {
     handleChange(event: {
         value: MultiSelectOption[] | null;
     }): void;
+    /**
+     * @method updateSelectionPool
+     * @description
+     * Updates the internal selection pool to ensure selected items persist
+     * even if they are filtered out from the main options list.
+     *
+     * @param items - The items to add to the pool.
+     */
+    private updateSelectionPool;
+    /**
+     * @method writeValue
+     * @description
+     * Writes a new value to the element.
+     * Part of the ControlValueAccessor interface.
+     *
+     * @param value - The new value.
+     */
+    writeValue(value: MultiSelectOption[] | null): void;
+    /**
+     * @method registerOnChange
+     * @description
+     * Registers a callback function that is called when the control's value changes in the UI.
+     * Part of the ControlValueAccessor interface.
+     *
+     * @param fn - The callback function.
+     */
+    registerOnChange(fn: (value: MultiSelectOption[] | null) => void): void;
+    /**
+     * @method registerOnTouched
+     * @description
+     * Registers a callback function that is called by the forms API on initialization to update the form control on 'blur'.
+     * Part of the ControlValueAccessor interface.
+     *
+     * @param fn - The callback function.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * @method effectiveControl
+     * @description
+     * Gets the effective FormControl associated with this component,
+     * either from NgControl or the internal model.
+     */
+    get effectiveControl(): FormControl | null;
     static ɵfac: i0.ɵɵFactoryDeclaration<MultiselectComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "tk-multiselect", never, { "control": { "alias": "control"; "required": false; }; "options": { "alias": "options"; "required": false; }; "labelText": { "alias": "labelText"; "required": false; }; "display": { "alias": "display"; "required": false; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterPlaceHolder": { "alias": "filterPlaceHolder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MultiselectComponent, "tk-multiselect", never, { "model": { "alias": "model"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "labelText": { "alias": "labelText"; "required": false; "isSignal": true; }; "display": { "alias": "display"; "required": false; "isSignal": true; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; "isSignal": true; }; "selectedItemsLabel": { "alias": "selectedItemsLabel"; "required": false; "isSignal": true; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; "isSignal": true; }; "filter": { "alias": "filter"; "required": false; "isSignal": true; }; "filterPlaceHolder": { "alias": "filterPlaceHolder"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "styleClass": { "alias": "styleClass"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, { "model": "modelChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; }, never, never, true, never>;
 }

package/components/panel/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/panel" />
+export * from './public-api';

package/components/panel/public-api.d.ts

@@ -0,0 +1 @@
+export * from './src/panel.component';

package/components/panel/src/panel.component.d.ts

@@ -0,0 +1,82 @@
+import { EventEmitter } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @component PanelComponent
+ * @description
+ * Panel is a container component with an optional content toggle feature.
+ * It wraps PrimeNG's Panel component and provides a consistent design across the application.
+ *
+ * The panel can be toggled between expanded and collapsed states using the chevron icon
+ * in the header. The component uses custom tk-icon for the toggle icons.
+ *
+ * @usage
+ * ```html
+ * <tk-panel
+ *   header="Panel Title"
+ *   [toggleable]="true"
+ *   [collapsed]="false">
+ *   <p>Panel content goes here</p>
+ * </tk-panel>
+ * ```
+ */
+export declare class PanelComponent {
+    /**
+     * @property {string} header
+     * @description
+     * Header text displayed at the top of the panel.
+     *
+     * @default undefined
+     */
+    header?: string;
+    /**
+     * @property {boolean} toggleable
+     * @description
+     * When enabled, the panel content can be expanded and collapsed.
+     *
+     * @default false
+     */
+    toggleable: boolean;
+    /**
+     * @property {boolean} collapsed
+     * @description
+     * Defines whether the panel is collapsed or expanded.
+     * Supports two-way binding.
+     *
+     * @default false
+     */
+    collapsed: boolean;
+    /**
+     * @event collapsedChange
+     * @description
+     * Emits when the collapsed state changes.
+     * Enables two-way binding with [(collapsed)].
+     */
+    collapsedChange: EventEmitter<boolean>;
+    /**
+     * @event toggled
+     * @description
+     * Callback to invoke when the panel is toggled.
+     * Emits an object with the collapsed state.
+     *
+     * @example
+     * ```html
+     * <tk-panel (toggled)="handleToggle($event)"></tk-panel>
+     * ```
+     */
+    toggled: EventEmitter<{
+        collapsed: boolean;
+    }>;
+    /**
+     * @method handleToggle
+     * @description
+     * Handles the toggle event from the PrimeNG panel.
+     * Updates the collapsed state and emits the appropriate events.
+     *
+     * @param event - The toggle event from PrimeNG panel
+     */
+    handleToggle(event: {
+        collapsed: boolean | undefined;
+    }): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PanelComponent, "tk-panel", never, { "header": { "alias": "header"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; }, { "collapsedChange": "collapsedChange"; "toggled": "toggled"; }, never, ["*"], true, never>;
+}

package/components/table/src/table.component.d.ts

@@ -41,12 +41,56 @@ export declare class TableComponent<T = unknown> {
      * ]"
      */
     columns: import("@angular/core").InputSignal<TableColumn<T>[]>;
+    /**
+     * @property {InputSignal<'single' | 'multiple' | undefined>} selectionMode
+     * @description
+     * Selection mode of the table.
+     */
+    selectionMode: import("@angular/core").InputSignal<"single" | "multiple" | undefined>;
+    /**
+     * @property {ModelSignal<any[]>} selection
+     * @description
+     * Selected row(s) in the table.
+     */
+    selection: import("@angular/core").ModelSignal<T[]>;
+    /**
+     * @property {InputSignal<string | undefined>} dataKey
+     * @description
+     * Property name to uniquely identify a row.
+     */
+    dataKey: import("@angular/core").InputSignal<string | undefined>;
     initialData: T[];
     internalData: T[];
     isSorted: boolean | null;
+    /**
+     * @computed isAllSelected
+     * @description
+     * Returns true if all visible rows are selected.
+     */
+    isAllSelected: import("@angular/core").Signal<boolean>;
+    /**
+     * @computed isPartiallySelected
+     * @description
+     * Returns true if some but not all rows are selected.
+     */
+    isPartiallySelected: import("@angular/core").Signal<boolean>;
     constructor();
+    /**
+     * @method toggleAll
+     * @description
+     * Toggles selection of all visible rows using full objects.
+     * @param checked {unknown}
+     */
+    toggleAll(checked: unknown): void;
+    /**
+     * @method updateSelection
+     * @description
+     * Updates row selection state from checkbox interaction.
+     * @param value {any[]}
+     */
+    updateSelection(value: T[]): void;
     customSort(event: SortEvent): void;
     sortTableData(event: SortEvent): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "tk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "tk-table", never, { "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "selection": { "alias": "selection"; "required": false; "isSignal": true; }; "dataKey": { "alias": "dataKey"; "required": false; "isSignal": true; }; }, { "selection": "selectionChange"; }, never, never, true, never>;
 }

package/components/table/src/table.interface.d.ts

@@ -1,5 +1,5 @@
 import { TagSeverity } from '@tekus/design-system/components/tag';
-export type TableColumnType = 'text' | 'tag' | 'actions';
+export type TableColumnType = 'text' | 'tag' | 'actions' | 'selection' | 'checkbox';
 export interface TableColumn<T = unknown> {
     field?: string;
     header: string;

package/components/topbar/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@tekus/design-system/components/topbar" />
+export * from './public-api';

package/components/topbar/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './src/topbar.component';
+export * from './src/topbar.types';

package/components/topbar/src/topbar.component.d.ts

@@ -0,0 +1,20 @@
+import { TopbarAction, TopbarTag } from './topbar.types';
+import * as i0 from "@angular/core";
+/**
+ * @component TopbarComponent
+ * @description
+ * Layout component that renders a title with optional actions and metadata.
+ * It composes `tk-button` and `tk-tag` and uses only design tokens for styles.
+ */
+export declare class TopbarComponent {
+    /** Main title text for the topbar. */
+    title: import("@angular/core").InputSignal<string>;
+    /** Optional list of actions displayed in the header. */
+    actions: import("@angular/core").InputSignal<TopbarAction[] | null>;
+    /** Optional list of tags displayed in the meta section. */
+    tags: import("@angular/core").InputSignal<TopbarTag[] | null>;
+    /** Optional description displayed in the meta section. */
+    description: import("@angular/core").InputSignal<string | null>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TopbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TopbarComponent, "tk-topbar", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "actions": { "alias": "actions"; "required": false; "isSignal": true; }; "tags": { "alias": "tags"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/components/topbar/src/topbar.types.d.ts

@@ -0,0 +1,13 @@
+import { TagSeverity } from '@tekus/design-system/components/tag';
+export type TopbarActionType = 'primary' | 'icon';
+export interface TopbarAction {
+    type: TopbarActionType;
+    label?: string;
+    icon?: string;
+    tooltipText?: string;
+    onClick: () => void;
+}
+export interface TopbarTag {
+    label: string;
+    variant?: TagSeverity;
+}