create-unmint 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-unmint",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Create a new Unmint documentation project",
   "type": "module",
   "bin": {

package/template/app/components/docs/docs-header.tsx

@@ -33,7 +33,7 @@ export function DocsHeader({ tree }: DocsHeaderProps) {
                 aria-label="Open menu"
                 aria-expanded={isMobileMenuOpen}
               >
-                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg aria-hidden="true" className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                 </svg>
               </button>
@@ -68,7 +68,7 @@ export function DocsHeader({ tree }: DocsHeaderProps) {
                   className="p-2 text-muted-foreground hover:text-foreground transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
                   aria-label="GitHub"
                 >
-                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                  <svg aria-hidden="true" className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                     <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                   </svg>
                 </a>

package/template/app/components/docs/docs-sidebar.tsx

@@ -25,7 +25,7 @@ export function DocsSidebar({ tree }: DocsSidebarProps) {
                 className="flex items-center gap-3 py-1 text-sm text-[var(--accent)] font-medium hover:opacity-80 transition-opacity"
               >
                 <span className="flex items-center justify-center w-7 h-7 rounded-md bg-[var(--accent-muted)]">
-                  <svg className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                  <svg aria-hidden="true" className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                     <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                   </svg>
                 </span>
@@ -41,7 +41,7 @@ export function DocsSidebar({ tree }: DocsSidebarProps) {
                   className="flex items-center gap-3 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
                 >
                   <span className="flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 dark:bg-gray-800">
-                    <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                    <svg aria-hidden="true" className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                       <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                     </svg>
                   </span>
@@ -56,7 +56,7 @@ export function DocsSidebar({ tree }: DocsSidebarProps) {
                   className="flex items-center gap-3 py-1 text-sm text-muted-foreground hover:text-foreground transition-colors"
                 >
                   <span className="flex items-center justify-center w-7 h-7 rounded-md bg-gray-100 dark:bg-gray-800">
-                    <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <svg aria-hidden="true" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                       <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                     </svg>
                   </span>

package/template/app/components/docs/mdx/accordion.tsx

@@ -28,10 +28,12 @@ export function Accordion({ title, children, defaultOpen = false }: AccordionPro
     <div>
       <button
         onClick={() => setIsOpen(!isOpen)}
-        className="flex w-full items-center justify-between px-4 py-4 text-left font-medium text-foreground hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
+        aria-expanded={isOpen}
+        className="flex w-full items-center justify-between px-4 py-4 text-left font-medium text-foreground hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-inset"
       >
         <span>{title}</span>
         <svg
+          aria-hidden="true"
           className={cn(
             'w-5 h-5 text-muted-foreground transition-transform duration-200',
             isOpen && 'rotate-180'

package/template/app/components/docs/mdx/tabs.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import { useState, createContext, useContext } from 'react'
+import { useState, createContext, useContext, Children, isValidElement, useId } from 'react'
 import { cn } from '@/lib/utils'
 
 interface TabsContextValue {
   activeTab: string
   setActiveTab: (tab: string) => void
+  tabsId: string
 }
 
 const TabsContext = createContext<TabsContextValue | null>(null)
@@ -17,10 +18,87 @@ interface TabsProps {
 
 export function Tabs({ children, defaultValue }: TabsProps) {
   const [activeTab, setActiveTab] = useState(defaultValue || '')
+  const tabsId = useId()
+
+  // Extract tab titles and content from children
+  const tabs: { title: string; content: React.ReactNode }[] = []
+  Children.forEach(children, (child) => {
+    if (isValidElement<TabProps>(child) && child.props.title) {
+      tabs.push({
+        title: child.props.title,
+        content: child.props.children,
+      })
+    }
+  })
+
+  // Set default active tab if not set
+  const currentActiveTab = activeTab || (tabs[0]?.title ?? '')
 
   return (
-    <TabsContext.Provider value={{ activeTab, setActiveTab }}>
-      <div className="my-6">{children}</div>
+    <TabsContext.Provider value={{ activeTab: currentActiveTab, setActiveTab, tabsId }}>
+      <div className="my-6">
+        {/* Tab list */}
+        <div role="tablist" aria-label="Tabs" className="flex border-b border-border">
+          {tabs.map((tab, index) => {
+            const isActive = currentActiveTab === tab.title
+            const tabId = `${tabsId}-tab-${index}`
+            const panelId = `${tabsId}-panel-${index}`
+
+            return (
+              <button
+                key={tab.title}
+                role="tab"
+                id={tabId}
+                aria-selected={isActive}
+                aria-controls={panelId}
+                tabIndex={isActive ? 0 : -1}
+                onClick={() => setActiveTab(tab.title)}
+                onKeyDown={(e) => {
+                  if (e.key === 'ArrowRight') {
+                    e.preventDefault()
+                    const nextIndex = (index + 1) % tabs.length
+                    setActiveTab(tabs[nextIndex].title)
+                  } else if (e.key === 'ArrowLeft') {
+                    e.preventDefault()
+                    const prevIndex = (index - 1 + tabs.length) % tabs.length
+                    setActiveTab(tabs[prevIndex].title)
+                  }
+                }}
+                className={cn(
+                  'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2',
+                  isActive
+                    ? 'border-[var(--accent)] text-[var(--accent)]'
+                    : 'border-transparent text-muted-foreground hover:text-foreground'
+                )}
+              >
+                {tab.title}
+              </button>
+            )
+          })}
+        </div>
+
+        {/* Tab panels */}
+        {tabs.map((tab, index) => {
+          const isActive = currentActiveTab === tab.title
+          const tabId = `${tabsId}-tab-${index}`
+          const panelId = `${tabsId}-panel-${index}`
+
+          return (
+            <div
+              key={tab.title}
+              role="tabpanel"
+              id={panelId}
+              aria-labelledby={tabId}
+              hidden={!isActive}
+              tabIndex={0}
+              className={cn('pt-4 [&>pre]:mt-0', !isActive && 'hidden')}
+            >
+              {tab.content}
+            </div>
+          )
+        })}
+      </div>
     </TabsContext.Provider>
   )
 }
@@ -30,31 +108,9 @@ interface TabProps {
   children: React.ReactNode
 }
 
+// Tab is now just a data container, rendering is handled by Tabs
 export function Tab({ title, children }: TabProps) {
-  const context = useContext(TabsContext)
-  if (!context) return null
-
-  const { activeTab, setActiveTab } = context
-  const isActive = activeTab === title || (!activeTab && title)
-
-  return (
-    <>
-      <button
-        onClick={() => setActiveTab(title)}
-        className={cn(
-          'px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors',
-          isActive
-            ? 'border-[var(--accent)] text-[var(--accent)]'
-            : 'border-transparent text-muted-foreground hover:text-foreground'
-        )}
-      >
-        {title}
-      </button>
-      {isActive && (
-        <div className="pt-4 [&>pre]:mt-0">
-          {children}
-        </div>
-      )}
-    </>
-  )
+  // This component is used for data extraction only
+  // Actual rendering happens in Tabs component
+  return null
 }

package/template/app/components/docs/mobile-sidebar.tsx

@@ -135,7 +135,7 @@ export function MobileSidebar({ tree, isOpen, onClose }: MobileSidebarProps) {
             className="p-2 -mr-2 text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-w-[44px] min-h-[44px] flex items-center justify-center"
             aria-label="Close menu"
           >
-            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <svg aria-hidden="true" className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
             </svg>
           </button>
@@ -153,7 +153,7 @@ export function MobileSidebar({ tree, isOpen, onClose }: MobileSidebarProps) {
                   className="flex items-center gap-3 py-2 px-2 text-sm text-[var(--accent)] font-medium hover:bg-[var(--accent-muted)] rounded-md transition-colors min-h-[44px]"
                 >
                   <span className="flex items-center justify-center w-7 h-7 rounded-md bg-[var(--accent-muted)]">
-                    <svg className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                    <svg aria-hidden="true" className="w-4 h-4 text-[var(--accent)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                       <path strokeLinecap="round" strokeLinejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
                     </svg>
                   </span>
@@ -169,7 +169,7 @@ export function MobileSidebar({ tree, isOpen, onClose }: MobileSidebarProps) {
                     className="flex items-center gap-3 py-2 px-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px]"
                   >
                     <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted">
-                      <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                      <svg aria-hidden="true" className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
                         <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                       </svg>
                     </span>
@@ -184,7 +184,7 @@ export function MobileSidebar({ tree, isOpen, onClose }: MobileSidebarProps) {
                     className="flex items-center gap-3 py-2 px-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px]"
                   >
                     <span className="flex items-center justify-center w-7 h-7 rounded-md bg-muted">
-                      <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+                      <svg aria-hidden="true" className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                         <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                       </svg>
                     </span>
@@ -243,10 +243,12 @@ function MobileSidebarNode({ node, pathname, onNavigate }: MobileSidebarNodeProp
       <div>
         <button
           onClick={() => setIsExpanded(!isExpanded)}
-          className="flex items-center justify-between w-full py-2 px-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px]"
+          aria-expanded={isExpanded}
+          className="flex items-center justify-between w-full py-2 px-2 text-sm font-medium text-muted-foreground hover:text-foreground hover:bg-muted rounded-md transition-colors min-h-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-inset"
         >
           <span>{node.name}</span>
           <svg
+            aria-hidden="true"
             className={cn('w-4 h-4 transition-transform', isExpanded && 'rotate-90')}
             fill="none"
             stroke="currentColor"

package/template/app/components/docs/search-dialog.tsx

@@ -31,6 +31,7 @@ export function SearchTrigger() {
       <button
         type="button"
         onClick={() => setOpen(true)}
+        aria-haspopup="dialog"
         className={cn(
           'flex items-center gap-3 px-4 py-2.5 rounded-lg w-full max-w-md',
           'bg-muted/50 border border-border/50',
@@ -198,7 +199,7 @@ function SearchDialog({ onClose }: SearchDialogProps) {
                 <p>Searching...</p>
               </div>
             ) : results.length > 0 ? (
-              <ul ref={resultsRef} className="py-2">
+              <ul ref={resultsRef} role="listbox" aria-label="Search results" className="py-2">
                 {results.map((result, index) => {
                   // Build breadcrumb path
                   const breadcrumbPath = result.breadcrumbs && result.breadcrumbs.length > 0
@@ -211,8 +212,11 @@ function SearchDialog({ onClose }: SearchDialogProps) {
                         type="button"
                         onClick={() => handleSelect(result.url)}
                         onMouseEnter={() => setSelectedIndex(index)}
+                        role="option"
+                        aria-selected={selectedIndex === index}
                         className={cn(
-                          'w-full px-4 py-3 text-left transition-colors focus:outline-none',
+                          'w-full px-4 py-3 text-left transition-colors',
+                          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--accent)]',
                           selectedIndex === index
                             ? 'bg-gray-100 dark:bg-gray-800'
                             : 'hover:bg-gray-50 dark:hover:bg-gray-800/50'
@@ -265,6 +269,7 @@ function SearchDialog({ onClose }: SearchDialogProps) {
 function SearchIcon({ className }: { className?: string }) {
   return (
     <svg
+      aria-hidden="true"
       className={className}
       fill="none"
       viewBox="0 0 24 24"

package/template/app/components/docs/theme-toggle.tsx

@@ -12,21 +12,21 @@ export function ThemeToggle() {
   }, [])
 
   if (!mounted) {
-    return <div className="w-9 h-9" />
+    return <div className="w-11 h-11" />
   }
 
   return (
     <button
       onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-      className="flex items-center justify-center w-9 h-9 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      className="flex items-center justify-center w-11 h-11 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
       aria-label="Toggle theme"
     >
       {theme === 'dark' ? (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <svg aria-hidden="true" className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
         </svg>
       ) : (
-        <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+        <svg aria-hidden="true" className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
           <path strokeLinecap="round" strokeLinejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
         </svg>
       )}