@naeil/ui 0.1.0 → 0.3.0

package/dist/lib/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/lib/utils.js

@@ -0,0 +1,7 @@
+"use client";
+import {
+  cn
+} from "../chunk-JBTDRVZ7.js";
+export {
+  cn
+};

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

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+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;
+}
+declare function Footer({ Link, linksExternal }: FooterProps): react_jsx_runtime.JSX.Element;
+
+export { Footer };

package/dist/source/components/footer.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+function NavLink({
+  href,
+  children,
+  className,
+  linksExternal,
+  Link
+}) {
+  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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx(Logo, { size: 20 }),
+        /* @__PURE__ */ jsx("span", { className: "text-foreground text-sm font-semibold tracking-tight", children: ".naeil" })
+      ] }),
+      /* @__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: [
+        /* @__PURE__ */ jsx(
+          "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__ */ jsx(GitHubIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "https://x.com",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-muted-foreground hover:text-foreground transition-colors",
+            "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"
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+function Logo({ size = 20 }) {
+  const id = `naeil-footer-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 GitHubIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("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__ */ jsx(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("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" })
+    }
+  );
+}
+export {
+  Footer
+};

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

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

package/dist/source/components/index.js

@@ -0,0 +1,26 @@
+import { Nav } from "./nav.js";
+import { Footer } from "./footer.js";
+import { LocaleSwitcher } from "./locale-switcher.js";
+import { ThemeToggle } from "./theme-toggle.js";
+import { ThemeProvider } from "./theme-provider.js";
+import { ThemeToggleIcon } from "./theme-toggle-icon.js";
+import { Logo } from "./logo.js";
+import {
+  PageTitle,
+  SectionTitle,
+  pageTitleClass,
+  sectionTitleClass
+} from "./typography.js";
+export {
+  Footer,
+  LocaleSwitcher,
+  Logo,
+  Nav,
+  PageTitle,
+  SectionTitle,
+  ThemeProvider,
+  ThemeToggle,
+  ThemeToggleIcon,
+  pageTitleClass,
+  sectionTitleClass
+};

package/dist/source/components/locale-switcher.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LocaleSwitcherProps {
+    /** Available locales */
+    locales: Array<{
+        code: string;
+        short: string;
+        full: string;
+    }>;
+    /** Current locale */
+    currentLocale: string;
+    /** Called when user selects a new locale */
+    onLocaleChange: (locale: string) => void;
+}
+declare function LocaleSwitcher({ locales, currentLocale, onLocaleChange, }: LocaleSwitcherProps): react_jsx_runtime.JSX.Element;
+
+export { LocaleSwitcher };

package/dist/source/components/locale-switcher.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem
+} from "./ui/dropdown-menu.js";
+function LocaleSwitcher({
+  locales,
+  currentLocale,
+  onLocaleChange
+}) {
+  var _a, _b;
+  const current = locales.find((l) => l.code === currentLocale);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "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__ */ jsx(GlobeIcon, {}),
+          (_b = current == null ? void 0 : current.short) != null ? _b : currentLocale.toUpperCase()
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "min-w-[120px]", children: locales.map((l) => /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        onClick: () => onLocaleChange(l.code),
+        className: l.code === currentLocale ? "font-medium" : "",
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground mr-2 w-5 text-xs", children: l.short }),
+          l.full
+        ]
+      },
+      l.code
+    )) })
+  ] });
+}
+function GlobeIcon() {
+  return /* @__PURE__ */ jsxs(
+    "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__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+        /* @__PURE__ */ jsx("path", { d: "M2 12h20" })
+      ]
+    }
+  );
+}
+export {
+  LocaleSwitcher
+};

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

@@ -0,0 +1,9 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function Logo({ size, mono, className, }: {
+    size?: number;
+    mono?: boolean;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { Logo };

package/dist/source/components/logo.js

@@ -0,0 +1,52 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+function Logo({
+  size = 20,
+  mono = false,
+  className
+}) {
+  const id = `naeil-logo-${size}`;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-label": "naeil",
+      className,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M6 4 L6 16 L20 16",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "square",
+            strokeLinejoin: "miter"
+          }
+        ),
+        mono ? /* @__PURE__ */ jsx("circle", { cx: "15", cy: "16", r: "3.5", fill: "currentColor", mask: `url(#${id})` }) : /* @__PURE__ */ jsx("circle", { cx: "15", cy: "16", r: "3.5", fill: `url(#${id}-grad)`, mask: `url(#${id})` }),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          !mono && /* @__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" }) })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  Logo
+};

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

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface NavProps {
+    /** Internal Link component (from consumer's next-intl routing) */
+    Link: React.ComponentType<React.ComponentPropsWithoutRef<"a"> & {
+        href: string;
+    }>;
+    /** Current pathname value (already resolved, not a hook) */
+    usePathname: () => string;
+    /** Where the .naeil logo links to. Default: "/" */
+    brandHref?: string;
+    /** Whether brandHref is external (renders <a>) or internal (renders Link). Default: false */
+    brandExternal?: boolean;
+    /** Custom brand content (replaces default Logo + ".naeil" text) */
+    brandSlot?: React.ReactNode;
+    /** When true, project links (except current) are rendered as external <a> to externalBaseUrl. Default: false */
+    projectsExternal?: boolean;
+    /** Base URL for external project links. Default: "https://naeil.dev" */
+    externalBaseUrl?: string;
+    /** Override href for the current project in the dropdown */
+    currentProjectKey?: string;
+    currentProjectHref?: string;
+    /** App-specific sub-navigation items after the project dropdown */
+    subNav?: Array<{
+        label: string;
+        href: string;
+    }>;
+    /** React node for auth UI (rendered in desktop right side + mobile bottom) */
+    authSlot?: React.ReactNode;
+    /** Show Projects dropdown in nav. Default: true */
+    showProjects?: boolean;
+    /** Show blog link in nav. Default: true */
+    showBlog?: boolean;
+    /** Right-side toolbar (theme toggle, locale switcher, etc.) */
+    toolbarSlot?: React.ReactNode;
+}
+declare function Nav({ Link, usePathname, brandHref, brandExternal, brandSlot, projectsExternal, externalBaseUrl, currentProjectKey, currentProjectHref, subNav, authSlot, showProjects, showBlog, toolbarSlot, }: NavProps): react_jsx_runtime.JSX.Element;
+
+export { Nav };