@naeil/ui 0.1.0 → 0.2.0

package/README.md

@@ -1,36 +1,75 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# @naeil/ui
 
-## Getting Started
+Design system and component library for [naeil.dev](https://naeil.dev) — a portfolio, blog, and project showcase with cross-subdomain SSO authentication.
+
+## Tech Stack
+
+- **Framework:** Next.js 16 (App Router)
+- **UI:** React 19, Tailwind CSS v4, Radix UI
+- **Language:** TypeScript (strict)
+- **Auth:** Supabase Auth (OAuth via Google/GitHub)
+- **i18n:** next-intl (en, ko, ja)
+- **3D:** React Three Fiber (hero scene)
+- **Hosting:** Vercel (Hobby)
+
+## Prerequisites
+
+- Node.js 22+
+- pnpm
+
+## Environment Variables
 
-First, run the development server:
+| Variable | Description |
+|---|---|
+| `NEXT_PUBLIC_SUPABASE_URL` | Supabase project URL |
+| `NEXT_PUBLIC_SUPABASE_ANON_KEY` | Supabase anonymous/public key |
+
+## Getting Started
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
+pnpm install
 pnpm dev
-# or
-bun dev
+# Open http://localhost:3000
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Project Structure
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```
+src/
+├── app/                  # Next.js App Router pages & API routes
+│   ├── [locale]/         # Locale-prefixed pages (en/ko/ja)
+│   ├── api/health/       # Health check endpoint
+│   └── auth/callback/    # OAuth callback handler
+├── components/           # Shared UI components
+│   └── ui/               # Primitive components (button, card, etc.)
+├── i18n/                 # Internationalization config & routing
+├── lib/
+│   ├── auth/             # Auth utilities (cookie domain, redirect, avatar, routes)
+│   └── supabase/         # Supabase client (server, middleware, browser)
+├── styles/               # Theme tokens & global CSS
+└── proxy.ts              # Middleware (auth guard, i18n, cookie sync)
+```
 
-## Learn More
+## Auth / SSO Architecture
 
-To learn more about Next.js, take a look at the following resources:
+The auth system enables cross-subdomain SSO between `naeil.dev` and `esg.naeil.dev`:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- OAuth flow: Login page → Supabase OAuth → `/auth/callback` → redirect to original page
+- Cookie domain is set to `.naeil.dev` in production, enabling session sharing across subdomains
+- Protected routes (e.g., `/sa/reports/:id`) redirect unauthenticated users to login with a `?next` param
+- The middleware (`proxy.ts`) handles session refresh, route protection, i18n routing, and cookie sync
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+## Available Scripts
 
-## Deploy on Vercel
+| Script | Description |
+|---|---|
+| `pnpm dev` | Start development server |
+| `pnpm build` | Production build |
+| `pnpm lint` | Run ESLint |
+| `pnpm test` | Run unit tests (Vitest) |
+| `pnpm build:tokens` | Generate design tokens |
+| `pnpm check:contrast` | Check color contrast ratios |
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Deployment
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+Auto-deploys from `main` via Vercel (Hobby plan). Push to `main` triggers a production deployment.

package/dist/chunk-JBTDRVZ7.js

@@ -0,0 +1,46 @@
+"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;
+};
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export {
+  __spreadValues,
+  __spreadProps,
+  __objRest,
+  cn
+};

package/dist/chunk-SYI3IKIC.js

