@cobre-npm/ds-v3 0.126.0 → 0.126.3

package/dist/types/components/atoms/CobreAlert/CobreAlert.vue.d.ts

@@ -1,4 +1,10 @@
 type IconType = "danger" | "success" | "warning" | "info" | null;
+/**
+ * CobreAlert — inline alert banner that surfaces a contextual status message.
+ * Use to highlight success, error, warning, or info states within page content.
+ * Optionally shows a close button (emits `close`) and a `contentComponent` slot
+ * for extra content below the message.
+ */
 interface Props {
     type?: IconType;
     content?: string;

package/dist/types/components/atoms/CobreButton/CobreButton.vue.d.ts

@@ -1,5 +1,11 @@
 import { ButtonThemes, ButtonColors } from '../../../types/button.types';
 type Sizes = 'big' | 'medium' | 'small' | 'auto';
+/**
+ * CobreButton — the primary action button for the Cobre platform.
+ * Use for form submits, primary/secondary actions, toolbar actions, and icon-only
+ * buttons. For navigation that looks like inline text, use the `link` theme.
+ * Provides `start`, `end`, and `content` slots for icons or custom content.
+ */
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     theme: {
         type: () => ButtonThemes;

package/dist/types/components/atoms/CobreCheckbox/CobreCheckbox.vue.d.ts

@@ -1,3 +1,8 @@
+/**
+ * CobreCheckbox — a single checkbox with optional label, helper description and tooltip.
+ * Use for boolean toggles in forms; binds via v-model and also emits 'changed'.
+ * Provides an `option` slot rendered after the label (e.g. an extra icon or control).
+ */
 interface Props {
     modelValue: any;
     disabled?: boolean;

package/dist/types/components/atoms/CobreEmptyState/CobreEmptyState.vue.d.ts

@@ -1,3 +1,9 @@
+/**
+ * CobreEmptyState — a placeholder panel for empty or zero-data screens.
+ * Use to fill a section that has no content yet, pairing a descriptive message
+ * with an illustration on a subtle tinted background. Provides a `content` slot
+ * for the heading/text shown beside the image.
+ */
 type __VLS_Props = {
     image: string;
 };

package/dist/types/components/atoms/CobreRowActions/interfaces/CobreRowActions.interface.d.ts

@@ -1,12 +1,20 @@
+/** A single action button rendered by CobreRowActions for a table row, generic over the row's data type T. */
 export interface RowAction<T = unknown> {
     id: string;
     label?: string;
     icon: string;
+    /** Tooltip text shown on hover. */
     tooltipText?: string;
+    /** Handler invoked with the row's data when the action is clicked. */
     onClick?: (rowData: T) => void | undefined | Promise<void>;
+    /** Name of the event emitted instead of (or alongside) calling onClick. */
     eventName?: string;
+    /** Whether to show visual feedback after the action runs. */
     feedback?: boolean;
+    /** Visual style of the action. */
     type?: 'default' | 'info';
+    /** Whether the action is visible; can be a predicate evaluated against the row's data. */
     show?: boolean | ((rowData: T) => boolean);
+    /** Whether the action shows a loading state; can be a predicate evaluated against the row's data. */
     isLoading?: boolean | ((rowData: T) => boolean);
 }

package/dist/types/components/atoms/CobreToastAlert/CobreToastAlert.vue.d.ts

@@ -1,4 +1,10 @@
 type IconType = 'danger' | 'success' | 'warning' | 'info' | null;
+/**
+ * CobreToastAlert — a self-contained toast-style status notification.
+ * Use to display a transient success, error, warning, or info message with an
+ * icon, title, and content. For an inline page banner with a close button, use
+ * CobreAlert instead.
+ */
 interface Props {
     type: IconType;
     content: string;

package/dist/types/components/molecules/CobreBadge/CobreBadge.vue.d.ts

@@ -1,3 +1,8 @@
+/**
+ * CobreBadge — a compact pill for statuses, labels and filter chips.
+ * Use to surface state (success/error/warning/status-*), tags, or removable filters.
+ * Provides `start`, `content` and `end` slots; `content` replaces the default `text`.
+ */
 interface Props {
     type: string;
     isSelected?: boolean;

package/dist/types/components/molecules/CobreChips/CobreChips.vue.d.ts

@@ -1,3 +1,8 @@
+/**
+ * CobreChips — a filter chip built on CobreButton's `filter` theme.
+ * Use to display an applied or selectable filter; shows a leading plus, icon, or a
+ * removable divider/close button that emits 'close' when a filter value is set.
+ */
 interface Props {
     label?: string;
     filterText?: string;

package/dist/types/components/molecules/CobreDrawer/CobreDrawer.vue.d.ts

@@ -1,4 +1,12 @@
 type Positions = 'left' | 'right';
+/**
+ * CobreDrawer — a side panel that slides in from the left or right edge of the screen.
+ * Use for secondary flows, filters, or detail views that overlay the page without
+ * fully blocking it. Open/close via the exposed `toggleModal` ref; closes on Escape
+ * and (optionally) on outside click. Emits `close` (auto/outside) and `close-button`
+ * (close icon). Provides `content`, `footer`, and `onlyWrapper` slots.
+ * For a centered modal dialog, use CobreModal instead.
+ */
 interface Props {
     id?: string;
     position: Positions;

package/dist/types/components/molecules/CobreDropdownButton/CobreDropdownButton.vue.d.ts

@@ -2,6 +2,13 @@ interface Option {
     text: string;
     id: string;
 }
+/**
+ * CobreDropdownButton — a split button that pairs a primary action with a
+ * chevron toggle that opens a dropdown action list.
+ * Use when a button has one main action plus a menu of related options.
+ * Emits `button-click` for the primary action and `clickOption` for menu selections.
+ * Provides a `content` slot to customize the primary button's label area.
+ */
 interface Props {
     actionListOptions: Array<Option>;
     label?: string;

package/dist/types/components/molecules/CobreInput/CobreInput.vue.d.ts

@@ -1,3 +1,9 @@
+/**
+ * CobreInput — the standard single-line text field for the Cobre platform.
+ * Use for form text entry with built-in validation (length, numeric, letters,
+ * alphanumeric, email) and inline error/info messaging. Set `isSearchable` to
+ * render the compact search variant. For multi-line input use CobreTextArea.
+ */
 interface Props {
     modelValue: string | undefined | null;
     errorMsg?: string;

package/dist/types/components/molecules/CobreModal/CobreModal.vue.d.ts

@@ -1,3 +1,10 @@
+/**
+ * CobreModal — a centered overlay dialog rendered over a dimmed backdrop.
+ * Use for focused interactions (confirmations, forms, details) that block the
+ * page until dismissed. Open/close via the exposed `toggleModal` ref; emits
+ * `close` when the close button is pressed. Provides a `content` slot.
+ * For a side panel that slides in from an edge, use CobreDrawer instead.
+ */
 interface Props {
     size?: 'xs' | 'md' | 'lg';
     hasCloseButton?: boolean;

package/dist/types/components/molecules/CobreSelect/CobreSelect.vue.d.ts

@@ -1,4 +1,12 @@
 import 'vue-select/dist/vue-select.css';
+/**
+ * CobreSelect — the platform dropdown select, built on vue-select.
+ * Use for choosing from a list of options, with optional search, custom option
+ * rendering (bank logos, country flags, balances, badges) and a no-options state.
+ * Forwards extra vue-select props via attrs. Provides `option`, `selected-option`,
+ * `open-indicator`, `no-options`, `no-results`, `deselect`, `list-header`,
+ * `list-footer`, and `spinner` slots for full customization.
+ */
 interface Props {
     labelName?: string;
     isRequired?: boolean;

package/dist/types/components/molecules/CobreSnackBar/CobreSnackBar.vue.d.ts

@@ -1,3 +1,8 @@
+/**
+ * CobreSnackBar — a compact single-line snackbar for brief, transient feedback.
+ * Use for confirmations or errors, optionally with an inline action button and a
+ * close button. For a richer banner with a title, use CobreAlert/CobreToastAlert.
+ */
 interface Props {
     closeToast: (e?: MouseEvent) => void;
     message: string;

package/dist/types/components/molecules/CobreTextArea/CobreTextArea.vue.d.ts

@@ -1,3 +1,9 @@
+/**
+ * CobreTextArea — the standard multi-line text field for the Cobre platform.
+ * Use for longer free-form input with built-in length validation and inline
+ * error/info messaging. The height is configurable via `height`. For single-line
+ * input use CobreInput.
+ */
 interface Props {
     modelValue: string | undefined | null;
     id?: string;

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

@@ -2,6 +2,13 @@ import { type CobreSelectableItem } from '../../molecules/CobreAccountOptionSele
 import type { AlertConfig, FilterConfig, TabConfigItem } from './interfaces/account-selector-modal.interface';
 export type { AlertType, AlertConfig, TabConfigItem, FilterOptionItem, FilterConfig } from './interfaces/account-selector-modal.interface';
 type AccountItem = CobreSelectableItem;
+/**
+ * CobreAccountPickerModal — a modal for searching and selecting an account or
+ * counterparty, with optional search, tabs, multi-option filters, and a balance
+ * visibility toggle. Use when the user must pick one account from a list.
+ * Open/close it via the exposed `toggleModal()`; emits `select` on choice.
+ * Provides a `custom-actions` slot for extra controls below the filters.
+ */
 interface Props {
     title: string;
     searchPlaceholder: 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/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/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/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/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,7 +1,11 @@
 {
   "name": "@cobre-npm/ds-v3",
-  "version": "0.126.0",
+  "version": "0.126.3",
   "type": "module",
+  "packageManager": "pnpm@11.0.4",
+  "engines": {
+    "node": ">=20"
+  },
   "files": [
     "dist"
   ],