@naeil/ui 0.2.0 → 0.4.0

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,128 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslations } from "next-intl";
+import { Logo } from "./logo.js";
+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__ */ 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: [
+        /* @__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 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, LogoProps } 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,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { SVGProps } from 'react';
+
+interface LogoProps extends Omit<SVGProps<SVGSVGElement>, "children" | "width" | "height" | "viewBox"> {
+    /** Rendered height. Symbol stays square; lockups preserve their aspect ratio. */
+    size?: number;
+    /** Legacy single-ink currentColor silhouette. Prefer tone="gray" for tonal detail. */
+    mono?: boolean;
+    variant?: "symbol" | "horizontal" | "footer" | "stacked" | "wordmark";
+    tone?: "color" | "gray";
+    /** Auto follows the nearest .light/.dark or data-theme ancestor, then the OS. */
+    theme?: "auto" | "light" | "dark";
+    /** null marks a decorative logo; label the containing link instead. */
+    label?: string | null;
+}
+declare function Logo({ size, mono, variant, tone, theme, label, className, ...props }: LogoProps): react_jsx_runtime.JSX.Element;
+
+export { Logo, type LogoProps };

package/dist/source/components/logo.js

@@ -0,0 +1,91 @@
+"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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { BrandArtwork, brandDimensions, brandVersion } from "./brand-artwork.generated.js";
+const autoThemeCSS = `
+:where(.light,[data-theme="light"]){--naeil-logo-light:inline;--naeil-logo-dark:none}
+:where(.dark,[data-theme="dark"]){--naeil-logo-light:none;--naeil-logo-dark:inline}
+@media(prefers-color-scheme:dark){[data-naeil-theme="auto"]{--naeil-logo-os-light:none;--naeil-logo-os-dark:inline}}
+`;
+function Logo(_a) {
+  var _b = _a, {
+    size = 20,
+    mono = false,
+    variant = "symbol",
+    tone = "color",
+    theme = "auto",
+    label = "naeil",
+    className
+  } = _b, props = __objRest(_b, [
+    "size",
+    "mono",
+    "variant",
+    "tone",
+    "theme",
+    "label",
+    "className"
+  ]);
+  const id = `naeil-${useId()}`;
+  const form = variant === "symbol" && size <= 48 ? "symbol-small" : variant;
+  const mode = mono ? "mono" : `${tone}${theme === "dark" ? "-dark" : ""}`;
+  const asset = `${form}-${mode}`;
+  const geometry = brandDimensions[asset];
+  const auto = !mono && theme === "auto";
+  return /* @__PURE__ */ jsx(
+    "svg",
+    __spreadProps(__spreadValues({
+      width: size * geometry.width / geometry.height,
+      height: size,
+      viewBox: geometry.viewBox,
+      fill: "none",
+      role: label === null ? void 0 : "img",
+      "aria-label": label != null ? label : void 0,
+      "aria-hidden": label === null ? true : void 0,
+      focusable: "false",
+      "data-naeil-brand": brandVersion,
+      "data-naeil-variant": variant,
+      "data-naeil-theme": auto ? "auto" : theme,
+      className
+    }, props), {
+      children: auto ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("style", { children: autoThemeCSS }),
+        /* @__PURE__ */ jsx("g", { "data-naeil-palette": "light", style: { display: "var(--naeil-logo-light, var(--naeil-logo-os-light, inline))" }, children: /* @__PURE__ */ jsx(BrandArtwork, { asset, id: `${id}-light` }) }),
+        /* @__PURE__ */ jsx("g", { "data-naeil-palette": "dark", style: { display: "var(--naeil-logo-dark, var(--naeil-logo-os-dark, none))" }, children: /* @__PURE__ */ jsx(BrandArtwork, { asset: `${form}-${tone}-dark`, id: `${id}-dark` }) })
+      ] }) : /* @__PURE__ */ jsx(BrandArtwork, { asset, id })
+    })
+  );
+}
+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 the default naeil wordmark lockup) */
+    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 };