fromsrc 0.0.0 → 0.0.1

package/dist/components/list.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { IconCheck, IconX, IconCircle } from './icons';
+
+function CheckListBase({ children }) {
+  return /* @__PURE__ */ jsx("ul", { className: "my-4 space-y-2", role: "list", children });
+}
+const CheckList = memo(CheckListBase);
+function CheckItemBase({ checked = true, children }) {
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: "flex items-start gap-2",
+      role: "listitem",
+      "aria-label": checked ? "included" : "not included",
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: checked ? /* @__PURE__ */ jsx(IconCheck, { size: 16, className: "mt-0.5 text-emerald-400 shrink-0" }) : /* @__PURE__ */ jsx(IconX, { size: 16, className: "mt-0.5 text-red-400 shrink-0" }) }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted", children })
+      ]
+    }
+  );
+}
+const CheckItem = memo(CheckItemBase);
+function BulletListBase({ children }) {
+  return /* @__PURE__ */ jsx("ul", { className: "my-4 space-y-2", role: "list", children });
+}
+const BulletList = memo(BulletListBase);
+function BulletItemBase({ children }) {
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2", role: "listitem", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx(IconCircle, { size: 6, className: "mt-2 text-muted shrink-0" }) }),
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted", children })
+  ] });
+}
+const BulletItem = memo(BulletItemBase);
+function NumberListBase({ start = 1, children }) {
+  return /* @__PURE__ */ jsx("ol", { className: "my-4 space-y-2 list-none", start, role: "list", children });
+}
+const NumberList = memo(NumberListBase);
+function NumberItemBase({ number, children }) {
+  return /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", role: "listitem", value: number, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-surface border border-line text-xs font-medium text-muted",
+        "aria-hidden": "true",
+        children: number
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "text-sm text-muted", children })
+  ] });
+}
+const NumberItem = memo(NumberItemBase);
+
+export { BulletItem, BulletList, CheckItem, CheckList, NumberItem, NumberList };

package/dist/components/math.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+/**
+ * Props for the Math component
+ */
+interface MathProps {
+    /** LaTeX content to render */
+    children: ReactNode;
+    /** Whether to render as block display mode */
+    display?: boolean;
+}
+declare function MathBase({ children, display }: MathProps): JSX.Element;
+declare const Math: react.MemoExoticComponent<typeof MathBase>;
+/**
+ * Props for the BlockMath component
+ */
+interface BlockMathProps {
+    /** LaTeX content to render as a block */
+    children: ReactNode;
+}
+declare function BlockMathBase({ children }: BlockMathProps): JSX.Element;
+declare const BlockMath: react.MemoExoticComponent<typeof BlockMathBase>;
+/**
+ * Props for the InlineMath component
+ */
+interface InlineMathProps {
+    /** LaTeX content to render inline */
+    children: ReactNode;
+}
+declare function InlineMathBase({ children }: InlineMathProps): JSX.Element;
+declare const InlineMath: react.MemoExoticComponent<typeof InlineMathBase>;
+
+export { BlockMath, type BlockMathProps, InlineMath, type InlineMathProps, Math, type MathProps };

