From bf027a4130c3c1c47f9381b1160bc7496a12cfb0 Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Fri, 10 Jan 2025 02:12:13 +0800
Subject: [PATCH 1/2] feat(eslint-config): turn off
 `jsx-a11y/no-aria-hidden-on-focusable`

---
 .changeset/beige-peaches-admire.md          | 5 +++++
 packages/eslint-config/src/configs/react.ts | 3 +--
 2 files changed, 6 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/beige-peaches-admire.md

diff --git a/.changeset/beige-peaches-admire.md b/.changeset/beige-peaches-admire.md
new file mode 100644
index 00000000..214b758a
--- /dev/null
+++ b/.changeset/beige-peaches-admire.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/eslint-config': patch
+---
+
+Turn off `jsx-a11y/no-aria-hidden-on-focusable`
diff --git a/packages/eslint-config/src/configs/react.ts b/packages/eslint-config/src/configs/react.ts
index ec45f838..3f376529 100644
--- a/packages/eslint-config/src/configs/react.ts
+++ b/packages/eslint-config/src/configs/react.ts
@@ -61,8 +61,7 @@ export const react = (options?: Options): Linter.Config[] => {
           }
         ],
         'jsx-a11y/lang': 'error',
-        'jsx-a11y/no-aria-hidden-on-focusable': 'error',
-        'jsx-a11y/prefer-tag-over-role': 'error'
+        'jsx-a11y/no-aria-hidden-on-focusable': 'error'
       },
       settings: {
         'jsx-a11y': {

From 1dc6492348beee5011fbeb088720ddaf98f72b50 Mon Sep 17 00:00:00 2001
From: tszhong0411 <me@honghong.me>
Date: Fri, 10 Jan 2025 02:15:23 +0800
Subject: [PATCH 2/2] feat(ui): add breadcrumb component

---
 .changeset/wild-eagles-brake.md               |  5 ++
 apps/docs/next.config.ts                      |  5 ++
 .../docs/src/app/ui/components/breadcrumb.mdx | 37 ++++++++
 .../demos/breadcrumb/breadcrumb.tsx           | 49 ++++++++++
 apps/docs/src/config/links.ts                 |  4 +
 packages/ui/src/breadcrumb.tsx                | 90 +++++++++++++++++++
 packages/ui/src/index.ts                      |  1 +
 7 files changed, 191 insertions(+)
 create mode 100644 .changeset/wild-eagles-brake.md
 create mode 100644 apps/docs/src/app/ui/components/breadcrumb.mdx
 create mode 100644 apps/docs/src/components/demos/breadcrumb/breadcrumb.tsx
 create mode 100644 packages/ui/src/breadcrumb.tsx

diff --git a/.changeset/wild-eagles-brake.md b/.changeset/wild-eagles-brake.md
new file mode 100644
index 00000000..9b180b14
--- /dev/null
+++ b/.changeset/wild-eagles-brake.md
@@ -0,0 +1,5 @@
+---
+'@tszhong0411/ui': patch
+---
+
+Add breadcrumb component
diff --git a/apps/docs/next.config.ts b/apps/docs/next.config.ts
index b2795d4b..f1711213 100644
--- a/apps/docs/next.config.ts
+++ b/apps/docs/next.config.ts
@@ -38,6 +38,11 @@ const config: NextConfig = {
         source: '/',
         destination: '/introduction',
         permanent: true
+      },
+      {
+        source: '/ui/components',
+        destination: '/ui/components/accordion',
+        permanent: true
       }
     ]
   }
