@cobre-npm/ds-v3 0.131.0 → 0.133.0

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

@@ -0,0 +1,14 @@
+type __VLS_Props = {
+    currentStep: number;
+    totalSteps: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    prev: () => any;
+    next: () => any;
+    goToStep: (step: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+    onGoToStep?: ((step: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/components/atoms/CobreCarouselControls/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CobreCarouselControls.vue';

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

@@ -22,10 +22,12 @@ export { default as CobreUploader } from './atoms/CobreUploader/CobreUploader.vu
 export { default as CobreAlert } from './atoms/CobreAlert/CobreAlert.vue';
 export { default as CobreSwitch } from './atoms/CobreSwitch/CobreSwitch.vue';
 export { default as CobreCardButton } from './atoms/CobreCardButton/CobreCardButton.vue';
+export { default as CobreCarouselControls } from './atoms/CobreCarouselControls/CobreCarouselControls.vue';
 export { default as CobreRowActions } from './atoms/CobreRowActions/CobreRowActions.vue';
 export { default as CobreSegmentedTabs } from './atoms/CobreSegmentedTabs/CobreSegmentedTabs.vue';
 export { default as CobreHeadline } from './atoms/CobreHeadline/CobreHeadline.vue';
 export { default as CobreDetailRow } from './atoms/CobreDetailRow/CobreDetailRow.vue';
+export { default as CobreSuggestionCard } from './molecules/CobreSuggestionCard/CobreSuggestionCard.vue';
 export { default as CobreAccountCpButton } from './molecules/CobreAccountCpButton/CobreAccountCpButton.vue';
 export { default as CobreAccountCpLogo } from './molecules/CobreAccountCpLogo/CobreAccountCpLogo.vue';
 export { default as CobreAccountInfoField } from './molecules/CobreAccountInfoFiled/CobreAccountInfoField.vue';
@@ -76,3 +78,5 @@ export type * from './organisms/CobreFilterPanel/interfaces/filter.interface';
 export { default as CobreAccountPicker } from './organisms/CobreAccountPicker/CobreAccountPicker.vue';
 export { default as CobreAccountPickerModal } from './organisms/CobreAccountPickerModal/CobreAccountPickerModal.vue';
 export type * from './organisms/CobreAccountPickerModal/interfaces/account-selector-modal.interface';
+export { default as CobreWidgetSuggestions } from './organisms/CobreWidgetSuggestions/CobreWidgetSuggestions.vue';
+export type * from './organisms/CobreWidgetSuggestions/interfaces/suggestion.interface';

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

@@ -0,0 +1,47 @@
+interface Props {
+    /** Main heading of the card (e.g. the widget name). */
+    title: string;
+    /** Supporting copy shown below the title. */
+    description: string;
+    /** Small tag/eyebrow shown above the title (e.g. "Improve your panel"). */
+    tagLabel: string;
+    /** URL of the illustration rendered in the header. */
+    imageUrl: string;
+    /** Alt text for the illustration. Falls back to `title` when omitted. */
+    imageAlt?: string;
+    /** Whether to show the prev/next carousel arrows inside the body. */
+    showNav?: boolean;
+    /** aria-label for the previous (left) arrow. */
+    prevLabel?: string;
+    /** aria-label for the next (right) arrow. */
+    nextLabel?: string;
+    /** Identity of the current slide — changing it drives the enter/leave transition. */
+    slideKey?: string;
+    /** Direction of the last navigation — picks the translateX direction of the slide. */
+    slideDirection?: 'next' | 'prev';
+}
+declare var __VLS_9: {};
+type __VLS_Slots = {} & {
+    action?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    prev: () => any;
+    next: () => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onPrev?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
+}>, {
+    imageAlt: string;
+    showNav: boolean;
+    prevLabel: string;
+    nextLabel: string;
+    slideKey: string;
+    slideDirection: "next" | "prev";
+}, {}, {}, {}, 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/CobreWidgetSuggestions/CobreWidgetSuggestions.vue.d.ts

@@ -0,0 +1,23 @@
+import type { WidgetSuggestionItem } from './interfaces/suggestion.interface';
+interface Props {
+    /** Suggestions shown one at a time in a looping carousel. Empty hides the widget. */
+    suggestions: WidgetSuggestionItem[];
+    /** FAB label and aria-label (e.g. "Suggestions"). */
+    fabLabel: string;
+    /** Call-to-action label inside the card (e.g. "View widget"). */
+    ctaLabel: string;
+    /** Tag/eyebrow label shown on the card. */
+    tagLabel: string;
+    /** aria-label for the popover close button. */
+    closeLabel: string;
+    /** aria-label for the previous (left) carousel arrow. */
+    prevLabel: string;
+    /** aria-label for the next (right) carousel arrow. */
+    nextLabel: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    activate: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onActivate?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/components/organisms/CobreWidgetSuggestions/CobreWidgetSuggestionsFab.vue.d.ts

@@ -0,0 +1,23 @@
+import type { WidgetSuggestionItem } from './interfaces/suggestion.interface';
+interface Props {
+    /** Suggestions shown one at a time in a looping carousel. */
+    suggestions: WidgetSuggestionItem[];
+    /** FAB label and aria-label (e.g. "Suggestions"). */
+    fabLabel: string;
+    /** Call-to-action label inside the card (e.g. "View widget"). */
+    ctaLabel: string;
+    /** Tag/eyebrow label shown on the card. */
+    tagLabel: string;
+    /** aria-label for the popover close button. */
+    closeLabel: string;
+    /** aria-label for the previous (left) carousel arrow. */
+    prevLabel: string;
+    /** aria-label for the next (right) carousel arrow. */
+    nextLabel: string;
+}
+declare const _default: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    activate: (id: string) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onActivate?: ((id: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/types/components/organisms/CobreWidgetSuggestions/interfaces/suggestion.interface.d.ts

@@ -0,0 +1,14 @@
+/**
+ * A single widget suggestion rendered by CobreWidgetSuggestions / CobreSuggestionCard.
+ * Presentational shape only — DS-ready, with no portal types.
+ */
+export interface WidgetSuggestionItem {
+    /** Stable unique id; emitted by `activate` when the user picks this suggestion. */
+    id: string;
+    /** Widget name shown as the card title. */
+    title: string;
+    /** Short description of what the widget does. */
+    description: string;
+    /** URL of the widget illustration shown in the card header. */
+    imageUrl: string;
+}

package/dist/types/components/organisms/CobreWidgetSuggestions/useCarousel.d.ts

@@ -0,0 +1,22 @@
+import { type Ref } from 'vue';
+/**
+ * Generic looping carousel over a reactive list. Presentational/UI only — no
+ * portal dependencies, so it travels to the DS together with the suggestion
+ * card/FAB.
+ *
+ * The index is intentionally decoupled from the list: consumers that need it
+ * reset on a list change should remount the component (e.g. via a `:key`) rather
+ * than reset it here.
+ *
+ * @param items Reactive list to iterate over.
+ * @returns
+ * - `current`: the item at the current index (null when the list is empty).
+ * - `hasMultiple`: whether there is more than one item (i.e. navigation applies).
+ * - `next` / `prev`: advance the carousel, wrapping around at the ends.
+ */
+export declare const useCarousel: <T>(items: Ref<T[]>) => {
+    current: import("vue").ComputedRef<T | null>;
+    hasMultiple: import("vue").ComputedRef<boolean>;
+    next: () => void;
+    prev: () => void;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cobre-npm/ds-v3",
-  "version": "0.131.0",
+  "version": "0.133.0",
   "type": "module",
   "packageManager": "pnpm@11.0.4",
   "engines": {
@@ -43,8 +43,10 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.0.0",
     "@storybook/addon-a11y": "10.1.11",
+    "@storybook/addon-docs": "10.1.11",
     "@storybook/addon-links": "10.1.11",
     "@storybook/test-runner": "^0.24.2",
+    "@storybook/vue3": "10.1.11",
     "@storybook/vue3-vite": "10.1.11",
     "@types/bootstrap": "^5.2.10",
     "@types/vue-select": "^3.16.8",
@@ -62,8 +64,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-static-copy": "^1.0.5",
-    "vue-tsc": "^2.0.6",
-    "@storybook/addon-docs": "10.1.11"
+    "vue-tsc": "^2.0.6"
   },
   "peerDependencies": {
     "@vuepic/vue-datepicker": "^9.0.3",