package/dist/components/math.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect } from 'react';
+
+function extractText(children) {
+  if (typeof children === "string") return children;
+  if (typeof children === "number") return String(children);
+  if (Array.isArray(children)) return children.map(extractText).join("");
+  if (children && typeof children === "object" && "props" in children) {
+    return extractText(children.props.children);
+  }
+  return "";
+}
+function MathBase({ children, display = false }) {
+  const text = extractText(children);
+  const [html, setHtml] = useState("");
+  useEffect(() => {
+    let mounted = true;
+    async function render() {
+      try {
+        const module = await import('katex');
+        const katex = module.default;
+        const rendered = katex.renderToString(text, {
+          displayMode: display,
+          throwOnError: false
+        });
+        if (mounted) setHtml(rendered);
+      } catch {
+        if (mounted) setHtml(text);
+      }
+    }
+    render();
+    return () => {
+      mounted = false;
+    };
+  }, [text, display]);
+  if (!html) {
+    return display ? /* @__PURE__ */ jsx("div", { className: "my-4 animate-pulse h-8 bg-surface/30 rounded", "aria-hidden": "true" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true" });
+  }
+  if (display) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "my-4 overflow-x-auto",
+        role: "math",
+        "aria-label": text,
+        dangerouslySetInnerHTML: { __html: html }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { role: "math", "aria-label": text, dangerouslySetInnerHTML: { __html: html } });
+}
+const Math = memo(MathBase);
+function BlockMathBase({ children }) {
+  return /* @__PURE__ */ jsx(Math, { display: true, children });
+}
+const BlockMath = memo(BlockMathBase);
+function InlineMathBase({ children }) {
+  return /* @__PURE__ */ jsx(Math, { children });
+}
+const InlineMath = memo(InlineMathBase);
+
+export { BlockMath, InlineMath, Math };

package/dist/components/mermaid.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+
+/**
+ * Props for the Mermaid diagram component
+ */
+interface MermaidProps {
+    /** Mermaid diagram definition string */
+    chart: string;
+    /** Accessible label describing the diagram */
+    label?: string;
+}
+/**
+ * Configuration options for mermaid initialization
+ */
+declare function MermaidBase({ chart, label }: MermaidProps): ReactElement;
+declare const Mermaid: react.MemoExoticComponent<typeof MermaidBase>;
+
+export { Mermaid, type MermaidProps };

package/dist/components/mermaid.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useId, useState, useEffect } from 'react';
+
+function MermaidBase({ chart, label }) {
+  const id = useId();
+  const [svg, setSvg] = useState("");
+  const [error, setError] = useState(false);
+  useEffect(() => {
+    if (!chart.trim()) {
+      setError(true);
+      return;
+    }
+    let mounted = true;
+    async function render() {
+      try {
+        const module = await import(/* webpackIgnore: true */ 'mermaid');
+        const mermaid = module.default;
+        mermaid.initialize({
+          startOnLoad: false,
+          securityLevel: "loose",
+          fontFamily: "inherit",
+          theme: "dark"
+        });
+        const { svg: rendered } = await mermaid.render(
+          id.replace(/:/g, ""),
+          chart.replaceAll("\\n", "\n")
+        );
+        if (mounted) {
+          setSvg(rendered);
+          setError(false);
+        }
+      } catch {
+        if (mounted) {
+          setError(true);
+        }
+      }
+    }
+    render();
+    return () => {
+      mounted = false;
+    };
+  }, [chart, id]);
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "alert",
+        "aria-live": "assertive",
+        className: "my-4 p-4 rounded-lg border border-red-500/30 bg-red-500/10 text-red-400 text-sm",
+        children: "error"
+      }
+    );
+  }
+  if (!svg) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "status",
+        "aria-label": "loading diagram",
+        "aria-busy": "true",
+        className: "my-4 p-8 rounded-lg border border-line bg-surface/30 animate-pulse",
+        children: /* @__PURE__ */ jsx("div", { className: "h-32 bg-surface/50 rounded", "aria-hidden": "true" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "figure",
+    {
+      role: "img",
+      "aria-label": label || "diagram",
+      className: "my-4 overflow-x-auto [&_svg]:mx-auto",
+      dangerouslySetInnerHTML: { __html: svg }
+    }
+  );
+}
+const Mermaid = memo(MermaidBase);
+
+export { Mermaid };

package/dist/components/mobilenav.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode, JSX } from 'react';
+import { DocMeta } from '../content.js';
+import { SidebarSection } from './sidebar.js';
+import 'zod';
+import '../schema.js';
+
+interface MobileNavProps {
+    title: string;
+    logo?: ReactNode;
+    navigation: SidebarSection[];
+    docs: DocMeta[];
+    basePath?: string;
+    github?: string;
+}
+declare function MobileNav({ title, logo, navigation, docs, basePath, github, }: MobileNavProps): JSX.Element;
+
+export { MobileNav, type MobileNavProps };

package/dist/components/mobilenav.js

