@vc-shell/framework 1.1.0-alpha.1 → 1.1.0-alpha.11

package/ui/components/atoms/vc-icon/icons/CrossSignIcon.vue

@@ -1,24 +1,20 @@
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 12 12"
-    fill="none"
-    :width="width"
-    :height="height"
-  >
-    <path
-      d="M11 11L6.00001 6.00001M6.00001 6.00001L1 1M6.00001 6.00001L11 1M6.00001 6.00001L1 11"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" :width="width" :height="height">
+  <path
+    d="M11 11L6.00001 6.00001M6.00001 6.00001L1 1M6.00001 6.00001L11 1M6.00001 6.00001L1 11"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  width?: number | string;
-  height?: number | string;
-}>();
+  width?: number | string
+  height?: number | string
+}>()
 </script>

package/ui/components/atoms/vc-icon/icons/DoubleArrowLeftIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M11 9L7 5L11 1M5 9L1 5L5 1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/DoubleArrowRightIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M7 1L11 5L7 9M1 1L5 5L1 9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/FulfillmentCentersIcon.vue

@@ -0,0 +1,27 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Building outline -->
+    <path d="M1 19H19" />
+    <path d="M1 8L10 1L19 8V19H1V8Z" />
+
+    <!-- Door and details -->
+    <rect x="7" y="13" width="6" height="6" />
+
+    <!-- Windows -->
+    <rect x="4" y="6" width="3" height="3" />
+    <rect x="13" y="6" width="3" height="3" />
+
+    <!-- Flag/sign -->
+    <path d="M4 8.5V4.5" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/GridDotsIcon.vue

@@ -0,0 +1,22 @@
+
+<template>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M17 18C17 18.5523 17.4477 19 18 19C18.5523 19 19 18.5523 19 18C19 17.4477 18.5523 17 18 17C17.4477 17 17 17.4477 17 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18C13 17.4477 12.5523 17 12 17C11.4477 17 11 17.4477 11 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 18C5 18.5523 5.44772 19 6 19C6.55228 19 7 18.5523 7 18C7 17.4477 6.55228 17 6 17C5.44772 17 5 17.4477 5 18Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 12C17 12.5523 17.4477 13 18 13C18.5523 13 19 12.5523 19 12C19 11.4477 18.5523 11 18 11C17.4477 11 17 11.4477 17 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 12C11 12.5523 11.4477 13 12 13C12.5523 13 13 12.5523 13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 12C5 12.5523 5.44772 13 6 13C6.55228 13 7 12.5523 7 12C7 11.4477 6.55228 11 6 11C5.44772 11 5 11.4477 5 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5C17.4477 5 17 5.44772 17 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 6C11 6.55228 11.4477 7 12 7C12.5523 7 13 6.55228 13 6C13 5.44772 12.5523 5 12 5C11.4477 5 11 5.44772 11 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 6C5 6.55228 5.44772 7 6 7C6.55228 7 7 6.55228 7 6C7 5.44772 6.55228 5 6 5C5.44772 5 5 5.44772 5 6Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/LogoutIcon.vue

@@ -1,24 +1,13 @@
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 18 18"
-    fill="none"
-    :width="width"
-    :height="height"
-  >
-    <path
-      d="M9 12L12 9M12 9L9 6M12 9H1M1 4.24802V4.2002C1 3.08009 1 2.51962 1.21799 2.0918C1.40973 1.71547 1.71547 1.40973 2.0918 1.21799C2.51962 1 3.08009 1 4.2002 1H13.8002C14.9203 1 15.4796 1 15.9074 1.21799C16.2837 1.40973 16.5905 1.71547 16.7822 2.0918C17 2.5192 17 3.07899 17 4.19691V13.8036C17 14.9215 17 15.4805 16.7822 15.9079C16.5905 16.2842 16.2837 16.5905 15.9074 16.7822C15.48 17 14.921 17 13.8031 17H4.19691C3.07899 17 2.5192 17 2.0918 16.7822C1.71547 16.5905 1.40973 16.2839 1.21799 15.9076C1 15.4798 1 14.9201 1 13.8V13.75"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path d="M9 12L12 9M12 9L9 6M12 9H1M1 4.24802V4.2002C1 3.08009 1 2.51962 1.21799 2.0918C1.40973 1.71547 1.71547 1.40973 2.0918 1.21799C2.51962 1 3.08009 1 4.2002 1H13.8002C14.9203 1 15.4796 1 15.9074 1.21799C16.2837 1.40973 16.5905 1.71547 16.7822 2.0918C17 2.5192 17 3.07899 17 4.19691V13.8036C17 14.9215 17 15.4805 16.7822 15.9079C16.5905 16.2842 16.2837 16.5905 15.9074 16.7822C15.48 17 14.921 17 13.8031 17H4.19691C3.07899 17 2.5192 17 2.0918 16.7822C1.71547 16.5905 1.40973 16.2839 1.21799 15.9076C1 15.4798 1 14.9201 1 13.8V13.75" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  width?: number | string;
-  height?: number | string;
-}>();
+  width?: number | string
+  height?: number | string
+}>()
 </script>

