From edd712876b515684f5ed13963056f16cba760b75 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 12 Mar 2024 13:17:02 +0100
Subject: [PATCH 01/10] feat: added Breadcrumb Component

---
 .../breadcrumb/breadcrumb-arrow.tsx           |  6 ++++
 src/components/breadcrumb/breadcrumb-item.tsx | 30 +++++++++++++++++
 .../breadcrumb/breadcrumb.stories.tsx         | 33 +++++++++++++++++++
 src/components/breadcrumb/breadcrumb.tsx      | 20 +++++++++++
 src/components/breadcrumb/index.tsx           |  1 +
 src/components/index.ts                       |  1 +
 6 files changed, 91 insertions(+)
 create mode 100644 src/components/breadcrumb/breadcrumb-arrow.tsx
 create mode 100644 src/components/breadcrumb/breadcrumb-item.tsx
 create mode 100644 src/components/breadcrumb/breadcrumb.stories.tsx
 create mode 100644 src/components/breadcrumb/breadcrumb.tsx
 create mode 100644 src/components/breadcrumb/index.tsx

diff --git a/src/components/breadcrumb/breadcrumb-arrow.tsx b/src/components/breadcrumb/breadcrumb-arrow.tsx
new file mode 100644
index 00000000..f2496fd4
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-arrow.tsx
@@ -0,0 +1,6 @@
+import React from "react";
+import { ChevronRightIcon } from "../../icons";
+
+export const BreadcrumbArrow = () => {
+    return <ChevronRightIcon className="h-3 w-3 text-neutral-800" />;
+};
diff --git a/src/components/breadcrumb/breadcrumb-item.tsx b/src/components/breadcrumb/breadcrumb-item.tsx
new file mode 100644
index 00000000..8fbfb284
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb-item.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { classNames } from "../../util/class-names";
+
+interface BreadcrumbItemProps {
+    children: React.ReactNode;
+    className?: string;
+    href?: string;
+    active?: boolean;
+}
+
+export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+    children,
+    className,
+    href,
+    active,
+}) => {
+    return (
+        <a
+            className={classNames(
+                "headline-500 text-neutral-800",
+                !active && "cursor-pointer underline-offset-2 hover:underline",
+                active && "text-black",
+                className
+            )}
+            href={href}
+        >
+            {children}
+        </a>
+    );
+};
diff --git a/src/components/breadcrumb/breadcrumb.stories.tsx b/src/components/breadcrumb/breadcrumb.stories.tsx
new file mode 100644
index 00000000..8f3d038b
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Breadcrumb } from "./breadcrumb";
+
+const meta: Meta<typeof Breadcrumb> = {
+    title: "Breadcrumb",
+    component: Breadcrumb,
+    args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumb>;
+
+export const Base: Story = {
+    render: () => (
+        <div className="p-4">
+            <Breadcrumb>
+                <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
+
+                <Breadcrumb.Arrow />
+
+                <Breadcrumb.Item href="/">Library</Breadcrumb.Item>
+
+                <Breadcrumb.Arrow />
+
+                <Breadcrumb.Item href="/" active>
+                    Book
+                </Breadcrumb.Item>
+            </Breadcrumb>
+        </div>
+    ),
+};
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumb/breadcrumb.tsx
new file mode 100644
index 00000000..f493f324
--- /dev/null
+++ b/src/components/breadcrumb/breadcrumb.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+import { BreadcrumbItem } from "./breadcrumb-item";
+import { BreadcrumbArrow } from "./breadcrumb-arrow";
+
+export interface BreadcrumbProps {
+    children: React.ReactNode;
+}
+
+const Breadcrumb = ({ children }: BreadcrumbProps) => {
+    return (
+        <nav className="flex flex-row items-center justify-center gap-1" role="navigation">
+            {children}
+        </nav>
+    );
+};
+
+Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Arrow = BreadcrumbArrow;
+
+export { Breadcrumb };
diff --git a/src/components/breadcrumb/index.tsx b/src/components/breadcrumb/index.tsx
new file mode 100644
index 00000000..69b4a5ce
--- /dev/null
+++ b/src/components/breadcrumb/index.tsx
@@ -0,0 +1 @@
+export { Breadcrumb } from "./breadcrumb";
diff --git a/src/components/index.ts b/src/components/index.ts
index 5e57f0a5..a43ee6e3 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,6 +1,7 @@
 export { Alert, AlertIntent } from "./alert";
 export { Avatar } from "./avatar";
 export { Badge, BadgeType } from "./badge";
+export { Breadcrumb } from "./breadcrumb";
 export { Button } from "./button";
 export { Checkbox } from "./checkbox";
 export { Dialog } from "./dialog";

From f293baf1a7ffd2601c5cba48adddcc983f4196b8 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 12 Mar 2024 13:28:10 +0100
Subject: [PATCH 02/10] renamed breadcrumb to breadcrumbs

---
 .../breadcrumb/breadcrumb.stories.tsx         | 33 -------------------
 src/components/breadcrumb/index.tsx           |  1 -
 .../breadcrumb-arrow.tsx                      |  0
 .../breadcrumb-item.tsx                       |  0
 .../breadcrumbs/breadcrumbs.stories.tsx       | 33 +++++++++++++++++++
 .../breadcrumbs.tsx}                          | 10 +++---
 src/components/breadcrumbs/index.tsx          |  1 +
 src/components/index.ts                       |  2 +-
 8 files changed, 40 insertions(+), 40 deletions(-)
 delete mode 100644 src/components/breadcrumb/breadcrumb.stories.tsx
 delete mode 100644 src/components/breadcrumb/index.tsx
 rename src/components/{breadcrumb => breadcrumbs}/breadcrumb-arrow.tsx (100%)
 rename src/components/{breadcrumb => breadcrumbs}/breadcrumb-item.tsx (100%)
 create mode 100644 src/components/breadcrumbs/breadcrumbs.stories.tsx
 rename src/components/{breadcrumb/breadcrumb.tsx => breadcrumbs/breadcrumbs.tsx} (62%)
 create mode 100644 src/components/breadcrumbs/index.tsx