@@ -0,0 +1,263 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { useFocusTrap } from '../hooks/focustrap';
+import { useScrollLock } from '../hooks/scrolllock';
+import { NavLink } from './navlink';
+import { Search } from './search';
+
+function MobileFolder({ folder, basePath, onNavigate }) {
+  const pathname = usePathname();
+  const isActive = folder.href && pathname === folder.href;
+  const hasActiveChild = folder.items.some((item) => {
+    if (item.type === "folder") {
+      return item.items.some((child) => child.type === "item" && pathname === child.href);
+    }
+    return item.type === "item" && pathname === item.href;
+  });
+  const [open, setOpen] = useState(folder.defaultOpen ?? false);
+  useEffect(() => {
+    if (hasActiveChild || isActive) setOpen(true);
+  }, [hasActiveChild, isActive]);
+  const toggle = useCallback(() => {
+    setOpen((prev) => !prev);
+  }, []);
+  return /* @__PURE__ */ jsxs("li", { role: "none", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+      folder.href ? /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: folder.href,
+          onClick: onNavigate,
+          prefetch: true,
+          "aria-current": isActive ? "page" : void 0,
+          className: `flex-1 flex items-center gap-2 px-2 py-2.5 min-h-[44px] text-xs rounded-md transition-colors focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg ${isActive ? "text-fg bg-surface" : "text-muted hover:text-fg active:text-fg"}`,
+          children: [
+            folder.icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4 shrink-0", children: folder.icon }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: folder.title })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: toggle,
+          "aria-expanded": open,
+          className: "flex-1 flex items-center gap-2 px-2 py-2.5 min-h-[44px] text-xs text-muted hover:text-fg active:text-fg rounded-md transition-colors focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg",
+          children: [
+            folder.icon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4 shrink-0", children: folder.icon }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: folder.title })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: toggle,
+          "aria-expanded": open,
+          "aria-label": open ? "collapse" : "expand",
+          className: "p-2.5 min-w-[44px] min-h-[44px] flex items-center justify-center text-muted hover:text-fg active:text-fg transition-colors focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded-md",
+          children: /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: `w-4 h-4 transition-transform ${open ? "" : "-rotate-90"}`,
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsx("ul", { role: "group", className: "mt-0.5 ml-2 pl-2 border-l border-line space-y-0.5", children: folder.items.map((item) => {
+      if (item.type === "folder") {
+        return /* @__PURE__ */ jsx(
+          MobileFolder,
+          {
+            folder: item,
+            basePath,
+            onNavigate
+          },
+          item.title
+        );
+      }
+      return /* @__PURE__ */ jsx("li", { role: "none", children: /* @__PURE__ */ jsx(NavLink, { href: item.href, icon: item.icon, onClick: onNavigate, children: item.title }) }, item.href);
+    }) })
+  ] });
+}
+function MobileNav({
+  title,
+  logo,
+  navigation,
+  docs,
+  basePath = "/docs",
+  github
+}) {
+  const [open, setOpen] = useState(false);
+  const [closing, setClosing] = useState(false);
+  const pathname = usePathname();
+  const closeRef = useRef(null);
+  const openRef = useRef(null);
+  const drawerRef = useRef(null);
+  useEffect(() => {
+    setOpen(false);
+  }, [pathname]);
+  useScrollLock(open);
+  useEffect(() => {
+    if (open) {
+      closeRef.current?.focus();
+    }
+  }, [open]);
+  const openMenu = useCallback(() => {
+    setOpen(true);
+  }, []);
+  const close = useCallback(() => {
+    setClosing(true);
+    setTimeout(() => {
+      setOpen(false);
+      setClosing(false);
+      openRef.current?.focus();
+    }, 200);
+  }, []);
+  useFocusTrap(drawerRef, { enabled: open, onEscape: close, restoreFocus: false });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("header", { className: "lg:hidden sticky top-0 z-40 flex items-center justify-between px-4 h-14 border-b border-line bg-bg", children: [
+      /* @__PURE__ */ jsxs(
+        Link,
+        {
+          href: "/",
+          className: "flex items-center gap-2 text-sm text-fg min-h-[44px] focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded-md",
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "p-1 rounded-lg bg-surface border border-line", children: logo }),
+            title
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: openRef,
+          type: "button",
+          onClick: openMenu,
+          "aria-expanded": open,
+          "aria-haspopup": "dialog",
+          "aria-controls": "mobile-nav-drawer",
+          className: "p-2.5 min-w-[44px] min-h-[44px] flex items-center justify-center text-muted hover:text-fg active:text-fg transition-colors focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded-md",
+          "aria-label": "open menu",
+          children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", fill: "currentColor", className: "size-5", children: /* @__PURE__ */ jsx("path", { d: "M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 010 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 000 1.5h12.5a.75.75 0 000-1.5H1.75z" }) })
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: "lg:hidden fixed inset-0 z-50", role: "presentation", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `absolute inset-0 bg-bg/80 backdrop-blur-sm cursor-default ${closing ? "animate-fadeout" : "animate-fadein"}`,
+          onClick: close,
+          "aria-label": "close menu",
+          tabIndex: -1
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "aside",
+        {
+          id: "mobile-nav-drawer",
+          ref: drawerRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": "navigation menu",
+          className: `absolute top-0 right-0 bottom-0 w-[85vw] max-w-[400px] bg-bg border-l border-line shadow-2xl flex flex-col ${closing ? "animate-slideout" : "animate-slidein"}`,
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 h-14 border-b border-line", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-fg font-medium", children: title }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: closeRef,
+                  type: "button",
+                  onClick: close,
+                  className: "p-2.5 min-w-[44px] min-h-[44px] flex items-center justify-center text-muted hover:text-fg active:text-fg transition-colors focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded-md",
+                  "aria-label": "close menu",
+                  children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", fill: "currentColor", className: "size-5", children: /* @__PURE__ */ jsx("path", { d: "M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" }) })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx(Search, { basePath, docs }) }),
+            /* @__PURE__ */ jsx(
+              "nav",
+              {
+                "aria-label": "main navigation",
+                className: "flex-1 px-4 pb-4 overflow-y-auto overscroll-contain [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none] [-webkit-overflow-scrolling:touch]",
+                children: navigation.map((section) => /* @__PURE__ */ jsxs("div", { className: "mb-6", role: "region", "aria-label": section.title, children: [
+                  /* @__PURE__ */ jsx("h3", { className: "px-2 mb-2 text-[11px] text-muted uppercase tracking-wider", children: section.title }),
+                  /* @__PURE__ */ jsx("ul", { role: "list", className: "space-y-0.5", children: section.items.map((item, i) => {
+                    if (!("type" in item)) {
+                      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+                        NavLink,
+                        {
+                          href: item.slug ? `${basePath}/${item.slug}` : basePath,
+                          onClick: close,
+                          children: item.title
+                        }
+                      ) }, item.slug || i);
+                    }
+                    if (item.type === "folder") {
+                      return /* @__PURE__ */ jsx(
+                        MobileFolder,
+                        {
+                          folder: item,
+                          basePath,
+                          onNavigate: close
+                        },
+                        i
+                      );
+                    }
+                    return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { href: item.href, icon: item.icon, onClick: close, children: item.title }) }, i);
+                  }) })
+                ] }, section.title))
+              }
+            ),
+            github && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-t border-line", children: /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href: github,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                "aria-label": "view on github",
+                className: "flex items-center gap-2 px-2 py-2.5 min-h-[44px] text-xs text-muted hover:text-fg active:text-fg transition-colors focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg rounded-md",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "svg",
+                    {
+                      className: "w-4 h-4",
+                      fill: "currentColor",
+                      viewBox: "0 0 24 24",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsx(
+                        "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"
+                        }
+                      )
+                    }
+                  ),
+                  "github"
+                ]
+              }
+            ) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+export { MobileNav };

