From 3dd1ac0a1eda8521ac9724c0b360941914c7241f Mon Sep 17 00:00:00 2001
From: paghar <f.paghar@gmail.com>
Date: Sat, 13 Apr 2024 21:01:27 +0330
Subject: [PATCH 1/3] feat(ui) Add advanced list story

---
 .changeset/tough-cobras-call.md                  |  5 +++++
 packages/ui/src/components/List/List.stories.tsx | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 .changeset/tough-cobras-call.md

diff --git a/.changeset/tough-cobras-call.md b/.changeset/tough-cobras-call.md
new file mode 100644
index 000000000..10a59362c
--- /dev/null
+++ b/.changeset/tough-cobras-call.md
@@ -0,0 +1,5 @@
+---
+"flowbite-react": major
+---
+
+Advanced list story
diff --git a/packages/ui/src/components/List/List.stories.tsx b/packages/ui/src/components/List/List.stories.tsx
index 00b5ebc11..00e5f8441 100644
--- a/packages/ui/src/components/List/List.stories.tsx
+++ b/packages/ui/src/components/List/List.stories.tsx
@@ -3,6 +3,10 @@ import { HiCheckCircle } from "react-icons/hi";
 import type { ListProps } from "./List";
 import { List } from "./List";
 
+
+
+
+
 export default {
   title: "Components/List",
   component: List,
@@ -109,3 +113,15 @@ WithIconList.args = {
     </>
   ),
 };
+
+export const AdvancedList = Template.bind({});
+AdvancedList.storyName = "Advanced";
+AdvancedList.args = {
+  children: (
+    <>
+      <List.Item icon={HiCheckCircle}>At least 10 characters (and up to 100 characters)</List.Item>
+      <List.Item icon={HiCheckCircle}>At least one lowercase character</List.Item>
+      <List.Item icon={HiCheckCircle}>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
+    </>
+  ),
+};
\ No newline at end of file

From e808f6600c6afe63c821ba19506ef0c307eb49bd Mon Sep 17 00:00:00 2001
From: paghar <f.paghar@gmail.com>
Date: Sat, 13 Apr 2024 22:57:17 +0330
Subject: [PATCH 2/3] fix(ui) actual advanced story book

---
 .../ui/src/components/List/List.stories.tsx   | 87 +++++++++++++++++--
 1 file changed, 79 insertions(+), 8 deletions(-)

diff --git a/packages/ui/src/components/List/List.stories.tsx b/packages/ui/src/components/List/List.stories.tsx
index 00e5f8441..fc2b72d22 100644
--- a/packages/ui/src/components/List/List.stories.tsx
+++ b/packages/ui/src/components/List/List.stories.tsx
@@ -1,12 +1,9 @@
 import type { Meta, StoryFn } from "@storybook/react";
 import { HiCheckCircle } from "react-icons/hi";
+import { Avatar } from "../Avatar";
 import type { ListProps } from "./List";
 import { List } from "./List";
 
-
-
-
-
 export default {
   title: "Components/List",
   component: List,
@@ -117,11 +114,85 @@ WithIconList.args = {
 export const AdvancedList = Template.bind({});
 AdvancedList.storyName = "Advanced";
 AdvancedList.args = {
+  unstyled: true,
+  className: "max-w-md divide-y divide-gray-200 dark:divide-gray-700",
   children: (
     <>
-      <List.Item icon={HiCheckCircle}>At least 10 characters (and up to 100 characters)</List.Item>
-      <List.Item icon={HiCheckCircle}>At least one lowercase character</List.Item>
-      <List.Item icon={HiCheckCircle}>Inclusion of at least one special character, e.g., ! @ # ?</List.Item>
+      <List.Item className="pb-3 sm:pb-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-1.jpg"
+            alt="Neil image"
+            rounded
+            size="sm"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Neil Sims</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$320</div>
+        </div>
+      </List.Item>
+      <List.Item className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-3.jpg"
+            alt="Neil image"
+            rounded
+            size="sm"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Bonnie Green</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$3467</div>
+        </div>
+      </List.Item>
+      <List.Item className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-2.jpg"
+            alt="Neil image"
+            rounded
+            size="sm"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Michael Gough</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$67</div>
+        </div>
+      </List.Item>
+      <List.Item className="py-3 sm:py-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-5.jpg"
+            alt="Neil image"
+            rounded
+            size="sm"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Thomas Lean</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$2367</div>
+        </div>
+      </List.Item>
+      <List.Item className="pb-0 pt-3 sm:pt-4">
+        <div className="flex items-center space-x-4 rtl:space-x-reverse">
+          <Avatar
+            img="https://flowbite.com/docs/images/people/profile-picture-4.jpg"
+            alt="Neil image"
+            rounded
+            size="sm"
+          />
+          <div className="min-w-0 flex-1">
+            <p className="truncate text-sm font-medium text-gray-900 dark:text-white">Lana Byrd</p>
+            <p className="truncate text-sm text-gray-500 dark:text-gray-400">email@flowbite.com</p>
+          </div>
+          <div className="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">$367</div>
+        </div>
+      </List.Item>
     </>
   ),
-};
\ No newline at end of file
+};

From 3088d6b7afeba919888ab13352c8907b080f8ada Mon Sep 17 00:00:00 2001
From: paghar <f.paghar@gmail.com>
Date: Mon, 15 Apr 2024 11:50:58 +0330
Subject: [PATCH 3/3] fix delete unneccesary changeset

---
 .changeset/tough-cobras-call.md | 5 -----
 1 file changed, 5 deletions(-)
 delete mode 100644 .changeset/tough-cobras-call.md

diff --git a/.changeset/tough-cobras-call.md b/.changeset/tough-cobras-call.md
deleted file mode 100644
index 10a59362c..000000000
--- a/.changeset/tough-cobras-call.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-"flowbite-react": major
----
-
-Advanced list story