package/ui/components/atoms/vc-icon/icons/MenuBurgerIcon.vue

@@ -1,24 +1,20 @@
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 12 12"
-    fill="none"
-    :width="width"
-    :height="height"
-  >
-    <path
-      d="M6 11H11M1 6H11M1 1H11"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none" :width="width" :height="height">
+  <path
+    d="M6 11H11M1 6H11M1 1H11"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  width?: number | string;
-  height?: number | string;
-}>();
+  width?: number | string
+  height?: number | string
+}>()
 </script>

package/ui/components/atoms/vc-icon/icons/MinusSignIcon.vue

@@ -1,24 +1,14 @@
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 18 18"
-    fill="none"
-    :width="width"
-    :height="height"
-  >
-    <path
-      d="M4.5 9H13.5"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path d="M4.5 9H13.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  width?: number | string;
-  height?: number | string;
-}>();
+  width?: number | string
+  height?: number | string
+}>()
 </script>

package/ui/components/atoms/vc-icon/icons/OffersIcon.vue

@@ -0,0 +1,23 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Price tag shape -->
+    <path d="M9.5 1H5C2.79086 1 1 2.79086 1 5V9.5C1 9.63261 1.05268 9.75979 1.14645 9.85355L10.1464 18.8536C10.3417 19.0488 10.6583 19.0488 10.8536 18.8536L18.8536 10.8536C19.0488 10.6583 19.0488 10.3417 18.8536 10.1464L9.85355 1.14645C9.75979 1.05268 9.63261 1 9.5 1Z" />
+    <!-- Tag hole -->
+    <circle cx="5" cy="5" r="2" fill="none" />
+    <!-- Discount line -->
+    <path d="M13 7L7 13" />
+    <!-- Percentage symbol -->
+    <circle cx="7" cy="7" r="0.5" fill="none" />
+    <circle cx="13" cy="13" r="0.5" fill="none" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/OrdersIcon.vue

@@ -0,0 +1,19 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <path
+    d="M5 10H10M5 14H12M5 6H12M14 1H3C1.89543 1 1 1.89543 1 3V17C1 18.1046 1.89543 19 3 19H17C18.1046 19 19 18.1046 19 17V6L14 1ZM14 1V6H19"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/PeopleIcon.vue

@@ -0,0 +1,21 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Main person -->
+    <circle cx="8" cy="8" r="3" fill="none" />
+    <path d="M2 19V17C2 14.7909 3.79086 13 6 13H10C12.2091 13 14 14.7909 14 17V19" />
+
+    <!-- Secondary person (partial, behind) -->
+    <path d="M15 8C15 9.65685 13.6569 11 12 11" />
+    <path d="M18 19V17C18 15.3431 17.1652 13.9089 15.8944 13.1913" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/PlusSignIcon.vue

@@ -1,24 +1,20 @@
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 18 18"
-    fill="none"
-    :width="width"
-    :height="height"
-  >
-    <path
-      d="M4.5 9H9M9 9H13.5M9 9V13.5M9 9V4.5"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" fill="none" :width="width" :height="height">
+  <path
+    d="M4.5 9H9M9 9H13.5M9 9V13.5M9 9V4.5"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  width?: number | string;
-  height?: number | string;
-}>();
+  width?: number | string
+  height?: number | string
+}>()
 </script>

package/ui/components/atoms/vc-icon/icons/ProductsIcon.vue

@@ -0,0 +1,23 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- Package box outline -->
+    <path d="M1 5L10 1L19 5V15L10 19L1 15V5Z" />
+    <!-- Middle line separating top and bottom -->
+    <path d="M10 9L19 5" />
+    <path d="M10 9L1 5" />
+    <!-- Vertical line from middle to bottom -->
+    <path d="M10 9V19" />
+    <!-- Additional details -->
+    <path d="M5 3L14 7" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/ProfileIcon.vue

