From b17bbc1404bccbb7126dc633526223af53f9b2c2 Mon Sep 17 00:00:00 2001
From: Arpit Singh Bhatia <84636859+The-x-35@users.noreply.github.com>
Date: Sun, 28 Jul 2024 14:16:41 +0530
Subject: [PATCH 1/4] Added Dropdown

---
 package.json                      |   3 +-
 src/components/smart/Dropdown.vue | 142 ++++++++++++++++++++++++++++++
 src/components/smart/index.ts     |   1 +
 src/stories/Dropdown.story.vue    |  12 +++
 4 files changed, 157 insertions(+), 1 deletion(-)
 create mode 100644 src/components/smart/Dropdown.vue
 create mode 100644 src/stories/Dropdown.story.vue

diff --git a/package.json b/package.json
index 5774565..8a2c360 100644
--- a/package.json
+++ b/package.json
@@ -118,5 +118,6 @@
       "types": "./dist/src/helpers/index.d.ts"
     }
   },
-  "types": "./dist/index.d.ts"
+  "types": "./dist/index.d.ts",
+  "packageManager": "pnpm@9.5.0+sha256.dbdf5961c32909fb030595a9daa1dae720162e658609a8f92f2fa99835510ca5"
 }
diff --git a/src/components/smart/Dropdown.vue b/src/components/smart/Dropdown.vue
new file mode 100644
index 0000000..901ce9d
--- /dev/null
+++ b/src/components/smart/Dropdown.vue
@@ -0,0 +1,142 @@
+<template>
+    <div class="dropdown-container">
+      <div class="dropdown-header" @click="toggleDropdown">
+        {{ title }}
+        <svg
+          class="dropdown-arrow"
+          fill="#fff"
+          height="16px"
+          width="16px"
+          viewBox="0 0 330 330"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001
+            c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213
+            C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606
+            C255,161.018,253.42,157.202,250.606,154.389z"
+          />
+        </svg>
+      </div>
+      <nav v-if="isOpen" class="dropdown-menu">
+        <ul class="dropdown-list">
+          <li
+            v-for="(item, index) in menuItems"
+            :key="index"
+            class="dropdown-item"
+          >
+            <a
+              :href="`#${item.label.toLowerCase().replace(/\s+/g, '-')}`"
+              class="dropdown-link"
+            >
+              <span v-if="item.icon" class="icon" v-html="item.icon"></span>
+              {{ item.label }}
+            </a>
+            <div v-if="index < menuItems.length - 1" class="separator"></div>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </template>
+  
+  <script setup lang="ts">
+  import { ref, computed } from 'vue';
+  
+  const props = defineProps({
+    title: {
+      type: String,
+      default: 'Dropdown menu',
+    },
+    items: {
+      type: String,
+      default: 'Option1,Option2,Option3',
+    },
+    icons: {
+      type: String,
+      default: '',
+    },
+  });
+  
+  const isOpen = ref(false);
+  
+  const toggleDropdown = () => {
+    isOpen.value = !isOpen.value;
+  };
+  
+  const menuItems = computed(() => {
+    const items = props.items.split(',').map((item) => item.trim());
+    const icons = props.icons ? props.icons.split(',').map((icon) => icon.trim()) : [];
+    return items.map((item, index) => ({
+      label: item,
+      icon: icons[index] || null,
+    }));
+  });
+  </script>
+  
+  <style scoped>
+  .dropdown-container {
+    border: 1px solid #333;
+    background-color: #1e1e1e;
+    width: 200px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+  }
+  
+  .dropdown-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    color: #fff;
+    cursor: pointer;
+    background-color: #333;
+  }
+  
+  .dropdown-arrow {
+    transition: transform 0.3s;
+  }
+  
+  .dropdown-menu {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+  }
+  
+  .dropdown-list {
+    display: flex;
+    flex-direction: column;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+  }
+  
+  .dropdown-item {
+    width: 100%;
+  }
+  
+  .dropdown-link {
+    text-decoration: none;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    transition: background-color 0.2s;
+  }
+  
+  .dropdown-link:hover {
+    background-color: #444;
+  }
+  
+  .icon {
+    margin-right: 10px;
+  }
+  
+  .separator {
+    height: 1px;
+    background-color: #555;
+    width: 100%;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/src/components/smart/index.ts b/src/components/smart/index.ts
index 8ec827c..0b40dc5 100644
--- a/src/components/smart/index.ts
+++ b/src/components/smart/index.ts
@@ -25,3 +25,4 @@ export { default as HoppSmartPlaceholder } from "./Placeholder.vue"
 export { default as HoppSmartTree } from "./Tree.vue"
 export { default as HoppSmartTreeBranch } from "./TreeBranch.vue"
 export { default as HoppSmartSelectWrapper } from "./SelectWrapper.vue"
+export { default as HoppSmartDropdown } from "./Dropdown.vue"
diff --git a/src/stories/Dropdown.story.vue b/src/stories/Dropdown.story.vue
new file mode 100644
index 0000000..c9ff27b
--- /dev/null
+++ b/src/stories/Dropdown.story.vue
@@ -0,0 +1,12 @@
+<template>
+    <Story title="Dropdown">
+      <Variant title="Single">
+        <HoppSmartDropdown />
+      </Variant>
+    </Story>
+  </template>
+  
+  <script setup lang="ts">
+  import { HoppSmartDropdown } from "../components/smart"
+  </script>
+  
\ No newline at end of file

From cf83f781e0a124dd64f9b345e2e1e30bbe3de763 Mon Sep 17 00:00:00 2001
From: Arpit Singh Bhatia <84636859+The-x-35@users.noreply.github.com>
Date: Sun, 28 Jul 2024 14:18:20 +0530
Subject: [PATCH 2/4] Added animation

---
 src/components/smart/Dropdown.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/components/smart/Dropdown.vue b/src/components/smart/Dropdown.vue
index 901ce9d..0257c02 100644
--- a/src/components/smart/Dropdown.vue
+++ b/src/components/smart/Dropdown.vue
@@ -4,6 +4,7 @@
         {{ title }}
         <svg
           class="dropdown-arrow"
+          :class="{ 'open': isOpen }"
           fill="#fff"
           height="16px"
           width="16px"
@@ -95,10 +96,24 @@
     transition: transform 0.3s;
   }
   
