@viliha/vui-ui 1.1.7 → 1.2.0

package/template/app/_components/route-meta.ts

@@ -0,0 +1,137 @@
+/** Route → display label + brand color, mirroring the sidebar navigation.
+ * Powers the breadcrumb trail and the colored page-title icon. */
+
+export const SEGMENT_LABELS: Record<string, string> = {
+  "": "Home",
+  dashboard: "Home",
+  charts: "Charts",
+  components: "Components",
+  forms: "Forms",
+  steps: "Steps",
+  calendar: "Calendar",
+  chat: "Chat",
+  support: "Support",
+  organizations: "Organizations",
+  branches: "Branches",
+  departments: "Departments",
+  employees: "Employees",
+  markets: "Markets",
+  businesses: "Businesses",
+  crm: "CRM",
+  companies: "Companies",
+  people: "People",
+  opportunities: "Opportunities",
+  system: "System",
+  regions: "Regions",
+  countries: "Countries",
+  cities: "Cities",
+  currencies: "Currencies",
+  languages: "Languages",
+  settings: "Settings",
+};
+
+/** Full pathname → icon color (Tailwind text-* class). */
+export const ROUTE_COLORS: Record<string, string> = {
+  "/": "text-blue-500",
+  "/dashboard": "text-blue-500",
+  "/charts": "text-fuchsia-500",
+  "/components": "text-indigo-500",
+  "/forms": "text-teal-500",
+  "/steps": "text-violet-500",
+  "/calendar": "text-rose-500",
+  "/chat": "text-sky-500",
+  "/support": "text-emerald-500",
+  "/organizations": "text-blue-500",
+  "/branches": "text-violet-500",
+  "/departments": "text-amber-500",
+  "/employees": "text-cyan-500",
+  "/markets": "text-rose-500",
+  "/businesses": "text-emerald-500",
+  "/crm/companies": "text-blue-500",
+  "/crm/people": "text-sky-500",
+  "/crm/opportunities": "text-orange-500",
+  "/system/regions": "text-teal-500",
+  "/system/countries": "text-red-500",
+  "/system/cities": "text-amber-500",
+  "/system/currencies": "text-green-500",
+  "/system/languages": "text-purple-500",
+  "/settings": "text-slate-500",
+};
+
+/** Full pathname → raw accent color (drives the --page-accent CSS variable so
+ * shared components like tables can tint their icons per module). */
+export const ROUTE_ACCENT: Record<string, string> = {
+  "/": "#3b82f6",
+  "/dashboard": "#3b82f6",
+  "/charts": "#d946ef",
+  "/components": "#6366f1",
+  "/forms": "#14b8a6",
+  "/steps": "#8b5cf6",
+  "/calendar": "#f43f5e",
+  "/chat": "#0ea5e9",
+  "/support": "#10b981",
+  "/organizations": "#3b82f6",
+  "/branches": "#8b5cf6",
+  "/departments": "#f59e0b",
+  "/employees": "#06b6d4",
+  "/markets": "#f43f5e",
+  "/businesses": "#10b981",
+  "/crm/companies": "#3b82f6",
+  "/crm/people": "#0ea5e9",
+  "/crm/opportunities": "#f97316",
+  "/system/regions": "#14b8a6",
+  "/system/countries": "#ef4444",
+  "/system/cities": "#f59e0b",
+  "/system/currencies": "#22c55e",
+  "/system/languages": "#a855f7",
+  "/settings": "#64748b",
+};
+
+// Group-parent → first-child map is derived automatically from the nav config
+// (see nav-config.ts), so breadcrumbs never need per-section wiring here.
+export { SECTION_INDEX } from "./nav-config";
+import { SECTION_INDEX } from "./nav-config";
+
+export function accentFor(pathname: string): string {
+  return ROUTE_ACCENT[pathname] ?? "";
+}
+
+export function labelFor(segment: string): string {
+  return (
+    SEGMENT_LABELS[segment] ??
+    segment.charAt(0).toUpperCase() + segment.slice(1)
+  );
+}
+
+export function colorFor(pathname: string): string {
+  return ROUTE_COLORS[pathname] ?? "text-muted-foreground";
+}
+
+export type Crumb = { label: string; href: string; isLast: boolean };
+
+/** Build a breadcrumb trail (always rooted at Home) from a pathname. */
+export function crumbsFor(pathname: string): Crumb[] {
+  const parts = pathname.split("/").filter(Boolean);
+  // The dashboard IS Home (it lives at /dashboard), so the trail always roots
+  // there and the "dashboard" segment isn't repeated as its own crumb.
+  const isDash = parts[0] === "dashboard";
+  const crumbs: Crumb[] = [
+    {
+      label: "Home",
+      href: "/dashboard",
+      isLast: parts.length === 0 || (isDash && parts.length === 1),
+    },
+  ];
+  let acc = "";
+  parts.forEach((seg, i) => {
+    if (i === 0 && seg === "dashboard") {
+      acc = "/dashboard";
+      return;
+    }
+    acc += `/${seg}`;
+    // Group parents (no index page) redirect to their first child.
+    const href = SECTION_INDEX[acc] ?? acc;
+    crumbs.push({ label: labelFor(seg), href, isLast: i === parts.length - 1 });
+  });
+  return crumbs;
+}