@@ -0,0 +1,18 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- User head -->
+    <circle cx="10" cy="5" r="4" fill="none" />
+    <!-- User body -->
+    <path d="M3 19V17C3 14.2386 5.23858 12 8 12H12C14.7614 12 17 14.2386 17 17V19" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/SearchIcon.vue

@@ -0,0 +1,14 @@
+
+<template>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M13 13L19 19M8 15C4.13401 15 1 11.866 1 8C1 4.13401 4.13401 1 8 1C11.866 1 15 4.13401 15 8C15 11.866 11.866 15 8 15Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/SettingsBoltIcon.vue

@@ -1,31 +1,21 @@
+
 <template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 22"
-    fill="none"
-    :width="width"
-    :height="height"
-  >
-    <path
-      d="M11.6006 20.0761L17.0608 16.9236C17.6437 16.5871 17.9346 16.4188 18.1465 16.1834C18.3341 15.9751 18.4759 15.7297 18.5625 15.4632C18.6602 15.1626 18.6602 14.8267 18.6602 14.1568V7.84268C18.6602 7.17277 18.6602 6.83694 18.5625 6.53638C18.4759 6.26982 18.3341 6.02428 18.1465 5.816C17.9355 5.58161 17.6453 5.41405 17.0674 5.08043L11.5996 1.92359C11.0167 1.58706 10.7259 1.41913 10.416 1.35328C10.1419 1.295 9.85843 1.295 9.58427 1.35328C9.27443 1.41914 8.98259 1.58706 8.39971 1.92359L2.93843 5.07666C2.35623 5.41279 2.06535 5.58073 1.85352 5.816C1.66597 6.02428 1.52434 6.26982 1.43773 6.53638C1.33984 6.83765 1.33984 7.17436 1.33984 7.84742V14.1524C1.33984 14.8254 1.33984 15.1619 1.43773 15.4632C1.52434 15.7297 1.66597 15.9751 1.85352 16.1834C2.06548 16.4188 2.35657 16.5871 2.93945 16.9236L8.39971 20.0761C8.98258 20.4126 9.27443 20.5806 9.58427 20.6465C9.85843 20.7047 10.1419 20.7047 10.416 20.6465C10.7259 20.5806 11.0177 20.4126 11.6006 20.0761Z"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-    <path
-      d="M7 10.9998C7 12.6566 8.34315 13.9998 10 13.9998C11.6569 13.9998 13 12.6566 13 10.9998C13 9.34291 11.6569 7.99976 10 7.99976C8.34315 7.99976 7 9.34291 7 10.9998Z"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-    />
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none" :width="width" :height="height">
+<path d="M11.6006 20.0761L17.0608 16.9236C17.6437 16.5871 17.9346 16.4188 18.1465 16.1834C18.3341 15.9751 18.4759 15.7297 18.5625 15.4632C18.6602 15.1626 18.6602 14.8267 18.6602 14.1568V7.84268C18.6602 7.17277 18.6602 6.83694 18.5625 6.53638C18.4759 6.26982 18.3341 6.02428 18.1465 5.816C17.9355 5.58161 17.6453 5.41405 17.0674 5.08043L11.5996 1.92359C11.0167 1.58706 10.7259 1.41913 10.416 1.35328C10.1419 1.295 9.85843 1.295 9.58427 1.35328C9.27443 1.41914 8.98259 1.58706 8.39971 1.92359L2.93843 5.07666C2.35623 5.41279 2.06535 5.58073 1.85352 5.816C1.66597 6.02428 1.52434 6.26982 1.43773 6.53638C1.33984 6.83765 1.33984 7.17436 1.33984 7.84742V14.1524C1.33984 14.8254 1.33984 15.1619 1.43773 15.4632C1.52434 15.7297 1.66597 15.9751 1.85352 16.1834C2.06548 16.4188 2.35657 16.5871 2.93945 16.9236L8.39971 20.0761C8.98258 20.4126 9.27443 20.5806 9.58427 20.6465C9.85843 20.7047 10.1419 20.7047 10.416 20.6465C10.7259 20.5806 11.0177 20.4126 11.6006 20.0761Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+  <path
+    d="M7 10.9998C7 12.6566 8.34315 13.9998 10 13.9998C11.6569 13.9998 13 12.6566 13 10.9998C13 9.34291 11.6569 7.99976 10 7.99976C8.34315 7.99976 7 9.34291 7 10.9998Z"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
+
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  width?: number | string;
-  height?: number | string;
-}>();
+  width?: number | string
+  height?: number | string
+}>()
 </script>

