@vc-shell/framework 1.2.4-beta.4 → 1.2.4-beta.6

package/ui/components/atoms/vc-banner/vc-banner.vue

@@ -1,158 +1,225 @@
 <template>
   <div
     class="vc-banner"
-    :class="[`vc-banner_${variant}`]"
-    :role="variant === 'danger' || variant === 'warning' ? 'alert' : 'region'"
-    :aria-label="variant === 'danger' ? 'Error' : variant === 'warning' ? 'Warning' : 'Information'"
+    :class="[
+      `vc-banner--${normalizedVariant}`,
+      {
+        'vc-banner--title-only': isTitleOnly,
+        'vc-banner--collapsed': isCollapsed,
+      },
+    ]"
+    :role="normalizedVariant === 'danger' || normalizedVariant === 'warning' ? 'alert' : 'region'"
+    :aria-label="normalizedVariant === 'danger' ? 'Error' : normalizedVariant === 'warning' ? 'Warning' : 'Information'"
   >
-    <div class="vc-banner__container">
-      <VcIcon
-        v-if="icon"
-        :icon="icon"
-        :size="iconSize"
-        :variant="iconVariant"
-        class="vc-banner__icon"
-        aria-hidden="true"
-      />
-      <div class="vc-banner__wrapper">
-        <div class="vc-banner__title">
-          <slot name="title"></slot>
-        </div>
-        <div
-          ref="contentRef"
-          class="vc-banner__content"
-          :class="[
-            {
-              'vc-banner__content--collapsed': !isExpanded,
-              'vc-banner__content--expanded': isExpanded,
-            },
-          ]"
-        >
+    <VcIcon
+      v-if="icon"
+      :icon="icon"
+      :size="iconSize"
+      :variant="iconVariant"
+      class="vc-banner__icon"
+      aria-hidden="true"
+    />
+    <div class="vc-banner__body">
+      <div v-if="hasTitle" class="vc-banner__title">
+        <slot name="title"></slot>
+      </div>
+      <div
+        v-if="hasContent"
+        class="vc-banner__content-wrapper"
+        :style="wrapperStyle"
+      >
+        <div ref="contentRef" class="vc-banner__content">
           <slot name="default"></slot>
         </div>
-        <div v-if="hasOverflow">
-          <slot
-            name="trigger"
-            :is-expanded="isExpanded"
-            :toggle="toggle"
+      </div>
+      <div v-if="showTrigger" class="vc-banner__trigger">
+        <slot
+          name="trigger"
+          :is-expanded="isExpanded"
+          :toggle="toggle"
+        >
+          <button
+            type="button"
+            class="vc-banner__trigger-button"
+            :aria-expanded="isExpanded"
+            @click="toggle"
           >
-            <VcButton
-              class="tw-self-end tw-mt-1"
-              text
-              size="sm"
-              :aria-expanded="isExpanded"
-              @click="toggle"
-            >
-              {{ isExpanded ? $t("COMPONENTS.ATOMS.VC_BANNER.SHOW_LESS") : $t("COMPONENTS.ATOMS.VC_BANNER.SHOW_MORE") }}
-            </VcButton>
-          </slot>
-        </div>
+            {{ isExpanded ? $t("COMPONENTS.ATOMS.VC_BANNER.SHOW_LESS") : $t("COMPONENTS.ATOMS.VC_BANNER.SHOW_MORE") }}
+          </button>
+        </slot>
       </div>
     </div>
   </div>
 </template>
+
 <!-- eslint-disable @typescript-eslint/no-explicit-any -->
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
-import { VcIcon } from "..";
-
-// TODO: Add to docs
+import { computed, useSlots } from "vue";
+import { VcIcon } from "@ui/components/atoms/vc-icon";
+import { useCollapsible } from "@ui/composables/useCollapsible";
 
