@cobre-npm/ds-v3 0.152.0 → 0.154.0

package/dist/tokens/_components.scss

@@ -1041,6 +1041,8 @@
   --cobre-checkbox-border: var(--cobre-border-stroke-M) solid var(--cobre-primary-20);
   --cobre-checkbox-icon-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
 
+  --cobre-checkbox-indeterminate-icon-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.8' d='M6 10h8'/%3e%3c/svg%3e");
+
   --cobre-checkbox-input-checked-bg: var(--cobre-secondary-50);
   --cobre-checkbox-input-checked-hover-bg: var(--cobre-secondary-70);
 
@@ -1091,4 +1093,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/atoms/CobreCheckbox/CobreCheckbox.vue.d.ts

@@ -11,6 +11,7 @@ interface Props {
     id?: string;
     description?: string;
     size?: 'sm' | 'md';
+    indeterminate?: boolean;
 }
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
@@ -25,6 +26,7 @@ declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {},
 }>, {
     disabled: boolean;
     size: "sm" | "md";
+    indeterminate: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

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,9 @@ 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.
+ * An `indeterminate` option renders the mixed state and a click checks it.
  * 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,18 @@ export interface FilterOption {
     /** URL of a logo/icon image shown beside the option. */
     logoURL?: string;
     disabled?: boolean;
+    section?: string;
+    subtitle?: string;
+    tab?: string;
+    indeterminate?: boolean;
+}
+export interface FilterTab {
+    value: string;
+    label: 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 +72,8 @@ export interface CommonSearchProps {
 export interface CheckboxFilter extends BaseFilter<'checkbox'> {
     value: (string | number)[];
     options: FilterOption[];
+    sections?: FilterSection[];
+    tabs?: FilterTab[];
     props?: CommonDisabledProps & CommonSearchProps;
     validation?: CommonValidation;
 }
@@ -67,6 +81,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/filterTabs.d.ts

@@ -0,0 +1,4 @@
+import type { FilterOption, FilterTab } from '../interfaces/filter.interface';
+export declare const visibleTabs: (options: FilterOption[], tabs: FilterTab[]) => FilterTab[];
+export declare const optionsInTab: (options: FilterOption[], activeTab: string | null) => FilterOption[];
+export declare const initialTab: (options: FilterOption[], tabs: FilterTab[], selected: (string | number)[]) => string | null;

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.152.0",
+  "version": "0.154.0",
   "type": "module",
   "packageManager": "pnpm@11.0.4",
   "engines": {