@momentumworld/ui-react 0.17.0

package/src/components/form/text-field.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import type { StandardSchemaV1Issue } from "@tanstack/react-form";
+import {
+  Field,
+  FieldControl,
+  FieldError,
+  FieldLabel,
+} from "../ui/field";
+import { Input } from "../ui/input";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "../ui/input-group";
+
+export function TextField({
+  field,
+  label,
+  placeholder,
+  type = "text",
+  inlineLabel,
+  leadingIcon,
+  trailingIcon,
+}: {
+  field: {
+    name: string;
+    state: {
+      value: string;
+      meta: {
+        readonly errors: ReadonlyArray<
+          string | StandardSchemaV1Issue | undefined
+        >;
+      };
+    };
+    handleChange: (nextValue: string) => void;
+    handleBlur: () => void;
+  };
+  label: string;
+  placeholder?: string;
+  type?: React.ComponentProps<typeof Input>["type"];
+  /** Render label inside the input border as a block-start addon */
+  inlineLabel?: boolean;
+  /** Content rendered as an inline-start addon (e.g. an icon) */
+  leadingIcon?: React.ReactNode;
+  /** Content rendered as an inline-end addon (e.g. an icon) */
+  trailingIcon?: React.ReactNode;
+}) {
+  const errors = field.state.meta.errors
+    .map((err) => (typeof err === "string" ? err : err?.message))
+    .filter(Boolean);
+
+  const useInputGroup = inlineLabel || leadingIcon || trailingIcon;
+
+  if (useInputGroup) {
+    return (
+      <Field name={field.name}>
+        {!inlineLabel && <FieldLabel>{label}</FieldLabel>}
+        <InputGroup>
+          {inlineLabel && (
+            <InputGroupAddon align="block-start">
+              <FieldLabel>{label}</FieldLabel>
+            </InputGroupAddon>
+          )}
+          {leadingIcon && (
+            <InputGroupAddon align="inline-start">
+              {leadingIcon}
+            </InputGroupAddon>
+          )}
+          <FieldControl
+            render={
+              <InputGroupInput
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                placeholder={placeholder}
+                type={type}
+              />
+            }
+          />
+          {trailingIcon && (
+            <InputGroupAddon align="inline-end">{trailingIcon}</InputGroupAddon>
+          )}
+        </InputGroup>
+        <FieldError match={!!errors.length}>{errors.join(", ")}</FieldError>
+      </Field>
+    );
+  }
+
+  return (
+    <Field name={field.name}>
+      <FieldLabel>{label}</FieldLabel>
+      <FieldControl
+        render={
+          <Input
+            value={field.state.value}
+            onChange={(e) => field.handleChange(e.target.value)}
+            onBlur={field.handleBlur}
+            placeholder={placeholder}
+            type={type}
+          />
+        }
+      />
+      <FieldError match={!!errors.length}>{errors.join(", ")}</FieldError>
+    </Field>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { Slot, Slottable } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import { isValidElement } from "react";
+import type { AsChildProps } from "../../types/helpers";
+
+interface DashboardHeaderProps extends Omit<AsChildProps<"div">, "title"> {
+  title?: React.ReactNode;
+  subtitle?: React.ReactNode;
+  rightActions?: React.ReactNode;
+  breadcrumb?: React.ReactNode;
+}
+
+export function DashboardHeader({
+  title,
+  subtitle,
+  className,
+  children,
+  asChild,
+  rightActions,
+  breadcrumb,
+  ...props
+}: DashboardHeaderProps) {
+  const TitleComp = isValidElement(title) ? Slot : "div";
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      className={clsx("flex flex-col border-b rounded-t-lg", className)}
+      {...props}
+    >
+      <div className={clsx("flex flex-col gap-4 p-4")}>
+        {breadcrumb}
+        {(title || subtitle || rightActions) && (
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-3 min-h-8">
+              {title && (
+                <TitleComp className="grow min-w-0 text-lg font-medium leading-7 tracking-[-0.18px] text-foreground">
+                  {title}
+                </TitleComp>
+              )}
+              {rightActions}
+            </div>
+            {subtitle && (
+              <div className="hidden md:block text-sm font-normal leading-5 text-muted-foreground">
+                {subtitle}
+              </div>
+            )}
+          </div>
+        )}
+        <Slottable>{children}</Slottable>
+      </div>
+    </Comp>
+  );
+}

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

@@ -0,0 +1,34 @@
+import { Slot } from "@radix-ui/react-slot";
+import clsx from "clsx";
+import type { AsChildProps } from "../../types/helpers";
+import { ScrollArea } from "../ui/scroll-area";
+
+interface DashboardPanelProps extends AsChildProps<"div"> {
+  header?: React.ReactNode;
+}
+
+export function DashboardPanel({
+  className,
+  asChild,
+  children,
+  header,
+  ...props
+}: DashboardPanelProps) {
+  const Comp = asChild ? Slot : "div";
+  return (
+    <Comp
+      className={clsx(
+        "flex flex-col grow min-h-0 min-w-0 bg-background rounded border",
+        className,
+      )}
+      {...props}
+    >
+      {header}
+      <ScrollArea className="flex grow flex-col min-h-0 *:data-[slot=scroll-area-viewport]:p-4">
+        {children}
+      </ScrollArea>
+    </Comp>
+  );
+}
+
+export default DashboardPanel;

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;