@dreamlake/dockit 0.1.1

package/dist/components/TabStrip.js

@@ -0,0 +1,105 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useLayoutEffect } from "react";
+import { usePageContext } from "vike-react/usePageContext";
+import { tabForUrl, TABS } from "../lib/tabs.js";
+const SPRING = "cubic-bezier(0.4, 0.7, 0.3, 1)";
+function TabStrip() {
+  const { urlPathname } = usePageContext();
+  const activeTab = tabForUrl(urlPathname);
+  const containerRef = useRef(null);
+  const linkRefs = useRef({});
+  const [hovered, setHovered] = useState(null);
+  const [bar, setBar] = useState({
+    left: 0,
+    width: 0,
+    ready: false
+  });
+  const targetTab = hovered ?? activeTab;
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    const target = linkRefs.current[targetTab];
+    if (!container || !target) return;
+    const cR = container.getBoundingClientRect();
+    const tR = target.getBoundingClientRect();
+    setBar({ left: tR.left - cR.left, width: tR.width, ready: true });
+  }, [targetTab, urlPathname]);
+  useLayoutEffect(() => {
+    function onResize() {
+      const container = containerRef.current;
+      const target = linkRefs.current[targetTab];
+      if (!container || !target) return;
+      const cR = container.getBoundingClientRect();
+      const tR = target.getBoundingClientRect();
+      setBar((b) => ({ ...b, left: tR.left - cR.left, width: tR.width }));
+    }
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [targetTab]);
+  if (TABS.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "ol",
+    {
+      ref: containerRef,
+      "aria-label": "Documentation sections",
+      className: "flex items-stretch relative m-0 p-0 list-none",
+      style: { height: "100%" },
+      onMouseLeave: () => setHovered(null),
+      children: [
+        TABS.map((tab) => {
+          const isActive = tab.id === activeTab;
+          return /* @__PURE__ */ jsx(
+            "li",
+            {
+              className: "flex items-stretch",
+              onMouseEnter: () => setHovered(tab.id),
+              children: /* @__PURE__ */ jsx(
+                "a",
+                {
+                  ref: (el) => {
+                    linkRefs.current[tab.id] = el;
+                  },
+                  href: tab.landing,
+                  "aria-current": isActive ? "page" : void 0,
+                  className: "flex items-center no-underline px-1.5 md:px-2.5",
+                  style: {
+                    fontFamily: "var(--font-doc-template-mono)",
+                    fontSize: 10,
+                    fontWeight: 600,
+                    letterSpacing: "0.12em",
+                    textTransform: "uppercase",
+                    color: isActive || hovered === tab.id ? "var(--color-doc-template-ink)" : "var(--color-doc-template-muted)",
+                    cursor: "pointer",
+                    transition: "color 0.18s ease"
+                  },
+                  children: tab.label
+                }
+              )
+            },
+            tab.id
+          );
+        }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            style: {
+              position: "absolute",
+              bottom: -13,
+              left: 0,
+              height: 3,
+              background: "var(--color-doc-template-ink)",
+              transform: `translateX(${bar.left + bar.width * 0.05}px)`,
+              width: bar.width * 0.9,
+              transition: bar.ready ? `transform 0.32s ${SPRING}, width 0.32s ${SPRING}` : "none",
+              willChange: "transform, width",
+              pointerEvents: "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  TabStrip
+};

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+export type Theme = 'light' | 'dark' | 'system';
+interface ThemeContextValue {
+    theme: Theme;
+    setTheme: (t: Theme) => void;
+}
+export declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};

package/dist/components/ThemeProvider.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useContext, createContext } from "react";
+import { useLocalStorage } from "../lib/use-local-storage.js";
+const ThemeContext = createContext({
+  theme: "system",
+  setTheme: () => {
+  }
+});
+function applyTheme(t) {
+  const root = document.documentElement;
+  if (t === "system") {
+    const dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    root.setAttribute("data-theme", dark ? "dark" : "light");
+  } else {
+    root.setAttribute("data-theme", t);
+  }
+}
+function isTheme(v) {
+  return v === "light" || v === "dark" || v === "system";
+}
+function ThemeProvider({ children }) {
+  const [stored, setStored] = useLocalStorage("theme", "system");
+  const theme = isTheme(stored) ? stored : "system";
+  useEffect(() => {
+    applyTheme(theme);
+    if (theme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => applyTheme("system");
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [theme]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { theme, setTheme: setStored }, children });
+}
+function useTheme() {
+  return useContext(ThemeContext);
+}
+export {
+  ThemeProvider,
+  useTheme
+};

package/dist/components/ThemeToggle.d.ts

@@ -0,0 +1,2 @@
+import { JSX } from 'react';
+export declare function ThemeToggle(): JSX.Element;

package/dist/components/ThemeToggle.js

@@ -0,0 +1,109 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "./ThemeProvider.js";
+import { ClientOnly } from "./ClientOnly.js";
+const SIZE = 24;
+const PAD = 2;
+const SPRING = "cubic-bezier(0.34, 1.45, 0.55, 1)";
+const LightIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    style: { width: 13, height: 13 },
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 2v2" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 20v2" }),
+      /* @__PURE__ */ jsx("path", { d: "M4.93 4.93l1.41 1.41" }),
+      /* @__PURE__ */ jsx("path", { d: "M17.66 17.66l1.41 1.41" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 12h2" }),
+      /* @__PURE__ */ jsx("path", { d: "M20 12h2" }),
+      /* @__PURE__ */ jsx("path", { d: "M4.93 19.07l1.41-1.41" }),
+      /* @__PURE__ */ jsx("path", { d: "M17.66 6.34l1.41-1.41" })
+    ]
+  }
+);
+const SystemIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    style: { width: 13, height: 13 },
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "13", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 21h8" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 17v4" })
+    ]
+  }
+);
+const DarkIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    style: { width: 13, height: 13 },
+    children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+  }
+);
+const SEGMENTS = [
+  { value: "light", label: "Light", Icon: LightIcon },
+  { value: "system", label: "System", Icon: SystemIcon },
+  { value: "dark", label: "Dark", Icon: DarkIcon }
+];
+function ToggleInner() {
+  const { theme, setTheme } = useTheme();
+  const idx = Math.max(0, SEGMENTS.findIndex((s) => s.value === theme));
+  const current = SEGMENTS[idx];
+  const next = SEGMENTS[(idx + 1) % SEGMENTS.length];
+  const Icon = current.Icon;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": `Theme: ${current.label}. Switch to ${next.label}.`,
+      title: `Theme: ${current.label} (click for ${next.label})`,
+      onClick: () => setTheme(next.value),
+      className: "inline-flex items-center justify-center bg-doc-template-panel border-0 cursor-pointer text-doc-template-muted hover:text-doc-template-ink",
+      style: {
+        width: SIZE + PAD * 2,
+        height: SIZE + PAD * 2,
+        borderRadius: 999,
+        padding: 0,
+        margin: 0,
+        transition: "color 0.25s ease, background 0.25s ease"
+      },
+      children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            display: "inline-flex",
+            animation: `theme-icon-pop 0.42s ${SPRING} both`
+          },
+          children: /* @__PURE__ */ jsx(Icon, {})
+        },
+        current.value
+      )
+    }
+  );
+}
+function ThemeToggle() {
+  return /* @__PURE__ */ jsx(ClientOnly, { children: /* @__PURE__ */ jsx(ToggleInner, {}) });
+}
+export {
+  ThemeToggle
+};

package/dist/components/Topbar.d.ts

@@ -0,0 +1,9 @@
+interface TopbarProps {
+    searchOpen: boolean;
+    onOpenSearch: () => void;
+    onCloseSearch: () => void;
+    query: string;
+    setQuery: (q: string) => void;
+}
+export declare function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }: TopbarProps): import("react").JSX.Element;
+export {};