package/template/app/_components/set-page-title.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import { type IconType, usePageTitle } from "@viliha/vui-ui/record-view";
+
+/** Registers a page's title/icon into the global top bar (clears on unmount). */
+export function SetPageTitle({
+  title,
+  icon,
+}: {
+  title: string;
+  icon?: IconType;
+}) {
+  usePageTitle(title, icon);
+  return null;
+}

package/template/app/_components/showcase.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+/** Live demo + code snippet, used by the shadcn/ui showcase pages. */
+export function Demo({
+  title,
+  desc,
+  code,
+  children,
+}: {
+  title: string;
+  desc?: string;
+  code?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="overflow-hidden rounded-lg border border-border bg-card">
+      <div className="border-b border-border bg-muted/40 px-4 py-2.5">
+        <h3 className="font-medium">{title}</h3>
+        {desc && <p className="text-sm text-muted-foreground">{desc}</p>}
+      </div>
+      <div className="flex flex-wrap items-start gap-4 p-5">{children}</div>
+      {code && (
+        <pre className="overflow-x-auto border-t border-border bg-background p-4 font-mono text-[12.5px] leading-relaxed text-muted-foreground">
+          <code>{code}</code>
+        </pre>
+      )}
+    </section>
+  );
+}

package/template/app/_components/stat-card.tsx

@@ -0,0 +1,56 @@
+import {
+  ArrowBottomRightIcon as ArrowDownRight,
+  ArrowRightIcon as ArrowRight,
+  ArrowTopRightIcon as ArrowUpRight,
+} from "@radix-ui/react-icons";
+
+import { cn } from "@/lib/utils";
+
+type Trend = "up" | "down" | "flat";
+
+type StatCardProps = {
+  label: string;
+  value: string | number;
+  delta: string;
+  trend: Trend;
+  className?: string;
+};
+
+const trendIcon: Record<Trend, typeof ArrowRight> = {
+  up: ArrowUpRight,
+  down: ArrowDownRight,
+  flat: ArrowRight,
+};
+
+const trendColor: Record<Trend, string> = {
+  up: "text-emerald-600 dark:text-emerald-400",
+  down: "text-destructive",
+  flat: "text-muted-foreground",
+};
+
+export function StatCard({
+  label,
+  value,
+  delta,
+  trend,
+  className,
+}: StatCardProps) {
+  const TrendIcon = trendIcon[trend];
+  return (
+    <div className={cn("p-4", className)}>
+      <p className="text-muted-foreground">{label}</p>
+      <p className="mt-1.5 text-2xl font-semibold tracking-tight">
+        {typeof value === "number" ? value.toLocaleString() : value}
+      </p>
+      <p
+        className={cn(
+          "mt-2 flex items-center gap-1 font-medium",
+          trendColor[trend],
+        )}
+      >
+        <TrendIcon className="size-3.5" aria-hidden="true" />
+        {delta}
+      </p>
+    </div>
+  );
+}

