@naeil/ui 0.1.0 → 0.3.0

package/dist/components/index.js

@@ -0,0 +1,832 @@
+"use client";
+import {
+  Badge,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../chunk-QKVN6Q6C.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "../chunk-JBTDRVZ7.js";
+
+// src/components/nav.tsx
+import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PROJECTS = [
+  {
+    key: "cc",
+    href: "/cc",
+    accent: "oklch(0.704 0.140 181)",
+    icon: "/images/coral.png",
+    status: "active"
+  },
+  {
+    key: "pkm",
+    href: "/pkm",
+    accent: "oklch(0.702 0.183 293)",
+    icon: "/images/jellyfish.png",
+    status: "coming"
+  },
+  {
+    key: "naeilUi",
+    href: "/design",
+    accent: "oklch(0.623 0.214 259)",
+    icon: "/images/whale.png",
+    status: "active"
+  },
+  {
+    key: "sa",
+    href: "/sa",
+    accent: "oklch(0.723 0.219 149)",
+    icon: "/images/fish.png",
+    status: "active"
+  },
+  {
+    key: "babyAgent",
+    href: "/baby-agent",
+    accent: "oklch(0.769 0.188 70.08)",
+    icon: "/images/turtle.png",
+    status: "coming"
+  }
+];
+function Nav({
+  Link,
+  usePathname,
+  brandHref = "/",
+  brandExternal = false,
+  brandSlot,
+  projectsExternal = false,
+  externalBaseUrl = "https://naeil.dev",
+  currentProjectKey,
+  currentProjectHref,
+  subNav,
+  authSlot,
+  showProjects = true,
+  showBlog = true,
+  toolbarSlot
+}) {
+  const t = useTranslations("nav");
+  const pt = useTranslations("projects");
+  const pathname = usePathname();
+  const [scrolled, setScrolled] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const [projectsOpen, setProjectsOpen] = useState(false);
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 16);
+    window.addEventListener("scroll", onScroll, { passive: true });
+    return () => window.removeEventListener("scroll", onScroll);
+  }, []);
+  useEffect(() => {
+    setMobileOpen(false);
+    setProjectsOpen(false);
+  }, [pathname]);
+  useEffect(() => {
+    document.body.style.overflow = mobileOpen ? "hidden" : "";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [mobileOpen]);
+  const linkClass = (href) => {
+    const isActive = pathname === href;
+    return [
+      "text-sm font-medium transition-colors",
+      isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+    ].join(" ");
+  };
+  const isProjectActive = pathname.startsWith("/projects") || pathname.startsWith("/cc") || pathname.startsWith("/pkm") || pathname.startsWith("/sa") || pathname.startsWith("/design");
+  function getProjectLink(project) {
+    if (currentProjectKey && project.key === currentProjectKey) {
+      return { href: currentProjectHref || "/", external: false };
+    }
+    if (projectsExternal) {
+      return { href: `${externalBaseUrl}${project.href}`, external: true };
+    }
+    return { href: project.href, external: false };
+  }
+  const brandContent = brandSlot != null ? brandSlot : /* @__PURE__ */ jsxs("span", { className: "text-foreground flex items-center gap-3 text-xl font-semibold tracking-tight", children: [
+    /* @__PURE__ */ jsx(Logo, { size: 28 }),
+    ".naeil"
+  ] });
+  const brandElement = brandExternal ? /* @__PURE__ */ jsx("a", { href: brandHref, children: brandContent }) : /* @__PURE__ */ jsx(Link, { href: brandHref, children: brandContent });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "nav",
+      {
+        className: [
+          "fixed top-0 z-50 w-full transition-[background-color,border-color] duration-300",
+          scrolled || mobileOpen ? "border-b border-border/40 bg-background/80 backdrop-blur-md" : "border-b border-transparent bg-transparent"
+        ].join(" "),
+        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex h-[58px] max-w-7xl items-center px-6", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center md:w-[200px]", children: brandElement }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden flex-1 items-center gap-6 md:flex", children: [
+            showProjects && /* @__PURE__ */ jsxs("div", { className: "group relative", children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  className: [
+                    "text-sm font-medium transition-colors",
+                    isProjectActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+                  ].join(" "),
+                  children: [
+                    t("projects"),
+                    /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        width: "10",
+                        height: "10",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        className: "ml-1 inline-block transition-transform group-hover:rotate-180",
+                        children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-0 top-full pt-3 opacity-0 transition-opacity duration-150 group-hover:pointer-events-auto group-hover:opacity-100", children: /* @__PURE__ */ jsx("div", { className: "border-border/40 bg-background/95 w-[520px] rounded-xl border p-4 shadow-xl backdrop-blur-md", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-1", children: PROJECTS.map((project) => {
+                const { href, external } = getProjectLink(project);
+                const inner = /* @__PURE__ */ jsxs("div", { className: "hover:bg-muted/50 flex items-start gap-3.5 rounded-lg px-3 py-3 transition-colors", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border",
+                      style: {
+                        borderColor: `color-mix(in oklch, ${project.accent} 30%, transparent)`,
+                        backgroundColor: `color-mix(in oklch, ${project.accent} 8%, transparent)`
+                      },
+                      children: /* @__PURE__ */ jsx(
+                        Image,
+                        {
+                          src: project.icon,
+                          alt: "",
+                          width: 24,
+                          height: 24,
+                          className: "object-contain"
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 pt-0.5", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-medium", children: pt(`${project.key}.name`) }),
+                      project.status === "coming" && /* @__PURE__ */ jsx(
+                        Badge,
+                        {
+                          variant: "outline",
+                          className: "text-muted-foreground px-1 py-0 text-[9px]",
+                          children: pt("status.coming")
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-0.5 text-xs leading-snug", children: pt(`${project.key}.description`) })
+                  ] })
+                ] });
+                if (external) {
+                  return /* @__PURE__ */ jsx("a", { href, children: inner }, project.key);
+                }
+                return /* @__PURE__ */ jsx(Link, { href, children: inner }, project.key);
+              }) }) }) })
+            ] }),
+            showBlog && /* @__PURE__ */ jsx(Fragment, { children: projectsExternal ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: `${externalBaseUrl}/blog`,
+                className: "text-sm font-medium text-muted-foreground transition-colors hover:text-foreground",
+                children: t("blog")
+              }
+            ) : /* @__PURE__ */ jsx(Link, { href: "/blog", className: linkClass("/blog"), children: t("blog") }) }),
+            subNav && subNav.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border/40" }),
+              subNav.map((item) => /* @__PURE__ */ jsx(
+                Link,
+                {
+                  href: item.href,
+                  className: linkClass(item.href),
+                  children: item.label
+                },
+                item.href
+              ))
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-3 md:flex", children: [
+            authSlot,
+            authSlot && toolbarSlot && /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-border/40" }),
+            toolbarSlot && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: toolbarSlot })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "text-muted-foreground hover:text-foreground ml-auto transition-colors md:hidden",
+              onClick: () => setMobileOpen(!mobileOpen),
+              "aria-label": "Menu",
+              children: mobileOpen ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(MenuIcon, {})
+            }
+          )
+        ] })
+      }
+    ),
+    mobileOpen && /* @__PURE__ */ jsx("div", { className: "bg-background/95 fixed inset-0 z-40 overflow-y-auto pt-[58px] backdrop-blur-md md:hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col px-6 py-6", children: [
+      showProjects && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            className: "text-foreground flex items-center justify-between py-3 text-base font-medium",
+            onClick: () => setProjectsOpen(!projectsOpen),
+            children: [
+              t("projects"),
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  width: "14",
+                  height: "14",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: [
+                    "transition-transform duration-200",
+                    projectsOpen ? "rotate-180" : ""
+                  ].join(" "),
+                  children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" })
+                }
+              )
+            ]
+          }
+        ),
+        projectsOpen && /* @__PURE__ */ jsx("div", { className: "mb-2 flex flex-col gap-1 pl-1", children: PROJECTS.map((project) => {
+          const { href, external } = getProjectLink(project);
+          const inner = /* @__PURE__ */ jsxs("div", { className: "hover:bg-muted/50 flex items-center gap-3 rounded-lg px-3 py-3 transition-colors", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border",
+                style: {
+                  borderColor: `color-mix(in oklch, ${project.accent} 30%, transparent)`,
+                  backgroundColor: `color-mix(in oklch, ${project.accent} 8%, transparent)`
+                },
+                children: /* @__PURE__ */ jsx(
+                  Image,
+                  {
+                    src: project.icon,
+                    alt: "",
+                    width: 20,
+                    height: 20,
+                    className: "object-contain"
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-medium", children: pt(`${project.key}.name`) }),
+              project.status === "coming" && /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  variant: "outline",
+                  className: "text-muted-foreground ml-2 px-1 py-0 text-[9px]",
+                  children: pt("status.coming")
+                }
+              )
+            ] })
+          ] });
+          if (external) {
+            return /* @__PURE__ */ jsx(
+              "a",
+              {
+                href,
+                onClick: () => setMobileOpen(false),
+                children: inner
+              },
+              project.key
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            Link,
+            {
+              href,
+              onClick: () => setMobileOpen(false),
+              children: inner
+            },
+            project.key
+          );
+        }) })
+      ] }),
+      showBlog && /* @__PURE__ */ jsx(Fragment, { children: projectsExternal ? /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: `${externalBaseUrl}/blog`,
+          className: "text-foreground border-border/40 border-t py-3 text-base font-medium",
+          onClick: () => setMobileOpen(false),
+          children: t("blog")
+        }
+      ) : /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: "/blog",
+          className: "text-foreground border-border/40 border-t py-3 text-base font-medium",
+          onClick: () => setMobileOpen(false),
+          children: t("blog")
+        }
+      ) }),
+      subNav && subNav.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-border/40 border-t", children: subNav.map((item) => /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: item.href,
+          className: "text-foreground block py-3 text-base font-medium",
+          onClick: () => setMobileOpen(false),
+          children: item.label
+        },
+        item.href
+      )) }),
+      authSlot && /* @__PURE__ */ jsx("div", { className: "border-border/40 border-t pt-4", children: authSlot }),
+      toolbarSlot && /* @__PURE__ */ jsx("div", { className: "border-border/40 flex items-center gap-4 border-t pt-4 mt-2", children: toolbarSlot })
+    ] }) })
+  ] });
+}
+function Logo({
+  size = 20
+}) {
+  const id = `naeil-nav-logo-${size}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-label": "naeil",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6 4 L6 16 L20 16",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "square",
+            strokeLinejoin: "miter"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "15", cy: "16", r: "3.5", fill: `url(#${id}-grad)`, mask: `url(#${id})` }),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs("linearGradient", { id: `${id}-grad`, x1: "15", y1: "12.5", x2: "15", y2: "16", children: [
+            /* @__PURE__ */ jsx("stop", { stopColor: "#eab308" }),
+            /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "#dc2626" })
+          ] }),
+          /* @__PURE__ */ jsx("mask", { id, children: /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "24", height: "16", fill: "white" }) })
+        ] })
+      ]
+    }
+  );
+}
+function MenuIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M4 6h16M4 12h16M4 18h16" })
+    }
+  );
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "22",
+      height: "22",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" })
+    }
+  );
+}
+
+// src/components/footer.tsx
+import { useTranslations as useTranslations2 } from "next-intl";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function NavLink({
+  href,
+  children,
+  className,
+  linksExternal,
+  Link
+}) {
+  if (linksExternal) {
+    return /* @__PURE__ */ jsx2(
+      "a",
+      {
+        href: `https://naeil.dev${href}`,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className,
+        children
+      }
+    );
+  }
+  if (Link) {
+    return /* @__PURE__ */ jsx2(Link, { href, className, children });
+  }
+  return /* @__PURE__ */ jsx2("a", { href, className, children });
+}
+function Footer({ Link, linksExternal = false }) {
+  const t = useTranslations2("footer");
+  return /* @__PURE__ */ jsx2("footer", { className: "border-border/40 border-t", children: /* @__PURE__ */ jsxs2("div", { className: "mx-auto flex max-w-7xl flex-col gap-10 px-6 py-16 sm:flex-row sm:justify-between", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx2(Logo2, { size: 20 }),
+        /* @__PURE__ */ jsx2("span", { className: "text-foreground text-sm font-semibold tracking-tight", children: ".naeil" })
+      ] }),
+      /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground max-w-[240px] text-sm leading-relaxed", children: t("tagline") }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx2(
+          "a",
+          {
+            href: "https://github.com/naeil-dev",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-muted-foreground hover:text-foreground transition-colors",
+            "aria-label": "GitHub",
+            children: /* @__PURE__ */ jsx2(GitHubIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "a",
+          {
+            href: "https://x.com",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-muted-foreground hover:text-foreground transition-colors",
+            "aria-label": "X",
+            children: /* @__PURE__ */ jsx2(XIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex gap-10 sm:gap-16", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx2("span", { className: "text-foreground text-xs font-medium uppercase tracking-wider", children: t("navigation") }),
+        /* @__PURE__ */ jsx2(
+          NavLink,
+          {
+            href: "/projects",
+            className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
+            linksExternal,
+            Link,
+            children: t("projects")
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          NavLink,
+          {
+            href: "/blog",
+            className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
+            linksExternal,
+            Link,
+            children: t("blog")
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3", children: [
+        /* @__PURE__ */ jsx2("span", { className: "text-foreground text-xs font-medium uppercase tracking-wider", children: t("social") }),
+        /* @__PURE__ */ jsx2(
+          "a",
+          {
+            href: "https://github.com/naeil-dev",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
+            children: "GitHub \u2197"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+function Logo2({ size = 20 }) {
+  const id = `naeil-footer-logo-${size}`;
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-label": "naeil",
+      children: [
+        /* @__PURE__ */ jsx2(
+          "path",
+          {
+            d: "M6 4 L6 16 L20 16",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "square",
+            strokeLinejoin: "miter"
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          "circle",
+          {
+            cx: "15",
+            cy: "16",
+            r: "3.5",
+            fill: `url(#${id}-grad)`,
+            mask: `url(#${id})`
+          }
+        ),
+        /* @__PURE__ */ jsxs2("defs", { children: [
+          /* @__PURE__ */ jsxs2("linearGradient", { id: `${id}-grad`, x1: "15", y1: "12.5", x2: "15", y2: "16", children: [
+            /* @__PURE__ */ jsx2("stop", { stopColor: "#eab308" }),
+            /* @__PURE__ */ jsx2("stop", { offset: "1", stopColor: "#dc2626" })
+          ] }),
+          /* @__PURE__ */ jsx2("mask", { id, children: /* @__PURE__ */ jsx2("rect", { x: "0", y: "0", width: "24", height: "16", fill: "white" }) })
+        ] })
+      ]
+    }
+  );
+}
+function GitHubIcon() {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx2("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" })
+    }
+  );
+}
+function XIcon() {
+  return /* @__PURE__ */ jsx2(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx2("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" })
+    }
+  );
+}
+
+// src/components/locale-switcher.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function LocaleSwitcher({
+  locales,
+  currentLocale,
+  onLocaleChange
+}) {
+  var _a, _b;
+  const current = locales.find((l) => l.code === currentLocale);
+  return /* @__PURE__ */ jsxs3(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx3(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        className: "text-muted-foreground hover:text-foreground flex items-center gap-1.5 text-sm transition-colors focus:outline-none",
+        "aria-label": `Change language \u2014 current: ${(_a = current == null ? void 0 : current.short) != null ? _a : currentLocale}`,
+        children: [
+          /* @__PURE__ */ jsx3(GlobeIcon, {}),
+          (_b = current == null ? void 0 : current.short) != null ? _b : currentLocale.toUpperCase()
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx3(DropdownMenuContent, { align: "end", className: "min-w-[120px]", children: locales.map((l) => /* @__PURE__ */ jsxs3(
+      DropdownMenuItem,
+      {
+        onClick: () => onLocaleChange(l.code),
+        className: l.code === currentLocale ? "font-medium" : "",
+        children: [
+          /* @__PURE__ */ jsx3("span", { className: "text-muted-foreground mr-2 w-5 text-xs", children: l.short }),
+          l.full
+        ]
+      },
+      l.code
+    )) })
+  ] });
+}
+function GlobeIcon() {
+  return /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: "shrink-0",
+      children: [
+        /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx3("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+        /* @__PURE__ */ jsx3("path", { d: "M2 12h20" })
+      ]
+    }
+  );
+}
+
+// src/components/theme-toggle.tsx
+import { useTheme } from "next-themes";
+import { useSyncExternalStore } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var emptySubscribe = () => () => {
+};
+function useIsMounted() {
+  return useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+}
+function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme();
+  const mounted = useIsMounted();
+  if (!mounted) {
+    return /* @__PURE__ */ jsx4(Button, { variant: "outline", size: "sm", className: "w-24", children: "\u2026" });
+  }
+  return /* @__PURE__ */ jsx4(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      className: "w-24",
+      onClick: () => setTheme(resolvedTheme === "dark" ? "light" : "dark"),
+      children: resolvedTheme === "dark" ? "\u2600\uFE0F Light" : "\u{1F319} Dark"
+    }
+  );
+}
+
+// src/components/theme-provider.tsx
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ThemeProvider(_a) {
+  var _b = _a, {
+    children
+  } = _b, props = __objRest(_b, [
+    "children"
+  ]);
+  return /* @__PURE__ */ jsx5(NextThemesProvider, __spreadProps(__spreadValues({}, props), { children }));
+}
+
+// src/components/theme-toggle-icon.tsx
+import { useTheme as useTheme2 } from "next-themes";
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+var emptySubscribe2 = () => () => {
+};
+function useIsMounted2() {
+  return useSyncExternalStore2(
+    emptySubscribe2,
+    () => true,
+    () => false
+  );
+}
+function ThemeToggleIcon() {
+  const { resolvedTheme, setTheme } = useTheme2();
+  const mounted = useIsMounted2();
+  if (!mounted) {
+    return /* @__PURE__ */ jsx6("div", { className: "h-4 w-4" });
+  }
+  const isDark = resolvedTheme === "dark";
+  return /* @__PURE__ */ jsx6(
+    "button",
+    {
+      onClick: () => setTheme(isDark ? "light" : "dark"),
+      className: "ui-control ui-focus inline-flex w-11 items-center justify-center text-muted-foreground hover:text-foreground",
+      "aria-label": isDark ? "Switch to light mode" : "Switch to dark mode",
+      children: isDark ? /* @__PURE__ */ jsxs4(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: [
+            /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "5" }),
+            /* @__PURE__ */ jsx6("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
+          ]
+        }
+      ) : /* @__PURE__ */ jsx6(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx6("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+        }
+      )
+    }
+  );
+}
+
+// src/components/logo.tsx
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+function Logo3({
+  size = 20,
+  mono = false,
+  className
+}) {
+  const id = `naeil-logo-${size}`;
+  return /* @__PURE__ */ jsxs5(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-label": "naeil",
+      className,
+      children: [
+        /* @__PURE__ */ jsx7(
+          "path",
+          {
+            d: "M6 4 L6 16 L20 16",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "square",
+            strokeLinejoin: "miter"
+          }
+        ),
+        mono ? /* @__PURE__ */ jsx7("circle", { cx: "15", cy: "16", r: "3.5", fill: "currentColor", mask: `url(#${id})` }) : /* @__PURE__ */ jsx7("circle", { cx: "15", cy: "16", r: "3.5", fill: `url(#${id}-grad)`, mask: `url(#${id})` }),
+        /* @__PURE__ */ jsxs5("defs", { children: [
+          !mono && /* @__PURE__ */ jsxs5(
+            "linearGradient",
+            {
+              id: `${id}-grad`,
+              x1: "15",
+              y1: "12.5",
+              x2: "15",
+              y2: "16",
+              children: [
+                /* @__PURE__ */ jsx7("stop", { stopColor: "#eab308" }),
+                /* @__PURE__ */ jsx7("stop", { offset: "1", stopColor: "#dc2626" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx7("mask", { id, children: /* @__PURE__ */ jsx7("rect", { x: "0", y: "0", width: "24", height: "16", fill: "white" }) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/typography.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var pageTitleClass = "text-foreground text-3xl font-semibold leading-tight";
+var sectionTitleClass = "text-foreground text-xl font-semibold";
+function PageTitle(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx8("h1", __spreadProps(__spreadValues({ className: cn(pageTitleClass, className) }, props), { children }));
+}
+function SectionTitle(_a) {
+  var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
+  return /* @__PURE__ */ jsx8("h2", __spreadProps(__spreadValues({ className: cn(sectionTitleClass, className) }, props), { children }));
+}
+export {
+  Footer,
+  LocaleSwitcher,
+  Logo3 as Logo,
+  Nav,
+  PageTitle,
+  SectionTitle,
+  ThemeProvider,
+  ThemeToggle,
+  ThemeToggleIcon,
+  pageTitleClass,
+  sectionTitleClass
+};