@naeil/ui 0.4.0 → 0.6.0

package/dist/components/naeil-header.d.ts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+import { a as NavigationProps, b as NavigationLinkProps, N as NavigationLink, c as NavigationLinkComponent } from '../navigation-CL10a6Eb.js';
+
+declare const headerLocales: readonly ["en", "ko", "ja"];
+type NaeilHeaderLocale = (typeof headerLocales)[number];
+
+interface NaeilHeaderProps extends Omit<NavigationProps, "brand" | "items" | "toolbar" | "mobileToolbar" | "labels"> {
+    locale: NaeilHeaderLocale;
+    /** Resolve canonical unlocalized paths. Defaults to the official localized site. */
+    resolveHref?: (path: string) => string;
+    brandHref?: string;
+    brandSlot?: ReactNode;
+    brandLinkProps?: Omit<NavigationLinkProps, "href" | "children">;
+    /** Omit when the application does not support changing its UI language. */
+    onLocaleChange?: (locale: NaeilHeaderLocale) => void;
+    /** Application-owned authentication; this module has no site session/backend. */
+    authSlot?: ReactNode;
+    labels?: NavigationProps["labels"];
+    projects?: NavigationLink[];
+    /** Legacy remote-catalog mode: generated noncurrent project/blog links use native anchors. */
+    projectsExternal?: boolean;
+    /** Legacy next-intl copy overrides; catalog/artwork/layout remain shared. */
+    translations?: {
+        projects: string;
+        blog: string;
+        project: (key: string) => string;
+    };
+    showProjects?: boolean;
+    showBlog?: boolean;
+    subNav?: Array<{
+        label: string;
+        href: string;
+    }>;
+    currentProjectKey?: string;
+    currentProjectHref?: string;
+    /** Compatibility escape hatch replacing the default theme/locale/auth toolbar. */
+    toolbarSlot?: ReactNode;
+    /** Compatibility escape hatch for the legacy native external brand link. */
+    brandLinkComponent?: NavigationLinkComponent;
+}
+/** The actual header theme control; reads only the consumer's theme provider. */
+declare function NaeilHeaderThemeControl({ locale }: {
+    locale: NaeilHeaderLocale;
+}): react_jsx_runtime.JSX.Element;
+/** Shared rendering used by the whole header and legacy site control adapters. */
+declare function NaeilHeaderLocaleControl({ locale, onLocaleChange }: {
+    locale: NaeilHeaderLocale;
+    onLocaleChange: (locale: NaeilHeaderLocale) => void;
+}): react_jsx_runtime.JSX.Element;
+/** One complete, opt-in branded composition shared by naeil.dev and applications. */
+declare function NaeilHeader({ locale, resolveHref, brandHref, brandSlot, brandLinkProps, brandLinkComponent, onLocaleChange, authSlot, toolbarSlot, projects, projectsExternal, translations, showProjects, showBlog, subNav, currentProjectKey, currentProjectHref, labels, Link, currentHref, onNavigate, className, containerClassName, ...props }: NaeilHeaderProps): react_jsx_runtime.JSX.Element;
+
+export { NaeilHeader, type NaeilHeaderLocale, NaeilHeaderLocaleControl, type NaeilHeaderProps, NaeilHeaderThemeControl };

package/dist/components/naeil-header.js

@@ -0,0 +1,14 @@
+"use client";
+"use client";
+import {
+  NaeilHeader,
+  NaeilHeaderLocaleControl,
+  NaeilHeaderThemeControl
+} from "../chunk-VL7FS4QM.js";
+import "../chunk-CE73AEJZ.js";
+import "../chunk-JBTDRVZ7.js";
+export {
+  NaeilHeader,
+  NaeilHeaderLocaleControl,
+  NaeilHeaderThemeControl
+};

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