diff --git a/src/components/breadcrumb/breadcrumb.stories.tsx b/src/components/breadcrumb/breadcrumb.stories.tsx
deleted file mode 100644
index 8f3d038b..00000000
--- a/src/components/breadcrumb/breadcrumb.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Breadcrumb } from "./breadcrumb";
-
-const meta: Meta<typeof Breadcrumb> = {
-    title: "Breadcrumb",
-    component: Breadcrumb,
-    args: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Breadcrumb>;
-
-export const Base: Story = {
-    render: () => (
-        <div className="p-4">
-            <Breadcrumb>
-                <Breadcrumb.Item href="/">Home</Breadcrumb.Item>
-
-                <Breadcrumb.Arrow />
-
-                <Breadcrumb.Item href="/">Library</Breadcrumb.Item>
-
-                <Breadcrumb.Arrow />
-
-                <Breadcrumb.Item href="/" active>
-                    Book
-                </Breadcrumb.Item>
-            </Breadcrumb>
-        </div>
-    ),
-};
diff --git a/src/components/breadcrumb/index.tsx b/src/components/breadcrumb/index.tsx
deleted file mode 100644
index 69b4a5ce..00000000
--- a/src/components/breadcrumb/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Breadcrumb } from "./breadcrumb";
diff --git a/src/components/breadcrumb/breadcrumb-arrow.tsx b/src/components/breadcrumbs/breadcrumb-arrow.tsx
similarity index 100%
rename from src/components/breadcrumb/breadcrumb-arrow.tsx
rename to src/components/breadcrumbs/breadcrumb-arrow.tsx
diff --git a/src/components/breadcrumb/breadcrumb-item.tsx b/src/components/breadcrumbs/breadcrumb-item.tsx
similarity index 100%
rename from src/components/breadcrumb/breadcrumb-item.tsx
rename to src/components/breadcrumbs/breadcrumb-item.tsx
diff --git a/src/components/breadcrumbs/breadcrumbs.stories.tsx b/src/components/breadcrumbs/breadcrumbs.stories.tsx
new file mode 100644
index 00000000..5ae67c69
--- /dev/null
+++ b/src/components/breadcrumbs/breadcrumbs.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Breadcrumbs } from "./breadcrumbs";
+
+const meta: Meta<typeof Breadcrumbs> = {
+    title: "Breadcrumb",
+    component: Breadcrumbs,
+    args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export const Base: Story = {
+    render: () => (
+        <div className="p-4">
+            <Breadcrumbs>
+                <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
+
+                <Breadcrumbs.Arrow />
+
+                <Breadcrumbs.Item href="/">Library</Breadcrumbs.Item>
+
+                <Breadcrumbs.Arrow />
+
+                <Breadcrumbs.Item href="/" active>
+                    Book
+                </Breadcrumbs.Item>
+            </Breadcrumbs>
+        </div>
+    ),
+};
diff --git a/src/components/breadcrumb/breadcrumb.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
similarity index 62%
rename from src/components/breadcrumb/breadcrumb.tsx
rename to src/components/breadcrumbs/breadcrumbs.tsx
index f493f324..99ce3a67 100644
--- a/src/components/breadcrumb/breadcrumb.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -2,11 +2,11 @@ import React from "react";
 import { BreadcrumbItem } from "./breadcrumb-item";
 import { BreadcrumbArrow } from "./breadcrumb-arrow";
 
-export interface BreadcrumbProps {
+export interface BreadcrumbsProps {
     children: React.ReactNode;
 }
 
-const Breadcrumb = ({ children }: BreadcrumbProps) => {
+const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
     return (
         <nav className="flex flex-row items-center justify-center gap-1" role="navigation">
             {children}
@@ -14,7 +14,7 @@ const Breadcrumb = ({ children }: BreadcrumbProps) => {
     );
 };
 
-Breadcrumb.Item = BreadcrumbItem;
-Breadcrumb.Arrow = BreadcrumbArrow;
+Breadcrumbs.Item = BreadcrumbItem;
+Breadcrumbs.Arrow = BreadcrumbArrow;
 
-export { Breadcrumb };
+export { Breadcrumbs };
diff --git a/src/components/breadcrumbs/index.tsx b/src/components/breadcrumbs/index.tsx
new file mode 100644
index 00000000..b78e8fd6
--- /dev/null
+++ b/src/components/breadcrumbs/index.tsx
@@ -0,0 +1 @@
+export { Breadcrumbs } from "./breadcrumbs";
diff --git a/src/components/index.ts b/src/components/index.ts
index a43ee6e3..e361d2fc 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,7 +1,7 @@
 export { Alert, AlertIntent } from "./alert";
 export { Avatar } from "./avatar";
 export { Badge, BadgeType } from "./badge";
-export { Breadcrumb } from "./breadcrumb";
+export { Breadcrumbs } from "./breadcrumbs";
 export { Button } from "./button";
 export { Checkbox } from "./checkbox";
 export { Dialog } from "./dialog";

From fe3d2879184f8925cc9de209a06f89e98b497742 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 12 Mar 2024 13:28:40 +0100
Subject: [PATCH 03/10] renamed breadcrumb to breadcrumbs

---
 .../{breadcrumb-arrow.tsx => breadcrumbs-arrow.tsx}       | 2 +-
 .../{breadcrumb-item.tsx => breadcrumbs-item.tsx}         | 2 +-
 src/components/breadcrumbs/breadcrumbs.tsx                | 8 ++++----
 3 files changed, 6 insertions(+), 6 deletions(-)
 rename src/components/breadcrumbs/{breadcrumb-arrow.tsx => breadcrumbs-arrow.tsx} (78%)
 rename src/components/breadcrumbs/{breadcrumb-item.tsx => breadcrumbs-item.tsx} (90%)

diff --git a/src/components/breadcrumbs/breadcrumb-arrow.tsx b/src/components/breadcrumbs/breadcrumbs-arrow.tsx
similarity index 78%
rename from src/components/breadcrumbs/breadcrumb-arrow.tsx
rename to src/components/breadcrumbs/breadcrumbs-arrow.tsx
index f2496fd4..0e7af231 100644
--- a/src/components/breadcrumbs/breadcrumb-arrow.tsx
+++ b/src/components/breadcrumbs/breadcrumbs-arrow.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { ChevronRightIcon } from "../../icons";
 
-export const BreadcrumbArrow = () => {
+export const BreadcrumbsArrow = () => {
     return <ChevronRightIcon className="h-3 w-3 text-neutral-800" />;
 };
diff --git a/src/components/breadcrumbs/breadcrumb-item.tsx b/src/components/breadcrumbs/breadcrumbs-item.tsx
similarity index 90%
rename from src/components/breadcrumbs/breadcrumb-item.tsx
rename to src/components/breadcrumbs/breadcrumbs-item.tsx
index 8fbfb284..bd5ebdbe 100644
--- a/src/components/breadcrumbs/breadcrumb-item.tsx
+++ b/src/components/breadcrumbs/breadcrumbs-item.tsx
@@ -8,7 +8,7 @@ interface BreadcrumbItemProps {
     active?: boolean;
 }
 
-export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+export const BreadcrumbsItem: React.FC<BreadcrumbItemProps> = ({
     children,
     className,
     href,
diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
index 99ce3a67..084d8d88 100644
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { BreadcrumbItem } from "./breadcrumb-item";
-import { BreadcrumbArrow } from "./breadcrumb-arrow";
+import { BreadcrumbsItem } from "./breadcrumbs-item";
+import { BreadcrumbsArrow } from "./breadcrumbs-arrow";
 
 export interface BreadcrumbsProps {
     children: React.ReactNode;
@@ -14,7 +14,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
     );
 };
 
-Breadcrumbs.Item = BreadcrumbItem;
-Breadcrumbs.Arrow = BreadcrumbArrow;
+Breadcrumbs.Item = BreadcrumbsItem;
+Breadcrumbs.Arrow = BreadcrumbsArrow;
 
 export { Breadcrumbs };

From 0e0b76e9077ae95c990bfa90ae4499183e5535c3 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 12 Mar 2024 13:29:13 +0100
Subject: [PATCH 04/10] renamed active to isActive

---
 src/components/breadcrumbs/breadcrumbs-item.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/breadcrumbs/breadcrumbs-item.tsx b/src/components/breadcrumbs/breadcrumbs-item.tsx
index bd5ebdbe..695f8955 100644
--- a/src/components/breadcrumbs/breadcrumbs-item.tsx
+++ b/src/components/breadcrumbs/breadcrumbs-item.tsx
@@ -5,21 +5,21 @@ interface BreadcrumbItemProps {
     children: React.ReactNode;
     className?: string;
     href?: string;
-    active?: boolean;
+    isActive?: boolean;
 }
 
 export const BreadcrumbsItem: React.FC<BreadcrumbItemProps> = ({
     children,
     className,
     href,
-    active,
+    isActive,
 }) => {
     return (
         <a
             className={classNames(
                 "headline-500 text-neutral-800",
-                !active && "cursor-pointer underline-offset-2 hover:underline",
-                active && "text-black",
+                !isActive && "cursor-pointer underline-offset-2 hover:underline",
+                isActive && "text-black",
                 className
             )}
             href={href}

From aa40ae71b093fa1a81246d4c7b99980f8b971a8b Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 12 Mar 2024 13:53:17 +0100
Subject: [PATCH 05/10] added slot comp

---
 .../breadcrumbs/breadcrumbs-item.tsx          | 27 +++++++------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/src/components/breadcrumbs/breadcrumbs-item.tsx b/src/components/breadcrumbs/breadcrumbs-item.tsx
index 695f8955..305a16a8 100644
--- a/src/components/breadcrumbs/breadcrumbs-item.tsx
+++ b/src/components/breadcrumbs/breadcrumbs-item.tsx
@@ -1,30 +1,21 @@
 import React from "react";
 import { classNames } from "../../util/class-names";
 
-interface BreadcrumbItemProps {
-    children: React.ReactNode;
-    className?: string;
-    href?: string;
+type BreadcrumbItemProps = AsChildProps<React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
     isActive?: boolean;
-}
+};
+
+export const BreadcrumbsItem: React.FC<BreadcrumbItemProps> = ({ isActive, asChild, ...props }) => {
+    const Comp = asChild ? Slot : "a";
 
-export const BreadcrumbsItem: React.FC<BreadcrumbItemProps> = ({
-    children,
-    className,
-    href,
-    isActive,
-}) => {
     return (
-        <a
+        <Comp
             className={classNames(
                 "headline-500 text-neutral-800",
                 !isActive && "cursor-pointer underline-offset-2 hover:underline",
-                isActive && "text-black",
-                className
+                isActive && "text-black"
             )}
-            href={href}
-        >
-            {children}
-        </a>
+            {...props}
+        />
     );
 };

From 8708122a1f9dbf2ebd0c6611dc9681c6a5adb218 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 12 Mar 2024 16:03:36 +0100
Subject: [PATCH 06/10] added slot

---
 src/components/breadcrumbs/breadcrumbs-item.tsx    | 1 +
 src/components/breadcrumbs/breadcrumbs.stories.tsx | 4 ++--
 src/components/breadcrumbs/breadcrumbs.tsx         | 6 +-----
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/breadcrumbs/breadcrumbs-item.tsx b/src/components/breadcrumbs/breadcrumbs-item.tsx
index 305a16a8..d1db8d5c 100644
--- a/src/components/breadcrumbs/breadcrumbs-item.tsx
+++ b/src/components/breadcrumbs/breadcrumbs-item.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { classNames } from "../../util/class-names";
+import { AsChildProps, Slot } from "../slot/slot";
 
 type BreadcrumbItemProps = AsChildProps<React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
     isActive?: boolean;
diff --git a/src/components/breadcrumbs/breadcrumbs.stories.tsx b/src/components/breadcrumbs/breadcrumbs.stories.tsx
index 5ae67c69..d71019ef 100644
--- a/src/components/breadcrumbs/breadcrumbs.stories.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.stories.tsx
@@ -24,8 +24,8 @@ export const Base: Story = {
 
                 <Breadcrumbs.Arrow />
 
-                <Breadcrumbs.Item href="/" active>
-                    Book
+                <Breadcrumbs.Item asChild isActive>
+                    <a href="/">dsjkdskjdssdkj</a>
                 </Breadcrumbs.Item>
             </Breadcrumbs>
         </div>
diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
index 084d8d88..f151c482 100644
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/src/components/breadcrumbs/breadcrumbs.tsx
@@ -7,11 +7,7 @@ export interface BreadcrumbsProps {
 }
 
 const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
-    return (
-        <nav className="flex flex-row items-center justify-center gap-1" role="navigation">
-            {children}
-        </nav>
-    );
+    return <nav className="flex flex-row items-center gap-1">{children}</nav>;
 };
 
 Breadcrumbs.Item = BreadcrumbsItem;

From a6fdf2251c685ede9687fc4d6f9857c856d9848e Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 12 Mar 2024 16:07:02 +0100
Subject: [PATCH 07/10] renamed breadcrumbs to breadcrumb-navigation

---
 .../breadcrumb--navigation-arrow.tsx}         |  2 +-
 .../breadcrumb-navigation-item.tsx}           |  8 +++--
 .../breadcrumb-navigation.tsx                 | 16 +++++++++
 .../breadcrumbs.stories.tsx                   | 33 +++++++++++++++++++
 .../breadcrumb-navigation/index.tsx           |  1 +
 .../breadcrumbs/breadcrumbs.stories.tsx       | 33 -------------------
 src/components/breadcrumbs/breadcrumbs.tsx    | 16 ---------
 src/components/breadcrumbs/index.tsx          |  1 -
 src/components/index.ts                       |  2 +-
 9 files changed, 58 insertions(+), 54 deletions(-)
 rename src/components/{breadcrumbs/breadcrumbs-arrow.tsx => breadcrumb-navigation/breadcrumb--navigation-arrow.tsx} (75%)
 rename src/components/{breadcrumbs/breadcrumbs-item.tsx => breadcrumb-navigation/breadcrumb-navigation-item.tsx} (67%)
 create mode 100644 src/components/breadcrumb-navigation/breadcrumb-navigation.tsx
 create mode 100644 src/components/breadcrumb-navigation/breadcrumbs.stories.tsx
 create mode 100644 src/components/breadcrumb-navigation/index.tsx
 delete mode 100644 src/components/breadcrumbs/breadcrumbs.stories.tsx
 delete mode 100644 src/components/breadcrumbs/breadcrumbs.tsx
 delete mode 100644 src/components/breadcrumbs/index.tsx

diff --git a/src/components/breadcrumbs/breadcrumbs-arrow.tsx b/src/components/breadcrumb-navigation/breadcrumb--navigation-arrow.tsx
similarity index 75%
rename from src/components/breadcrumbs/breadcrumbs-arrow.tsx
rename to src/components/breadcrumb-navigation/breadcrumb--navigation-arrow.tsx
index 0e7af231..8ce02107 100644
--- a/src/components/breadcrumbs/breadcrumbs-arrow.tsx
+++ b/src/components/breadcrumb-navigation/breadcrumb--navigation-arrow.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { ChevronRightIcon } from "../../icons";
 
-export const BreadcrumbsArrow = () => {
+export const BreadcrumbNavigationArrow = () => {
     return <ChevronRightIcon className="h-3 w-3 text-neutral-800" />;
 };
diff --git a/src/components/breadcrumbs/breadcrumbs-item.tsx b/src/components/breadcrumb-navigation/breadcrumb-navigation-item.tsx
similarity index 67%
rename from src/components/breadcrumbs/breadcrumbs-item.tsx
rename to src/components/breadcrumb-navigation/breadcrumb-navigation-item.tsx
index d1db8d5c..3bb91698 100644
--- a/src/components/breadcrumbs/breadcrumbs-item.tsx
+++ b/src/components/breadcrumb-navigation/breadcrumb-navigation-item.tsx
@@ -2,11 +2,15 @@ import React from "react";
 import { classNames } from "../../util/class-names";
 import { AsChildProps, Slot } from "../slot/slot";
 
-type BreadcrumbItemProps = AsChildProps<React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
+type BreadcrumbNavigationItemProps = AsChildProps<React.AnchorHTMLAttributes<HTMLAnchorElement>> & {
     isActive?: boolean;
 };
 
-export const BreadcrumbsItem: React.FC<BreadcrumbItemProps> = ({ isActive, asChild, ...props }) => {
+export const BreadcrumbNavigationItem: React.FC<BreadcrumbNavigationItemProps> = ({
+    isActive,
+    asChild,
+    ...props
+}) => {
     const Comp = asChild ? Slot : "a";
 
     return (
diff --git a/src/components/breadcrumb-navigation/breadcrumb-navigation.tsx b/src/components/breadcrumb-navigation/breadcrumb-navigation.tsx
new file mode 100644
index 00000000..55ccaa5c
--- /dev/null
+++ b/src/components/breadcrumb-navigation/breadcrumb-navigation.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { BreadcrumbNavigationItem } from "./breadcrumb-navigation-item";
+import { BreadcrumbNavigationArrow } from "./breadcrumb--navigation-arrow";
+
+export interface BreadcrumbNavigationProps {
+    children: React.ReactNode;
+}
+
+const BreadcrumbNavigation = ({ children }: BreadcrumbNavigationProps) => {
+    return <nav className="flex flex-row items-center gap-1">{children}</nav>;
+};
+
+BreadcrumbNavigation.Item = BreadcrumbNavigationItem;
+BreadcrumbNavigation.Arrow = BreadcrumbNavigationArrow;
+
+export { BreadcrumbNavigation };
diff --git a/src/components/breadcrumb-navigation/breadcrumbs.stories.tsx b/src/components/breadcrumb-navigation/breadcrumbs.stories.tsx
new file mode 100644
index 00000000..56785b5f
--- /dev/null
+++ b/src/components/breadcrumb-navigation/breadcrumbs.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { BreadcrumbNavigation } from "./breadcrumb-navigation";
+
+const meta: Meta<typeof BreadcrumbNavigation> = {
+    title: "Breadcrumb",
+    component: BreadcrumbNavigation,
+    args: {},
+};
+
+export default meta;
+
+type Story = StoryObj<typeof BreadcrumbNavigation>;
+
+export const Base: Story = {
+    render: () => (
+        <div className="p-4">
+            <BreadcrumbNavigation>
+                <BreadcrumbNavigation.Item href="/">Home</BreadcrumbNavigation.Item>
+
+                <BreadcrumbNavigation.Arrow />
+
+                <BreadcrumbNavigation.Item href="/">Library</BreadcrumbNavigation.Item>
+
+                <BreadcrumbNavigation.Arrow />
+
+                <BreadcrumbNavigation.Item asChild isActive>
+                    <a href="/">dsjkdskjdssdkj</a>
+                </BreadcrumbNavigation.Item>
+            </BreadcrumbNavigation>
+        </div>
+    ),
+};
diff --git a/src/components/breadcrumb-navigation/index.tsx b/src/components/breadcrumb-navigation/index.tsx
new file mode 100644
index 00000000..40689950
--- /dev/null
+++ b/src/components/breadcrumb-navigation/index.tsx
@@ -0,0 +1 @@
+export { BreadcrumbNavigation } from "./breadcrumb-navigation";
diff --git a/src/components/breadcrumbs/breadcrumbs.stories.tsx b/src/components/breadcrumbs/breadcrumbs.stories.tsx
deleted file mode 100644
index d71019ef..00000000
--- a/src/components/breadcrumbs/breadcrumbs.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Breadcrumbs } from "./breadcrumbs";
-
-const meta: Meta<typeof Breadcrumbs> = {
-    title: "Breadcrumb",
-    component: Breadcrumbs,
-    args: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof Breadcrumbs>;
-
-export const Base: Story = {
-    render: () => (
-        <div className="p-4">
-            <Breadcrumbs>
-                <Breadcrumbs.Item href="/">Home</Breadcrumbs.Item>
-
-                <Breadcrumbs.Arrow />
-
-                <Breadcrumbs.Item href="/">Library</Breadcrumbs.Item>
-
-                <Breadcrumbs.Arrow />
-
-                <Breadcrumbs.Item asChild isActive>
-                    <a href="/">dsjkdskjdssdkj</a>
-                </Breadcrumbs.Item>
-            </Breadcrumbs>
-        </div>
-    ),
-};
diff --git a/src/components/breadcrumbs/breadcrumbs.tsx b/src/components/breadcrumbs/breadcrumbs.tsx
deleted file mode 100644
index f151c482..00000000
--- a/src/components/breadcrumbs/breadcrumbs.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-import { BreadcrumbsItem } from "./breadcrumbs-item";
-import { BreadcrumbsArrow } from "./breadcrumbs-arrow";
-
-export interface BreadcrumbsProps {
-    children: React.ReactNode;
-}
-
-const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
-    return <nav className="flex flex-row items-center gap-1">{children}</nav>;
-};
-
-Breadcrumbs.Item = BreadcrumbsItem;
-Breadcrumbs.Arrow = BreadcrumbsArrow;
-
-export { Breadcrumbs };
diff --git a/src/components/breadcrumbs/index.tsx b/src/components/breadcrumbs/index.tsx
deleted file mode 100644
index b78e8fd6..00000000
--- a/src/components/breadcrumbs/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { Breadcrumbs } from "./breadcrumbs";
diff --git a/src/components/index.ts b/src/components/index.ts
index c35b2ab7..8e9a2565 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,7 +1,7 @@
 export { Alert, AlertIntent } from "./alert";
 export { Avatar } from "./avatar";
 export { Badge, BadgeType } from "./badge";
-export { Breadcrumbs } from "./breadcrumbs";
+export { BreadcrumbNavigation } from "./breadcrumb-navigation";
 export { Button } from "./button";
 export { Checkbox } from "./checkbox";
 export { Dialog } from "./dialog";

From 0cf00e2f3fa6869fe6a0f220b7e7b898e2e18a12 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 12 Mar 2024 16:07:28 +0100
Subject: [PATCH 08/10] renamed breadcrumbs to breadcrumb-navigation

---
 ...mb--navigation-arrow.tsx => breadcrumb-navigation-arrow.tsx} | 0
 src/components/breadcrumb-navigation/breadcrumb-navigation.tsx  | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename src/components/breadcrumb-navigation/{breadcrumb--navigation-arrow.tsx => breadcrumb-navigation-arrow.tsx} (100%)

diff --git a/src/components/breadcrumb-navigation/breadcrumb--navigation-arrow.tsx b/src/components/breadcrumb-navigation/breadcrumb-navigation-arrow.tsx
similarity index 100%
rename from src/components/breadcrumb-navigation/breadcrumb--navigation-arrow.tsx
rename to src/components/breadcrumb-navigation/breadcrumb-navigation-arrow.tsx
diff --git a/src/components/breadcrumb-navigation/breadcrumb-navigation.tsx b/src/components/breadcrumb-navigation/breadcrumb-navigation.tsx
index 55ccaa5c..bc25258d 100644
--- a/src/components/breadcrumb-navigation/breadcrumb-navigation.tsx
+++ b/src/components/breadcrumb-navigation/breadcrumb-navigation.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { BreadcrumbNavigationItem } from "./breadcrumb-navigation-item";
-import { BreadcrumbNavigationArrow } from "./breadcrumb--navigation-arrow";
+import { BreadcrumbNavigationArrow } from "./breadcrumb-navigation-arrow";
 
 export interface BreadcrumbNavigationProps {
     children: React.ReactNode;

From 70ceb27b2c7e7ccb1dea5239abd015ffa5b3746e Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 12 Mar 2024 16:14:25 +0100
Subject: [PATCH 09/10] replaced word

---
 src/components/breadcrumb-navigation/breadcrumbs.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/breadcrumb-navigation/breadcrumbs.stories.tsx b/src/components/breadcrumb-navigation/breadcrumbs.stories.tsx
index 56785b5f..764145b7 100644
--- a/src/components/breadcrumb-navigation/breadcrumbs.stories.tsx
+++ b/src/components/breadcrumb-navigation/breadcrumbs.stories.tsx
@@ -25,7 +25,7 @@ export const Base: Story = {
                 <BreadcrumbNavigation.Arrow />
 
                 <BreadcrumbNavigation.Item asChild isActive>
-                    <a href="/">dsjkdskjdssdkj</a>
+                    <a href="/">Book</a>
                 </BreadcrumbNavigation.Item>
             </BreadcrumbNavigation>
         </div>

From 378e758ea039a2edf288fbd6a1b495c0de2e73f6 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Tue, 12 Mar 2024 16:16:31 +0100
Subject: [PATCH 10/10] renamed story

---
 ...readcrumbs.stories.tsx => breadcrumb-navigation.stories.tsx} | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename src/components/breadcrumb-navigation/{breadcrumbs.stories.tsx => breadcrumb-navigation.stories.tsx} (96%)

diff --git a/src/components/breadcrumb-navigation/breadcrumbs.stories.tsx b/src/components/breadcrumb-navigation/breadcrumb-navigation.stories.tsx
similarity index 96%
rename from src/components/breadcrumb-navigation/breadcrumbs.stories.tsx
rename to src/components/breadcrumb-navigation/breadcrumb-navigation.stories.tsx
index 764145b7..6f5bd975 100644
--- a/src/components/breadcrumb-navigation/breadcrumbs.stories.tsx
+++ b/src/components/breadcrumb-navigation/breadcrumb-navigation.stories.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { BreadcrumbNavigation } from "./breadcrumb-navigation";
 
 const meta: Meta<typeof BreadcrumbNavigation> = {
-    title: "Breadcrumb",
+    title: "Breadcrumb Navigation",
     component: BreadcrumbNavigation,
     args: {},
 };