@cobre-npm/ds-v3 0.126.2 → 0.126.4

package/dist/types/components/molecules/Toolbar/CobreInputSearch/CobreInputSearch.vue.d.ts

@@ -1,3 +1,8 @@
+/**
+ * CobreInputSearch — a debounced search input for toolbars, with a search icon,
+ * loading spinner and clear button. Use to filter lists/tables as the user types.
+ * Auto-focuses on mount. Emits debounced `update:modelValue` and `deleteInput`.
+ */
 interface Props {
     modelValue?: string;
     isLoading?: boolean;

package/dist/types/components/molecules/Toolbar/CobreInputSearchV2/CobreInputSearchV2.vue.d.ts

@@ -1,3 +1,10 @@
+/**
+ * CobreInputSearchV2 — an expandable, debounced toolbar search field with an inline
+ * label, clear button and click-outside / Escape-to-collapse behaviour.
+ * Use as a compact search that expands on focus and collapses when emptied/dismissed.
+ * Auto-focuses on mount. Emits debounced `update:modelValue`, `deleteInput` and
+ * `closeSearch` (with whether it had a value).
+ */
 interface Props {
     modelValue?: string;
     isLoading?: boolean;

package/dist/types/components/organisms/CobreAccountPicker/CobreAccountPicker.vue.d.ts

@@ -1,4 +1,10 @@
 import { type CobreSelectableItem } from '../../molecules/CobreAccountOptionSelect/CobreAccountOptionSelect.vue';
+/**
+ * CobreAccountPicker — a button-style trigger that displays the currently
+ * selected account/counterparty (or a placeholder) and emits `click` to open a
+ * picker dialog. Use as the entry point for choosing a source/destination
+ * account in a flow; pair it with your own list/modal to perform the selection.
+ */
 interface Props {
     label: string;
     placeholderText: string;

package/dist/types/components/organisms/CobreAccountPickerModal/interfaces/account-selector-modal.interface.d.ts

@@ -1,25 +1,35 @@
-export type AlertType = "danger" | "success" | "warning" | "info";
+/** Severity level of an alert shown in the account picker modal. */
+export type AlertType = 'danger' | 'success' | 'warning' | 'info';
+/** An alert message and its severity displayed in the account picker modal. */
 export interface AlertConfig {
     type: AlertType;
     text: string;
 }
+/** A tab in the account picker modal's tab bar. */
 export interface TabConfigItem {
     id: string;
     name: string;
     icon?: string;
 }
+/** A selectable option within an account picker filter. */
 export interface FilterOptionItem {
     id: number;
     label: string;
     value: string;
 }
+/** Configuration for a single filter in the account picker modal. */
 export interface FilterConfig {
+    /** Query/parameter key the filter writes to. */
     param: string;
     label: string;
+    /** Heading shown above the filter's option list. */
     optionsTitle: string;
     options: FilterOptionItem[];
+    /** Currently selected option value(s). */
     value?: string[];
+    /** Custom width for the filter's dropdown box (CSS length). */
     customBoxWidth?: string;
+    /** Max characters before the displayed label is truncated. */
     maxTextLength?: number;
     disabled?: boolean;
 }

package/dist/types/components/organisms/CobreDateFilter/CobreDateFilter.vue.d.ts

@@ -5,6 +5,13 @@ interface ParsedDate {
     date_lte: Date | string | [Date, Date] | null;
     type: CalendarTypes;
 }
+/**
+ * CobreDateFilter — a chip-triggered dropdown date filter built on the vue
+ * datepicker. Lets the user pick a single date, a range, or a relative shortcut
+ * (today, lastN, after, before), emitting the resolved `date_gte`/`date_lte`
+ * bounds. Use in table/list toolbars to filter records by date.
+ * Exposes `clearDate()`; provides a `header-content` slot above the calendar.
+ */
 interface Props {
     modelValue: null | {
         date_gte: Date | string | [Date, Date] | null;

package/dist/types/components/organisms/CobreDynamicForm/CobreDynamicForm.vue.d.ts

@@ -1,5 +1,12 @@
 import type { ComputedRef } from 'vue';
 import type { Field } from './interfaces/field.interface';
+/**
+ * CobreDynamicForm — renders a form from a declarative `fields` array, mapping
+ * each field's `type` to the matching Cobre input (input, date, select,
+ * currency, phone, radio, url, checkbox). Use to build configurable forms
+ * without hand-wiring each control; only fields with `visible: true` are shown.
+ * Exposes `isFormValid` and `reset()`; emits `field-updated` on every change.
+ */
 type __VLS_Props = {
     fields: Field[];
     formId: string;

package/dist/types/components/organisms/CobreDynamicForm/interfaces/currencies.interface.d.ts

@@ -1,8 +1,12 @@
+/** A selectable currency option used by CobreDynamicForm currency fields. */
 export interface Currency {
     id: number;
     label: string;
+    /** Currency code (e.g. ISO 4217 like 'USD', 'COP'). */
     code: string;
     value: string;
+    /** Geographic/region identifier associated with the currency. */
     geo: string;
+    /** Minimum amount allowed for this currency. */
     minAmount: number;
 }

package/dist/types/components/organisms/CobreDynamicForm/interfaces/field.interface.d.ts

@@ -1,7 +1,10 @@
 import type { ComputedRef, Component, Ref } from 'vue';
 import { Currency } from './currencies.interface';
+/** Character/validation constraint applied to a CobreDynamicForm input field's value. */
 export type InputType = 'email' | 'anyCharacter' | 'alphanumeric' | 'numeric' | 'letters' | 'password';
+/** Widget rendered for a CobreDynamicForm field. */
 export type FieldType = 'input' | 'select' | 'radio' | 'currency' | 'phone' | 'checkbox' | 'date' | 'url';
+/** Imperative handle exposing a CobreDynamicForm field's validation state and reset action. */
 export interface FieldRef {
     isValid: boolean;
     isDirty: boolean;
@@ -15,53 +18,75 @@ export interface FieldRef {
     areValidLetters: boolean;
     reset: () => void;
 }
+/** Configuration for a single field rendered by CobreDynamicForm, including its widget type, value, validation, and per-widget props. */
 export interface Field {
     id: string;
     type: FieldType;
+    /** Reactive handle to the field's validation state (see FieldRef). */
     ref?: Ref<Partial<FieldRef | null>>;
     label: string;
     placeholder?: string;
     name?: string;
     value: any;
     required: boolean;
+    /** Whether the field is shown in the form. */
     visible: boolean;
+    /** Number of grid columns the field spans in the form layout. */
     colSpan?: number;
+    /** CSS class applied to the field's wrapper element. */
     parentClass?: string;
+    /** CSS class applied to the field's control element. */
     className?: string;
+    /** Validation rules and custom validity check applied to the field's value. */
     validation?: {
         minLength?: number | ComputedRef<number>;
         maxLength?: number | ComputedRef<number>;
         minAmount?: number;
         type?: InputType;
+        /** Message displayed when the field is invalid. */
         errorMessage?: ComputedRef<string>;
+        /** Custom validity predicate; returns true when the value is valid. */
         isValid?: () => boolean;
     };
+    /** Options for choice-based fields (select, radio). */
     options?: any[];
+    /** Widget-specific props forwarded to the underlying field component. */
     props?: {
         currencySelected?: string;
         searchable?: boolean;
         disabled?: boolean;
         currencies?: Currency[];
+        /** Maps an option object to the value stored for the field (vue-select style). */
         reduce?: (item: any) => any;
         clearable?: boolean;
         label?: string;
+        /** Custom component rendered for each option in a select. */
         optionSlot?: Component;
+        /** Custom component rendered for the selected option in a select. */
         selectedOptionSlot?: Component;
         multiple?: boolean;
+        /** Tooltip text shown next to the field label. */
         labelTooltip?: string;
+        /** Informational helper text shown for the field. */
         infoLabel?: string;
         isCurrencyDisabled?: boolean;
+        /** Available country dialing-code options for a phone field. */
         indicativeOptions?: Array<{
             code: string;
             geo: string;
             country: string;
         }>;
+        /** Currently selected dialing code for a phone field. */
         indicativeModelValue?: string;
         maxDate?: Date;
         minDate?: Date;
+        /** Date display/parse format string. */
         format?: string;
+        /** Locale used to render the date picker. */
         locale?: string;
+        /** When true, the date picker selects a date range instead of a single date. */
         range?: boolean;
     };
+    /** Callback invoked when the field's value changes. */
     onUpdate?: (value: any) => void;
 }

package/dist/types/components/organisms/CobreFilterPanel/CobreFilterPanel.vue.d.ts

@@ -1,4 +1,12 @@
 import type { Filter } from './interfaces/filter.interface';
+/**
+ * CobreFilterPanel — a two-pane filter popover: a left tab list (one per
+ * filter) and the active filter's control on the right, rendered from the
+ * declarative `filters` array (checkbox, radio, input, amount-range, select).
+ * Use to filter a table/list by several dimensions at once; the parent owns
+ * filter values/state via the `filter-updated`/`filter-search`/`filter-cleared`
+ * events. Exposes `areFiltersValid()` and `reset()`.
+ */
 interface Props {
     filters?: Filter[];
     isOpen?: boolean;

package/dist/types/components/organisms/CobreFilterPanel/components/FilterAmountRange.vue.d.ts

@@ -1,4 +1,10 @@
 import type { AmountRangeFilter, AmountRangeValue } from '../interfaces/filter.interface';
+/**
+ * FilterAmountRange — the amount-range control for CobreFilterPanel: a pair of
+ * from/to amount inputs that emit the updated `{ from, to }` value. Validates
+ * that `from` does not exceed `to` and surfaces the filter's error message.
+ * Rendered internally by CobreFilterPanel for `amount-range` filters; exposes `isValid`.
+ */
 type __VLS_Props = {
     filter: AmountRangeFilter;
 };

package/dist/types/components/organisms/CobreFilterPanel/components/FilterCheckboxList.vue.d.ts

@@ -1,4 +1,10 @@
 import type { CheckboxFilter } from '../interfaces/filter.interface';
+/**
+ * FilterCheckboxList — the checkbox-group control for CobreFilterPanel: renders
+ * one checkbox per option and emits the updated array of selected values when
+ * an option is toggled. Options may carry a `logoURL` for an inline icon.
+ * Rendered internally by CobreFilterPanel for `checkbox` filters.
+ */
 type __VLS_Props = {
     filter: CheckboxFilter;
 };

package/dist/types/components/organisms/CobreFilterPanel/components/FilterInput.vue.d.ts

@@ -1,4 +1,10 @@
 import type { InputFilter } from '../interfaces/filter.interface';
+/**
+ * FilterInput — the free-text control for CobreFilterPanel: a single CobreInput
+ * that emits its string value and surfaces the filter's validation error.
+ * Honors the filter's inputType, placeholder, and min/max length.
+ * Rendered internally by CobreFilterPanel for `input` filters.
+ */
 type __VLS_Props = {
     filter: InputFilter;
 };

package/dist/types/components/organisms/CobreFilterPanel/components/FilterRadioList.vue.d.ts

@@ -1,4 +1,10 @@
 import type { RadioFilter } from '../interfaces/filter.interface';
+/**
+ * FilterRadioList — the single-select radio-group control for CobreFilterPanel:
+ * renders one radio per option and emits the chosen value on selection.
+ * Options may carry a `logoURL` for an inline icon.
+ * Rendered internally by CobreFilterPanel for `radio` filters.
+ */
 type __VLS_Props = {
     filter: RadioFilter;
 };

package/dist/types/components/organisms/CobreFilterPanel/components/FilterSelect.vue.d.ts

@@ -1,4 +1,10 @@
 import type { SelectFilter } from '../interfaces/filter.interface';
+/**
+ * FilterSelect — the dropdown control for CobreFilterPanel: wraps CobreSelect
+ * and emits the chosen value (or array when `multiple`). Honors the filter's
+ * placeholder, searchable, clearable, multiple, reduce, and optionLabel props.
+ * Rendered internally by CobreFilterPanel for `select` filters.
+ */
 type __VLS_Props = {
     filter: SelectFilter;
 };

package/dist/types/components/organisms/CobreFilterPanel/interfaces/filter.interface.d.ts

@@ -1,38 +1,54 @@
+/** Kind of control rendered for a CobreFilterPanel filter. */
 export type FilterType = 'checkbox' | 'radio' | 'input' | 'amount-range' | 'select';
+/** A selectable option within a choice-based filter (checkbox, radio, select). */
 export interface FilterOption {
     label: string;
     value: string | number;
+    /** URL of a logo/icon image shown beside the option. */
     logoURL?: string;
     disabled?: boolean;
 }
+/** Lower/upper bounds of an amount-range filter; null means unbounded on that end. */
 export interface AmountRangeValue {
     from: number | null;
     to: number | null;
 }
+/** Shared shape for every filter, parameterized by its FilterType; concrete filters extend this. */
 export interface BaseFilter<T extends FilterType> {
+    /** Unique identifier used to read/write the filter's value. */
     key: string;
     type: T;
     label: string;
     icon?: string;
+    /** Number of active selections, shown as a badge. */
     count?: number;
+    /** Whether the filter's options are currently loading. */
     loading?: boolean;
+    /** Empty-state configuration shown when there are no options. */
     empty?: {
         show: boolean;
         text?: string;
         icon?: 'cards' | 'box' | 'error';
     };
 }
+/** Shared validation hooks mixed into filter definitions. */
 export interface CommonValidation {
+    /** Custom validity predicate; returns true when the filter value is valid. */
     isValid?: () => boolean;
     errorMessage?: string;
 }
+/** Shared disabled-state props mixed into filter `props`. */
 export interface CommonDisabledProps {
     disabled?: boolean;
+    /** Tooltip text shown next to the filter label. */
     labelTooltip?: string;
 }
+/** Character/validation constraint applied to a filter's text input. */
 export type CobreInputType = 'anyCharacter' | 'alphanumeric' | 'numeric' | 'letters' | 'email';
+/** Shared search-box props mixed into filters whose options can be searched. */
 export interface CommonSearchProps {
     searchable?: boolean;
+    /** Configuration for the option search box. */
     search?: {
         placeholder?: string;
         disabled?: boolean;
@@ -40,18 +56,21 @@ export interface CommonSearchProps {
         inputType?: CobreInputType;
     };
 }
+/** A multi-select checkbox-group filter; value holds the selected option values. */
 export interface CheckboxFilter extends BaseFilter<'checkbox'> {
     value: (string | number)[];
     options: FilterOption[];
     props?: CommonDisabledProps & CommonSearchProps;
     validation?: CommonValidation;
 }
+/** A single-select radio-group filter; value is the chosen option or null. */
 export interface RadioFilter extends BaseFilter<'radio'> {
     value: string | number | null;
     options: FilterOption[];
     props?: CommonDisabledProps & CommonSearchProps;
     validation?: CommonValidation;
 }
+/** A free-text input filter with optional length validation. */
 export interface InputFilter extends BaseFilter<'input'> {
     value: string;
     props?: CommonDisabledProps & {
@@ -63,10 +82,13 @@ export interface InputFilter extends BaseFilter<'input'> {
         maxLength?: number;
     };
 }
+/** A numeric from/to range filter with optional min/max amount validation. */
 export interface AmountRangeFilter extends BaseFilter<'amount-range'> {
     value: AmountRangeValue;
     props: CommonDisabledProps & {
+        /** Label for the lower-bound (from) input. */
         fromLabel: string;
+        /** Label for the upper-bound (to) input. */
         toLabel: string;
         fromPlaceholder?: string;
         toPlaceholder?: string;
@@ -76,6 +98,7 @@ export interface AmountRangeFilter extends BaseFilter<'amount-range'> {
         maxAmount?: number;
     };
 }
+/** A dropdown select filter; value is the chosen option (or array when multiple) or null. */
 export interface SelectFilter extends BaseFilter<'select'> {
     value: string | number | null;
     options: FilterOption[];
@@ -84,9 +107,12 @@ export interface SelectFilter extends BaseFilter<'select'> {
         searchable?: boolean;
         clearable?: boolean;
         multiple?: boolean;
+        /** Maps an option object to the value stored for the filter (vue-select style). */
         reduce?: (item: any) => any;
+        /** Key on the option object used as its display label. */
         optionLabel?: string;
     };
     validation?: CommonValidation;
 }
+/** Discriminated union of every filter type accepted by CobreFilterPanel. */
 export type Filter = CheckboxFilter | RadioFilter | InputFilter | AmountRangeFilter | SelectFilter;

package/dist/types/components/organisms/CobreHeader/CobreHeader.vue.d.ts

@@ -9,6 +9,13 @@ export interface MenuItem {
     icon?: string;
     subItems?: Items[];
 }
+/**
+ * CobreHeader — top application bar for the Cobre platform.
+ * Use as the page header; on mobile it toggles a hamburger menu that renders the
+ * `menu` entries via the Navbar component. For the persistent desktop side
+ * navigation use CobreSideMenu instead.
+ * Provides `start` (left, e.g. logo) and `end` (right, e.g. avatar/actions) slots.
+ */
 interface Props {
     menu: MenuItem[];
     menuItemActive: string;

package/dist/types/components/organisms/CobreHeader/components/Navbar.vue.d.ts

@@ -9,6 +9,11 @@ interface Menu {
     highlight?: boolean;
     subItems?: SubItems[];
 }
+/**
+ * Navbar — the navigation list rendered inside CobreHeader's mobile menu.
+ * Renders each `menu` entry; entries with subItems become collapsible groups
+ * that expand on tap. Not used standalone — driven by CobreHeader.
+ */
 interface Props {
     menu: Menu[];
     itemActive: string;

package/dist/types/components/organisms/CobreSideMenu/CobreSideMenu.vue.d.ts

@@ -1,4 +1,10 @@
 import type { MenuItem } from './interfaces/menu.interface';
+/**
+ * CobreSideMenu — persistent vertical navigation rail for the Cobre platform.
+ * Renders top and bottom item groups, supports a collapsed (icon-only) state and
+ * expandable sub-pages. For the mobile/top application bar use CobreHeader instead.
+ * Provides `header` (top branding area), `start`, and `end` slots.
+ */
 interface Props {
     itemsTop: MenuItem[];
     itemActive: string;

package/dist/types/components/organisms/CobreSideMenu/components/SideMenuItem.vue.d.ts

@@ -1,4 +1,10 @@
 import type { MenuItem } from '../interfaces/menu.interface';
+/**
+ * SideMenuItem — renders one group of CobreSideMenu entries with their sub-items.
+ * Each entry shows an icon and label; entries with subItems expand on hover
+ * (inline when expanded, as a floating panel when collapsed). Driven by
+ * CobreSideMenu, not used standalone.
+ */
 interface Props {
     items: MenuItem[] | undefined;
     itemActive: string;

package/dist/types/components/organisms/CobreSideMenu/components/SubItems.vue.d.ts

@@ -1,4 +1,9 @@
 import type { Items } from '../interfaces/menu.interface';
+/**
+ * SubItems — renders the nested sub-entries of a CobreSideMenu item as a list.
+ * Each sub-item is a selectable menu button; emits selectSubItem on click.
+ * Driven by SideMenuItem, not used standalone.
+ */
 interface Props {
     subItems: Items[];
     itemActive: string;

package/dist/types/components/organisms/CobreSideMenu/interfaces/menu.interface.d.ts

@@ -1,23 +1,38 @@
+/** A nested sub-entry of a CobreSideMenu item, linking to a route. */
 export interface Items {
     id: string;
+    /** Display label of the sub-entry. */
     text: string;
+    /** Route path the sub-entry navigates to. */
     path: string;
+    /** Whether the sub-entry is shown in the menu. */
     show: boolean;
     icon?: string;
 }
+/** A top-level CobreSideMenu entry, optionally with sub-items or an expanded sub-page. */
 export interface MenuItem {
     id: string;
+    /** Display label of the menu entry. */
     name: string;
+    /** Route path the entry navigates to. */
     path?: string;
     icon?: string;
+    /** Whether the entry is shown in the menu. */
     show?: boolean;
+    /** Child entries rendered under this item. */
     subItems?: Items[];
+    /** Whether this entry opens an expanded sub-page panel. */
     inSubPage?: boolean;
+    /** Nested sub-page layout shown when the entry is expanded. */
     subPage?: {
         name: string;
+        /** Menu items shown in the top section of the sub-page. */
         itemsTop: MenuItem[];
+        /** Menu items shown in the bottom section of the sub-page. */
         itemsBottom?: MenuItem[];
+        /** Heading text for the top section. */
         textTopItems?: string;
+        /** Heading text for the bottom section. */
         textBottomItems?: string;
     };
 }

package/dist/types/components/organisms/CobreTimeline/CobreTimeline.vue.d.ts

@@ -1,3 +1,8 @@
+/**
+ * CobreTimeline — a vertical, ordered list of events connected by a line.
+ * Use to show chronological steps or status history; each event renders an icon
+ * and title plus a scoped `item` slot (exposing `item`) for custom content.
+ */
 interface Item {
     [key: string]: any;
     iconClass?: string;

package/dist/types/types/button.types.d.ts

@@ -1,2 +1,7 @@
+/**
+ * Visual style variants for CobreButton. Each value is applied as a
+ * `co-btn-v3--<variant>` CSS class. See CobreButton.vue for usage.
+ */
 export type ButtonThemes = 'primary' | 'secondary' | 'ghost' | 'ghost-small' | 'ghost-teal' | 'ghost-warning' | 'link' | 'single' | 'filter' | 'secondary-cloudy' | 'secondary-cloudy-warning' | 'icon' | 'icon-cloudy' | 'toolbar' | 'primary-warning' | 'chip';
+/** Color emphasis applied on top of a CobreButton theme via `co-btn-v3--color-<color>`. */
 export type ButtonColors = 'default' | 'light';

package/dist/types/types/icon.types.d.ts

@@ -1 +1,2 @@
+/** Named icon variants for V3 components; `null` renders no icon. */
 export type IconTypeV3 = 'error' | 'success' | 'warning' | 'info' | 'logout' | 'otp' | 'eye' | null;

package/dist/types/utils/banksList.d.ts

@@ -1,3 +1,4 @@
+/** Lookup map of Colombian bank/PSE participant codes (e.g. `PR_COL_1001`) to display names. */
 export declare const banks: {
     PR_COL_COBRE: string;
     PR_COL_1558: string;

package/dist/types/utils/index.d.ts

@@ -1,8 +1,22 @@
+/** Map of bank identifier codes to human-readable bank names (re-exported from banksList). */
 export { banks } from './banksList';
+/** Base URL of the S3 bucket hosting Cobre portal static assets (images, icons, etc.). */
 export declare const STATIC_ASSETS_BASE_URL = "https://cobre-portal-static-assets-prod.s3.us-east-1.amazonaws.com";
+/**
+ * Parses the query-string parameters of a URL into a key/value object.
+ * @param url - The URL to parse; defaults to the current page (`window.location.href`).
+ * @returns An object mapping each query parameter name to its string value.
+ */
 export declare const getParams: (url?: string) => {
     [x: string]: string;
 };
+/** Locks page scrolling by setting `document.body` overflow to `hidden` (e.g. when a modal opens). */
 export declare const makeBodyNotScrollable: () => string;
+/** Restores page scrolling by setting `document.body` overflow back to `auto`. */
 export declare const makeBodyScrollable: () => string;
+/**
+ * Masks a string for display, revealing only its last 4 characters in parentheses.
+ * @param data - The value to mask (e.g. an account number).
+ * @returns A string like `(···1234)`, or `'-'` when `data` is empty.
+ */
 export declare const maskString: (data: string) => string;

package/dist/types/utils/indicativesList.d.ts

@@ -1,3 +1,4 @@
+/** List of country dialing indicatives, each with its `code` (e.g. `+57`) and `shortName`. */
 export declare const indicateList: {
     code: string;
     shortName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cobre-npm/ds-v3",
-  "version": "0.126.2",
+  "version": "0.126.4",
   "type": "module",
   "packageManager": "pnpm@11.0.4",
   "engines": {