package/template/app/_components/theme-toggle.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import * as React from "react";
+import {
+  MoonIcon as Moon,
+  SunIcon as Sun,
+} from "@radix-ui/react-icons";
+
+import { Button } from "@viliha/vui-ui/button";
+
+/** Reads/writes the `.dark` class on <html> and persists the choice. */
+export function ThemeToggle() {
+  const [isDark, setIsDark] = React.useState(false);
+
+  React.useEffect(() => {
+    setIsDark(document.documentElement.classList.contains("dark"));
+  }, []);
+
+  function toggle() {
+    const next = !document.documentElement.classList.contains("dark");
+    document.documentElement.classList.toggle("dark", next);
+    try {
+      localStorage.setItem("theme", next ? "dark" : "light");
+    } catch {
+      // ignore write failures (private mode, disabled storage)
+    }
+    setIsDark(next);
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={toggle}
+      aria-label={isDark ? "Switch to light mode" : "Switch to dark mode"}
+    >
+      {isDark ? <Sun className="size-4" /> : <Moon className="size-4" />}
+    </Button>
+  );
+}
+
+/**
+ * Runs before paint to set the initial theme from storage / OS preference,
+ * avoiding a flash of the wrong theme. Injected as a blocking inline script.
+ */
+export const themeInitScript = `(function(){try{var t=localStorage.getItem('theme');var d=t?t==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;document.documentElement.classList.toggle('dark',d);}catch(e){}})();`;

package/template/app/_components/top-bar.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import {
+  BellIcon,
+  GearIcon,
+  MagnifyingGlassIcon,
+  QuestionMarkCircledIcon,
+  ReaderIcon,
+} from "@radix-ui/react-icons";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { usePageChrome } from "@viliha/vui-ui/record-view";
+
+import { SidebarToggle } from "@/app/_components/app-sidebar";
+import { UserMenu } from "@/app/_components/user-menu";
+import { useGlobalSearch } from "@/app/_components/global-search";
+import { colorFor } from "@/app/_components/route-meta";
+import { Shortcut } from "@viliha/vui-ui/kbd";
+
+/** One shared size for every top-bar icon control, so the cluster is uniform. */
+const iconControl =
+  "grid size-9 shrink-0 place-items-center rounded-md transition-colors hover:bg-accent";
+const iconGlyph = "size-5 text-foreground [&_path]:[stroke-width:1px]";
+
+/** Global top bar: sidebar toggle + page title (left), centered search,
+    help + notifications (right). */
+export function TopBar() {
+  const { page } = usePageChrome();
+  const pathname = usePathname();
+  const PageIcon = page?.icon;
+  // Global search (records) lives in GlobalSearchProvider; the box below is its
+  // launcher. Quick actions (pages) is a separate ⌘K palette in the sidebar.
+  const { open: openSearch } = useGlobalSearch();
+
+  return (
+    <header className="relative flex h-12 shrink-0 items-center gap-2 border-b border-border bg-background px-4">
+      {/* Left — sidebar toggle + current page title/icon */}
+      <SidebarToggle />
+      <div className="flex min-w-0 items-center gap-2">
+        {PageIcon && (
+          <PageIcon className={`size-4 shrink-0 ${colorFor(pathname)}`} />
+        )}
+        {page && (
+          <h1 className="truncate font-semibold tracking-tight">
+            {page.title}
+          </h1>
+        )}
+      </div>
+
+      {/* Center — global search launcher (opens the records palette). */}
+      <div className="absolute left-1/2 top-1/2 hidden w-full max-w-sm -translate-x-1/2 -translate-y-1/2 px-4 md:block">
+        <button
+          type="button"
+          onClick={openSearch}
+          aria-label="Global search"
+          className="flex h-8 w-full items-center gap-2 rounded-md border border-input bg-background px-2.5 text-muted-foreground transition-colors hover:bg-accent"
+        >
+          <MagnifyingGlassIcon className="size-3.5 shrink-0" aria-hidden="true" />
+          <span className="flex-1 text-left text-sm">Search…</span>
+          <Shortcut keys={["⌘", "⌥", "K"]} />
+        </button>
+      </div>
+
+      {/* Right — help, notifications, settings, profile.
+          Bold, dark, larger glyphs (heavier stroke via [&_path]). */}
+      {/* All controls share one size (size-9 box, size-5 glyph) so the cluster
+          is visually uniform — see iconControl. */}
+      <div className="ml-auto flex items-center gap-1.5">
+        <button
+          type="button"
+          aria-label="Help &amp; support"
+          className={`hidden sm:grid ${iconControl}`}
+        >
+          <QuestionMarkCircledIcon className={iconGlyph} />
+        </button>
+        <Link
+          href="/docs"
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label="Documentation (opens in a new tab)"
+          className={iconControl}
+        >
+          <ReaderIcon className={iconGlyph} />
+        </Link>
+        <button
+          type="button"
+          aria-label="Notifications"
+          className={`relative ${iconControl}`}
+        >
+          <BellIcon className={iconGlyph} />
+          <span
+            className="absolute right-1.5 top-1.5 size-2 rounded-full bg-[var(--button-primary)] ring-2 ring-background"
+            aria-hidden="true"
+          />
+        </button>
+        <Link
+          href="/settings"
+          aria-label="Settings"
+          className={`hidden sm:grid ${iconControl}`}
+        >
+          <GearIcon className={iconGlyph} />
+        </Link>
+        <UserMenu />
+      </div>
+    </header>
+  );
+}