package/ui/components/atoms/vc-icon/icons/ShoppingCardIcon.vue

@@ -0,0 +1,16 @@
+
+<template>
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M8 22C8.55228 22 9 21.5523 9 21C9 20.4477 8.55228 20 8 20C7.44772 20 7 20.4477 7 21C7 21.5523 7.44772 22 8 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19 22C19.5523 22 20 21.5523 20 21C20 20.4477 19.5523 20 19 20C18.4477 20 18 20.4477 18 21C18 21.5523 18.4477 22 19 22Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.0498 2.0498H4.0498L6.7098 14.4698C6.80738 14.9247 7.06048 15.3313 7.42552 15.6197C7.79056 15.908 8.24471 16.0602 8.7098 16.0498H18.4898C18.945 16.0491 19.3863 15.8931 19.7408 15.6076C20.0954 15.3222 20.3419 14.9243 20.4398 14.4798L22.0898 7.0498H5.1198" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/VendorSwitchIcon.vue

@@ -0,0 +1,26 @@
+
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" :width="width" :height="height">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <!-- First profile -->
+    <circle cx="6" cy="6" r="3" fill="none" />
+    <path d="M2 14V13C2 11.3431 3.34315 10 5 10H7C8.65685 10 10 11.3431 10 13V14" />
+
+    <!-- Second profile -->
+    <circle cx="14" cy="6" r="3" fill="none" />
+    <path d="M10 14V13C10 11.3431 11.3431 10 13 10H15C16.6569 10 18 11.3431 18 13V14" />
+
+    <!-- Switch/exchange arrows -->
+    <path d="M7 17L4 15L7 13" />
+    <path d="M13 17L16 15L13 13" />
+    <path d="M4 15H16" />
+  </g>
+</svg>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/VertDotsIcon.vue

@@ -0,0 +1,19 @@
+
+<template>
+<svg viewBox="0 0 4 16" fill="none" xmlns="http://www.w3.org/2000/svg" :width="width" :height="height">
+<path d="M1 14C1 14.5523 1.44772 15 2 15C2.55228 15 3 14.5523 3 14C3 13.4477 2.55228 13 2 13C1.44772 13 1 13.4477 1 14Z" fill="currentColor"/>
+<path d="M1 8C1 8.55228 1.44772 9 2 9C2.55228 9 3 8.55228 3 8C3 7.44772 2.55228 7 2 7C1.44772 7 1 7.44772 1 8Z" fill="currentColor"/>
+<path d="M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z" fill="currentColor"/>
+<path d="M1 14C1 14.5523 1.44772 15 2 15C2.55228 15 3 14.5523 3 14C3 13.4477 2.55228 13 2 13C1.44772 13 1 13.4477 1 14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 8C1 8.55228 1.44772 9 2 9C2.55228 9 3 8.55228 3 8C3 7.44772 2.55228 7 2 7C1.44772 7 1 7.44772 1 8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 2C1 2.55228 1.44772 3 2 3C2.55228 3 3 2.55228 3 2C3 1.44772 2.55228 1 2 1C1.44772 1 1 1.44772 1 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  width?: number | string
+  height?: number | string
+}>()
+</script>

package/ui/components/atoms/vc-icon/icons/index.ts