+  .dropdown-arrow.open {
+    transform: rotate(90deg);
+  }
+  
   .dropdown-menu {
     display: flex;
     flex-direction: column;
     padding: 10px;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
   }
   
   .dropdown-list {

From 28bf7b53dc92732c7d4f79a311e7a2fe299e0d1d Mon Sep 17 00:00:00 2001
From: Arpit Singh Bhatia <84636859+The-x-35@users.noreply.github.com>
Date: Thu, 1 Aug 2024 00:59:54 +0530
Subject: [PATCH 3/4] Added Dropdown component should emit the event about
 which items is clicked

---
 src/components/smart/Dropdown.vue | 312 +++++++++++++++---------------
 src/stories/Dropdown.story.vue    |  25 +--
 2 files changed, 174 insertions(+), 163 deletions(-)

diff --git a/src/components/smart/Dropdown.vue b/src/components/smart/Dropdown.vue
index 0257c02..5f64061 100644
--- a/src/components/smart/Dropdown.vue
+++ b/src/components/smart/Dropdown.vue
@@ -1,157 +1,165 @@
 <template>
-    <div class="dropdown-container">
-      <div class="dropdown-header" @click="toggleDropdown">
-        {{ title }}
-        <svg
-          class="dropdown-arrow"
-          :class="{ 'open': isOpen }"
-          fill="#fff"
-          height="16px"
-          width="16px"
-          viewBox="0 0 330 330"
-          xmlns="http://www.w3.org/2000/svg"
+  <div class="dropdown-container">
+    <div class="dropdown-header" @click="toggleDropdown">
+      {{ title }}
+      <svg
+        class="dropdown-arrow"
+        :class="{ 'open': isOpen }"
+        fill="#fff"
+        height="16px"
+        width="16px"
+        viewBox="0 0 330 330"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001
+          c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213
+          C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606
+          C255,161.018,253.42,157.202,250.606,154.389z"
+        />
+      </svg>
+    </div>
+    <nav v-if="isOpen" class="dropdown-menu">
+      <ul class="dropdown-list">
+        <li
+          v-for="(item, index) in menuItems"
+          :key="index"
+          class="dropdown-item"
+          @click="handleItemClick(item)"
         >
-          <path
-            d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001
-            c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213
-            C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606
-            C255,161.018,253.42,157.202,250.606,154.389z"
-          />
-        </svg>
-      </div>
-      <nav v-if="isOpen" class="dropdown-menu">
-        <ul class="dropdown-list">
-          <li
-            v-for="(item, index) in menuItems"
-            :key="index"
-            class="dropdown-item"
+          <a
+            :href="`#${item.label.toLowerCase().replace(/\s+/g, '-')}`"
+            class="dropdown-link"
           >
-            <a
-              :href="`#${item.label.toLowerCase().replace(/\s+/g, '-')}`"
-              class="dropdown-link"
-            >
-              <span v-if="item.icon" class="icon" v-html="item.icon"></span>
-              {{ item.label }}
-            </a>
-            <div v-if="index < menuItems.length - 1" class="separator"></div>
-          </li>
-        </ul>
-      </nav>
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import { ref, computed } from 'vue';
-  
-  const props = defineProps({
-    title: {
-      type: String,
-      default: 'Dropdown menu',
-    },
-    items: {
-      type: String,
-      default: 'Option1,Option2,Option3',
-    },
-    icons: {
-      type: String,
-      default: '',
-    },
-  });
-  
-  const isOpen = ref(false);
-  
-  const toggleDropdown = () => {
-    isOpen.value = !isOpen.value;
-  };
-  
-  const menuItems = computed(() => {
-    const items = props.items.split(',').map((item) => item.trim());
-    const icons = props.icons ? props.icons.split(',').map((icon) => icon.trim()) : [];
-    return items.map((item, index) => ({
-      label: item,
-      icon: icons[index] || null,
-    }));
-  });
-  </script>
-  
-  <style scoped>
-  .dropdown-container {
-    border: 1px solid #333;
-    background-color: #1e1e1e;
-    width: 200px;
-    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-  }
-  
-  .dropdown-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px;
-    color: #fff;
-    cursor: pointer;
-    background-color: #333;
-  }
-  
-  .dropdown-arrow {
-    transition: transform 0.3s;
-  }
-  
-  .dropdown-arrow.open {
-    transform: rotate(90deg);
-  }
-  
-  .dropdown-menu {
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-    animation: fadeIn 0.3s ease-in-out;
-  }
-  
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  
-  .dropdown-list {
-    display: flex;
-    flex-direction: column;
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
-  }
-  
-  .dropdown-item {
-    width: 100%;
-  }
-  
-  .dropdown-link {
-    text-decoration: none;
-    color: #fff;
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    width: 100%;
-    box-sizing: border-box;
-    transition: background-color 0.2s;
-  }
-  
-  .dropdown-link:hover {
-    background-color: #444;
-  }
-  
-  .icon {
-    margin-right: 10px;
+            <span v-if="item.icon" class="icon" v-html="item.icon"></span>
+            {{ item.label }}
+          </a>
+          <div v-if="index < menuItems.length - 1" class="separator"></div>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Dropdown menu',
+  },
+  items: {
+    type: String,
+    default: 'Option1,Option2,Option3',
+  },
+  icons: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits<{
+  (event: 'item-click', item: { label: string; icon: string | null }): void;
+}>();
+
+const isOpen = ref(false);
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value;
+};
+
+const menuItems = computed(() => {
+  const items = props.items.split(',').map((item) => item.trim());
+  const icons = props.icons ? props.icons.split(',').map((icon) => icon.trim()) : [];
+  return items.map((item, index) => ({
+    label: item,
+    icon: icons[index] || null,
+  }));
+});
+
+const handleItemClick = (item:any) => {
+  emit('item-click', item);
+};
+</script>
+
+<style scoped>
+.dropdown-container {
+  border: 1px solid #333;
+  background-color: #1e1e1e;
+  width: 200px;
+  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+}
+
+.dropdown-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  color: #fff;
+  cursor: pointer;
+  background-color: #333;
+}
+
+.dropdown-arrow {
+  transition: transform 0.3s;
+}
+
+.dropdown-arrow.open {
+  transform: rotate(90deg);
+}
+
+.dropdown-menu {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
   }