package/template/app/_components/user-menu.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import {
+  ExitIcon,
+  GearIcon,
+  LockClosedIcon,
+  PersonIcon,
+} from "@radix-ui/react-icons";
+
+import { Avatar, AvatarFallback } from "@viliha/vui-ui/avatar";
+import { MenuItem } from "@viliha/vui-ui/menu";
+import { ThemeToggle } from "./theme-toggle";
+
+// ponytail: no auth in the demo — mock the signed-in user. Swap for the real
+// session/role check when wiring auth; the admin item keys off `isAdmin`.
+const USER = {
+  name: "Admin User",
+  email: "admin@viliha.example",
+  role: "Administrator",
+  initials: "AU",
+};
+const isAdmin = USER.role === "Administrator";
+
+/** GitLab-style profile menu in the top bar: avatar → popup with account
+ *  info, an admin-only entry, appearance toggle, and sign out. */
+export function UserMenu() {
+  const [open, setOpen] = React.useState(false);
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onDown = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label="Account menu"
+        onClick={() => setOpen((v) => !v)}
+        // Matches the Settings gear control (size-9 rounded-md box, size-5 glyph).
+        className="grid size-9 shrink-0 place-items-center rounded-md transition-colors hover:bg-accent"
+      >
+        <PersonIcon className="size-5 text-foreground [&_path]:[stroke-width:1px]" />
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          className="vui-pop-in absolute right-0 z-50 mt-2 w-60 overflow-hidden rounded-lg border border-border bg-popover text-popover-foreground shadow-md"
+          style={{ "--vui-pop-origin": "top right" } as React.CSSProperties}
+        >
+          {/* Account header */}
+          <div className="flex items-center gap-3 border-b border-border px-3 py-3">
+            <Avatar className="size-9">
+              <AvatarFallback>{USER.initials}</AvatarFallback>
+            </Avatar>
+            <div className="min-w-0">
+              <p className="truncate font-medium">{USER.name}</p>
+              <p className="truncate text-muted-foreground">{USER.email}</p>
+            </div>
+          </div>
+
+          {/* Menu items — MenuItem bakes in the bordered-row standard */}
+          <MenuItem as={Link} href="/settings" onClick={() => setOpen(false)}>
+            <PersonIcon className="size-4 text-sky-500" />
+            Profile
+          </MenuItem>
+          <MenuItem as={Link} href="/settings" onClick={() => setOpen(false)}>
+            <GearIcon className="size-4 text-slate-500" />
+            Settings
+          </MenuItem>
+          {isAdmin && (
+            <MenuItem
+              as={Link}
+              href="/system/regions"
+              onClick={() => setOpen(false)}
+              className="font-medium"
+            >
+              <LockClosedIcon className="size-4 text-amber-500" />
+              Admin area
+            </MenuItem>
+          )}
+          <div className="flex items-center justify-between border-b border-border px-3 py-1.5">
+            <span className="text-muted-foreground">Appearance</span>
+            <ThemeToggle />
+          </div>
+          <MenuItem as={Link} href="/auth/signin" onClick={() => setOpen(false)}>
+            <ExitIcon className="size-4 text-rose-500" />
+            Sign out
+          </MenuItem>
+        </div>
+      )}
+    </div>
+  );
+}

