From 4aebb140aac52fda6e0d7323a730c25f908d982b Mon Sep 17 00:00:00 2001
From: fatemeh paghar <f.paghar@gmail.com>
Date: Mon, 11 Dec 2023 01:56:48 +0330
Subject: [PATCH 1/2] feat(list component): develop new horizontal state of
 list component

---
 content/docs/typography/list.mdx  |  6 +++
 examples/list/index.ts            |  1 +
 examples/list/list.horizontal.tsx | 72 +++++++++++++++++++++++++++++++
 src/components/List/List.tsx      |  4 ++
 src/components/List/theme.ts      |  1 +
 5 files changed, 84 insertions(+)
 create mode 100644 examples/list/list.horizontal.tsx

diff --git a/content/docs/typography/list.mdx b/content/docs/typography/list.mdx
index b9ae21e67..88dd2d226 100644
--- a/content/docs/typography/list.mdx
+++ b/content/docs/typography/list.mdx
@@ -35,6 +35,12 @@ Use the `ordered` prop tag to create an ordered list of items with numbers.
 
 <Example name="list.ordered" />
 
+## Horizontal list
+
+Use this example to create a horizontally aligned list of items.
+
+<Example name="list.horizontal" />
+
 ## Theme
 
 To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).
diff --git a/examples/list/index.ts b/examples/list/index.ts
index e28b6b5c3..722aed02f 100644
--- a/examples/list/index.ts
+++ b/examples/list/index.ts
@@ -2,3 +2,4 @@ export { nested } from './list.nested';
 export { ordered } from './list.ordered';
 export { root } from './list.root';
 export { unstyled } from './list.unstyled';
+export { horizontal } from './list.horizontal';
diff --git a/examples/list/list.horizontal.tsx b/examples/list/list.horizontal.tsx
new file mode 100644
index 000000000..1ea4c8f0e
--- /dev/null
+++ b/examples/list/list.horizontal.tsx
@@ -0,0 +1,72 @@
+import { type CodeData } from '~/components/code-demo';
+import { List, ListItem } from '~/src';
+
+const code = `
+'use client';
+
+import { List } from 'flowbite-react';
+
+function Component() {
+  return (
+    <List horizontal>
+      <List.Item>About</List.Item>
+      <List.Item>Premium</List.Item>
+      <List.Item>Campaigns</List.Item>
+      <List.Item>Blog</List.Item>
+      <List.Item>Affiliate Program</List.Item>
+      <List.Item>FAQs</List.Item>
+      <List.Item>Contact</List.Item>
+    </List>
+  );
+}
+`;
+
+const codeRSC = `
+import { List, ListItem } from 'flowbite-react';
+
+function Component() {
+  return (
+    <List horizontal>
+      <ListItem>About</ListItem>
+      <ListItem>Premium</ListItem>
+      <ListItem>Campaigns</ListItem>
+      <ListItem>Blog</ListItem>
+      <ListItem>Affiliate Program</ListItem>
+      <ListItem>FAQs</ListItem>
+      <ListItem>Contact</ListItem>
+    </List>
+  );
+}
+`;
+
+function Component() {
+  return (
+    <List horizontal>
+      <ListItem>About</ListItem>
+      <ListItem>Premium</ListItem>
+      <ListItem>Campaigns</ListItem>
+      <ListItem>Blog</ListItem>
+      <ListItem>Affiliate Program</ListItem>
+      <ListItem>FAQs</ListItem>
+      <ListItem>Contact</ListItem>
+    </List>
+  );
+}
+
+export const horizontal: CodeData = {
+  type: 'single',
+  code: [
+    {
+      fileName: 'client',
+      language: 'tsx',
+      code,
+    },
+    {
+      fileName: 'server',
+      language: 'tsx',
+      code: codeRSC,
+    },
+  ],
+  githubSlug: 'list/list.horizontal.tsx',
+  component: <Component />,
+};
diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 35e2ea0b2..7205e77b7 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -16,6 +16,7 @@ export interface FlowbiteListRootTheme {
     on: string;
     off: string;
   };
+  horizontal: string;
   unstyled: string;
   nested: string;
 }
@@ -30,6 +31,7 @@ export interface ListProps extends PropsWithChildren<ComponentProps<'ul'> & Comp
   ordered?: boolean;
   unstyled?: boolean;
   nested?: boolean;
+  horizontal?: boolean;
 }
 
 const ListComponent: FC<ListProps> = ({
@@ -38,6 +40,7 @@ const ListComponent: FC<ListProps> = ({
   unstyled,
   nested,
   ordered,
+  horizontal,
   theme: customTheme = {},
   ...props
 }) => {
@@ -50,6 +53,7 @@ const ListComponent: FC<ListProps> = ({
         theme.root.ordered[ordered ? 'on' : 'off'],
         unstyled && theme.root.unstyled,
         nested && theme.root.nested,
+        horizontal && theme.root.horizontal,
         theme.root.base,
         className,
       )}
diff --git a/src/components/List/theme.ts b/src/components/List/theme.ts
index 62963a1f8..5652ecb00 100644
--- a/src/components/List/theme.ts
+++ b/src/components/List/theme.ts
@@ -7,6 +7,7 @@ export const listTheme: FlowbiteListTheme = {
       off: 'list-disc',
       on: 'list-decimal',
     },
+    horizontal: 'flex flex-wrap items-center space-x-4 !space-y-0 justify-center list-none',
     unstyled: 'list-none',
     nested: 'ps-5 mt-2',
   },

From f241efc3a918592fc1bb19ad8afe526e660ea292 Mon Sep 17 00:00:00 2001
From: fatemeh paghar <f.paghar@gmail.com>
Date: Mon, 11 Dec 2023 12:20:00 +0330
Subject: [PATCH 2/2] refactor(list.ts): change the order of classes in twmerge

---
 src/components/List/List.tsx | 2 +-
 src/components/List/theme.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/List/List.tsx b/src/components/List/List.tsx
index 7205e77b7..6a05641f1 100644
--- a/src/components/List/List.tsx
+++ b/src/components/List/List.tsx
@@ -50,11 +50,11 @@ const ListComponent: FC<ListProps> = ({
   return (
     <Component
       className={twMerge(
+        theme.root.base,
         theme.root.ordered[ordered ? 'on' : 'off'],
         unstyled && theme.root.unstyled,
         nested && theme.root.nested,
         horizontal && theme.root.horizontal,
-        theme.root.base,
         className,
       )}
       {...props}
diff --git a/src/components/List/theme.ts b/src/components/List/theme.ts
index 5652ecb00..20e243b80 100644
--- a/src/components/List/theme.ts
+++ b/src/components/List/theme.ts
@@ -7,7 +7,7 @@ export const listTheme: FlowbiteListTheme = {
       off: 'list-disc',
       on: 'list-decimal',
     },
-    horizontal: 'flex flex-wrap items-center space-x-4 !space-y-0 justify-center list-none',
+    horizontal: 'flex flex-wrap items-center space-x-4 space-y-0 justify-center list-none',
     unstyled: 'list-none',
     nested: 'ps-5 mt-2',
   },