@naeil/ui 0.3.0 → 0.5.0

package/dist/source/components/nav.js

@@ -1,46 +1,25 @@
 "use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
-import { Badge } from "./ui/badge.js";
-import Image from "next/image";
-const 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"
-  }
-];
+import { useLocale, useTranslations } from "next-intl";
+import { NaeilHeader } from "./naeil-header.js";
+import { headerLocales } from "./naeil-header-content.js";
+const NativeBrandLink = (props) => /* @__PURE__ */ jsx("a", __spreadValues({}, props));
 function Nav({
   Link,
   usePathname,
@@ -55,355 +34,43 @@ function Nav({
   authSlot,
   showProjects = true,
   showBlog = true,
-  toolbarSlot
+  toolbarSlot,
+  projects,
+  className,
+  containerClassName,
+  labels
 }) {
+  var _a;
+  const consumerLocale = useLocale();
+  const locale = (_a = headerLocales.find((value) => value === consumerLocale)) != null ? _a : "en";
   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",
+    NaeilHeader,
     {
-      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" })
+      locale,
+      Link,
+      currentHref: pathname,
+      resolveHref: (path) => projectsExternal ? `${externalBaseUrl}${path}` : path,
+      projectsExternal,
+      translations: { projects: showProjects ? t("projects") : "", blog: showBlog ? t("blog") : "", project: pt },
+      brandHref,
+      brandSlot,
+      brandLinkComponent: brandExternal ? NativeBrandLink : Link,
+      currentProjectKey,
+      currentProjectHref,
+      subNav,
+      projects,
+      showProjects,
+      showBlog,
+      toolbarSlot: /* @__PURE__ */ jsxs(Fragment, { children: [
+        authSlot,
+        toolbarSlot
+      ] }),
+      className,
+      containerClassName,
+      labels
     }
   );
 }

package/dist/source/components/ui/index.d.ts

@@ -11,6 +11,8 @@ export { Switch } from './switch.js';
 export { Checkbox } from './checkbox.js';
 export { Tabs, TabsContent, TabsList, TabsTrigger } from './tabs.js';
 export { Textarea } from './textarea.js';
+export { Navigation, NavigationGroup, NavigationItem, NavigationLink, NavigationLinkComponent, NavigationLinkProps, NavigationProps } from './navigation.js';
+export { SiteFooter, SiteFooterProps } from './site-footer.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'radix-ui';

package/dist/source/components/ui/index.js

@@ -65,6 +65,8 @@ import { Switch } from "./switch.js";
 import { Checkbox } from "./checkbox.js";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs.js";
 import { Textarea } from "./textarea.js";
+import { Navigation } from "./navigation.js";
+import { SiteFooter } from "./site-footer.js";
 export {
   Avatar,
   AvatarBadge,
@@ -109,6 +111,7 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   Input,
+  Navigation,
   Select,
   SelectContent,
   SelectGroup,
@@ -119,6 +122,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  SiteFooter,
   Switch,
   Tabs,
   TabsContent,

package/dist/source/components/ui/navigation.d.ts

@@ -0,0 +1,48 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+
+type NavigationLinkProps = react.ComponentPropsWithoutRef<"a"> & {
+    href: string;
+};
+type NavigationLinkComponent = react.ComponentType<NavigationLinkProps>;
+interface NavigationLink {
+    id: string;
+    label: string;
+    href: string;
+    description?: string;
+    icon?: react.ReactNode;
+    badge?: react.ReactNode;
+    external?: boolean;
+    target?: react.HTMLAttributeAnchorTarget;
+    active?: boolean;
+}
+interface NavigationGroup {
+    id: string;
+    label: string;
+    items: NavigationLink[];
+    /** Desktop menu layout; the mobile sheet always uses one column. */
+    columns?: 1 | 2;
+}
+type NavigationItem = NavigationLink | NavigationGroup;
+interface NavigationProps extends Omit<react.ComponentPropsWithoutRef<"header">, "children" | "onSelect"> {
+    brand: react.ReactNode;
+    items: NavigationItem[];
+    /** Translated landmark/dialog/close labels are supplied by the application. */
+    labels: {
+        navigation: string;
+        menu: string;
+        close: string;
+    };
+    Link?: NavigationLinkComponent;
+    currentHref?: string;
+    toolbar?: react.ReactNode;
+    mobileToolbar?: react.ReactNode;
+    mobileFooter?: react.ReactNode;
+    /** Use the same product-owned frame class on header, footer and main. */
+    containerClassName?: string;
+    /** Preserve modified clicks; applications may preventDefault for client routing/guards. */
+    onNavigate?: (event: react.MouseEvent<HTMLAnchorElement>, item: NavigationLink) => void;
+}
+declare function Navigation({ brand, items, labels, Link, currentHref, toolbar, mobileToolbar, mobileFooter, containerClassName, onNavigate, className, ...props }: NavigationProps): react_jsx_runtime.JSX.Element;
+
+export { Navigation, type NavigationGroup, type NavigationItem, type NavigationLink, type NavigationLinkComponent, type NavigationLinkProps, type NavigationProps };