@nikala-ui/folio 0.13.0

package/dist/registry/theme-manager.json

@@ -0,0 +1,39 @@
+{
+  "name": "theme-manager",
+  "title": "Theme Manager",
+  "description": "Zero-dependency ThemeProvider and ThemeToggle component for switching light, dark, and system themes.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "@kobalte/core",
+    "lucide-solid"
+  ],
+  "registryDependencies": [
+    "button",
+    "dropdown-menu",
+    "create-color-mode"
+  ],
+  "files": [
+    {
+      "path": "providers/theme-provider.tsx",
+      "content": "import {\n  createContext,\n  createEffect,\n  createSignal,\n  onCleanup,\n  onMount,\n  useContext,\n  type ParentComponent,\n  type Accessor,\n} from \"solid-js\";\n\nexport type Theme = \"light\" | \"dark\" | \"system\";\nexport type AccentColor = \"yellow\" | \"red\" | \"violet\" | \"sky\" | \"emerald\" | \"zinc\";\nexport type Radius = \"0\" | \"0.3\" | \"0.5\" | \"0.75\" | \"1.0\";\n\nexport interface ThemeProviderProps {\n  /** Initial default theme mode if no saved preference is found in localStorage */\n  defaultTheme?: Theme;\n  /** Initial default accent color override if needed */\n  defaultAccent?: AccentColor;\n  /** Initial default border radius override if needed */\n  defaultRadius?: Radius;\n  /** Key used to store theme preferences in localStorage */\n  storageKey?: string;\n}\n\nconst ACCENT_COLORS: Record<\n  AccentColor,\n  { light: string; dark: string; lightFg: string; darkFg: string }\n> = {\n  yellow: { light: \"oklch(0.795 0.184 86.047)\", dark: \"oklch(0.852 0.199 91.936)\", lightFg: \"oklch(0.145 0 0)\", darkFg: \"oklch(0.145 0 0)\" },\n  red: { light: \"oklch(0.577 0.245 27.325)\", dark: \"oklch(0.637 0.237 25.331)\", lightFg: \"oklch(0.985 0 0)\", darkFg: \"oklch(0.985 0 0)\" },\n  violet: { light: \"oklch(0.541 0.281 293.009)\", dark: \"oklch(0.606 0.25 292.717)\", lightFg: \"oklch(0.985 0 0)\", darkFg: \"oklch(0.985 0 0)\" },\n  sky: { light: \"oklch(0.588 0.158 241.966)\", dark: \"oklch(0.672 0.154 238.29)\", lightFg: \"oklch(0.985 0 0)\", darkFg: \"oklch(0.145 0 0)\" },\n  emerald: { light: \"oklch(0.596 0.145 163.225)\", dark: \"oklch(0.696 0.17 162.48)\", lightFg: \"oklch(0.985 0 0)\", darkFg: \"oklch(0.145 0 0)\" },\n  zinc: { light: \"oklch(0.205 0 0)\", dark: \"oklch(0.985 0 0)\", lightFg: \"oklch(0.985 0 0)\", darkFg: \"oklch(0.205 0 0)\" },\n};\n\ninterface ThemeProviderContextValue {\n  theme: Accessor<Theme>;\n  setTheme: (theme: Theme) => void;\n  accent: Accessor<AccentColor | undefined>;\n  setAccent: (accent: AccentColor) => void;\n  radius: Accessor<Radius | undefined>;\n  setRadius: (radius: Radius) => void;\n}\n\nconst ThemeProviderContext = createContext<ThemeProviderContextValue>();\n\n/**\n * Context provider managing application theme state (light/dark/system), accent colors, and border radius.\n */\nexport const ThemeProvider: ParentComponent<ThemeProviderProps> = (props) => {\n  const storageKey = props.storageKey || \"nikala-theme\";\n  const defaultTheme = props.defaultTheme || \"system\";\n\n  // Safely read saved values from localStorage without forcing unnecessary fallbacks\n  const getInitialTheme = (): Theme => {\n    if (typeof window === \"undefined\") return defaultTheme;\n    try {\n      const saved = localStorage.getItem(`${storageKey}-mode`);\n      if (saved === \"light\" || saved === \"dark\" || saved === \"system\") return saved;\n    } catch { }\n    return defaultTheme;\n  };\n\n  const getInitialAccent = (): AccentColor | undefined => {\n    if (typeof window === \"undefined\") return props.defaultAccent;\n    try {\n      const saved = localStorage.getItem(`${storageKey}-accent`);\n      if (saved && ACCENT_COLORS[saved as AccentColor]) return saved as AccentColor;\n    } catch { }\n    return props.defaultAccent;\n  };\n\n  const getInitialRadius = (): Radius | undefined => {\n    if (typeof window === \"undefined\") return props.defaultRadius;\n    try {\n      const saved = localStorage.getItem(`${storageKey}-radius`);\n      if (saved) return saved as Radius;\n    } catch { }\n    return props.defaultRadius;\n  };\n\n  const [theme, setThemeSignal] = createSignal<Theme>(getInitialTheme());\n  const [accent, setAccentSignal] = createSignal<AccentColor | undefined>(getInitialAccent());\n  const [radius, setRadiusSignal] = createSignal<Radius | undefined>(getInitialRadius());\n\n  // Applies classes and CSS custom properties when custom overrides are explicitly set\n  const applyTheme = (\n    targetTheme: Theme,\n    currentAccent: AccentColor | undefined,\n    currentRadius: Radius | undefined\n  ) => {\n    if (typeof window === \"undefined\") return;\n\n    const root = document.documentElement;\n    root.classList.remove(\"light\", \"dark\");\n\n    let resolvedDark = false;\n    if (targetTheme === \"system\") {\n      resolvedDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n      root.classList.add(resolvedDark ? \"dark\" : \"light\");\n    } else {\n      resolvedDark = targetTheme === \"dark\";\n      root.classList.add(targetTheme);\n    }\n    root.style.colorScheme = resolvedDark ? \"dark\" : \"light\";\n\n    // Override --primary CSS variables ONLY if explicitly chosen\n    if (currentAccent && ACCENT_COLORS[currentAccent]) {\n      const accentData = ACCENT_COLORS[currentAccent];\n      const primaryHex = resolvedDark ? accentData.dark : accentData.light;\n      const primaryFgHex = resolvedDark ? accentData.darkFg : accentData.lightFg;\n\n      root.style.setProperty(\"--primary\", primaryHex);\n      root.style.setProperty(\"--primary-foreground\", primaryFgHex);\n    } else {\n      root.style.removeProperty(\"--primary\");\n      root.style.removeProperty(\"--primary-foreground\");\n    }\n\n    // Override --radius CSS variable ONLY if explicitly chosen\n    if (currentRadius) {\n      root.style.setProperty(\"--radius\", `${currentRadius}rem`);\n    } else {\n      root.style.removeProperty(\"--radius\");\n    }\n  };\n\n  // Reactively apply theme updates and store preferences in localStorage\n  createEffect(() => {\n    const t = theme();\n    const a = accent();\n    const r = radius();\n\n    applyTheme(t, a, r);\n\n    if (typeof window !== \"undefined\") {\n      try {\n        localStorage.setItem(`${storageKey}-mode`, t);\n        if (a) localStorage.setItem(`${storageKey}-accent`, a);\n        else localStorage.removeItem(`${storageKey}-accent`);\n        if (r) localStorage.setItem(`${storageKey}-radius`, r);\n        else localStorage.removeItem(`${storageKey}-radius`);\n      } catch { }\n    }\n  });\n\n  onMount(() => {\n    if (typeof window === \"undefined\") return;\n\n    const mediaQuery = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n    const handleSystemChange = (e: MediaQueryListEvent) => {\n      if (theme() === \"system\") {\n        const root = document.documentElement;\n        root.classList.remove(\"light\", \"dark\");\n        root.classList.add(e.matches ? \"dark\" : \"light\");\n        root.style.colorScheme = e.matches ? \"dark\" : \"light\";\n\n        const currentAccent = accent();\n        if (currentAccent && ACCENT_COLORS[currentAccent]) {\n          const accentData = ACCENT_COLORS[currentAccent];\n          const primaryHex = e.matches ? accentData.dark : accentData.light;\n          const primaryFgHex = e.matches ? accentData.darkFg : accentData.lightFg;\n\n          root.style.setProperty(\"--primary\", primaryHex);\n          root.style.setProperty(\"--primary-foreground\", primaryFgHex);\n        }\n      }\n    };\n\n    if (mediaQuery.addEventListener) {\n      mediaQuery.addEventListener(\"change\", handleSystemChange);\n    } else if (\"addListener\" in mediaQuery) {\n      (mediaQuery as any).addListener(handleSystemChange);\n    }\n\n    onCleanup(() => {\n      if (mediaQuery.removeEventListener) {\n        mediaQuery.removeEventListener(\"change\", handleSystemChange);\n      } else if (\"removeListener\" in mediaQuery) {\n        (mediaQuery as any).removeListener(handleSystemChange);\n      }\n    });\n  });\n\n  const value: ThemeProviderContextValue = {\n    theme,\n    setTheme: (newTheme: Theme) => setThemeSignal(newTheme),\n    accent,\n    setAccent: (newAccent: AccentColor) => setAccentSignal(newAccent),\n    radius,\n    setRadius: (newRadius: Radius) => setRadiusSignal(newRadius),\n  };\n\n  return (\n    <ThemeProviderContext.Provider value={value}>\n      {props.children}\n    </ThemeProviderContext.Provider>\n  );\n};\n\n/**\n * Accesses Nikala UI theme state, accent colors, border radius, and update functions.\n */\nexport function useTheme(): ThemeProviderContextValue {\n  const context = useContext(ThemeProviderContext);\n  if (!context) {\n    throw new Error(\"useTheme must be used within a ThemeProvider\");\n  }\n  return context;\n}\n\nexport { ThemeScript, type ThemeScriptProps } from \"./theme-script\";",
+      "type": "registry:ui"
+    },
+    {
+      "path": "providers/theme-transitions.ts",
+      "content": "export type ThemeEffect = \"none\" | \"circular\" | \"fade\";\n\n/**\n * Injects required CSS view-transition pseudo-element styles to prevent browser mix-blend artifacts.\n */\nfunction ensureTransitionStyles() {\n  if (typeof document === \"undefined\") return;\n  const styleId = \"nikala-view-transition-styles\";\n  if (!document.getElementById(styleId)) {\n    const style = document.createElement(\"style\");\n    style.id = styleId;\n    style.textContent = `\n      ::view-transition-old(root),\n      ::view-transition-new(root) {\n        animation: none;\n        mix-blend-mode: normal;\n      }\n      ::view-transition-old(root) {\n        z-index: 1;\n      }\n      ::view-transition-new(root) {\n        z-index: 9999;\n      }\n    `;\n    document.head.appendChild(style);\n  }\n}\n\n/**\n * Checks whether the current environment is Linux WebKitGTK (e.g. Tauri on Linux)\n * where CSS View Transitions pseudo-element animations trigger known WebProcess crashes.\n */\nfunction isLinuxWebKit(): boolean {\n  if (typeof navigator === \"undefined\") return false;\n  const ua = navigator.userAgent || \"\";\n  const isLinux = /linux/i.test(ua);\n  const isWebKit = /applewebkit/i.test(ua);\n  const isChrome = /chrome|chromium|edg/i.test(ua);\n  const isTauri = typeof window !== \"undefined\" && typeof (window as any).__TAURI_INTERNALS__ !== \"undefined\";\n\n  return isLinux && ((isWebKit && !isChrome) || isTauri);\n}\n\n/**\n * Executes a theme change with the specified transition effect using the Web View Transitions API.\n * Supported on modern browsers, Windows (Tauri WebView2), and macOS (Tauri WKWebView).\n * Automatically falls back to safe instant transitions on Linux WebKitGTK.\n *\n * @param effect - Desired transition animation (\"none\", \"circular\", \"fade\")\n * @param event - Mouse or Pointer event to calculate transition center coordinates\n * @param updateThemeCallback - Callback function performing the actual theme state change\n */\nexport function runThemeTransition(\n  effect: ThemeEffect = \"none\",\n  event: MouseEvent | undefined,\n  updateThemeCallback: () => void\n) {\n  // Safe fallback if View Transitions API is unsupported, reduced motion is preferred,\n  // or on Linux WebKitGTK where pseudo-element clipping transitions trigger WebProcess faults\n  if (\n    effect === \"none\" ||\n    typeof document === \"undefined\" ||\n    !(document as any).startViewTransition ||\n    window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ||\n    isLinuxWebKit()\n  ) {\n    updateThemeCallback();\n    return;\n  }\n\n  ensureTransitionStyles();\n\n  try {\n    // Circular expanding ripple transition originating from click coordinates\n    if (effect === \"circular\" && event) {\n      const x = event.clientX;\n      const y = event.clientY;\n\n      const endRadius = Math.hypot(\n        Math.max(x, window.innerWidth - x),\n        Math.max(y, window.innerHeight - y)\n      );\n\n      const transition = (document as any).startViewTransition(() => {\n        updateThemeCallback();\n      });\n\n      transition.ready\n        ?.then(() => {\n          document.documentElement.animate(\n            {\n              clipPath: [\n                `circle(0px at ${x}px ${y}px)`,\n                `circle(${endRadius}px at ${x}px ${y}px)`,\n              ],\n            },\n            {\n              duration: 500,\n              easing: \"ease-in-out\",\n              pseudoElement: \"::view-transition-new(root)\",\n            }\n          );\n        })\n        ?.catch(() => {\n          // Graceful fallback\n        });\n      return;\n    }\n\n    // Smooth opacity fade view transition\n    if (effect === \"fade\") {\n      const transition = (document as any).startViewTransition(() => {\n        updateThemeCallback();\n      });\n\n      transition.ready\n        ?.then(() => {\n          document.documentElement.animate(\n            {\n              opacity: [0, 1],\n            },\n            {\n              duration: 350,\n              easing: \"ease-in-out\",\n              pseudoElement: \"::view-transition-new(root)\",\n            }\n          );\n        })\n        ?.catch(() => {\n          // Graceful fallback\n        });\n      return;\n    }\n\n    updateThemeCallback();\n  } catch {\n    updateThemeCallback();\n  }\n}",
+      "type": "registry:ui"
+    },
+    {
+      "path": "providers/theme-script.tsx",
+      "content": "import { isServer } from \"solid-js/web\";\nimport type { Component } from \"solid-js\";\n\nexport interface ThemeScriptProps {\n  /** Storage key namespace used in localStorage (default: \"nikala-theme\") */\n  storageKey?: string;\n  /** Initial default theme mode if no saved preference exists (default: \"system\") */\n  defaultTheme?: \"light\" | \"dark\" | \"system\";\n  /** Initial default primary accent color if no saved preference exists */\n  defaultAccent?: string;\n  /** Initial default border radius if no saved preference exists */\n  defaultRadius?: string;\n}\n\n/**\n * Pre-hydration inline script executed synchronously before DOM paint to prevent theme flickering (anti-FOUC).\n */\nexport const ThemeScript: Component<ThemeScriptProps> = (props) => {\n  if (!isServer) return null;\n  const key = props.storageKey || \"nikala-theme\";\n  const defTheme = props.defaultTheme || \"system\";\n  const defAccent = props.defaultAccent || \"\";\n  const defRadius = props.defaultRadius || \"\";\n\n  const scriptText = `(function(){try{\n  var key = '${key}';\n  var mode = localStorage.getItem(key + '-mode') || '${defTheme}';\n  var accent = localStorage.getItem(key + '-accent') || '${defAccent}';\n  var radius = localStorage.getItem(key + '-radius') || '${defRadius}';\n\n  var isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n  var resolvedDark = mode === 'dark' || (mode === 'system' && isDark);\n\n  var root = document.documentElement;\n  root.classList.remove('light', 'dark');\n  root.classList.add(resolvedDark ? 'dark' : 'light');\n  root.style.colorScheme = resolvedDark ? 'dark' : 'light';\n\n  var colorMap = {\n    yellow: {\n      primary: resolvedDark ? 'oklch(0.852 0.199 91.936)' : 'oklch(0.795 0.184 86.047)',\n      foreground: 'oklch(0.145 0 0)'\n    },\n    red: {\n      primary: resolvedDark ? 'oklch(0.637 0.237 25.331)' : 'oklch(0.577 0.245 27.325)',\n      foreground: 'oklch(0.985 0 0)'\n    },\n    violet: {\n      primary: resolvedDark ? 'oklch(0.606 0.25 292.717)' : 'oklch(0.541 0.281 293.009)',\n      foreground: 'oklch(0.985 0 0)'\n    },\n    sky: {\n      primary: resolvedDark ? 'oklch(0.672 0.154 238.29)' : 'oklch(0.588 0.158 241.966)',\n      foreground: resolvedDark ? 'oklch(0.145 0 0)' : 'oklch(0.985 0 0)'\n    },\n    emerald: {\n      primary: resolvedDark ? 'oklch(0.696 0.17 162.48)' : 'oklch(0.596 0.145 163.225)',\n      foreground: resolvedDark ? 'oklch(0.145 0 0)' : 'oklch(0.985 0 0)'\n    },\n    zinc: {\n      primary: resolvedDark ? 'oklch(0.985 0 0)' : 'oklch(0.205 0 0)',\n      foreground: resolvedDark ? 'oklch(0.205 0 0)' : 'oklch(0.985 0 0)'\n    }\n  };\n\n  if (accent && colorMap[accent]) {\n    root.style.setProperty('--primary', colorMap[accent].primary);\n    root.style.setProperty('--primary-foreground', colorMap[accent].foreground);\n  }\n\n  if (radius) {\n    var radVal = radius.endsWith('rem') ? radius : radius + 'rem';\n    root.style.setProperty('--radius', radVal);\n  }\n}catch(e){}})();`;\n\n  return <script innerHTML={scriptText} />;\n};",
+      "type": "registry:ui"
+    },
+    {
+      "path": "ui/theme-toggle.tsx",
+      "content": "import { splitProps, type Component, For, Show, type JSX } from \"solid-js\";\nimport { Sun, Moon, Monitor } from \"lucide-solid\";\nimport {\n  useTheme,\n  type AccentColor,\n  type Radius,\n  type Theme,\n} from \"../../providers/theme-provider\";\nimport {\n  runThemeTransition,\n  type ThemeEffect,\n} from \"../../providers/theme-transitions\";\nimport { Button, type ButtonProps } from \"./button\";\nimport {\n  DropdownMenu,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n} from \"./dropdown-menu\";\nimport { cn } from \"@/lib/cn\";\n\nexport interface ThemeToggleProps\n  extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n  /** Display mode: \"button\" (direct 1-click toggle), \"mini\" (compact dropdown), \"max\" (full customizer panel). Defaults to \"mini\". */\n  mode?: \"button\" | \"mini\" | \"max\";\n  /** Transition animation effect when changing themes (\"none\", \"circular\", \"fade\") */\n  effect?: ThemeEffect;\n  /** Button visual style variant when rendered as a button or dropdown trigger */\n  variant?: ButtonProps[\"variant\"];\n  /** Button size */\n  size?: ButtonProps[\"size\"];\n  class?: string;\n}\n\nconst ACCENT_OPTIONS: { name: AccentColor; label: string; color: string }[] = [\n  { name: \"yellow\", label: \"Yellow\", color: \"bg-yellow-500\" },\n  { name: \"red\", label: \"Red\", color: \"bg-red-500\" },\n  { name: \"violet\", label: \"Violet\", color: \"bg-violet-500\" },\n  { name: \"sky\", label: \"Sky\", color: \"bg-sky-500\" },\n  { name: \"emerald\", label: \"Emerald\", color: \"bg-emerald-500\" },\n  { name: \"zinc\", label: \"Zinc\", color: \"bg-zinc-800 dark:bg-zinc-200\" },\n];\n\nconst RADIUS_OPTIONS: { value: Radius; label: string }[] = [\n  { value: \"0\", label: \"0\" },\n  { value: \"0.3\", label: \"0.3\" },\n  { value: \"0.5\", label: \"0.5\" },\n  { value: \"0.75\", label: \"0.75\" },\n  { value: \"1.0\", label: \"1.0\" },\n];\n\n/**\n * Interactive UI theme switcher supporting button, mini (dropdown), and max (customizer panel) modes with View Transition animations.\n */\nexport const ThemeToggle: Component<ThemeToggleProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"mode\", \"effect\", \"variant\", \"size\", \"class\"]);\n  const { theme, setTheme, accent, setAccent, radius, setRadius } = useTheme();\n\n  const mode = () => local.mode || \"mini\";\n  const effect = () => local.effect || \"none\";\n\n  /* Reactive accessor determining whether dark mode is active */\n  const isDarkMode = () => {\n    const currentTheme = theme();\n    if (currentTheme === \"dark\") return true;\n    if (currentTheme === \"light\") return false;\n    if (typeof window !== \"undefined\") {\n      return window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n    }\n    return false;\n  };\n\n  const changeThemeWithEffect = (newTheme: Theme, e: MouseEvent) => {\n    runThemeTransition(effect(), e, () => {\n      setTheme(newTheme);\n    });\n  };\n\n  const handleToggleClick = (e: MouseEvent) => {\n    const nextTheme: Theme = isDarkMode() ? \"light\" : \"dark\";\n    changeThemeWithEffect(nextTheme, e);\n  };\n\n  return (\n    <Show\n      when={mode() !== \"button\"}\n      fallback={\n        /* Button Mode: Direct 1-click Dark/Light switcher without dropdown */\n        <Button\n          variant={local.variant || \"ghost\"}\n          size={local.size || \"icon\"}\n          onClick={handleToggleClick}\n          class={cn(\"relative cursor-pointer\", local.class)}\n          aria-label=\"Toggle theme\"\n          {...rest}\n        >\n          <Show\n            when={isDarkMode()}\n            fallback={<Sun class=\"h-4 w-4 text-foreground transition-transform\" />}\n          >\n            <Moon class=\"h-4 w-4 text-foreground transition-transform\" />\n          </Show>\n          <span class=\"sr-only\">Toggle theme</span>\n        </Button>\n      }\n    >\n      <DropdownMenu placement=\"bottom-end\">\n        <DropdownMenuTrigger\n          as={Button}\n          variant={local.variant || \"ghost\"}\n          size={local.size || \"icon\"}\n          class={cn(\"relative cursor-pointer\", local.class)}\n          {...rest}\n        >\n          {/* Reactive Sun / Moon Icon Toggle */}\n          <Show\n            when={isDarkMode()}\n            fallback={<Sun class=\"h-4 w-4 text-foreground transition-transform\" />}\n          >\n            <Moon class=\"h-4 w-4 text-foreground transition-transform\" />\n          </Show>\n          <span class=\"sr-only\">Toggle theme</span>\n        </DropdownMenuTrigger>\n\n        <Show\n          when={mode() === \"max\"}\n          fallback={\n            /* Mini Mode: Compact Dropdown */\n            <DropdownMenuContent>\n              <DropdownMenuItem onClick={(e: MouseEvent) => changeThemeWithEffect(\"light\", e)}>\n                <Sun class=\"mr-2 h-4 w-4 text-muted-foreground\" />\n                Light\n              </DropdownMenuItem>\n\n              <DropdownMenuItem onClick={(e: MouseEvent) => changeThemeWithEffect(\"dark\", e)}>\n                <Moon class=\"mr-2 h-4 w-4 text-muted-foreground\" />\n                Dark\n              </DropdownMenuItem>\n\n              <DropdownMenuItem onClick={(e: MouseEvent) => changeThemeWithEffect(\"system\", e)}>\n                <Monitor class=\"mr-2 h-4 w-4 text-muted-foreground\" />\n                System\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          }\n        >\n          {/* Max Mode: Full Theme Customizer Panel */}\n          <DropdownMenuContent class=\"w-64\">\n            <div class=\"p-2 space-y-2\">\n              <DropdownMenuGroup>\n                <DropdownMenuLabel class=\"px-0 pt-0 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  Theme Mode\n                </DropdownMenuLabel>\n                <div class=\"grid grid-cols-3 gap-1 my-1.5\">\n                  <Button\n                    variant={theme() === \"light\" ? \"default\" : \"outline\"}\n                    size=\"sm\"\n                    onClick={(e: MouseEvent) => changeThemeWithEffect(\"light\", e)}\n                    class=\"h-8 text-xs cursor-pointer\"\n                  >\n                    Light\n                  </Button>\n                  <Button\n                    variant={theme() === \"dark\" ? \"default\" : \"outline\"}\n                    size=\"sm\"\n                    onClick={(e: MouseEvent) => changeThemeWithEffect(\"dark\", e)}\n                    class=\"h-8 text-xs cursor-pointer\"\n                  >\n                    Dark\n                  </Button>\n                  <Button\n                    variant={theme() === \"system\" ? \"default\" : \"outline\"}\n                    size=\"sm\"\n                    onClick={(e: MouseEvent) => changeThemeWithEffect(\"system\", e)}\n                    class=\"h-8 text-xs cursor-pointer\"\n                  >\n                    System\n                  </Button>\n                </div>\n              </DropdownMenuGroup>\n\n              <DropdownMenuSeparator class=\"my-2\" />\n\n              <DropdownMenuGroup>\n                <DropdownMenuLabel class=\"px-0 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  Brand Accent Color\n                </DropdownMenuLabel>\n                <div class=\"flex flex-wrap gap-1.5 my-1.5\">\n                  <For each={ACCENT_OPTIONS}>\n                    {(opt) => (\n                      <button\n                        type=\"button\"\n                        title={opt.label}\n                        onClick={() => setAccent(opt.name)}\n                        class={cn(\n                          \"h-6 w-6 rounded-md transition-all cursor-pointer border border-border flex items-center justify-center\",\n                          opt.color,\n                          accent() === opt.name\n                            ? \"ring-2 ring-primary ring-offset-2 ring-offset-background scale-110\"\n                            : \"hover:scale-105\"\n                        )}\n                      />\n                    )}\n                  </For>\n                </div>\n              </DropdownMenuGroup>\n\n              <DropdownMenuSeparator class=\"my-2\" />\n\n              <DropdownMenuGroup>\n                <DropdownMenuLabel class=\"px-0 text-xs font-semibold uppercase tracking-wider text-muted-foreground\">\n                  Border Radius\n                </DropdownMenuLabel>\n                <div class=\"grid grid-cols-5 gap-1 my-1.5\">\n                  <For each={RADIUS_OPTIONS}>\n                    {(r) => (\n                      <Button\n                        variant={radius() === r.value ? \"default\" : \"outline\"}\n                        size=\"sm\"\n                        onClick={() => setRadius(r.value)}\n                        class=\"h-7 text-xs px-1 cursor-pointer\"\n                      >\n                        {r.label}\n                      </Button>\n                    )}\n                  </For>\n                </div>\n              </DropdownMenuGroup>\n            </div>\n          </DropdownMenuContent>\n        </Show>\n      </DropdownMenu>\n    </Show>\n  );\n};",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/registry/tooltip.json

@@ -0,0 +1,18 @@
+{
+  "name": "tooltip",
+  "title": "Tooltip",
+  "description": "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it, built on Kobalte primitives.",
+  "type": "registry:ui",
+  "dependencies": [
+    "clsx",
+    "tailwind-merge",
+    "@kobalte/core"
+  ],
+  "files": [
+    {
+      "path": "ui/tooltip.tsx",
+      "content": "import { splitProps, type Component, type ComponentProps } from \"solid-js\";\nimport { Tooltip as KobalteTooltip } from \"@kobalte/core/tooltip\";\nimport { cn } from \"@/lib/cn\";\n\nexport const Tooltip = KobalteTooltip;\n\nexport const TooltipTrigger = KobalteTooltip.Trigger;\n\nexport const TooltipArrow: Component<ComponentProps<typeof KobalteTooltip.Arrow>> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"]);\n\n  return (\n    <KobalteTooltip.Arrow\n      size={8}\n      class={cn(\"fill-popover stroke-border\", local.class)}\n      {...rest}\n    />\n  );\n};\n\nexport interface TooltipContentProps extends ComponentProps<typeof KobalteTooltip.Content> {\n  class?: string;\n}\n\nexport const TooltipContent: Component<TooltipContentProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"children\"]);\n\n  return (\n    <KobalteTooltip.Portal>\n      <KobalteTooltip.Content\n        class={cn(\n          \"z-50 rounded-md border border-border bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-md transition-all animate-in fade-in-0 zoom-in-95 data-closed:animate-out data-[closed]:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n          local.class\n        )}\n        {...rest}\n      >\n        {local.children}\n      </KobalteTooltip.Content>\n    </KobalteTooltip.Portal>\n  );\n};",
+      "type": "registry:ui"
+    }
+  ]
+}

package/dist/search/provider.d.ts

@@ -0,0 +1,14 @@
+import type { DocsConfig } from "../types.js";
+export type BuiltInSearchProvider = "local";
+export interface ResolvedSearchProvider {
+    requested: NonNullable<DocsConfig["search"]>["provider"];
+    active: BuiltInSearchProvider;
+    fallback: boolean;
+}
+/**
+ * Resolve the configured search provider to an implementation available in
+ * the default theme. External indexes can be added later without changing
+ * the configuration contract or leaving the search dialog non-functional.
+ */
+export declare function resolveSearchProvider(search?: DocsConfig["search"]): ResolvedSearchProvider;
+//# sourceMappingURL=provider.d.ts.map

package/dist/search/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../src/search/provider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC;AAE5C,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,WAAW,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC;IACzD,MAAM,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,QAAQ,CAAC,GAAG,sBAAsB,CAO3F"}

package/dist/search/provider.js

@@ -0,0 +1,14 @@
+/**
+ * Resolve the configured search provider to an implementation available in
+ * the default theme. External indexes can be added later without changing
+ * the configuration contract or leaving the search dialog non-functional.
+ */
+export function resolveSearchProvider(search) {
+    const requested = search?.provider || "local";
+    return {
+        requested,
+        active: "local",
+        fallback: requested !== "local",
+    };
+}
+//# sourceMappingURL=provider.js.map

package/dist/search/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../src/search/provider.ts"],"names":[],"mappings":"AAUA;;;;GAIG;AACH,MAAM,UAAU,qBAAqB,CAAC,MAA6B;IACjE,MAAM,SAAS,GAAG,MAAM,EAAE,QAAQ,IAAI,OAAO,CAAC;IAC9C,OAAO;QACL,SAAS;QACT,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,SAAS,KAAK,OAAO;KAChC,CAAC;AACJ,CAAC"}

package/dist/server/index.d.ts

@@ -0,0 +1,18 @@
+import { type ViteDevServer } from "vite";
+import type { DocsConfig } from "../types.js";
+export interface DocsServerOptions {
+    root?: string;
+    docsDir?: string;
+    port?: number;
+    host?: string | boolean;
+    open?: boolean;
+    config?: DocsConfig;
+    outDir?: string;
+}
+export declare function getClientDir(): string;
+export declare function createDocsServer(options?: DocsServerOptions): Promise<ViteDevServer>;
+export declare function buildDocs(options?: DocsServerOptions): Promise<void>;
+export declare function createDocsRequestHandler(options?: DocsServerOptions): Promise<(request: Request) => Promise<Response>>;
+export declare function previewDocs(options?: DocsServerOptions): Promise<void>;
+export * from "./plugin.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/server/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/server/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAuB,KAAK,aAAa,EAAqB,MAAM,MAAM,CAAC;AAMlF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAI9C,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAKD,wBAAgB,YAAY,IAAI,MAAM,CAIrC;AA8YD,wBAAsB,gBAAgB,CAAC,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,aAAa,CAAC,CAwD9F;AAED,wBAAsB,SAAS,CAAC,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAgB9E;AAwBD,wBAAsB,wBAAwB,CAAC,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,OAAO,CAAC,QAAQ,CAAC,CAAC,CAkDhI;AAED,wBAAsB,WAAW,CAAC,OAAO,GAAE,iBAAsB,GAAG,OAAO,CAAC,IAAI,CAAC,CAyBhF;AAsBD,cAAc,aAAa,CAAC"}