diff --git a/apps/docs/src/app/ui/components/breadcrumb.mdx b/apps/docs/src/app/ui/components/breadcrumb.mdx
new file mode 100644
index 00000000..ff9b89df
--- /dev/null
+++ b/apps/docs/src/app/ui/components/breadcrumb.mdx
@@ -0,0 +1,37 @@
+---
+title: Breadcrumb
+description: Displays the path to the current resource using a hierarchy of links.
+---
+
+<ComponentPreview name='breadcrumb/breadcrumb' />
+
+## Usage
+
+```tsx
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator
+} from '@tszhong0411/ui'
+```
+
+```tsx
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href='/'>Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href='/components'>Components</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
diff --git a/apps/docs/src/components/demos/breadcrumb/breadcrumb.tsx b/apps/docs/src/components/demos/breadcrumb/breadcrumb.tsx
new file mode 100644
index 00000000..60c33bb1
--- /dev/null
+++ b/apps/docs/src/components/demos/breadcrumb/breadcrumb.tsx
@@ -0,0 +1,49 @@
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from '@tszhong0411/ui'
+
+const BreadcrumbDemo = () => {
+  return (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href='/'>Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <DropdownMenu>
+            <DropdownMenuTrigger className='flex items-center gap-1'>
+              <BreadcrumbEllipsis className='size-4' />
+              <span className='sr-only'>Toggle menu</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align='start'>
+              <DropdownMenuItem>Documentation</DropdownMenuItem>
+              <DropdownMenuItem>Themes</DropdownMenuItem>
+              <DropdownMenuItem>GitHub</DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href='/ui/components'>Components</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  )
+}
+
+export default BreadcrumbDemo
diff --git a/apps/docs/src/config/links.ts b/apps/docs/src/config/links.ts
index e8ff3a2b..8c45fd6d 100644
--- a/apps/docs/src/config/links.ts
+++ b/apps/docs/src/config/links.ts
@@ -58,6 +58,10 @@ export const SIDEBAR_LINKS: SidebarLinks = [
         href: '/ui/components/blur-image',
         text: 'Blur Image'
       },
+      {
+        href: '/ui/components/breadcrumb',
+        text: 'Breadcrumb'
+      },
       {
         href: '/ui/components/button',
         text: 'Button'
diff --git a/packages/ui/src/breadcrumb.tsx b/packages/ui/src/breadcrumb.tsx
new file mode 100644
index 00000000..1aa1fa83
--- /dev/null
+++ b/packages/ui/src/breadcrumb.tsx
@@ -0,0 +1,90 @@
+import { Slot } from '@radix-ui/react-slot'
+import { cn } from '@tszhong0411/utils'
+import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react'
+
+type BreadcrumbProps = {
+  separator?: React.ReactNode
+} & React.ComponentProps<'nav'>
+
+export const Breadcrumb = (props: BreadcrumbProps) => <nav aria-label='breadcrumb' {...props} />
+
+type BreadcrumbListProps = React.ComponentProps<'ol'>
+
+export const BreadcrumbList = (props: BreadcrumbListProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <ol
+      className={cn(
+        'text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5',
+        className
+      )}
+      {...rest}
+    />
+  )
+}
+
+type BreadcrumbItemProps = React.ComponentProps<'li'>
+
+export const BreadcrumbItem = (props: BreadcrumbItemProps) => {
+  const { className, ...rest } = props
+
+  return <li className={cn('inline-flex items-center gap-1.5', className)} {...rest} />
+}
+
+type BreadcrumbLinkProps = {
+  asChild?: boolean
+} & React.ComponentProps<'a'>
+
+export const BreadcrumbLink = (props: BreadcrumbLinkProps) => {
+  const { asChild, className, ...rest } = props
+  const Comp = asChild ? Slot : 'a'
+
+  return <Comp className={cn('hover:text-foreground transition-colors', className)} {...rest} />
+}
+
+type BreadcrumbPageProps = React.ComponentProps<'span'>
+
+export const BreadcrumbPage = (props: BreadcrumbPageProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <span
+      role='link'
+      aria-disabled='true'
+      aria-current='page'
+      className={cn('text-foreground font-normal', className)}
+      {...rest}
+    />
+  )
+}
+
+type BreadcrumbSeparatorProps = React.ComponentProps<'li'>
+
+export const BreadcrumbSeparator = (props: BreadcrumbSeparatorProps) => {
+  const { children, className, ...rest } = props
+
+  return (
+    <li role='presentation' aria-hidden='true' className={cn(className)} {...rest}>
+      {children ?? <ChevronRightIcon className='size-3.5' />}
+    </li>
+  )
+}
+
+type BreadcrumbEllipsisProps = React.ComponentProps<'span'>
+
+export const BreadcrumbEllipsis = (props: BreadcrumbEllipsisProps) => {
+  const { className, ...rest } = props
+
+  return (
+    <span
+      role='presentation'
+      aria-hidden='true'
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...rest}
+    >
+      <MoreHorizontalIcon className='size-4' />
+      <span className='sr-only'>More</span>
+    </span>
+  )
+}
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 5a4ce869..310a6564 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -5,6 +5,7 @@ export * from './avatar'
 export * from './badge'
 export * from './blur-fade'
 export * from './blur-image'
+export * from './breadcrumb'
 export * from './button'
 export * from './callout'
 export * from './card'