-  
-  .separator {
-    height: 1px;
-    background-color: #555;
-    width: 100%;
+  to {
+    opacity: 1;
   }
-  </style>
-  
\ No newline at end of file
+}
+
+.dropdown-list {
+  display: flex;
+  flex-direction: column;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+}
+
+.dropdown-item {
+  width: 100%;
+}
+
+.dropdown-link {
+  text-decoration: none;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  transition: background-color 0.2s;
+}
+
+.dropdown-link:hover {
+  background-color: #444;
+}
+
+.icon {
+  margin-right: 10px;
+}
+
+.separator {
+  height: 1px;
+  background-color: #555;
+  width: 100%;
+}
+</style>
diff --git a/src/stories/Dropdown.story.vue b/src/stories/Dropdown.story.vue
index c9ff27b..0ce2c6c 100644
--- a/src/stories/Dropdown.story.vue
+++ b/src/stories/Dropdown.story.vue
@@ -1,12 +1,15 @@
 <template>
-    <Story title="Dropdown">
-      <Variant title="Single">
-        <HoppSmartDropdown />
-      </Variant>
-    </Story>
-  </template>
-  
-  <script setup lang="ts">
-  import { HoppSmartDropdown } from "../components/smart"
-  </script>
-  
\ No newline at end of file
+  <Story title="Dropdown">
+    <Variant title="Single">
+      <HoppSmartDropdown @item-click="handleItemClick" />
+    </Variant>
+  </Story>
+</template>
+
+<script setup lang="ts">
+import { HoppSmartDropdown } from "../components/smart";
+
+const handleItemClick = (item:any) => {
+  console.log('Item clicked:', item);
+};
+</script>

