@clidey/dory 0.21.4 → 0.23.0

package/docs/introduction.mdx

@@ -10,7 +10,7 @@ description: 'Welcome to Docucod and Dory documentation'
 This documentation is powered by two complementary tools:
 
 1. **Docucod** - An AI-powered documentation assistant that automatically generates and maintains documentation
-2. **Dory** - A lightweight static site generator specifically designed to deploy Docucod-generated documentation
+2. **Dory** - A lightweight static site generator specifically designed to deploy dory-generated documentation
 
 ## What is Docucod?
 
@@ -22,7 +22,7 @@ Docucod analyzes your codebase and automatically:
 
 ## What is Dory?
 
-Dory is a lightweight static site generator built for developers who want fast, clean, and customizable documentation. It was created specifically to deploy Docucod-generated documentation with:
+Dory is a lightweight static site generator built for developers who want fast, clean, and customizable documentation. It was created specifically to deploy dory-generated documentation with:
 
 - 🧠 **Simple** — Drop in `.mdx` files and configure one `dory.json`
 - ⚡ **Fast** — Instant hot reload in dev, quick static builds for prod

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@clidey/dory",
   "private": false,
-  "version": "0.21.4",
+  "version": "0.23.0",
   "type": "module",
   "description": "A CLI tool for building and previewing documentation sites",
   "keywords": [
@@ -24,20 +24,27 @@
   "bugs": {
     "url": "https://github.com/clidey/dory/issues"
   },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "publish": "npm publish --access public"
+  },
   "dependencies": {
     "@algolia/autocomplete-core": "^1.19.2",
+    "@clidey/ux": "^0.36.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@headlessui/react": "^2.2.4",
+    "@headlessui/react": "^2.2.9",
     "@heroicons/react": "^2.2.0",
     "@mdx-js/mdx": "^3.1.0",
     "@mdx-js/preact": "^3.1.0",
     "@mdx-js/rollup": "^3.1.0",
     "@preact/preset-vite": "^2.10.1",
-    "@tailwindcss/vite": "^4.1.8",
+    "@tailwindcss/vite": "^4.1.16",
     "@types/react-highlight-words": "^0.20.0",
     "classnames": "^2.5.1",
     "flexsearch": "^0.8.205",
@@ -54,7 +61,7 @@
     "saas": "^1.0.0",
     "sass-embedded": "^1.89.2",
     "sirv": "^3.0.1",
-    "tailwindcss": "^4.1.8",
+    "tailwindcss": "^4.1.16",
     "tsx": "^4.20.4",
     "typescript": "~5.8.3",
     "unist-util-visit": "^5.0.0",
@@ -62,12 +69,8 @@
     "vite-plugin-mdx": "^3.6.1",
     "wouter-preact": "^3.7.1"
   },
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39",
   "devDependencies": {
     "@types/node": "^24.0.12"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "preview": "vite preview"
   }
-}
+}

package/src/app.css

@@ -1,3 +1,5 @@
 @import "tailwindcss";
+
 @custom-variant dark (&:where(.dark, .dark *));
 
+

package/src/components/dropdown.tsx

@@ -1,6 +1,14 @@
-import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  Button
+} from '@clidey/ux'
 import { ChevronDownIcon } from '@heroicons/react/20/solid'
 import type { ComponentChildren } from 'preact'
