@gentleduck/docs 0.0.13 → 0.0.16

package/src/components/mdx/mdx-components/code/mermaid-block.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { cn } from '@gentleduck/libs/cn'
-import { PreviewPanelDialog } from '@gentleduck/registry-ui-duckui/preview-panel'
+import { PreviewPanelDialog } from '@gentleduck/registry-ui/preview-panel'
 import { Loader } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'
@@ -33,9 +33,11 @@ export function MermaidBlock(props: MermaidBlockProps) {
 
   if (!mounted) {
     return (
-      <div className={cn('my-6 flex h-[300px] items-center justify-center rounded-lg border bg-card', props.className)}>
+      <div
+        className={cn('my-6 flex h-[300px] items-center justify-center rounded-lg border bg-card', props.className)}
+        role="status">
         <div className="flex flex-col items-center gap-3">
-          <Loader className="size-4 animate-spin opacity-50" />
+          <Loader aria-hidden="true" className="size-4 animate-spin opacity-50" />
           <p className="text-muted-foreground text-sm">Loading diagram...</p>
         </div>
       </div>

package/src/components/mdx/mdx-components/code/pre-block/index.ts

@@ -0,0 +1 @@
+export * from './pre-block'

package/src/components/mdx/mdx-components/code/pre-block/pre-block.tsx

@@ -0,0 +1,52 @@
+import { CopyButton } from '@duck-docs/components/copy-button'
+import { cn } from '@gentleduck/libs/cn'
+import { ShellCommand } from './shell-command'
+import type { CodeBlockProps } from './types'
+
+export function PreBlock({
+  className,
+  __rawString__,
+  __npmCommand__,
+  __yarnCommand__,
+  __pnpmCommand__,
+  __bunCommand__,
+  __withMeta__,
+  __event__,
+  children,
+  ...props
+}: CodeBlockProps) {
+  const theme = props['data-theme']
+
+  return (
+    <div data-theme={theme}>
+      {__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && __bunCommand__ ? (
+        <ShellCommand
+          __bunCommand__={__bunCommand__}
+          __npmCommand__={__npmCommand__}
+          __pnpmCommand__={__pnpmCommand__}
+          __yarnCommand__={__yarnCommand__}
+          {...props}
+        />
+      ) : (
+        <>
+          {__rawString__ && !__npmCommand__ && (
+            <CopyButton
+              className={cn('absolute top-2 right-2 bg-muted [&_svg]:text-muted-foreground', __withMeta__ && 'top-16')}
+              event={__event__}
+              value={__rawString__}
+              variant={'outline'}
+            />
+          )}
+          <pre
+            className={cn(
+              'max-h-[650px] overflow-auto rounded-lg py-4 focus-visible:shadow-none focus-visible:outline-none',
+              className,
+            )}
+            {...props}>
+            {children}
+          </pre>
+        </>
+      )}
+    </div>
+  )
+}

package/src/components/mdx/mdx-components/code/{pre-block.tsx → pre-block/shell-command.tsx}

@@ -1,65 +1,10 @@
 import { CopyButton } from '@duck-docs/components/copy-button'
-import type { Event } from '@duck-docs/lib/events'
 import type { NpmCommands } from '@duck-docs/types/unist'
 import { cn } from '@gentleduck/libs/cn'
-import { Separator } from '@gentleduck/registry-ui-duckui/separator'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@gentleduck/registry-ui-duckui/tabs'
+import { Separator } from '@gentleduck/registry-ui/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@gentleduck/registry-ui/tabs'
 import { Terminal } from 'lucide-react'
 
-export type CodeBlockProps = React.HTMLAttributes<HTMLPreElement> & {
-  __rawString__?: string
-  __withMeta__?: boolean
-  __title__?: string
-  __event__?: Event['name']
-} & NpmCommands
-
-export function PreBlock({
-  className,
-  __rawString__,
-  __npmCommand__,
-  __yarnCommand__,
-  __pnpmCommand__,
-  __bunCommand__,
-  __withMeta__,
-  __event__,
-  __title__,
-  children,
-  ...props
-}: CodeBlockProps) {
-  return (
-    <div data-theme={(props as any)['data-theme']}>
-      {__npmCommand__ && __yarnCommand__ && __pnpmCommand__ && __bunCommand__ ? (
-        <ShellCommand
-          __bunCommand__={__bunCommand__}
-          __npmCommand__={__npmCommand__}
-          __pnpmCommand__={__pnpmCommand__}
-          __yarnCommand__={__yarnCommand__}
-          {...props}
-        />
-      ) : (
-        <>
-          {__rawString__ && !__npmCommand__ && (
-            <CopyButton
-              className={cn('absolute top-2 right-2 bg-muted [&_svg]:text-muted-foreground', __withMeta__ && 'top-16')}
-              event={__event__}
-              value={__rawString__}
-              variant={'outline'}
-            />
-          )}
-          <pre
-            className={cn(
-              'max-h-[650px] overflow-auto rounded-lg py-4 focus-visible:shadow-none focus-visible:outline-none',
-              className,
-            )}
-            {...props}>
-            {children}
-          </pre>
-        </>
-      )}
-    </div>
-  )
-}
-
 export function ShellCommand({ __npmCommand__, __yarnCommand__, __pnpmCommand__, __bunCommand__ }: NpmCommands) {
   const commands = {
     __bunCommand__,
@@ -67,11 +12,12 @@ export function ShellCommand({ __npmCommand__, __yarnCommand__, __pnpmCommand__,
     __pnpmCommand__,
     __yarnCommand__,
   }
+
   return (
     <Tabs className="rounded-md" defaultValue="__npmCommand__">
       <TabsList className="w-fit justify-start bg-transparent py-2">
         <div className="flex size-4 flex-col items-center justify-center bg-foreground/65 ltr:mr-2 ltr:ml-3 rtl:mr-3 rtl:ml-2">
-          <Terminal className="size-4 text-background" />
+          <Terminal aria-hidden="true" className="size-4 text-background" />
         </div>
         {Object.keys(commands).map((command, idx) => {
           return (

package/src/components/mdx/mdx-components/code/pre-block/types.ts

@@ -0,0 +1,10 @@
+import type { Event } from '@duck-docs/lib/events'
+import type { MdxCodeNodeProperties, NpmCommands } from '@duck-docs/types'
+
+export type CodeBlockProps = React.HTMLAttributes<HTMLPreElement> & {
+  'data-theme'?: string
+  __rawString__?: MdxCodeNodeProperties['__rawString__']
+  __withMeta__?: boolean
+  __title__?: MdxCodeNodeProperties['__title__']
+  __event__?: Event['name']
+} & NpmCommands

package/src/components/mdx/mdx-components/index.ts

@@ -1,7 +1,6 @@
 export * from './callout'
 export * from './code'
 export * from './components-list'
-export * from './framework-docs'
 export * from './table'
 export * from './tabs'
-export * from './typepography'
+export * from './typography'

package/src/components/mdx/mdx-components/table.tsx

@@ -1,32 +1,41 @@
 import { cn } from '@gentleduck/libs/cn'
-import type { FC } from 'react'
 
-export const Table: FC<React.HTMLAttributes<HTMLTableElement>> = ({ className, ...props }) => (
-  <div className="my-6 w-full overflow-x-auto rounded-lg border">
-    <table
-      className={cn('relative w-full border-none text-sm [&_tbody_tr:last-child]:border-b-0', className)}
-      {...props}
-    />
-  </div>
-)
+export function Table({ className, ...props }: React.HTMLAttributes<HTMLTableElement>) {
+  return (
+    <div className="my-6 w-full overflow-x-auto rounded-lg border">
+      <table
+        className={cn('relative w-full border-none text-sm [&_tbody_tr:last-child]:border-b-0', className)}
+        {...props}
+      />
+    </div>
+  )
+}
 
-export const TableRow: FC<React.HTMLAttributes<HTMLTableRowElement>> = ({ className, ...props }) => (
-  <tr className={cn('m-0 border-b', className)} {...props} />
-)
+export function TableRow({ className, ...props }: React.HTMLAttributes<HTMLTableRowElement>) {
+  return <tr className={cn('m-0 border-b', className)} {...props} />
+}
 
-export const TableHeader: FC<React.HTMLAttributes<HTMLTableCellElement>> = ({ className, ...props }) => (
-  <th
-    className={cn('px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right', className)}
-    {...props}
-  />
-)
+export function TableHeader({ className, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <th
+      className={cn(
+        'px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right',
+        className,
+      )}
+      scope="col"
+      {...props}
+    />
+  )
+}
 
-export const TableCell: FC<React.HTMLAttributes<HTMLTableCellElement>> = ({ className, ...props }) => (
-  <td
-    className={cn(
-      'whitespace-nowrap px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right',
-      className,
-    )}
-    {...props}
-  />
-)
+export function TableCell({ className, ...props }: React.HTMLAttributes<HTMLTableCellElement>) {
+  return (
+    <td
+      className={cn(
+        'whitespace-nowrap px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right',
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/src/components/mdx/mdx-components/tabs.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@gentleduck/libs/cn'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@gentleduck/registry-ui-duckui/tabs'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@gentleduck/registry-ui/tabs'
 
 export function Tab({ className, ...props }: React.ComponentProps<typeof Tabs>) {
   return <Tabs className={cn('relative mt-6 w-full', className)} {...props} />
@@ -25,7 +25,10 @@ export function TabTrigger({ className, ...props }: React.ComponentProps<typeof
 export function TabContent({ className, ...props }: React.ComponentProps<typeof TabsContent>) {
   return (
     <TabsContent
-      className={cn('relative [&_h3.font-heading]:font-semibold [&_h3.font-heading]:text-base', className)}
+      className={cn(
+        'relative [&>div[data-rehype-pretty-code-fragment]]:relative [&>div[data-rehype-pretty-code-fragment]]:my-3 [&>div[data-rehype-pretty-code-fragment]]:rounded-lg [&>div[data-rehype-pretty-code-fragment]]:bg-muted/40 [&_h3.font-heading]:font-semibold [&_h3.font-heading]:text-base',
+        className,
+      )}
       {...props}
     />
   )

package/src/components/mdx/mdx-components/typography.tsx

@@ -0,0 +1 @@
+export * from './typepography'

package/src/components/mdx/mdx-components-base.tsx

@@ -0,0 +1,81 @@
+import { cn } from '@gentleduck/libs/cn'
+import Image from 'next/image'
+import type * as React from 'react'
+import type { MdxComponentMap } from './mdx-component-registry.types'
+import { Callout } from './mdx-components/callout'
+import {
+  CodeBlock,
+  CodeBlockWrapper,
+  ComponentPreview,
+  ComponentSource,
+  MermaidBlock,
+  PreBlock,
+} from './mdx-components/code'
+import { FigcaptionBlock } from './mdx-components/code/figcaption-block'
+import { ComponentsList } from './mdx-components/components-list'
+import { Table, TableCell, TableHeader, TableRow } from './mdx-components/table'
+import { Tab, TabContent, TabList, TabTrigger } from './mdx-components/tabs'
+import { A, H1, H2, H3, H4, H5, H6, Hr, LinkBlock, LinkedCard, P } from './mdx-components/typography'
+import { mdxIcons } from './mdx-icons'
+
+type PreRendererProps = React.ComponentProps<typeof PreBlock> & {
+  __isMermaid__?: boolean
+}
+
+export const mdxBaseComponents = {
+  ...mdxIcons,
+  a: A,
+  blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
+    <blockquote className={cn('mt-6 border-l-2 pl-6 italic', className)} {...props} />
+  ),
+  Callout,
+  CodeBlockWrapper,
+  ComponentPreview,
+  ComponentSource,
+  ComponentsList,
+  code: CodeBlock,
+  figcaption: FigcaptionBlock,
+  h1: H1,
+  h2: H2,
+  h3: H3,
+  h4: H4,
+  h5: H5,
+  h6: H6,
+  hr: Hr,
+  Image,
+  img: ({ className, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
+    <img alt={alt} className={cn('rounded-md', className)} {...props} />
+  ),
+  Link: LinkBlock,
+  LinkedCard,
+  li: (props: React.HTMLAttributes<HTMLElement>) => <li {...props} />,
+  MermaidDiagram: MermaidBlock,
+  ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
+    <ol className={cn('my-6 ml-7 flex list-decimal flex-col gap-2', className)} {...props} />
+  ),
+  p: P,
+  pre: (props: PreRendererProps) => {
+    if (props.__isMermaid__) {
+      return <MermaidBlock {...props} className="my-0 border-none [&_*]:border-none" />
+    }
+
+    return <PreBlock {...props} />
+  },
+  Step: ({ className, ...props }: React.ComponentProps<'h3'>) => (
+    <h3 className={cn('step scroll-m-20 font-heading font-semibold text-base tracking-tight', className)} {...props} />
+  ),
+  Steps: ({ ...props }: React.ComponentProps<'div'>) => (
+    <div className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]" {...props} />
+  ),
+  table: Table,
+  Tabs: Tab,
+  TabsContent: TabContent,
+  TabsList: TabList,
+  TabsTrigger: TabTrigger,
+  td: TableCell,
+  th: TableHeader,
+  tr: TableRow,
+  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
+    <ul className={cn('my-6 ml-6 flex list-disc flex-col gap-2', className)} {...props} />
+  ),
+} satisfies MdxComponentMap

package/src/components/mdx/mdx-components-registry.ts

@@ -0,0 +1,8 @@
+import type { MdxComponentMap } from './mdx-component-registry.types'
+import { mdxBaseComponents } from './mdx-components-base'
+import { mdxUiComponents } from './mdx-components-ui'
+
+export const mdxComponents = {
+  ...mdxBaseComponents,
+  ...mdxUiComponents,
+} satisfies MdxComponentMap

package/src/components/mdx/mdx-components-ui.tsx

@@ -0,0 +1,21 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@gentleduck/registry-ui/accordion'
+import { Alert, AlertDescription, AlertTitle } from '@gentleduck/registry-ui/alert'
+import { AspectRatio } from '@gentleduck/registry-ui/aspect-ratio'
+import { Badge } from '@gentleduck/registry-ui/badge'
+import { Button } from '@gentleduck/registry-ui/button'
+import { Kbd } from '@gentleduck/registry-ui/kbd'
+import type { MdxComponentMap } from './mdx-component-registry.types'
+
+export const mdxUiComponents = {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  AspectRatio,
+  Badge,
+  Button,
+  Kbd,
+} satisfies MdxComponentMap

package/src/components/mdx/mdx-runtime.ts

@@ -0,0 +1,10 @@
+import type { ComponentType } from 'react'
+import runtime from 'react/jsx-runtime'
+import type { MdxComponentMap } from './mdx-component-registry.types'
+
+export type CompiledMdxComponent = ComponentType<{ components: MdxComponentMap }>
+
+export const useMDXComponent = (code: string): CompiledMdxComponent => {
+  const fn = new Function(code)
+  return fn({ ...runtime }).default as CompiledMdxComponent
+}

package/src/components/mdx/mdx.tsx

@@ -1,107 +1,7 @@
 'use client'
 
-import { cn } from '@gentleduck/libs/cn'
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@gentleduck/registry-ui-duckui/accordion'
-import { Alert, AlertDescription, AlertTitle } from '@gentleduck/registry-ui-duckui/alert'
-import { AspectRatio } from '@gentleduck/registry-ui-duckui/aspect-ratio'
-import { Badge } from '@gentleduck/registry-ui-duckui/badge'
-import { Button } from '@gentleduck/registry-ui-duckui/button'
-import { Kbd } from '@gentleduck/registry-ui-duckui/kbd'
-import Image from 'next/image'
-import type * as React from 'react'
-import runtime from 'react/jsx-runtime'
-import { Callout } from './mdx-components/callout'
-import {
-  CodeBlock,
-  CodeBlockWrapper,
-  ComponentPreview,
-  ComponentSource,
-  MermaidBlock,
-  PreBlock,
-} from './mdx-components/code'
-import { FigcaptionBlock } from './mdx-components/code/figcaption-block'
-import { ComponentsList } from './mdx-components/components-list'
-import { Table, TableCell, TableHeader, TableRow } from './mdx-components/table'
-import { Tab, TabContent, TabList, TabTrigger } from './mdx-components/tabs'
-import { A, H1, H2, H3, H4, H5, H6, Hr, LinkBlock, LinkedCard, P } from './mdx-components/typepography'
-import { mdxIcons } from './mdx-icons'
-
-const useMDXComponent = (code: string) => {
-  const fn = new Function(code)
-  return fn({ ...runtime }).default
-}
-
-const components = {
-  ...mdxIcons,
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Alert,
-  AlertDescription,
-  AlertTitle,
-  AspectRatio,
-  a: A,
-  Badge,
-  Button,
-  blockquote: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
-    <blockquote className={cn('mt-6 border-l-2 pl-6 italic', className)} {...props} />
-  ),
-  Callout,
-  CodeBlockWrapper,
-  ComponentPreview,
-  ComponentSource,
-  ComponentsList,
-  code: CodeBlock,
-  figcaption: FigcaptionBlock,
-  h1: H1,
-  h2: H2,
-  h3: H3,
-  h4: H4,
-  h5: H5,
-  h6: H6,
-  hr: Hr,
-  // span: SpanBlock,
-  Image,
-  img: ({ className, alt, ...props }: React.ImgHTMLAttributes<HTMLImageElement>) => (
-    <img alt={alt} className={cn('rounded-md', className)} {...props} />
-  ),
-  Kbd: Kbd,
-  Link: LinkBlock,
-  LinkedCard,
-  li: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
-    <li className={cn('mt-2', className)} {...props} />
-  ),
-  ol: ({ className, ...props }: React.HTMLAttributes<HTMLOListElement>) => (
-    <ol className={cn('my-6 ml-7 list-decimal', className)} {...props} />
-  ),
-  p: P,
-  MermaidDiagram: MermaidBlock,
-  pre: (props: any) => {
-    if (props.__isMermaid__) {
-      return <MermaidBlock {...props} className="my-0 border-none [&_*]:border-none" />
-    }
-    return <PreBlock {...props} />
-  },
-  Step: ({ className, ...props }: React.ComponentProps<'h3'>) => (
-    <h3 className={cn('step scroll-m-20 font-heading font-semibold text-xl tracking-tight', className)} {...props} />
-  ),
-  Steps: ({ ...props }) => (
-    <div className="[&>h3]:step steps mb-12 ml-4 border-l pl-8 [counter-reset:step]" {...props} />
-  ),
-  Tabs: Tab,
-  TabsContent: TabContent,
-  TabsList: TabList,
-  TabsTrigger: TabTrigger,
-  table: Table,
-  td: TableCell,
-  th: TableHeader,
-  tr: TableRow,
-  ul: ({ className, ...props }: React.HTMLAttributes<HTMLUListElement>) => (
-    <ul className={cn('my-6 ml-6 list-disc', className)} {...props} />
-  ),
-  // FrameworkDocs,
-}
+import { mdxComponents } from './mdx-components-registry'
+import { useMDXComponent } from './mdx-runtime'
 
 interface MdxProps {
   code: string
@@ -112,7 +12,7 @@ export function Mdx({ code }: MdxProps) {
 
   return (
     <div className="mdx">
-      <Component components={components} />
+      <Component components={mdxComponents} />
     </div>
   )
 }

package/src/components/mobile-nav.tsx

@@ -1,12 +1,14 @@
 'use client'
 
 import { useDocsConfig } from '@duck-docs/context'
+import type { SidebarNavItem } from '@duck-docs/types/nav'
 import { cn } from '@gentleduck/libs/cn'
-import { Button } from '@gentleduck/registry-ui-duckui/button'
-import { Drawer, DrawerContent, DrawerTrigger } from '@gentleduck/registry-ui-duckui/drawer'
-import { ScrollArea } from '@gentleduck/registry-ui-duckui/scroll-area'
+import { Button } from '@gentleduck/registry-ui/button'
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from '@gentleduck/registry-ui/drawer'
+import { ScrollArea } from '@gentleduck/registry-ui/scroll-area'
 import { PanelsTopLeft } from 'lucide-react'
 import Link, { type LinkProps } from 'next/link'
+import { usePathname } from 'next/navigation'
 import * as React from 'react'
 
 export function MobileNav() {
@@ -17,12 +19,16 @@ export function MobileNav() {
     <Drawer onOpenChange={setOpen} open={open}>
       <DrawerTrigger asChild>
         <Button
+          aria-label="Open navigation menu"
           className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
-          icon={<PanelsTopLeft />}
+          icon={<PanelsTopLeft aria-hidden="true" />}
           size={'icon'}
           variant="ghost"></Button>
       </DrawerTrigger>
       <DrawerContent className="pr-0 pb-4">
+        <DrawerHeader className="sr-only">
+          <DrawerTitle>Site navigation</DrawerTitle>
+        </DrawerHeader>
         <ScrollArea>
           <div className="hide-scroll my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
             <div className="flex flex-col space-y-3">
@@ -39,24 +45,7 @@ export function MobileNav() {
               {docsConfig.sidebarNav.map((item, index) => (
                 <div className="flex flex-col space-y-3 pt-6" key={index}>
                   <h4 className="font-medium">{item.title}</h4>
-                  {item?.items?.length &&
-                    item.items.map((item) => (
-                      <React.Fragment key={item.href}>
-                        {!item.disabled &&
-                          (item.href ? (
-                            <MobileLink className="text-muted-foreground" href={item.href} onOpenChange={setOpen}>
-                              {item.title}
-                              {item.label && (
-                                <span className="ml-2 rounded-md bg-primary px-1.5 py-0.5 text-accent text-xs leading-none no-underline group-hover:no-underline">
-                                  {item.label}
-                                </span>
-                              )}
-                            </MobileLink>
-                          ) : (
-                            item.title
-                          ))}
-                      </React.Fragment>
-                    ))}
+                  <MobileSidebarNavItems items={item.items ?? []} onOpenChange={setOpen} />
                 </div>
               ))}
             </div>
@@ -67,6 +56,50 @@ export function MobileNav() {
   )
 }
 
+function MobileSidebarNavItems({
+  items,
+  onOpenChange,
+  depth = 0,
+}: {
+  items: SidebarNavItem[]
+  onOpenChange: (open: boolean) => void
+  depth?: number
+}) {
+  if (!items.length) {
+    return null
+  }
+
+  return (
+    <div className={cn('flex flex-col space-y-2', depth > 0 && 'ml-4 border-l pl-3')}>
+      {items.map((item, index) => {
+        const key = item.href ?? `${depth}-${index}-${item.title}`
+        const hasChildren = Boolean(item.items?.length)
+
+        return (
+          <div className="flex flex-col space-y-2" key={key}>
+            {!item.disabled &&
+              (item.href ? (
+                <MobileLink className="text-muted-foreground" href={item.href} onOpenChange={onOpenChange}>
+                  {item.title}
+                  {item.label && (
+                    <span className="ml-2 rounded-md bg-primary px-1.5 py-0.5 text-accent text-xs leading-none no-underline group-hover:no-underline">
+                      {item.label}
+                    </span>
+                  )}
+                </MobileLink>
+              ) : (
+                <p className="text-muted-foreground text-sm">{item.title}</p>
+              ))}
+            {hasChildren && (
+              <MobileSidebarNavItems depth={depth + 1} items={item.items ?? []} onOpenChange={onOpenChange} />
+            )}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
 interface MobileLinkProps extends LinkProps {
   onOpenChange?: (open: boolean) => void
   children: React.ReactNode
@@ -74,8 +107,10 @@ interface MobileLinkProps extends LinkProps {
 }
 
 function MobileLink({ href, onOpenChange, className, children, ...props }: MobileLinkProps) {
+  const pathname = usePathname()
   return (
     <Link
+      aria-current={pathname === href ? 'page' : undefined}
       className={cn(className)}
       href={href}
       scroll

package/src/components/mode-toggle.tsx

@@ -2,7 +2,7 @@
 
 import { useSiteConfig } from '@duck-docs/context'
 import { useMetaColor } from '@duck-docs/hooks/use-meta-colors'
-import { Button } from '@gentleduck/registry-ui-duckui/button'
+import { Button } from '@gentleduck/registry-ui/button'
 import { MoonIcon, SunIcon } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import * as React from 'react'
@@ -25,12 +25,12 @@ export function ModeSwitcher() {
 
   return (
     <Button
-      aria-label="toggle theme"
+      aria-label={`Switch to ${resolvedTheme === 'dark' ? 'light' : 'dark'} theme`}
       className="group/toggle"
       icon={
         <>
-          <SunIcon className="hidden [html.dark_&]:block" />
-          <MoonIcon className="hidden [html.light_&]:block" />
+          <SunIcon aria-hidden="true" className="hidden [html.dark_&]:block" />
+          <MoonIcon aria-hidden="true" className="hidden [html.light_&]:block" />
         </>
       }
       onClick={toggleTheme}