@@ -4,6 +4,8 @@ import { Avatar as Avatar$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1,
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import { ToasterProps } from 'sonner';
+export { d as Navigation, e as NavigationGroup, f as NavigationItem, N as NavigationLink, c as NavigationLinkComponent, b as NavigationLinkProps, a as NavigationProps } from '../../navigation-CL10a6Eb.js';
+export { a as SiteFooter, S as SiteFooterProps } from '../../site-footer-B67meCDv.js';
 
 declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof Avatar$1.Root> & {
     size?: "default" | "sm" | "lg";

package/dist/components/ui/index.js

@@ -1,7 +1,5 @@
 "use client";
 import {
-  Badge,
-  Button,
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -17,11 +15,25 @@ import {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
+  SiteFooter
+} from "../../chunk-QSTGUEEI.js";
+import {
+  Badge,
+  Button,
+  Navigation,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
   badgeVariants,
-  buttonVariants,
-  useOverlayRef,
-  useRadixHiddenInert
-} from "../../chunk-QKVN6Q6C.js";
+  buttonVariants
+} from "../../chunk-CE73AEJZ.js";
 import {
   __objRest,
   __spreadProps,
@@ -435,198 +447,45 @@ var Toaster = (_a) => {
   );
 };
 
-// src/components/ui/select.tsx
-import { Select as Primitive } from "radix-ui";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
-var Select = Primitive.Root;
-var SelectValue = Primitive.Value;
-var SelectGroup = Primitive.Group;
-function SelectTrigger(_a) {
-  var _b = _a, {
-    className,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children"
-  ]);
-  return /* @__PURE__ */ jsxs2(
-    Primitive.Trigger,
-    __spreadProps(__spreadValues({
-      "data-slot": "select-trigger",
-      className: cn(
-        "ui-control ui-focus flex w-full items-center justify-between gap-2 border border-input bg-background px-3 text-left text-foreground disabled:cursor-not-allowed disabled:opacity-45 data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:truncate",
-        className
-      )
-    }, props), {
-      children: [
-        children,
-        /* @__PURE__ */ jsx6(Primitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx6(ChevronDownIcon, { className: "size-4 shrink-0" }) })
-      ]
-    })
-  );
-}
-function SelectContent(_a) {
-  var _b = _a, {
-    ref,
-    className,
-    children,
-    position = "popper",
-    sideOffset = 6
-  } = _b, props = __objRest(_b, [
-    "ref",
-    "className",
-    "children",
-    "position",
-    "sideOffset"
-  ]);
-  const [content, contentRef] = useOverlayRef(ref);
-  useRadixHiddenInert(content);
-  return /* @__PURE__ */ jsx6(Primitive.Portal, { children: /* @__PURE__ */ jsxs2(
-    Primitive.Content,
-    __spreadProps(__spreadValues({
-      ref: contentRef,
-      "data-slot": "select-content",
-      position,
-      sideOffset,
-      className: cn(
-        "ui-menu ui-popup z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) max-w-[calc(100vw-24px)] overflow-hidden",
-        className
-      )
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx6(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx6(Primitive.Viewport, { className: "p-1", children }),
-        /* @__PURE__ */ jsx6(SelectScrollDownButton, {})
-      ]
-    })
-  ) });
-}
-function SelectItem(_a) {
-  var _b = _a, {
-    className,
-    children
-  } = _b, props = __objRest(_b, [
-    "className",
-    "children"
-  ]);
-  return /* @__PURE__ */ jsxs2(
-    Primitive.Item,
-    __spreadProps(__spreadValues({
-      "data-slot": "select-item",
-      className: cn(
-        "relative flex cursor-default items-center rounded-sm py-2 pr-9 pl-3 text-base outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-45",
-        className
-      )
-    }, props), {
-      children: [
-        /* @__PURE__ */ jsx6(Primitive.ItemText, { children }),
-        /* @__PURE__ */ jsx6(Primitive.ItemIndicator, { className: "absolute right-3", children: /* @__PURE__ */ jsx6(CheckIcon, { className: "size-4" }) })
-      ]
-    })
-  );
-}
-function SelectLabel(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx6(
-    Primitive.Label,
-    __spreadValues({
-      "data-slot": "select-label",
-      className: cn(
-        "px-3 py-2 text-sm font-medium text-muted-foreground",
-        className
-      )
-    }, props)
-  );
-}
-function SelectSeparator(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx6(
-    Primitive.Separator,
-    __spreadValues({
-      "data-slot": "select-separator",
-      className: cn("my-1 h-px bg-border", className)
-    }, props)
-  );
-}
-function SelectScrollUpButton(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx6(
-    Primitive.ScrollUpButton,
-    __spreadProps(__spreadValues({
-      className: cn("flex h-8 items-center justify-center", className)
-    }, props), {
-      children: /* @__PURE__ */ jsx6(ChevronUpIcon, { className: "size-4" })
-    })
-  );
-}
-function SelectScrollDownButton(_a) {
-  var _b = _a, {
-    className
-  } = _b, props = __objRest(_b, [
-    "className"
-  ]);
-  return /* @__PURE__ */ jsx6(
-    Primitive.ScrollDownButton,
-    __spreadProps(__spreadValues({
-      className: cn("flex h-8 items-center justify-center", className)
-    }, props), {
-      children: /* @__PURE__ */ jsx6(ChevronDownIcon, { className: "size-4" })
-    })
-  );
-}
-
 // src/components/ui/switch.tsx
-import { Switch as Primitive2 } from "radix-ui";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { Switch as Primitive } from "radix-ui";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function Switch(_a) {
   var _b = _a, {
     className
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx7(
-    Primitive2.Root,
+  return /* @__PURE__ */ jsx6(
+    Primitive.Root,
     __spreadProps(__spreadValues({
       "data-slot": "switch",
       className: cn("ui-choice ui-focus", className)
     }, props), {
-      children: /* @__PURE__ */ jsx7(Primitive2.Thumb, { "data-slot": "switch-thumb" })
+      children: /* @__PURE__ */ jsx6(Primitive.Thumb, { "data-slot": "switch-thumb" })
     })
   );
 }
 
 // src/components/ui/checkbox.tsx
-import { Checkbox as Primitive3 } from "radix-ui";
-import { CheckIcon as CheckIcon2, MinusIcon } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Checkbox as Primitive2 } from "radix-ui";
+import { CheckIcon, MinusIcon } from "lucide-react";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 function Checkbox(_a) {
   var _b = _a, {
     className
   } = _b, props = __objRest(_b, [
     "className"
   ]);
-  return /* @__PURE__ */ jsx8(
-    Primitive3.Root,
+  return /* @__PURE__ */ jsx7(
+    Primitive2.Root,
     __spreadProps(__spreadValues({
       "data-slot": "checkbox",
       className: cn("ui-choice ui-focus group/checkbox", className)
     }, props), {
-      children: /* @__PURE__ */ jsxs3(Primitive3.Indicator, { className: "flex items-center justify-center", children: [
-        /* @__PURE__ */ jsx8(CheckIcon2, { className: "size-3.5 group-data-[state=indeterminate]/checkbox:hidden" }),
-        /* @__PURE__ */ jsx8(MinusIcon, { className: "hidden size-3.5 group-data-[state=indeterminate]/checkbox:block" })
+      children: /* @__PURE__ */ jsxs2(Primitive2.Indicator, { className: "flex items-center justify-center", children: [
+        /* @__PURE__ */ jsx7(CheckIcon, { className: "size-3.5 group-data-[state=indeterminate]/checkbox:hidden" }),
+        /* @__PURE__ */ jsx7(MinusIcon, { className: "hidden size-3.5 group-data-[state=indeterminate]/checkbox:block" })
       ] })
     })
   );
@@ -634,32 +493,32 @@ function Checkbox(_a) {
 
 // src/components/ui/tabs.tsx
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Tabs(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx9(TabsPrimitive.Root, __spreadValues({ "data-slot": "tabs", className: cn("ui-tabs min-w-0", className) }, props));
+  return /* @__PURE__ */ jsx8(TabsPrimitive.Root, __spreadValues({ "data-slot": "tabs", className: cn("ui-tabs min-w-0", className) }, props));
 }
 function TabsList(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx9(TabsPrimitive.List, __spreadValues({ "data-slot": "tabs-list", className: cn("ui-tabs-list", className) }, props));
+  return /* @__PURE__ */ jsx8(TabsPrimitive.List, __spreadValues({ "data-slot": "tabs-list", className: cn("ui-tabs-list", className) }, props));
 }
 function TabsTrigger(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx9(TabsPrimitive.Trigger, __spreadValues({ "data-slot": "tabs-trigger", className: cn(
+  return /* @__PURE__ */ jsx8(TabsPrimitive.Trigger, __spreadValues({ "data-slot": "tabs-trigger", className: cn(
     "ui-tabs-trigger ui-control ui-focus h-auto min-h-(--ui-control-height) w-max max-w-full shrink-0 whitespace-normal break-words rounded-md border-b-2 px-3 text-base leading-normal font-medium disabled:cursor-not-allowed disabled:opacity-50",
     className
   ) }, props));
 }
 function TabsContent(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx9(TabsPrimitive.Content, __spreadValues({ "data-slot": "tabs-content", className: cn("ui-focus min-w-0 break-words", className) }, props));
+  return /* @__PURE__ */ jsx8(TabsPrimitive.Content, __spreadValues({ "data-slot": "tabs-content", className: cn("ui-focus min-w-0 break-words", className) }, props));
 }
 
 // src/components/ui/textarea.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Textarea(_a) {
   var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx9(
     "textarea",
     __spreadValues({
       "data-slot": "textarea",
@@ -714,6 +573,7 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
   Input,
+  Navigation,
   Select,
   SelectContent,
   SelectGroup,
@@ -724,6 +584,7 @@ export {
   SelectSeparator,
   SelectTrigger,
   SelectValue,
+  SiteFooter,
   Switch,
   Tabs,
   TabsContent,

package/dist/navigation-CL10a6Eb.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 { type NavigationLink as N, type NavigationProps as a, type NavigationLinkProps as b, type NavigationLinkComponent as c, Navigation as d, type NavigationGroup as e, type NavigationItem as f };

package/dist/site-footer-B67meCDv.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { N as NavigationLink, c as NavigationLinkComponent } from './navigation-CL10a6Eb.js';
+
+interface SiteFooterProps extends React.ComponentPropsWithoutRef<"footer"> {
+    brand?: React.ReactNode;
+    description?: React.ReactNode;
+    groups?: Array<{
+        id: string;
+        label: string;
+        links: NavigationLink[];
+    }>;
+    Link?: NavigationLinkComponent;
+    meta?: React.ReactNode;
+    containerClassName?: string;
+    variant?: "full" | "compact";
+}
+/** Product content and translations belong to the consumer, including legal copy. */
+declare function SiteFooter({ brand, description, groups, Link, meta, children, containerClassName, className, variant, ...props }: SiteFooterProps): react_jsx_runtime.JSX.Element;
+
+export { type SiteFooterProps as S, SiteFooter as a };

package/dist/source/components/footer.d.ts

@@ -1,15 +1,24 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SiteFooterProps } from './ui/site-footer.js';
+import 'react';
+import './ui/navigation.js';
 
 interface FooterProps {
-    /** Link component from consumer */
     Link?: React.ComponentType<{
         href: string;
         children: React.ReactNode;
         className?: string;
     }>;
-    /** Whether links go to naeil.dev (external) or are internal. Default: false */
     linksExternal?: boolean;
+    brandSlot?: React.ReactNode;
+    description?: React.ReactNode;
+    groups?: SiteFooterProps["groups"];
+    socialSlot?: React.ReactNode;
+    meta?: React.ReactNode;
+    variant?: SiteFooterProps["variant"];
+    className?: string;
+    containerClassName?: string;
 }
-declare function Footer({ Link, linksExternal }: FooterProps): react_jsx_runtime.JSX.Element;
+declare function Footer({ Link, linksExternal, brandSlot, description, groups, socialSlot, meta, variant, className, containerClassName, }: FooterProps): react_jsx_runtime.JSX.Element;
 
-export { Footer };
+export { Footer, type FooterProps };

package/dist/source/components/footer.js

@@ -1,45 +1,86 @@
 "use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+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;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslations } from "next-intl";
 import { Logo } from "./logo.js";
-function NavLink({
-  href,
-  children,
+import { SiteFooter } from "./ui/site-footer.js";
+function Footer({
+  Link,
+  linksExternal = false,
+  brandSlot,
+  description,
+  groups,
+  socialSlot,
+  meta,
+  variant,
   className,
-  linksExternal,
-  Link
+  containerClassName
 }) {
-  if (linksExternal) {
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: `https://naeil.dev${href}`,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className,
-        children
-      }
-    );
-  }
-  if (Link) {
-    return /* @__PURE__ */ jsx(Link, { href, className, children });
-  }
-  return /* @__PURE__ */ jsx("a", { href, className, children });
-}
-function Footer({ Link, linksExternal = false }) {
   const t = useTranslations("footer");
-  return /* @__PURE__ */ jsx("footer", { className: "border-border/40 border-t", children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex max-w-7xl flex-col gap-10 px-6 py-16 sm:flex-row sm:justify-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-      /* @__PURE__ */ jsx(Logo, { variant: "footer", size: 20, className: "block" }),
-      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground max-w-[240px] text-sm leading-relaxed", children: t("tagline") }),
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+  const destinations = [
+    { id: "projects", label: t("projects"), href: "/projects" },
+    { id: "blog", label: t("blog"), href: "/blog" }
+  ];
+  return /* @__PURE__ */ jsx(
+    SiteFooter,
+    {
+      Link,
+      className,
+      containerClassName,
+      variant,
+      brand: brandSlot != null ? brandSlot : /* @__PURE__ */ jsx(Logo, { variant: "footer", size: 20, className: "block" }),
+      description: description === void 0 ? t("tagline") : description,
+      groups: groups != null ? groups : [
+        {
+          id: "navigation",
+          label: t("navigation"),
+          links: destinations.map((item) => __spreadProps(__spreadValues({}, item), {
+            href: linksExternal ? `https://naeil.dev${item.href}` : item.href,
+            external: linksExternal,
+            target: linksExternal ? "_blank" : void 0
+          }))
+        },
+        {
+          id: "social",
+          label: t("social"),
+          links: [
+            {
+              id: "github",
+              label: "GitHub",
+              href: "https://github.com/naeil-dev",
+              external: true,
+              target: "_blank"
+            }
+          ]
+        }
+      ],
+      meta,
+      children: socialSlot === void 0 ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx(
           "a",
           {
             href: "https://github.com/naeil-dev",
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "text-muted-foreground hover:text-foreground transition-colors",
+            className: "ui-navigation-link ui-focus",
             "aria-label": "GitHub",
             children: /* @__PURE__ */ jsx(GitHubIcon, {})
           }
@@ -50,52 +91,14 @@ function Footer({ Link, linksExternal = false }) {
             href: "https://x.com",
             target: "_blank",
             rel: "noopener noreferrer",
-            className: "text-muted-foreground hover:text-foreground transition-colors",
+            className: "ui-navigation-link ui-focus",
             "aria-label": "X",
             children: /* @__PURE__ */ jsx(XIcon, {})
           }
         )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex gap-10 sm:gap-16", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-foreground text-xs font-medium uppercase tracking-wider", children: t("navigation") }),
-        /* @__PURE__ */ jsx(
-          NavLink,
-          {
-            href: "/projects",
-            className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
-            linksExternal,
-            Link,
-            children: t("projects")
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          NavLink,
-          {
-            href: "/blog",
-            className: "text-muted-foreground hover:text-foreground text-sm transition-colors",
-            linksExternal,
-            Link,
-            children: t("blog")
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-        /* @__PURE__ */ jsx("span", { className: "text-foreground text-xs font-medium uppercase tracking-wider", children: t("social") }),
-        /* @__PURE__ */ jsx(
-          "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"
-          }
-        )
-      ] })
-    ] })
-  ] }) });
+      ] }) : socialSlot
+    }
+  );
 }
 function GitHubIcon() {
   return /* @__PURE__ */ jsx(

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

@@ -1,5 +1,5 @@
-export { Nav } from './nav.js';
-export { Footer } from './footer.js';
+export { Nav, NavProps } from './nav.js';
+export { Footer, FooterProps } from './footer.js';
 export { LocaleSwitcher } from './locale-switcher.js';
 export { ThemeToggle } from './theme-toggle.js';
 export { ThemeProvider } from './theme-provider.js';
@@ -7,5 +7,7 @@ export { ThemeToggleIcon } from './theme-toggle-icon.js';
 export { Logo, LogoProps } from './logo.js';
 export { PageTitle, SectionTitle, pageTitleClass, sectionTitleClass } from './typography.js';
 import 'react/jsx-runtime';
-import 'next-themes';
+import './ui/navigation.js';
 import 'react';
+import './ui/site-footer.js';
+import 'next-themes';