From f764df4ab023e47db3b3cf4278d15e0af81ced08 Mon Sep 17 00:00:00 2001
From: Anwarul Islam <anwaarulislaam@gmail.com>
Date: Mon, 19 Aug 2024 05:31:28 +0600
Subject: [PATCH 4/4] chore: removed smart from the dropdown component

---
 src/components/Dropdown.vue       |  78 ++++++++++++++
 src/components/index.ts           |   1 +
 src/components/smart/Dropdown.vue | 165 ------------------------------
 src/components/smart/index.ts     |   1 -
 src/stories/Dropdown.story.vue    |  19 ++--
 5 files changed, 91 insertions(+), 173 deletions(-)
 create mode 100644 src/components/Dropdown.vue
 delete mode 100644 src/components/smart/Dropdown.vue

diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
new file mode 100644
index 0000000..d9bea6b
--- /dev/null
+++ b/src/components/Dropdown.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="dropdown-container" :class="{ open: isOpen }">
+    <div class="dropdown-trigger" @click="toggleDropdown">
+      <slot name="button">
+        <button>{{ title }}</button>
+        <span class="dropdown-arrow">▼</span>
+      </slot>
+    </div>
+    <div v-if="isOpen" class="dropdown-content">
+      <slot name="content">
+        <p>Dropdown content</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue"
+
+defineProps({
+  title: {
+    type: String,
+    default: "Dropdown menu",
+  },
+})
+
+const isOpen = ref(false)
+
+const toggleDropdown = () => {
+  isOpen.value = !isOpen.value
+}
+</script>
+
+<style scoped>
+.dropdown-container {
+  position: relative;
+  display: 100%;
+}
+
+.dropdown-trigger {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px;
+  color: #fff;
+  cursor: pointer;
+  background-color: #333;
+}
+
+.dropdown-arrow {
+  transition: transform 0.3s;
+}
+
+.open .dropdown-arrow {
+  transform: rotate(180deg);
+}
+
+.dropdown-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 10px;
+  padding: 10px;
+  background-color: #1e1e1e;
+  border: 1px solid #333;
+  animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+</style>
diff --git a/src/components/index.ts b/src/components/index.ts
index 46c6151..fe8e110 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -2,3 +2,4 @@ export * from "./button"
 export * from "./smart"
 export * from "./modal"
 export * from "./toast"
