@cobre-npm/ds-v3 0.151.0 → 0.153.0

package/dist/tokens/_components.scss

@@ -1091,4 +1091,15 @@
   --cobre-segmented-tabs-active-bg: var(--cobre-secondary-5);
   --cobre-segmented-tabs-active-color: var(--cobre-primary-90);
   --cobre-segmented-tabs-active-border: var(--cobre-border-stroke-M) solid var(--cobre-secondary-50);
+}
+
+/**
+* Filter option groups
+*/
+
+:root {
+  --cobre-filter-option-groups-section-color: var(--cobre-primary-50);
+  --cobre-filter-option-groups-label-fs: var(--cobre-label-small-fs);
+  --cobre-filter-option-groups-label-lh: var(--cobre-label-small-lh);
+  --cobre-filter-option-groups-label-fw: 500;
 }

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

@@ -33,10 +33,10 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
     onClick?: (() => any) | undefined;
 }>, {
     isLoading: boolean;
+    idPrefix: string;
     placeholderIcon: string;
     selectedAccount: CobreSelectableItem | null;
     chevronIcon: string;
-    idPrefix: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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

@@ -2,7 +2,8 @@ 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.
+ * an option is toggled. Options may carry a `logoURL` for an inline icon and a
+ * `subtitle`; with `sections` they are grouped under non-selectable titles.
  * Rendered internally by CobreFilterPanel for `checkbox` filters.
  */
 type __VLS_Props = {

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

@@ -0,0 +1,27 @@
+import type { FilterOption, FilterSection } from '../interfaces/filter.interface';
+type __VLS_Props = {
+    options: FilterOption[];
+    sections?: FilterSection[];
+    /** Prefix of each option's control id, as `${idPrefix}-${option.value}`. */
+    idPrefix: string;
+    disabled?: boolean;
+};
+declare var __VLS_1: {
+    id: string;
+    option: FilterOption;
+    label: string;
+    description: string | undefined;
+    sectioned: boolean;
+    disabled: boolean | undefined;
+};
+type __VLS_Slots = {} & {
+    option?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,7 +2,8 @@ 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.
+ * Options may carry a `logoURL` for an inline icon and a
+ * `subtitle`; with `sections` they are grouped under non-selectable titles.
  * Rendered internally by CobreFilterPanel for `radio` filters.
  */
 type __VLS_Props = {

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

@@ -7,6 +7,12 @@ export interface FilterOption {
     /** URL of a logo/icon image shown beside the option. */
     logoURL?: string;
     disabled?: boolean;
+    section?: string;
+    subtitle?: string;
+}
+export interface FilterSection {
+    value: string;
+    label: string;
 }
 /** Lower/upper bounds of an amount-range filter; null means unbounded on that end. */
 export interface AmountRangeValue {
@@ -60,6 +66,7 @@ export interface CommonSearchProps {
 export interface CheckboxFilter extends BaseFilter<'checkbox'> {
     value: (string | number)[];
     options: FilterOption[];
+    sections?: FilterSection[];
     props?: CommonDisabledProps & CommonSearchProps;
     validation?: CommonValidation;
 }
@@ -67,6 +74,8 @@ export interface CheckboxFilter extends BaseFilter<'checkbox'> {
 export interface RadioFilter extends BaseFilter<'radio'> {
     value: string | number | null;
     options: FilterOption[];
+    /** Section headings, in render order. Enables the two-column grouped layout. */
+    sections?: FilterSection[];
     props?: CommonDisabledProps & CommonSearchProps;
     validation?: CommonValidation;
 }

package/dist/types/components/organisms/CobreFilterPanel/utils/groupOptionsBySection.d.ts

@@ -0,0 +1,6 @@
+import type { FilterOption, FilterSection } from '../interfaces/filter.interface';
+export interface OptionGroup {
+    section: FilterSection | null;
+    options: FilterOption[];
+}
+export declare const groupOptionsBySection: (options: FilterOption[], sections: FilterSection[]) => OptionGroup[];

package/package.json

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