package/dist/components/modal.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode, JSX } from 'react';
+
+/**
+ * Props for the Modal component.
+ * @property open - Controls modal visibility
+ * @property onClose - Callback invoked when modal should close
+ * @property title - Optional heading displayed in modal header
+ * @property children - Content rendered inside the modal body
+ */
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: ReactNode;
+}
+declare function Modal({ open, onClose, title, children }: ModalProps): JSX.Element | null;
+
+export { Modal, type ModalProps };

package/dist/components/modal.js

@@ -0,0 +1,69 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId, useRef, useState, useCallback, useEffect } from 'react';
+import { useFocusTrap } from '../hooks/focustrap';
+import { useScrollLock } from '../hooks/scrolllock';
+import { IconX } from './icons';
+
+function Modal({ open, onClose, title, children }) {
+  const id = useId();
+  const dialogRef = useRef(null);
+  const [visible, setVisible] = useState(false);
+  const [animate, setAnimate] = useState(false);
+  const titleId = title ? `modal-title-${id}` : void 0;
+  const handleBackdropClick = useCallback(() => {
+    onClose();
+  }, [onClose]);
+  useScrollLock(open);
+  useFocusTrap(dialogRef, { enabled: visible, onEscape: onClose });
+  useEffect(() => {
+    if (open) {
+      setVisible(true);
+      requestAnimationFrame(() => setAnimate(true));
+    } else {
+      setAnimate(false);
+      const timeout = setTimeout(() => setVisible(false), 150);
+      return () => clearTimeout(timeout);
+    }
+  }, [open]);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `absolute inset-0 bg-black/50 backdrop-blur-sm transition-opacity duration-150 ${animate ? "opacity-100" : "opacity-0"}`,
+        onClick: handleBackdropClick,
+        "aria-label": "close modal"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: dialogRef,
+        className: `relative w-full max-w-lg rounded-lg border border-line bg-bg p-6 shadow-xl transition-all duration-150 ${animate ? "scale-100 opacity-100" : "scale-95 opacity-0"}`,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+            title ? /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-lg font-semibold", children: title }) : /* @__PURE__ */ jsx("div", {}),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: handleBackdropClick,
+                className: "rounded p-1 text-muted hover:bg-surface hover:text-fg",
+                "aria-label": "close",
+                children: /* @__PURE__ */ jsx(IconX, { size: 20 })
+              }
+            )
+          ] }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+
+export { Modal };

package/dist/components/navbar.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+interface NavbarProps {
+    logo?: React.ReactNode;
+    title?: string;
+    links?: {
+        label: string;
+        href: string;
+        active?: boolean;
+    }[];
+    actions?: React.ReactNode;
+    className?: string;
+    sticky?: boolean;
+}
+declare function NavbarBase({ logo, title, links, actions, className, sticky, }: NavbarProps): JSX.Element;
+declare const Navbar: react.MemoExoticComponent<typeof NavbarBase>;
+
+export { Navbar, type NavbarProps };