+export { default as HoppDropdown } from "./Dropdown.vue"
diff --git a/src/components/smart/Dropdown.vue b/src/components/smart/Dropdown.vue
deleted file mode 100644
index 5f64061..0000000
--- a/src/components/smart/Dropdown.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-  <div class="dropdown-container">
-    <div class="dropdown-header" @click="toggleDropdown">
-      {{ title }}
-      <svg
-        class="dropdown-arrow"
-        :class="{ 'open': isOpen }"
-        fill="#fff"
-        height="16px"
-        width="16px"
-        viewBox="0 0 330 330"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M250.606,154.389l-150-149.996c-5.857-5.858-15.355-5.858-21.213,0.001
-          c-5.857,5.858-5.857,15.355,0.001,21.213l139.393,139.39L79.393,304.394c-5.857,5.858-5.857,15.355,0.001,21.213
-          C82.322,328.536,86.161,330,90,330s7.678-1.464,10.607-4.394l149.999-150.004c2.814-2.813,4.394-6.628,4.394-10.606
-          C255,161.018,253.42,157.202,250.606,154.389z"
-        />
-      </svg>
-    </div>
-    <nav v-if="isOpen" class="dropdown-menu">
-      <ul class="dropdown-list">
-        <li
-          v-for="(item, index) in menuItems"
-          :key="index"
-          class="dropdown-item"
-          @click="handleItemClick(item)"
-        >
-          <a
-            :href="`#${item.label.toLowerCase().replace(/\s+/g, '-')}`"
-            class="dropdown-link"
-          >
-            <span v-if="item.icon" class="icon" v-html="item.icon"></span>
-            {{ item.label }}
-          </a>
-          <div v-if="index < menuItems.length - 1" class="separator"></div>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from 'vue';
-
-const props = defineProps({
-  title: {
-    type: String,
-    default: 'Dropdown menu',
-  },
-  items: {
-    type: String,
-    default: 'Option1,Option2,Option3',
-  },
-  icons: {
-    type: String,
-    default: '',
-  },
-});
-
-const emit = defineEmits<{
-  (event: 'item-click', item: { label: string; icon: string | null }): void;
-}>();
-
-const isOpen = ref(false);
-
-const toggleDropdown = () => {
-  isOpen.value = !isOpen.value;
-};
-
-const menuItems = computed(() => {
-  const items = props.items.split(',').map((item) => item.trim());
-  const icons = props.icons ? props.icons.split(',').map((icon) => icon.trim()) : [];
-  return items.map((item, index) => ({
-    label: item,
-    icon: icons[index] || null,
-  }));
-});
-
-const handleItemClick = (item:any) => {
-  emit('item-click', item);
-};
-</script>
-
-<style scoped>
-.dropdown-container {
-  border: 1px solid #333;
-  background-color: #1e1e1e;
-  width: 200px;
-  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
-}
-
-.dropdown-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px;
-  color: #fff;
-  cursor: pointer;
-  background-color: #333;
-}
-
-.dropdown-arrow {
-  transition: transform 0.3s;
-}
-
-.dropdown-arrow.open {
-  transform: rotate(90deg);
-}
-
-.dropdown-menu {
-  display: flex;
-  flex-direction: column;
-  padding: 10px;
-  animation: fadeIn 0.3s ease-in-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.dropdown-list {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-
-.dropdown-item {
-  width: 100%;
-}
-
-.dropdown-link {
-  text-decoration: none;
-  color: #fff;
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  width: 100%;
-  box-sizing: border-box;
-  transition: background-color 0.2s;
-}
-
-.dropdown-link:hover {
-  background-color: #444;
-}
-
-.icon {
-  margin-right: 10px;
-}
-
-.separator {
-  height: 1px;
-  background-color: #555;
-  width: 100%;
-}
-</style>
diff --git a/src/components/smart/index.ts b/src/components/smart/index.ts
index 0b40dc5..8ec827c 100644
--- a/src/components/smart/index.ts
+++ b/src/components/smart/index.ts
@@ -25,4 +25,3 @@ export { default as HoppSmartPlaceholder } from "./Placeholder.vue"
 export { default as HoppSmartTree } from "./Tree.vue"
 export { default as HoppSmartTreeBranch } from "./TreeBranch.vue"
 export { default as HoppSmartSelectWrapper } from "./SelectWrapper.vue"
-export { default as HoppSmartDropdown } from "./Dropdown.vue"
diff --git a/src/stories/Dropdown.story.vue b/src/stories/Dropdown.story.vue
index 0ce2c6c..dd25d4a 100644
--- a/src/stories/Dropdown.story.vue
+++ b/src/stories/Dropdown.story.vue
@@ -1,15 +1,20 @@
 <template>
   <Story title="Dropdown">
-    <Variant title="Single">
-      <HoppSmartDropdown @item-click="handleItemClick" />
+    <Variant>
+      <HoppDropdown>
+        <template #button>
+          <button>Dropdown menu</button>
+        </template>
+        <template #content>
+          <div style="min-width: 300px">
+            <p>Dropdown content</p>
+          </div>
+        </template>
+      </HoppDropdown>
     </Variant>
   </Story>
 </template>
 
 <script setup lang="ts">
-import { HoppSmartDropdown } from "../components/smart";
-
-const handleItemClick = (item:any) => {
-  console.log('Item clicked:', item);
-};
+import { HoppDropdown } from "../components"
 </script>