package/template/app/_components/wordmark.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+
+import { cn } from "@/lib/utils";
+import { Logo } from "./logo";
+
+/**
+ * The brand lockup — Vui logo + "Vui Starter" wordmark — used consistently in
+ * the app sidebar, the auth screens, and the docs header. Single source of the
+ * logo + type styling so they never drift.
+ */
+export function Wordmark({
+  href,
+  className,
+  logoClassName,
+  textClassName,
+}: {
+  /** Render as a link when set (e.g. header → home). */
+  href?: string;
+  className?: string;
+  logoClassName?: string;
+  textClassName?: string;
+}) {
+  const content = (
+    <>
+      <Logo className={cn("h-6 w-6 shrink-0", logoClassName)} />
+      <span
+        className={cn(
+          "text-lg font-bold tracking-tight text-foreground",
+          textClassName,
+        )}
+      >
+        Vui Starter
+      </span>
+    </>
+  );
+  const classes = cn("flex items-center gap-2", className);
+
+  return href ? (
+    <Link href={href} aria-label="Vui Starter" className={classes}>
+      {content}
+    </Link>
+  ) : (
+    <span className={classes}>{content}</span>
+  );
+}

package/template/app/auth/forgot-password/page.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import * as React from "react";
+import Link from "next/link";
+import {
+  ArrowLeftIcon as ArrowLeft,
+  EnvelopeClosedIcon as Mail,
+  EnvelopeOpenIcon as MailCheck,
+} from "@radix-ui/react-icons";
+
+import { Button } from "@viliha/vui-ui/button";
+import { Input } from "@viliha/vui-ui/input";
+import {
+  AuthCard,
+  AuthCardAside,
+  AuthCardBody,
+  AuthCardFooter,
+  AuthCardHeader,
+  Field,
+} from "@/app/_components/auth";
+
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export default function ForgotPasswordPage() {
+  const [email, setEmail] = React.useState("");
+  const [error, setError] = React.useState<string>();
+  const [sent, setSent] = React.useState(false);
+
+  function submit(e: React.FormEvent) {
+    e.preventDefault();
+    if (!EMAIL_RE.test(email.trim())) {
+      setError("Enter a valid email address.");
+      return;
+    }
+    setError(undefined);
+    setSent(true);
+  }
+
+  if (sent) {
+    return (
+      <AuthCard>
+        <AuthCardHeader
+          icon={<MailCheck className="size-6" />}
+          title="Check your email"
+          description={
+            <>
+              A reset link was sent to{" "}
+              <span className="font-medium text-foreground">{email}</span>
+            </>
+          }
+        />
+        <AuthCardFooter className="space-y-2">
+          {/* Demo shortcut — no real inbox in the demo. */}
+          <Link href="/auth/reset-password" className="block">
+            <Button className="w-full">I&apos;ve got the link — continue</Button>
+          </Link>
+          <Button variant="ghost" className="w-full" onClick={() => setSent(false)}>
+            Use a different email
+          </Button>
+        </AuthCardFooter>
+      </AuthCard>
+    );
+  }
+
+  return (
+    <AuthCard>
+      <form onSubmit={submit}>
+        <AuthCardHeader
+          title="Reset your password"
+          description="Enter your email and we'll send you a reset link."
+        />
+        <AuthCardBody>
+          <Field label="Work email" htmlFor="email" required error={error}>
+            <Input
+              id="email"
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="you@company.com"
+              autoComplete="email"
+            />
+          </Field>
+        </AuthCardBody>
+        <AuthCardFooter>
+          <Button type="submit" className="w-full">
+            <Mail className="size-4" />
+            Send reset link
+          </Button>
+          <AuthCardAside>
+            <Link
+              href="/auth/signin"
+              className="flex items-center justify-center gap-1 hover:text-foreground"
+            >
+              <ArrowLeft className="size-3.5" />
+              Back to sign in
+            </Link>
+          </AuthCardAside>
+        </AuthCardFooter>
+      </form>
+    </AuthCard>
+  );
+}