@@ -1,11 +1,27 @@
-export { default as AppWindowIcon } from "./AppWindowIcon.vue";
-export { default as ArrowLeftIcon } from "./ArrowLeftIcon.vue";
-export { default as ArrowRightIcon } from "./ArrowRightIcon.vue";
-export { default as BellIcon } from "./BellIcon.vue";
-export { default as CircleDotsIcon } from "./CircleDotsIcon.vue";
-export { default as CrossSignIcon } from "./CrossSignIcon.vue";
-export { default as LogoutIcon } from "./LogoutIcon.vue";
-export { default as MenuBurgerIcon } from "./MenuBurgerIcon.vue";
-export { default as MinusSignIcon } from "./MinusSignIcon.vue";
-export { default as PlusSignIcon } from "./PlusSignIcon.vue";
-export { default as SettingsBoltIcon } from "./SettingsBoltIcon.vue";
+export { default as AppWindowIcon } from "./AppWindowIcon.vue"
+export { default as ArrowLeftIcon } from "./ArrowLeftIcon.vue"
+export { default as ArrowRightIcon } from "./ArrowRightIcon.vue"
+export { default as BellIcon } from "./BellIcon.vue"
+export { default as ChevronDownIcon } from "./ChevronDownIcon.vue"
+export { default as ChevronLeftIcon } from "./ChevronLeftIcon.vue"
+export { default as ChevronRightIcon } from "./ChevronRightIcon.vue"
+export { default as ChevronUpIcon } from "./ChevronUpIcon.vue"
+export { default as CircleDotsIcon } from "./CircleDotsIcon.vue"
+export { default as CrossSignIcon } from "./CrossSignIcon.vue"
+export { default as DoubleArrowLeftIcon } from "./DoubleArrowLeftIcon.vue"
+export { default as DoubleArrowRightIcon } from "./DoubleArrowRightIcon.vue"
+export { default as FulfillmentCentersIcon } from "./FulfillmentCentersIcon.vue"
+export { default as GridDotsIcon } from "./GridDotsIcon.vue"
+export { default as LogoutIcon } from "./LogoutIcon.vue"
+export { default as MenuBurgerIcon } from "./MenuBurgerIcon.vue"
+export { default as MinusSignIcon } from "./MinusSignIcon.vue"
+export { default as OffersIcon } from "./OffersIcon.vue"
+export { default as OrdersIcon } from "./OrdersIcon.vue"
+export { default as PeopleIcon } from "./PeopleIcon.vue"
+export { default as PlusSignIcon } from "./PlusSignIcon.vue"
+export { default as ProductsIcon } from "./ProductsIcon.vue"
+export { default as ProfileIcon } from "./ProfileIcon.vue"
+export { default as SearchIcon } from "./SearchIcon.vue"
+export { default as SettingsBoltIcon } from "./SettingsBoltIcon.vue"
+export { default as ShoppingCardIcon } from "./ShoppingCardIcon.vue"
+export { default as VertDotsIcon } from "./VertDotsIcon.vue"

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

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="isCustomIcon ? icon : 'i'"
+    :is="isCustomIcon ? safeIcon : 'i'"
     :class="[
       'vc-icon',
       `vc-icon_${size}`,
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, markRaw, resolveComponent } from "vue";
 import type { Component } from "vue";
 
 export interface Props {
@@ -26,7 +26,27 @@ const props = withDefaults(defineProps<Props>(), {
   size: "m",
 });
 
-const isCustomIcon = computed(() => typeof props.icon !== "string");
+// Check if the icon is a component or can be resolved as a component
+const isCustomIcon = computed(() => {
+  if (typeof props.icon !== "string") {
+    return true; // Component instance passed directly
+  }
+
+  // Check if string is a component name that can be resolved
+  const resolved = resolveComponent(props.icon);
+  return resolved !== props.icon; // If resolved is different from original string, it's a component name
+});
+
+// Get the component instance for rendering
+const safeIcon = computed(() => {
+  if (typeof props.icon !== "string") {
+    return markRaw(props.icon); // Use markRaw for direct component instances
+  }
+
+  // Try to resolve component by name
+  const resolved = resolveComponent(props.icon);
+  return resolved !== props.icon ? resolved : "i"; // Return resolved component or fallback to 'i'
+});
 
 const sizeMap = {
   xs: 12,
@@ -60,19 +80,21 @@ $sizes: xs, s, m, l, xl, xxl, xxxl;
 $variants: warning, danger, success;
 
 .vc-icon {
-  @each $size in $sizes {
-    &_#{$size} {
-      @apply tw-text-[length:var(--icon-size-#{$size})];
-    }
+  overflow: visible;
+}
+
+@each $size in $sizes {
+  .vc-icon_#{$size} {
+    font-size: var(--icon-size-#{$size});
   }
+}
 
-  @each $variant in $variants {
-    &_#{$variant} {
-      @apply tw-text-[color:var(--icon-color-#{$variant})];
+@each $variant in $variants {
+  .vc-icon_#{$variant} {
+    color: var(--icon-color-#{$variant});
 
-      :deep(path) {
-        stroke: var(--icon-color-#{$variant});
-      }
+    :deep(path) {
+      stroke: var(--icon-color-#{$variant});
     }
   }
 }

package/ui/components/atoms/vc-image/index.ts

@@ -1 +1 @@
-export { default as VcImage } from "./vc-image.vue";
+export { default as VcImage } from "./vc-image.vue";