-type StatusVariant = "info" | "warning" | "danger" | "success" | "light-danger" | "info-dark" | "primary";
+export type CurrentBannerVariant = "info" | "warning" | "danger" | "success";
+/**
+ * @deprecated Use current variants: "info" | "warning" | "danger" | "success".
+ */
+export type LegacyBannerVariant = "light-danger" | "info-dark" | "primary";
+export type BannerVariant = CurrentBannerVariant | LegacyBannerVariant;
 
 export interface Props {
-  variant?: StatusVariant;
+  /**
+   * @deprecated Legacy variants ("light-danger", "info-dark", "primary") are supported for backward compatibility
+   * and mapped to modern variants ("danger", "info", "info").
+   */
+  variant?: BannerVariant;
   icon?: string;
   iconSize?: InstanceType<typeof VcIcon>["$props"]["size"];
   iconVariant?: InstanceType<typeof VcIcon>["$props"]["variant"];
+  collapsedHeight?: number;
 }
 
 defineSlots<{
   title: (props: any) => any;
   default: (props: any) => any;
-  trigger: (props: any) => any;
+  trigger: (props: { isExpanded: boolean; toggle: () => void }) => any;
 }>();
 
 const props = withDefaults(defineProps<Props>(), {
   variant: "info",
-  iconSize: "xxl",
+  iconSize: "l",
+  collapsedHeight: 100,
 });
 
-/** Maximum height in pixels before content is collapsed */
-const COLLAPSED_MAX_HEIGHT = 100;
-
-const contentRef = ref<HTMLDivElement>();
-const isExpanded = ref(false);
-const hasOverflow = ref(false);
-
-const toggle = () => {
-  isExpanded.value = !isExpanded.value;
-};
+const slots = useSlots();
+const { contentRef, isExpanded, hasOverflow, wrapperStyle, toggle } = useCollapsible({
+  collapsedHeight: props.collapsedHeight,
+});
 