+import type { ReactNode } from 'preact/compat'
 
 interface DropdownItem {
   icon?: ComponentChildren
@@ -11,39 +19,35 @@ interface DropdownItem {
 }
 
 interface DropdownProps {
-  buttonLabel: string
+  buttonLabel: string | ReactNode;
   items: DropdownItem[]
   className?: string
 }
 
 export default function Dropdown({ buttonLabel, items, className = '' }: DropdownProps) {
   return (
-    <Menu as="div" className={`relative inline-block text-left ${className}`}>
-      <div>
-        <MenuButton className="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-[#1e1e1e] px-3 py-2 text-sm font-semibold text-[#ffffff] shadow-xs ring-1 ring-[#444444] ring-inset hover:bg-[#2a2a2a]">
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Button className={className}>
           {buttonLabel}
-          <ChevronDownIcon aria-hidden="true" className="-mr-1 size-5 text-[#aaaaaa]" />
-        </MenuButton>
-      </div>
-
-      <MenuItems
-        transition
-        className="absolute left-0 right-0 z-10 mt-2 w-full origin-top-right divide-y divide-[#444444] rounded-md bg-[#1e1e1e] shadow-lg ring-1 ring-[#444444]/50 transition focus:outline-hidden data-closed:scale-95 data-closed:transform data-closed:opacity-0 data-enter:duration-100 data-enter:ease-out data-leave:duration-75 data-leave:ease-in">
+          <ChevronDownIcon className="ml-2 h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
         {items.map((item, index) => (
-          <div key={index} className={item.divider ? 'py-1' : ''}>
-            <MenuItem className="group">
-              <a href={item.href} onClick={item.onClick} className="group flex items-center px-4 py-2 text-sm text-[#ffffff] data-focus:bg-[#2a2a2a] data-focus:text-[#ffffff] data-focus:outline-hidden cursor-pointer">
-                {item.icon && (
-                  <span className="mr-3 size-5 text-[#aaaaaa] group-data-focus:text-[#cccccc]">
-                    {item.icon}
-                  </span>
-                )}
-                {item.label}
-              </a>
-            </MenuItem>
-          </div>
+          <>
+            {item.divider && index > 0 && <DropdownMenuSeparator />}
+            <DropdownMenuItem
+              key={index}
+              onClick={item.onClick}
+              className="cursor-pointer"
+            >
+              {item.icon && <span className="mr-2">{item.icon}</span>}
+              {item.label}
+            </DropdownMenuItem>
+          </>
         ))}
-      </MenuItems>
-    </Menu>
+      </DropdownMenuContent>
+    </DropdownMenu>
   )
 }

package/src/components/loading.tsx

@@ -1,21 +1,19 @@
+import { Spinner } from '@clidey/ux';
 import classNames from "classnames";
 
 type ILoadingProps = {
   className?: string;
-  hideText?: boolean;
+  showText?: boolean;
   loadingText?: string;
   textClassName?: string;
 }
 
-export const Loading = ({ className, hideText, loadingText, textClassName }: ILoadingProps) => {
+export const Loading = ({ className, showText = false, loadingText, textClassName }: ILoadingProps) => {
   return (
-    <div className="h-full w-full flex flex-col justify-center items-center gap-2" role="status">
-      <svg aria-hidden="true" className={classNames("w-8 h-8 text-gray-200 animate-spin fill-black/50", className)} viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
-          <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/>
-      </svg>
+    <div className="h-full w-full flex flex-col justify-center items-center gap-2 min-h-[400px]" role="status">
+      <Spinner className={className} />
       {
-        !hideText &&
+        showText &&
         <div className={classNames("text-sm text-gray-500", textClassName)}>{ loadingText ?? "Loading..."}</div>
       }
     </div>

package/src/components/navigation.tsx

@@ -1,8 +1,8 @@
 import classNames from 'classnames';
 import { useMemo } from 'preact/hooks';
+import { Link } from 'wouter-preact';
 import { usePathname } from './hooks';
 import { ALL_NAVIGATION } from './store';
-import { Link } from 'wouter-preact';
 
 export function Navigation() {
     const pathname = usePathname();
@@ -20,23 +20,25 @@ export function Navigation() {
     }, [effectivePath]);
 
     return (
-        <nav className="docucod-navigation text-base lg:text-sm">
+        <nav className="dory-navigation text-base lg:text-sm">
             <ul role="list" className="space-y-9">
                 {currentTab && (
                 <li key={currentTab.title}>
-                    <h2 className="font-display font-medium text-slate-900 dark:text-white">{currentTab.title}</h2>
+                    <h2 className="font-display font-medium text-xs">{currentTab.title}</h2>
                     {currentTab.groups.map(group => (
                         <div key={group.title}>
-                            <h3 className="mt-4 text-sm font-semibold text-slate-900 dark:text-white">{group.title}</h3>
+                            <h3 className="mt-4 text-sm font-semibold">{group.title}</h3>
                             <ul role="list" className="mt-2 space-y-2 border-l-2 border-slate-100 lg:mt-4 lg:space-y-4 lg:border-slate-200 dark:border-slate-800">
                                 {group.pages.map((page) => {
                                     const isActive = effectivePath === page.href;
                                     return (
                                         <li key={page.href} className="relative">
-                                            <Link to={page.href} className={classNames(
+                                            <Link
+                                                href={page.href}
+                                                className={classNames(
                                                 'block w-full pl-3.5 before:pointer-events-none before:absolute before:top-1/2 before:-left-1 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
                                                 {
-                                                    'font-semibold text-sky-500 before:bg-sky-500': isActive,
+                                                    'font-semibold text-brand-foreground': isActive,
                                                     'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300': !isActive
                                                 },
                                             )}>

package/src/components/notification.tsx

@@ -1,97 +1,13 @@
-import { Transition } from '@headlessui/react';
-import { CheckCircleIcon } from '@heroicons/react/24/outline';
-import { createContext, type ComponentChildren } from 'preact';
-import { useContext, useState } from 'preact/hooks';
-
-interface Notification {
-  id: number;
-  message: string;
-  description?: string;
-}
-
-interface NotificationContextType {
-  showNotification: (message: string, description?: string) => void;
-}
-
-const NotificationContext = createContext<NotificationContextType | null>(null);
+import { toast } from '@clidey/ux';
+import { InfoIcon } from 'lucide-react';
 
 export function useNotification() {
-  const context = useContext(NotificationContext);
-  if (!context) {
-    throw new Error('useNotification must be used within a NotificationProvider');
-  }
-  return context;
-}
-
-interface NotificationProviderProps {
-  children: ComponentChildren;
-}
-
-export function NotificationProvider({ children }: NotificationProviderProps) {
-  const [notifications, setNotifications] = useState<Notification[]>([]);
-
-  const showNotification = (message: string, description?: string) => {
-    const id = Date.now();
-    setNotifications(prev => [...prev, { id, message, description }]);
-
-    // Auto-dismiss after 5 seconds
-    setTimeout(() => {
-      setNotifications(prev => prev.filter(notif => notif.id !== id));
-    }, 5000);
+  return {
+    showNotification: (message: string, description?: string) => {
+      toast(message, {
+        icon: <InfoIcon className="h-4 w-4" />,
+        description: description,
+      });
+    }
   };
-
-//   const dismissNotification = (id: number) => {
-//     setNotifications(prev => prev.filter(notif => notif.id !== id));
-//   };
-
-  return (
-    <NotificationContext.Provider value={{ showNotification }}>
-      <div
-        aria-live="assertive"
-        className="pointer-events-none fixed inset-0 flex items-start justify-end px-8 py-6 sm:p-6 z-[100]"
-      >
-        <div className="flex w-full flex-col items-end space-y-4">
-          {notifications.map((notif) => (
-            <Transition
-              key={notif.id}
-              show={true}
-              enter="transform ease-out duration-300 transition"
-              enterFrom="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
-              enterTo="translate-y-0 opacity-100 sm:translate-x-0"
-              leave="transition ease-in duration-100"
-              leaveFrom="opacity-100"
-              leaveTo="opacity-0"
-            >
-              <div className="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-[#222222] shadow-lg ring-1 ring-[#444444]/5">
-                <div className="p-4">
-                  <div className="flex items-start">
-                    <div className="shrink-0">
-                      <CheckCircleIcon aria-hidden="true" className="size-6 text-green-400" />
-                    </div>
-                    <div className="ml-3 w-0 flex-1 pt-0.5">
-                      <p className="text-sm font-medium text-[#ffffff]">{notif.message}</p>
-                      {notif.description && (
-                        <p className="mt-1 text-sm text-[#aaaaaa]">{notif.description}</p>
-                      )}
-                    </div>
-                    {/* <div className="ml-4 flex shrink-0">
-                      <button
-                        type="button"
-                        onClick={() => dismissNotification(notif.id)}
-                        className="inline-flex rounded-md bg-transparent text-[#aaaaaa] hover:text-[#ffffff] focus:ring-2 focus:ring-[#444444] focus:ring-offset-2 focus:outline-hidden"
-                      >
-                        <span className="sr-only">Close</span>
-                        <XMarkIcon aria-hidden="true" className="size-5" />
-                      </button>
-                    </div> */}
-                  </div>
-                </div>
-              </div>
-            </Transition>
-          ))}
-        </div>
-      </div>
-      {children}
-    </NotificationContext.Provider>
-  );
 }

package/src/components/routes.tsx

@@ -12,7 +12,7 @@ export default function Routes() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    const links = document.querySelectorAll('.docucod-navigation a');
+    const links = document.querySelectorAll('.dory-navigation a');
     const listeners: (() => void)[] = [];
     const preloaded = new Set();
   

package/src/components/search.tsx

@@ -17,13 +17,13 @@ import {
   type JSX,
 } from 'react'
 import Highlighter from 'react-highlight-words'
-
-import { useMobileNavigation } from '../ui/mobile-navigation'
-import { useLocation } from 'wouter-preact'
+import { cn, Spinner, SearchInput as UxSearchInput } from '@clidey/ux'
 import classNames from 'classnames'
+import { useLocation } from 'wouter-preact'
+import { useMobileNavigation } from '../ui/mobile-navigation'
 import { usePathname, useSearchParams } from './hooks'
-import { ALL_NAVIGATION } from './store'
 import { search } from './search-index'
+import { ALL_NAVIGATION } from './store'
 
 type EmptyObject = Record<string, never>
 type Result = any;
@@ -89,58 +89,6 @@ function useAutocomplete({ onNavigate }: { onNavigate: () => void }) {
   return { autocomplete, autocompleteState }
 }
 
-function SearchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12.01 12a4.25 4.25 0 1 0-6.02-6 4.25 4.25 0 0 0 6.02 6Zm0 0 3.24 3.25"
-      />
-    </svg>
-  )
-}
-
-function NoResultsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  return (
-    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12.01 12a4.237 4.237 0 0 0 1.24-3c0-.62-.132-1.207-.37-1.738M12.01 12A4.237 4.237 0 0 1 9 13.25c-.635 0-1.237-.14-1.777-.388M12.01 12l3.24 3.25m-3.715-9.661a4.25 4.25 0 0 0-5.975 5.908M4.5 15.5l11-11"
-      />
-    </svg>
-  )
-}
-
-function LoadingIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
-  const id = useId()
-
-  return (
-    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
-      <circle cx="10" cy="10" r="5.5" strokeLinejoin="round" />
-      <path
-        stroke={`url(#${id})`}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M15.5 10a5.5 5.5 0 1 0-5.5 5.5"
-      />
-      <defs>
-        <linearGradient
-          id={id}
-          x1="13"
-          x2="9.5"
-          y1="9"
-          y2="15"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="currentColor" />
-          <stop offset="1" stopColor="currentColor" stopOpacity="0" />
-        </linearGradient>
-      </defs>
-    </svg>
-  )
-}
 
 function HighlightQuery({ text, query }: { text: string; query: string }) {
   return (
@@ -155,13 +103,11 @@ function HighlightQuery({ text, query }: { text: string; query: string }) {
 
 function SearchResult({
   result,
-  resultIndex,
   autocomplete,
   collection,
   query,
 }: {
   result: Result
-  resultIndex: number
   autocomplete: Autocomplete
   collection: AutocompleteCollection<Result>
   query: string
@@ -190,9 +136,6 @@ function SearchResult({
     <li
       className={classNames(
         'group block cursor-default px-4 py-3 aria-selected:bg-zinc-50 dark:aria-selected:bg-zinc-800/50',
-        {
-            'border-t border-zinc-100 dark:border-zinc-800': resultIndex > 0,
-        }
       )}
       aria-labelledby={`${id}-hierarchy ${id}-title`}
       {...autocomplete.getItemProps({
@@ -245,7 +188,13 @@ function SearchResults({
   if (collection.items.length === 0) {
     return (
       <div className="p-6 text-center">
-        <NoResultsIcon className="mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" />
+        <svg className="mx-auto h-5 w-5 stroke-zinc-900 dark:stroke-zinc-600" viewBox="0 0 20 20" fill="none" aria-hidden="true">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12.01 12a4.237 4.237 0 0 0 1.24-3c0-.62-.132-1.207-.37-1.738M12.01 12A4.237 4.237 0 0 1 9 13.25c-.635 0-1.237-.14-1.777-.388M12.01 12l3.24 3.25m-3.715-9.661a4.25 4.25 0 0 0-5.975 5.908M4.5 15.5l11-11"
+          />
+        </svg>
         <p className="mt-2 text-xs text-zinc-700 dark:text-zinc-400">
           Nothing found for{' '}
           <strong className="font-semibold break-words text-zinc-900 dark:text-white">
@@ -259,11 +208,10 @@ function SearchResults({
 
   return (
     <ul {...autocomplete.getListProps()}>
-      {collection.items.map((result, resultIndex) => (
+      {collection.items.map((result) => (
         <SearchResult
           key={result.url}
           result={result}
-          resultIndex={resultIndex}
           autocomplete={autocomplete}
           collection={collection}
           query={query}
@@ -284,18 +232,14 @@ const SearchInput = forwardRef<
   const inputProps = autocomplete.getInputProps({ inputElement: null })
 
   return (
-    <div className="group relative flex h-12">
-      <SearchIcon className="pointer-events-none absolute top-0 left-3 h-full w-5 stroke-zinc-500" />
-      <input
+    <div className="group relative flex">
+      <UxSearchInput
         ref={inputRef}
         data-autofocus
-        className={classNames(
-          'flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-hidden placeholder:text-zinc-500 focus:w-full focus:flex-none sm:text-sm dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',
-          {
+        className={cn({
             'pr-11': autocompleteState.status === 'stalled',
             'pr-4': autocompleteState.status !== 'stalled',
-          }
-        )}
+        })}
         {...inputProps}
         onKeyDown={(event) => {
           if (
@@ -317,7 +261,7 @@ const SearchInput = forwardRef<
       />
       {autocompleteState.status === 'stalled' && (
         <div className="absolute inset-y-0 right-3 flex items-center">
-          <LoadingIcon className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-emerald-400" />
+          <Spinner className="h-5 w-5 animate-spin stroke-zinc-200 text-zinc-900 dark:stroke-zinc-800 dark:text-emerald-400" />
         </div>
       )}
     </div>
@@ -424,12 +368,12 @@ function SearchDialog({
 }
 
 function useSearchProps() {
-  const buttonRef = useRef<React.ElementRef<'button'>>(null)
+  const inputRef = useRef<React.ElementRef<typeof SearchInput>>(null)
   const [open, setOpen] = useState(false)
 
   return {
-    buttonProps: {
-      ref: buttonRef,
+    inputProps: {
+      ref: inputRef,
       onClick() {
         setOpen(true)
       },
@@ -439,7 +383,7 @@ function useSearchProps() {
       setOpen: useCallback(
         (open: boolean) => {
           const { width = 0, height = 0 } =
-            buttonRef.current?.getBoundingClientRect() ?? {}
+            inputRef.current?.getBoundingClientRect?.() ?? {}
           if (!open || (width !== 0 && height !== 0)) {
             setOpen(open)
           }
@@ -451,29 +395,15 @@ function useSearchProps() {
 }
 
 export function Search() {
-  const [modifierKey, setModifierKey] = useState<string>()
-  const { buttonProps, dialogProps } = useSearchProps()
-
-  useEffect(() => {
-    setModifierKey(
-      /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform) ? '⌘' : 'Ctrl ',
-    )
-  }, [])
+  const { inputProps: buttonProps, dialogProps } = useSearchProps()
 
   return (
     <div className="hidden lg:block lg:max-w-md lg:flex-auto">
-      <button
-        type="button"
-        className="hidden h-8 w-full items-center gap-2 rounded-full bg-white pr-3 pl-2 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-white/10 dark:ring-inset dark:hover:ring-white/20"
+      <UxSearchInput
+        aria-label="Find something..."
+        placeholder="Find something..."
         {...buttonProps}
-      >
-        <SearchIcon className="h-5 w-5 stroke-current" />
-        Can I help you find something?
-        <kbd className="ml-auto text-2xs text-zinc-400 dark:text-zinc-500">
-          <kbd className="font-sans">{modifierKey}</kbd>
-          <kbd className="font-sans">K</kbd>
-        </kbd>
-      </button>
+      />
       <Suspense fallback={null}>
         <SearchDialog className="hidden lg:block" {...dialogProps} />
       </Suspense>
@@ -483,19 +413,16 @@ export function Search() {
 
 export function MobileSearch() {
   const { close } = useMobileNavigation()
-  const { buttonProps, dialogProps } = useSearchProps()
+  const { inputProps: buttonProps, dialogProps } = useSearchProps()
 
   return (
     <div className="contents lg:hidden">
-      <button
-        type="button"
-        className="relative flex size-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 lg:hidden dark:hover:bg-white/5"
+      <UxSearchInput
+        className="text-sm"
         aria-label="Find something..."
         {...buttonProps}
-      >
-        <span className="absolute size-12 [@media(pointer:fine)]:hidden" />
-        <SearchIcon className="h-8 w-8 stroke-zinc-900 dark:stroke-white" />
-      </button>
+        placeholder="Find something..."
+      />
       <Suspense fallback={null}>
         <SearchDialog
           className="lg:hidden"

package/src/components/store.ts

@@ -1,8 +1,11 @@
 import type { ComponentType } from 'preact';
 import { type RouteComponentProps } from 'wouter-preact';
 import docsConfig from '../../docs/dory.json';
+import type { DoryConfig } from '../types/config';
 import { searchIndex } from './search-index';
 
+const config = docsConfig as DoryConfig;
+
 export const ALL_PAGES = Object.fromEntries(
   Object.entries(import.meta.glob<{ default: ComponentType; }>('../../docs/**/*.mdx'))
     .map(([path, loader]) => [pathFromFilename(path), loader])
@@ -34,7 +37,7 @@ export interface Navigation {
     }>;
 }
 
-export const ALL_NAVIGATION: Navigation[] = docsConfig.navigation.tabs.map(tab => ({
+export const ALL_NAVIGATION: Navigation[] = config.navigation.tabs.map(tab => ({
     title: tab.tab,
     groups: tab.groups.map(group => ({
       title: group.group,

package/src/main.tsx

@@ -1,18 +1,22 @@
 import { render } from 'preact'
-import './index.css'
+import '@clidey/ux/styles.css';
 import { App } from './app.tsx'
 import { withMDX } from './components/mdx-provider.tsx'
 import { loadFonts } from './utils/fonts'
-import { NotificationProvider } from './components/notification.tsx'
+import { loadColors } from './utils/colors'
+import { Toaster } from '@clidey/ux'
+import { ThemeProvider } from '@clidey/ux'
 
-// Load fonts before rendering the app
+// Load fonts and colors before rendering the app
 loadFonts()
+loadColors()
 
 const AppWithMDX = withMDX(App)
 
 render(
-    <NotificationProvider>
+    <ThemeProvider storageKey="@clidey/dory/theme">
+        <Toaster />
         <AppWithMDX />
-    </NotificationProvider>,
+    </ThemeProvider>,
     document.getElementById('app')!
 )