@cntyclub/ui-react 0.3.1 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [

package/src/components/layout/dashboard-topbar.tsx

@@ -0,0 +1,221 @@
+"use client";
+
+import { LifeBuoy, LogOut, Search, Settings } from "lucide-react";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { AnimatedThemeToggler } from "../ui/animated-theme-toggler";
+import { Avatar } from "../ui/avatar";
+import { Button } from "../ui/button";
+import { Kbd, KbdGroup } from "../ui/kbd";
+import {
+  Menu,
+  MenuItem,
+  MenuPopup,
+  MenuSeparator,
+  MenuTrigger,
+} from "../ui/menu";
+import { SidebarTrigger } from "../ui/sidebar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+export interface DashboardTopbarUser {
+  /** Display name, shown in the account menu and used as the avatar alt text. */
+  name: string;
+  /** Optional email, shown under the name in the account menu. */
+  email?: string;
+  /** Optional avatar image URL. Falls back to initials when omitted. */
+  avatarSrc?: string;
+  /** Initials shown when there is no avatar image. */
+  initials?: string;
+}
+
+export interface DashboardTopbarProps {
+  /** The signed-in user rendered in the account menu + avatar trigger. */
+  user: DashboardTopbarUser;
+  /** Opens the consumer's command palette. The search field is a button. */
+  onSearch?: () => void;
+  /** Placeholder text inside the search affordance. Defaults to "Search". */
+  searchPlaceholder?: string;
+  /**
+   * Trailing shortcut hint inside the search affordance. Defaults to
+   * `<KbdGroup><Kbd>⌘</Kbd><Kbd>K</Kbd></KbdGroup>`. Pass `null` to hide it.
+   */
+  searchShortcut?: React.ReactNode;
+  /** Account-menu "Settings" item handler. The item is omitted when undefined. */
+  onSettings?: () => void;
+  /** Account-menu "Log out" item handler. The item is omitted when undefined. */
+  onLogout?: () => void;
+  /** mailto/url for the support icon button. The button renders only when set. */
+  supportHref?: string;
+  /** Whether to render the animated light/dark theme toggle. Defaults to `true`. */
+  showThemeToggle?: boolean;
+  /** Optional extra controls rendered left of the theme toggle. */
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+const defaultSearchShortcut = (
+  <KbdGroup className="absolute right-3 top-1/2 hidden -translate-y-1/2 sm:inline-flex">
+    <Kbd>⌘</Kbd>
+    <Kbd>K</Kbd>
+  </KbdGroup>
+);
+
+/**
+ * Dashboard top bar shared by the host and sponsor dashboards.
+ *
+ * Zones: mobile/desktop sidebar trigger · a global search field styled as an
+ * input that calls `onSearch` (the consumer owns the command palette + ⌘K key
+ * handler) · optional extra `actions` · the animated theme toggle · an optional
+ * support link · the account menu (Settings / Log out). The inner row shares a
+ * `max-w-[1280px]` wrapper so the search field and avatar line up with the page.
+ */
+export function DashboardTopbar({
+  user,
+  onSearch,
+  searchPlaceholder = "Search",
+  searchShortcut = defaultSearchShortcut,
+  onSettings,
+  onLogout,
+  supportHref,
+  showThemeToggle = true,
+  actions,
+  className,
+}: DashboardTopbarProps) {
+  return (
+    <header
+      data-slot="dashboard-topbar"
+      className={cn("h-16 flex-shrink-0 bg-page-bg", className)}
+    >
+      <div className="mx-auto flex h-full max-w-[1280px] items-center gap-2 px-4 sm:gap-3 sm:px-6 md:gap-4 md:px-8">
+        {/* Sidebar toggle — collapse/open the navigation. */}
+        <SidebarTrigger
+          aria-label="Toggle navigation"
+          className="size-10 border border-input bg-background sm:size-9"
+        />
+
+        {/* Search — looks like an input, opens the consumer's command palette. */}
+        <button
+          type="button"
+          onClick={onSearch}
+          aria-label={searchPlaceholder}
+          className="group min-w-0 max-w-xl flex-1 outline-none"
+        >
+          <span className="relative flex h-10 w-full items-center rounded-lg border border-input bg-background pl-10 pr-3 text-sm text-muted-foreground transition-colors group-hover:bg-accent/50 group-focus-visible:ring-2 group-focus-visible:ring-ring sm:pr-16">
+            <Search
+              className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+              strokeWidth={2}
+            />
+            {searchPlaceholder}
+            {searchShortcut}
+          </span>
+        </button>
+
+        {/* Right cluster */}
+        <div className="ml-auto flex flex-shrink-0 items-center gap-2 sm:gap-3">
+          {actions}
+
+          {/* Theme toggle. The toggler is anchored inside a wrapper span rather
+              than being the TooltipTrigger's render target directly:
+              AnimatedThemeToggler spreads incoming props (including the ref Base
+              UI injects) AFTER its own `ref={buttonRef}`, so making it the
+              trigger clobbers that ref — and its click handler bails out on
+              `if (!buttonRef.current) return`, so the theme never flips.
+              Wrapping keeps the toggler's own ref + onClick intact while the
+              span carries the tooltip. */}
+          {showThemeToggle ? (
+            <Tooltip>
+              <TooltipTrigger render={<span className="inline-flex" />}>
+                <AnimatedThemeToggler
+                  aria-label="Toggle light / dark theme"
+                  className="size-10 border border-input bg-background sm:size-9"
+                  variant="circle"
+                />
+              </TooltipTrigger>
+              <TooltipContent>Toggle light / dark theme</TooltipContent>
+            </Tooltip>
+          ) : null}
+
+          {/* Support */}
+          {supportHref ? (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    aria-label="Contact support"
+                    className="hidden sm:inline-flex"
+                    render={<a href={supportHref} />}
+                    size="icon-lg"
+                    variant="outline"
+                  >
+                    <LifeBuoy strokeWidth={1.8} />
+                  </Button>
+                }
+              />
+              <TooltipContent>Contact support</TooltipContent>
+            </Tooltip>
+          ) : null}
+
+          {/* Account menu */}
+          <Menu>
+            <MenuTrigger
+              render={
+                <button
+                  type="button"
+                  aria-label={`Account menu — signed in as ${user.name}`}
+                  className="rounded-full outline-none transition hover:ring-2 hover:ring-ring focus-visible:ring-2 focus-visible:ring-ring"
+                />
+              }
+            >
+              <Avatar
+                alt={user.name}
+                initials={user.initials}
+                size="md"
+                src={user.avatarSrc}
+              />
+            </MenuTrigger>
+            <MenuPopup
+              align="end"
+              className="w-[min(280px,calc(100vw-32px))]"
+              sideOffset={8}
+            >
+              <div className="flex items-center gap-3 px-2 py-2">
+                <Avatar
+                  alt=""
+                  initials={user.initials}
+                  size="md"
+                  src={user.avatarSrc}
+                />
+                <div className="min-w-0">
+                  <p className="truncate text-sm font-semibold text-foreground">
+                    {user.name}
+                  </p>
+                  {user.email ? (
+                    <p className="truncate text-xs text-muted-foreground">
+                      {user.email}
+                    </p>
+                  ) : null}
+                </div>
+              </div>
+              {(onSettings || onLogout) ? <MenuSeparator /> : null}
+              {onSettings ? (
+                <MenuItem onClick={onSettings}>
+                  <Settings strokeWidth={1.8} />
+                  Settings
+                </MenuItem>
+              ) : null}
+              {onLogout ? (
+                <MenuItem onClick={onLogout} variant="destructive">
+                  <LogOut strokeWidth={1.8} />
+                  Log out
+                </MenuItem>
+              ) : null}
+            </MenuPopup>
+          </Menu>
+        </div>
+      </div>
+    </header>
+  );
+}
+
+export default DashboardTopbar;

package/src/index.ts

@@ -99,6 +99,7 @@ export * from "./components/ui/video-player";
 // Layout components
 export * from "./components/layout/dashboard-header";
 export * from "./components/layout/dashboard-panel";
+export * from "./components/layout/dashboard-topbar";
 
 // Theme
 export * from "./components/theme-provider";