-const checkOverflow = () => {
-  if (contentRef.value) {
-    hasOverflow.value = contentRef.value.scrollHeight > COLLAPSED_MAX_HEIGHT;
+function normalizeVariant(variant: BannerVariant): CurrentBannerVariant {
+  switch (variant) {
+    case "light-danger":
+      return "danger";
+    case "info-dark":
+    case "primary":
+      return "info";
+    default:
+      return variant;
   }
-};
+}
 
-onMounted(() => {
-  checkOverflow();
-});
+const normalizedVariant = computed<CurrentBannerVariant>(() => normalizeVariant(props.variant));
+const hasTitle = computed(() => Boolean(slots.title));
+const hasContent = computed(() => Boolean(slots.default));
+const isTitleOnly = computed(() => hasTitle.value && !hasContent.value);
+const showTrigger = computed(() => hasContent.value && hasOverflow.value);
+const isCollapsed = computed(() => showTrigger.value && !isExpanded.value);
+
+if (import.meta.env?.DEV) {
+  if (props.variant === "light-danger" || props.variant === "info-dark" || props.variant === "primary") {
+    console.warn(
+      `[VcBanner] variant "${props.variant}" is deprecated. Use "${normalizeVariant(props.variant)}" instead.`,
+    );
+  }
+}
 </script>
 
 <style lang="scss">
-:root {
-  --banner-text-color: var(--neutrals-700);
-  --banner-border-radius: 6px;
-  --banner-padding: 12px;
-}
-$variants: info, warning, danger, success, light-danger, info-dark, primary;
+@use "sass:map";
+
+$banner-variants: (
+  info: (bg: var(--neutrals-50), border: var(--info-100), accent: var(--info-500)),
+  warning: (bg: var(--neutrals-50), border: var(--warning-100), accent: var(--warning-500)),
+  danger: (bg: var(--neutrals-50), border: var(--danger-100), accent: var(--danger-500)),
+  success: (bg: var(--neutrals-50), border: var(--success-100), accent: var(--success-500)),
+);
 
 .vc-banner {
-  @apply tw-whitespace-normal tw-justify-start tw-max-w-full tw-border-none;
-  border-radius: var(--banner-border-radius);
-  padding: var(--banner-padding);
-
-  @each $variant in $variants {
-    &.vc-banner_#{$variant} {
-      background-color: var(--status-#{$variant}-bg-color);
-      color: var(--status-#{$variant}-color);
-      border-left: 3px solid var(--status-#{$variant}-main-color);
-
-      .vc-banner__content {
-        color: var(--status-#{$variant}-color);
-      }
+  @apply tw-relative tw-flex tw-items-start tw-gap-3 tw-overflow-hidden tw-rounded-md tw-border tw-border-solid tw-py-3 tw-pr-3 tw-pl-4;
+  --vc-banner-accent: var(--info-500);
+
+  &::before {
+    content: "";
+    @apply tw-absolute tw-left-0 tw-top-0 tw-bottom-0;
+    width: 3px;
+    background-color: var(--vc-banner-accent);
+  }
+
+  @each $name, $colors in $banner-variants {
+    &.vc-banner--#{$name} {
+      --vc-banner-accent: #{map.get($colors, accent)};
+      background-color: #{map.get($colors, bg)};
+      border-color: #{map.get($colors, border)};
     }
   }
 
-  &__wrapper {
-    @apply tw-flex tw-flex-col tw-text-start tw-min-w-0;
+  &.vc-banner--title-only {
+    @apply tw-items-center;
+
+    .vc-banner__icon {
+      @apply tw-mt-0;
+    }
+  }
+
+  &__icon {
+    @apply tw-mt-0.5 tw-shrink-0;
+    color: var(--vc-banner-accent);
   }
 
-  &__container {
-    @apply tw-flex tw-flex-row tw-items-start;
+  &__body {
+    @apply tw-flex tw-flex-col tw-min-w-0 tw-flex-1;
   }
 
   &__title {
-    @apply tw-font-semibold tw-text-sm;
+    @apply tw-text-sm tw-font-medium tw-leading-5;
+    color: var(--neutrals-900);
+  }
+
+  &__content-wrapper {
+    @apply tw-relative tw-overflow-hidden;
+    transition: max-height 0.28s cubic-bezier(0.22, 1, 0.36, 1);
+    will-change: max-height;
+
+    &::after {
+      content: "";
+      @apply tw-pointer-events-none tw-absolute tw-bottom-0 tw-left-0 tw-right-0 tw-h-8;
+      background: linear-gradient(to bottom, rgb(250 250 250 / 0), var(--neutrals-50));
+      opacity: 0;
+      transition: opacity 0.2s ease;
+    }
   }
 
   &__content {
-    @apply tw-overflow-hidden tw-text-[color:var(--banner-text-color)] tw-font-normal tw-text-sm tw-leading-relaxed;
-    transition: max-height 200ms ease-out;
+    @apply tw-text-sm tw-leading-5;
+    color: var(--neutrals-700);
+  }
 
-    &--collapsed {
-      max-height: 100px;
-      @apply tw-line-clamp-4;
-    }
+  &__title + &__content-wrapper {
+    @apply tw-mt-0.5;
+  }
 
-    &--expanded {
-      max-height: 2000px;
+  &.vc-banner--collapsed {
+    .vc-banner__content-wrapper::after {
+      opacity: 1;
     }
   }
 
-  &__icon {
-    @apply tw-mr-3 tw-shrink-0;
+  &__trigger {
+    @apply tw-mt-1;
+  }
+
+  &__trigger-button {
+    @apply tw-inline-flex tw-cursor-pointer tw-items-center tw-border-0 tw-bg-transparent tw-p-0 tw-text-sm tw-font-medium tw-leading-5;
+    color: var(--vc-banner-accent);
+    transition: color 0.15s ease;
+
+    &:hover {
+      @apply tw-underline;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--vc-banner-accent);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
   }
 }
 </style>

package/ui/components/atoms/vc-button/vc-button-group.vue

@@ -30,9 +30,9 @@ provide(ButtonGroupKey, {
 const groupClass = computed(() => [
   "vc-button-group",
   {
-    "vc-button-group_horizontal": props.orientation === "horizontal",
-    "vc-button-group_vertical": props.orientation === "vertical",
-    "vc-button-group_attached": props.attached,
+    "vc-button-group--horizontal": props.orientation === "horizontal",
+    "vc-button-group--vertical": props.orientation === "vertical",
+    "vc-button-group--attached": props.attached,
   },
 ]);
 </script>
@@ -41,18 +41,18 @@ const groupClass = computed(() => [
 .vc-button-group {
   @apply tw-inline-flex tw-gap-2;
 
-  &_vertical {
+  &--vertical {
     @apply tw-flex-col;
   }
 
   // Attached mode — buttons touch, shared borders, connected radii
   // Selectors use `> *` to handle both direct .vc-button children
   // and wrapped buttons (e.g. inside VcTooltip or other wrappers).
-  &_attached {
+  &--attached {
     @apply tw-gap-0;
 
     // Horizontal attached
-    &.vc-button-group_horizontal {
+    &.vc-button-group--horizontal {
       // All buttons inside lose rounding
       .vc-button {
         @apply tw-rounded-none;
@@ -77,7 +77,7 @@ const groupClass = computed(() => [
     }
 
     // Vertical attached
-    &.vc-button-group_vertical {
+    &.vc-button-group--vertical {
       .vc-button {
         @apply tw-rounded-none;
       }

package/ui/components/atoms/vc-button/vc-button.a11y.test.ts

@@ -0,0 +1,46 @@
+import { afterEach, describe, expect, it } from "vitest";
+import { mount, VueWrapper } from "@vue/test-utils";
+import axe from "axe-core";
+import VcButton from "@ui/components/atoms/vc-button/vc-button.vue";
+
+describe("VcButton a11y", () => {
+  let wrapper: VueWrapper;
+
+  afterEach(() => {
+    wrapper?.unmount();
+  });
+
+  const mountButton = (props: Record<string, unknown> = {}, slots: Record<string, string> = {}) => {
+    wrapper = mount(VcButton as any, {
+      props,
+      slots,
+      global: { stubs: { VcIcon: true } },
+      attachTo: document.body,
+    });
+    return wrapper;
+  };
+
+  it("has no a11y violations with text content", async () => {
+    const w = mountButton({}, { default: "Submit" });
+    const results = await axe.run(w.element as HTMLElement);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("has no a11y violations when disabled", async () => {
+    const w = mountButton({ disabled: true }, { default: "Disabled" });
+    const results = await axe.run(w.element as HTMLElement);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("has no a11y violations when loading", async () => {
+    const w = mountButton({ loading: true }, { default: "Loading" });
+    const results = await axe.run(w.element as HTMLElement);
+    expect(results).toHaveNoViolations();
+  });
+
+  it("has no a11y violations for icon-only button with aria-label", async () => {
+    const w = mountButton({ ariaLabel: "Add item", icon: "lucide-plus" });
+    const results = await axe.run(w.element as HTMLElement);
+    expect(results).toHaveNoViolations();
+  });
+});

package/ui/components/atoms/vc-button/vc-button.test.ts

@@ -0,0 +1,75 @@
+import { describe, expect, it } from "vitest";
+import { mount } from "@vue/test-utils";
+import VcButton from "@ui/components/atoms/vc-button/vc-button.vue";
+
+describe("VcButton", () => {
+  const mountButton = (props: Record<string, unknown> = {}, slots: Record<string, string> = {}) =>
+    mount(VcButton as any, {
+      props,
+      slots,
+      global: { stubs: { VcIcon: true } },
+    });
+
+  it("renders a native button element", () => {
+    const wrapper = mountButton({}, { default: "Click me" });
+    expect(wrapper.find("button").exists()).toBe(true);
+    expect(wrapper.text()).toContain("Click me");
+  });
+
+  it("defaults to type=button", () => {
+    const wrapper = mountButton();
+    expect(wrapper.find("button").attributes("type")).toBe("button");
+  });
+
+  it("sets disabled when disabled prop is true", () => {
+    const wrapper = mountButton({ disabled: true });
+    expect(wrapper.find("button").attributes("disabled")).toBeDefined();
+  });
+
+  it("sets disabled when loading prop is true", () => {
+    const wrapper = mountButton({ loading: true });
+    expect(wrapper.find("button").attributes("disabled")).toBeDefined();
+  });
+
+  it("sets aria-busy when loading", () => {
+    const wrapper = mountButton({ loading: true });
+    expect(wrapper.find("button").attributes("aria-busy")).toBe("true");
+  });
+
+  it("does not set aria-busy when not loading", () => {
+    const wrapper = mountButton();
+    expect(wrapper.find("button").attributes("aria-busy")).toBeUndefined();
+  });
+
+  it("forwards ariaLabel prop", () => {
+    const wrapper = mountButton({ ariaLabel: "Submit form" });
+    expect(wrapper.find("button").attributes("aria-label")).toBe("Submit form");
+  });
+
+  it("emits click on button click", async () => {
+    const wrapper = mountButton({}, { default: "Go" });
+    await wrapper.find("button").trigger("click");
+    expect(wrapper.emitted("click")).toHaveLength(1);
+  });
+
+  it("does not emit click when disabled", async () => {
+    const wrapper = mountButton({ disabled: true }, { default: "Go" });
+    await wrapper.find("button").trigger("click");
+    expect(wrapper.emitted("click")).toBeUndefined();
+  });
+
+  it("applies variant class", () => {
+    const wrapper = mountButton({ variant: "danger" }, { default: "Delete" });
+    expect(wrapper.find("button").classes()).toContain("vc-button-danger");
+  });
+
+  it("sets aria-pressed when selected", () => {
+    const w = mountButton({ selected: true });
+    expect(w.find("button").attributes("aria-pressed")).toBe("true");
+  });
+
+  it("does not set aria-pressed when not selected", () => {
+    const w = mountButton({});
+    expect(w.find("button").attributes("aria-pressed")).toBeUndefined();
+  });
+});

package/ui/components/atoms/vc-button/vc-button.vue

@@ -5,6 +5,7 @@
     :disabled="disabled || loading"
     :aria-label="ariaLabel"
     :aria-busy="loading || undefined"
+    :aria-pressed="selected || undefined"
     @click="onClick"
   >
     <!-- Loading: spinner replaces icon; shown inline next to text -->
@@ -86,11 +87,11 @@ const buttonClass = computed(() => {
     "vc-button",
     {
       [`vc-button-${props.variant}`]: props.variant,
-      [`vc-button_${effectiveSize.value}`]: effectiveSize.value,
-      "vc-button_selected": props.selected,
-      "vc-button_text": props.text,
-      "vc-button_disabled": props.disabled || props.loading,
-      "vc-button_loading": props.loading,
+      [`vc-button--${effectiveSize.value}`]: effectiveSize.value,
+      "vc-button--selected": props.selected,
+      "vc-button--text": props.text,
+      "vc-button--disabled": props.disabled || props.loading,
+      "vc-button--loading": props.loading,
     },
   ];
 });
@@ -223,11 +224,26 @@ function onClick(e: Event): void {
 $variants: primary, secondary, danger, warning, success, info, outline, ghost, link;
 
 .vc-button {
+  position: relative;
+
+  // Expand touch target to 44px minimum for WCAG 2.5.8 compliance
+  // Uses ::after pseudo-element to extend hit area without affecting visual size
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 50% auto auto 50%;
+    transform: translate(-50%, -50%);
+    min-width: 44px;
+    min-height: 44px;
+    width: 100%;
+    height: 100%;
+  }
+
   &__icon + &__title {
     @apply tw-ml-2 tw-text-left;
   }
 
-  &_loading {
+  &--loading {
     @apply tw-cursor-wait #{!important};
   }
 
@@ -259,7 +275,7 @@ $variants: primary, secondary, danger, warning, success, info, outline, ghost, l
       }
 
       // text modifier — ghost-like appearance (backward compat)
-      &.vc-button_text {
+      &.vc-button--text {
         @apply tw-border-none tw-bg-transparent
           tw-text-[color:var(--button-#{$variant}-background-color)]
           hover:tw-text-[color:var(--button-#{$variant}-background-color-hover)]
@@ -273,31 +289,31 @@ $variants: primary, secondary, danger, warning, success, info, outline, ghost, l
         }
       }
 
-      &.vc-button_selected {
+      &.vc-button--selected {
         @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)];
 
-        &.vc-button_text {
+        &.vc-button--text {
           @apply tw-bg-[color:var(--button-#{$variant}-background-color-hover)] tw-bg-opacity-[0.07] tw-p-1;
         }
       }
 
       // Size: sm — h-8 px-3 text-xs (no vertical padding)
-      &.vc-button_sm {
+      &.vc-button--sm {
         @apply tw-h-[var(--button-sm-height)] tw-px-[var(--button-sm-padding-hor)] tw-py-0 tw-text-xs #{!important};
       }
 
       // Size: default — h-9 px-4 py-2
-      &.vc-button_default {
+      &.vc-button--default {
         @apply tw-h-[var(--button-default-height)] tw-py-[var(--button-default-padding-vert)] tw-px-[var(--button-default-padding-hor)] tw-text-sm tw-leading-4;
       }
 
       // Size: lg — h-10 px-6 (no vertical padding)
-      &.vc-button_lg {
+      &.vc-button--lg {
         @apply tw-h-[var(--button-lg-height)] tw-px-[var(--button-lg-padding-hor)] tw-py-0 tw-text-sm tw-leading-4 #{!important};
       }
 
       // Size: icon — h-9 w-9 square
-      &.vc-button_icon {
+      &.vc-button--icon {
         @apply tw-h-[var(--button-icon-size)] tw-w-[var(--button-icon-size)] tw-p-0 #{!important};
       }
 
@@ -308,17 +324,17 @@ $variants: primary, secondary, danger, warning, success, info, outline, ghost, l
   }
 
   // Special hover overrides for structural variants (bg change, not just opacity)
-  &.vc-button-secondary:hover:not(:disabled):not(.vc-button_text) {
+  &.vc-button-secondary:hover:not(:disabled):not(.vc-button--text) {
     @apply tw-opacity-100 tw-bg-[color:var(--button-secondary-background-color-hover)]
       tw-border-[color:var(--button-secondary-border-color-hover)];
   }
 
-  &.vc-button-outline:hover:not(:disabled):not(.vc-button_text) {
+  &.vc-button-outline:hover:not(:disabled):not(.vc-button--text) {
     @apply tw-opacity-100 tw-bg-[color:var(--button-outline-background-color-hover)]
       tw-border-[color:var(--button-outline-border-color-hover)];
   }
 
-  &.vc-button-ghost:hover:not(:disabled):not(.vc-button_text) {
+  &.vc-button-ghost:hover:not(:disabled):not(.vc-button--text) {
     @apply tw-opacity-100 tw-bg-[color:var(--button-ghost-background-color-hover)];
   }
 
@@ -326,7 +342,7 @@ $variants: primary, secondary, danger, warning, success, info, outline, ghost, l
     // Link variant: no padding, no min-height — behaves like inline text
     @apply tw-p-0 tw-h-auto tw-min-h-0 #{!important};
 
-    &:hover:not(:disabled):not(.vc-button_text) {
+    &:hover:not(:disabled):not(.vc-button--text) {
       @apply tw-opacity-100;
 
       // Underline only on text, not icon — prevents split underline with icon+text

package/ui/components/atoms/vc-card/vc-card.stories.ts

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcCard } from ".";
-import { VcInput, VcCol, VcButton } from "@ui/components";
+import { VcInput } from "@ui/components/molecules/vc-input";
+import { VcCol } from "@ui/components/atoms/vc-col";
+import { VcButton } from "@ui/components/atoms/vc-button";
 
 /**
  * `VcCard` is a container component that provides a bordered and styled section with

package/ui/components/atoms/vc-card/vc-card.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="vc-card"
-    :class="[{ 'vc-card_collapsable': isCollapsable }, `vc-card_${variant}`]"
+    :class="[{ 'vc-card--collapsable': isCollapsable }, `vc-card--${variant}`]"
   >
     <div
       v-if="header"
@@ -161,7 +161,7 @@ $variants: success, danger;
     @apply tw-flex tw-items-center;
   }
 
-  &_collapsable &__header {
+  &--collapsable &__header {
     @apply tw-cursor-pointer tw-select-none;
 
     &:hover {
@@ -204,7 +204,7 @@ $variants: success, danger;
   }
 
   @each $variant in $variants {
-    &_#{$variant} {
+    &--#{$variant} {
       .vc-card__header {
         @apply tw-bg-[color:var(--card-header-background-#{$variant})];
       }

package/ui/components/atoms/vc-col/vc-col.stories.ts

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/vue3-vite";
 import { VcCol } from "@ui/components/atoms/vc-col";
 import { VcRow } from "@ui/components/atoms/vc-row";
-import { VcImage } from "@ui/components";
+import { VcImage } from "@ui/components/atoms/vc-image";
 
 /**
  * `VcCol` is a layout component that creates a vertical column for content.