@@ -0,0 +1,355 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  cn
+} from "./chunk-JBTDRVZ7.js";
+
+// src/components/ui/badge.tsx
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+var badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-sm border px-2 py-0.5 text-[11px] font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:ring-accent/25 focus-visible:ring-[2px] focus-visible:outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground border-transparent [a&]:hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground border-transparent [a&]:hover:bg-secondary/80",
+        outline: "border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground border-transparent [a&]:hover:bg-destructive/90"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge(_a) {
+  var _b = _a, {
+    className,
+    variant = "default",
+    asChild = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "asChild"
+  ]);
+  const Comp = asChild ? Slot.Root : "span";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    __spreadValues({
+      "data-slot": "badge",
+      "data-variant": variant,
+      className: cn(badgeVariants({ variant }), className)
+    }, props)
+  );
+}
+
+// src/components/ui/dropdown-menu.tsx
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DropdownMenu(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Root, __spreadValues({ "data-slot": "dropdown-menu" }, props));
+}
+function DropdownMenuPortal(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Portal, __spreadValues({ "data-slot": "dropdown-menu-portal" }, props));
+}
+function DropdownMenuTrigger(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Trigger,
+    __spreadValues({
+      "data-slot": "dropdown-menu-trigger"
+    }, props)
+  );
+}
+function DropdownMenuContent(_a) {
+  var _b = _a, {
+    className,
+    sideOffset = 4
+  } = _b, props = __objRest(_b, [
+    "className",
+    "sideOffset"
+  ]);
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Content,
+    __spreadValues({
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-card/95 text-popover-foreground backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-border-subtle p-1 shadow-md",
+        className
+      )
+    }, props)
+  ) });
+}
+function DropdownMenuGroup(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Group, __spreadValues({ "data-slot": "dropdown-menu-group" }, props));
+}
+function DropdownMenuItem(_a) {
+  var _b = _a, {
+    className,
+    inset,
+    variant = "default"
+  } = _b, props = __objRest(_b, [
+    "className",
+    "inset",
+    "variant"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Item,
+    __spreadValues({
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-surface-subtle data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-150 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )
+    }, props)
+  );
+}
+function DropdownMenuCheckboxItem(_a) {
+  var _b = _a, {
+    className,
+    children,
+    checked
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children",
+    "checked"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.CheckboxItem,
+    __spreadProps(__spreadValues({
+      "data-slot": "dropdown-menu-checkbox-item",
+      className: cn(
+        "focus:bg-surface-subtle relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none transition-colors duration-150 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      checked
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx2(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx2(CheckIcon, { className: "size-4" }) }) }),
+        children
+      ]
+    })
+  );
+}
+function DropdownMenuRadioGroup(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.RadioGroup,
+    __spreadValues({
+      "data-slot": "dropdown-menu-radio-group"
+    }, props)
+  );
+}
+function DropdownMenuRadioItem(_a) {
+  var _b = _a, {
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.RadioItem,
+    __spreadProps(__spreadValues({
+      "data-slot": "dropdown-menu-radio-item",
+      className: cn(
+        "focus:bg-surface-subtle relative flex cursor-default items-center gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm outline-hidden select-none transition-colors duration-150 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx2(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx2(CircleIcon, { className: "size-2 fill-current" }) }) }),
+        children
+      ]
+    })
+  );
+}
+function DropdownMenuLabel(_a) {
+  var _b = _a, {
+    className,
+    inset
+  } = _b, props = __objRest(_b, [
+    "className",
+    "inset"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Label,
+    __spreadValues({
+      "data-slot": "dropdown-menu-label",
+      "data-inset": inset,
+      className: cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )
+    }, props)
+  );
+}
+function DropdownMenuSeparator(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.Separator,
+    __spreadValues({
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border-subtle -mx-1 my-1 h-px", className)
+    }, props)
+  );
+}
+function DropdownMenuShortcut(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    "span",
+    __spreadValues({
+      "data-slot": "dropdown-menu-shortcut",
+      className: cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )
+    }, props)
+  );
+}
+function DropdownMenuSub(_a) {
+  var props = __objRest(_a, []);
+  return /* @__PURE__ */ jsx2(DropdownMenuPrimitive.Sub, __spreadValues({ "data-slot": "dropdown-menu-sub" }, props));
+}
+function DropdownMenuSubTrigger(_a) {
+  var _b = _a, {
+    className,
+    inset,
+    children
+  } = _b, props = __objRest(_b, [
+    "className",
+    "inset",
+    "children"
+  ]);
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuPrimitive.SubTrigger,
+    __spreadProps(__spreadValues({
+      "data-slot": "dropdown-menu-sub-trigger",
+      "data-inset": inset,
+      className: cn(
+        "focus:bg-surface-subtle data-[state=open]:bg-surface-subtle [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-150 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )
+    }, props), {
+      children: [
+        children,
+        /* @__PURE__ */ jsx2(ChevronRightIcon, { className: "ml-auto size-4" })
+      ]
+    })
+  );
+}
+function DropdownMenuSubContent(_a) {
+  var _b = _a, {
+    className
+  } = _b, props = __objRest(_b, [
+    "className"
+  ]);
+  return /* @__PURE__ */ jsx2(
+    DropdownMenuPrimitive.SubContent,
+    __spreadValues({
+      "data-slot": "dropdown-menu-sub-content",
+      className: cn(
+        "bg-card/95 text-popover-foreground backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-lg border border-border-subtle p-1 shadow-lg",
+        className
+      )
+    }, props)
+  );
+}
+
+// src/components/ui/button.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { Slot as Slot2 } from "radix-ui";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-150 cursor-pointer active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-accent focus-visible:ring-accent/25 focus-visible:ring-[2px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-[inset_0_1px_0_0_var(--color-primary-foreground)/0.1] hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border border-border-subtle bg-background hover:bg-surface-subtle",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-surface-subtle",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button(_a) {
+  var _b = _a, {
+    className,
+    variant = "default",
+    size = "default",
+    asChild = false
+  } = _b, props = __objRest(_b, [
+    "className",
+    "variant",
+    "size",
+    "asChild"
+  ]);
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx3(
+    Comp,
+    __spreadValues({
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className }))
+    }, props)
+  );
+}
+
+export {
+  badgeVariants,
+  Badge,
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  buttonVariants,
+  Button
+};

package/dist/components/index.d.ts

@@ -0,0 +1,87 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ThemeProvider as ThemeProvider$1 } from 'next-themes';
+import * as React$1 from 'react';
+
+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;
+
+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;
+
+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;
+
+declare function ThemeToggle(): react_jsx_runtime.JSX.Element;
+
+declare function ThemeProvider({ children, ...props }: React.ComponentProps<typeof ThemeProvider$1>): react_jsx_runtime.JSX.Element;
+
+declare function ThemeToggleIcon(): react_jsx_runtime.JSX.Element;
+
+declare function Logo({ size, mono, className, }: {
+    size?: number;
+    mono?: boolean;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+
+type HeadingProps = React$1.HTMLAttributes<HTMLHeadingElement> & {
+    children: React$1.ReactNode;
+};
+declare const pageTitleClass = "text-foreground text-4xl font-bold tracking-tight lg:text-5xl";
+declare const sectionTitleClass = "text-foreground text-lg font-bold";
+declare function PageTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare function SectionTitle({ className, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+
+export { Footer, LocaleSwitcher, Logo, Nav, PageTitle, SectionTitle, ThemeProvider, ThemeToggle, ThemeToggleIcon, pageTitleClass, sectionTitleClass };