@caffeinebounce/ui 0.62.2

package/dist/navigation.d.cts

@@ -0,0 +1,591 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+export { NavigationMenuPrimitive };
+import * as React$1 from 'react';
+import { ReactNode, ComponentType, MouseEventHandler } from 'react';
+import { a as NewsletterSignupProps } from './NewsletterSignup-BPreFi5W.cjs';
+import { LucideIcon } from 'lucide-react';
+
+declare function NavigationMenu({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.List>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuTrigger({ className, children, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuLink({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Link>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuViewport({ className, ...props }: React$1.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): react_jsx_runtime.JSX.Element;
+declare function navigationMenuTriggerStyle(): string;
+declare const NavigationMenuViewportPrimitive: React$1.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuViewportProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Application definition for the AppSwitcher.
+ */
+interface AppDefinition {
+    /** Unique identifier */
+    id: string;
+    /** Full display name for the dropdown */
+    name: string;
+    /** Short display name shown in the header badge */
+    shortName: string;
+    /** Route to navigate to when selected */
+    route: string;
+    /** Color class for the app indicator badge */
+    colorClass: string;
+    /** Optional icon component shown in dropdown */
+    icon?: ReactNode;
+}
+interface AppSwitcherProps {
+    /** List of available apps */
+    apps: AppDefinition[];
+    /** Brand name to display (e.g., "Capital Compass") */
+    brandName?: string;
+    /** Brand logo URL */
+    brandLogoUrl?: string;
+    /** Function to determine active app from pathname */
+    getActiveAppId?: (pathname: string) => string;
+    /** Custom keyboard shortcut component */
+    ShortcutComponent?: ComponentType<{
+        className?: string;
+        children: ReactNode;
+    }>;
+    /** Additional className for the container */
+    className?: string;
+}
+/**
+ * AppSwitcher Component
+ *
+ * A branded header with dropdown for switching between different apps/modules.
+ * Styled like AdminBrandedHeader but with app selection capability.
+ *
+ * Visual design:
+ * - Logo on the left (32x32, rounded)
+ * - Brand name as main title (font-semibold)
+ * - Colored app badge underneath (uppercase, tracking-wider)
+ * - Subtle dropdown indicator
+ *
+ * @example
+ * ```tsx
+ * const apps: AppDefinition[] = [
+ *   {
+ *     id: "admin",
+ *     name: "Admin Console",
+ *     shortName: "Admin",
+ *     route: "/admin/dashboard",
+ *     colorClass: "text-orange-600 dark:text-orange-400",
+ *     icon: <Compass className="h-4 w-4" />,
+ *   },
+ *   {
+ *     id: "finance",
+ *     name: "Finance",
+ *     shortName: "Finance",
+ *     route: "/finance",
+ *     colorClass: "text-emerald-600 dark:text-emerald-400",
+ *     icon: <DollarSign className="h-4 w-4" />,
+ *   },
+ * ];
+ *
+ * <AppSwitcher
+ *   apps={apps}
+ *   brandName="Capital Compass"
+ *   brandLogoUrl="/logo.png"
+ *   getActiveAppId={(pathname) => pathname.startsWith("/finance") ? "finance" : "admin"}
+ * />
+ * ```
+ */
+declare function AppSwitcher({ apps, brandName, brandLogoUrl, getActiveAppId, ShortcutComponent, className, }: AppSwitcherProps): react_jsx_runtime.JSX.Element | null;
+
+interface ComingSoonButtonProps {
+    /** Button label */
+    label: string;
+    /** Icon to display before the label */
+    icon?: ReactNode;
+    /** Keyboard shortcut key to display (e.g., "F") */
+    shortcutKey?: string;
+    /** Whether keyboard shortcuts are visible */
+    shortcutsVisible?: boolean;
+    /** Tooltip message */
+    tooltip?: string;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * A disabled button that shows a "Coming Soon" tooltip.
+ * Useful for placeholder features in navigation or sidebars.
+ */
+declare function ComingSoonButton({ label, icon, shortcutKey, shortcutsVisible, tooltip, className, }: ComingSoonButtonProps): react_jsx_runtime.JSX.Element;
+
+/** Base entity interface - extend this for your specific entity types */
+interface Entity {
+    /** Unique identifier */
+    id: string;
+    /** Display name */
+    name: string;
+    /** Optional logo URL */
+    logoUrl?: string | null;
+    /** Whether this is the primary/default entity */
+    isPrimary?: boolean;
+}
+interface EntitySwitcherShortcut {
+    /** Key to press */
+    key: string;
+    /** Require Ctrl key */
+    ctrl?: boolean;
+    /** Require Shift key */
+    shift?: boolean;
+    /** Require Alt key */
+    alt?: boolean;
+    /** Require Meta key */
+    meta?: boolean;
+}
+interface EntitySwitcherProps<T extends Entity> {
+    /** List of entities to display */
+    entities: T[];
+    /** Currently active entity */
+    activeEntity: T | null;
+    /** Callback when an entity is selected */
+    onSelect: (entity: T) => void;
+    /** Callback when "Add new" is clicked */
+    onAddNew?: () => void;
+    /** Whether entities are loading */
+    loading?: boolean;
+    /** User ID for gradient generation when no entities */
+    userId?: string;
+    /** Label shown in dropdown header */
+    label?: string;
+    /** Text for add new button */
+    addNewLabel?: string;
+    /** Placeholder text when no entities exist */
+    emptyTitle?: string;
+    /** Subtitle for empty state */
+    emptySubtitle?: string;
+    /** Custom render function for entity display name */
+    getDisplayName?: (entity: T) => string;
+    /** Custom render function for entity initials */
+    getInitials?: (entity: T) => string;
+    /** Enable keyboard shortcuts (Ctrl+1-9 for quick switch) */
+    enableKeyboardShortcuts?: boolean;
+    /** Keyboard shortcut to open switcher */
+    openShortcut?: EntitySwitcherShortcut;
+    /** Display string for open shortcut */
+    openShortcutDisplay?: string;
+    /** Dropdown side position */
+    side?: "top" | "bottom" | "left" | "right";
+    /** Dropdown alignment */
+    align?: "start" | "center" | "end";
+    /** Custom class name */
+    className?: string;
+    /** Custom keyboard shortcut component (for user preference integration) */
+    ShortcutComponent?: ComponentType<{
+        className?: string;
+        children: ReactNode;
+    }>;
+}
+/**
+ * Generic entity switcher component for switching between teams, companies, workspaces, etc.
+ * Renders within a sidebar menu structure.
+ */
+declare function EntitySwitcher<T extends Entity>({ entities, activeEntity, onSelect, onAddNew, loading, userId, label, addNewLabel, emptyTitle, emptySubtitle, getDisplayName, getInitials, enableKeyboardShortcuts, openShortcut, openShortcutDisplay, side, align, className, ShortcutComponent, }: EntitySwitcherProps<T>): ReactNode;
+
+interface FooterLinkGroup {
+    /** Title of the link group */
+    title: string;
+    /** Links in this group */
+    links: {
+        label: string;
+        href: string;
+        external?: boolean;
+    }[];
+}
+interface FooterProps {
+    /** Logo/brand element */
+    logo?: ReactNode;
+    /** Link groups for columns */
+    linkGroups?: FooterLinkGroup[];
+    /** Social media links */
+    socialLinks?: {
+        icon: ReactNode;
+        href: string;
+        label: string;
+    }[];
+    /** Copyright text */
+    copyright?: string;
+    /** Additional bottom content */
+    bottomContent?: ReactNode;
+    className?: string;
+    /** Additional classes layered onto the shared container width/padding system. */
+    containerClassName?: string;
+    /** Footer variant */
+    variant?: "default" | "brand" | "minimal";
+    /** Tagline text (brand variant) */
+    tagline?: string | ReactNode;
+    /** Newsletter CTA config (brand variant) */
+    newsletter?: false | ({
+        placeholder?: string;
+        buttonText?: string;
+        onSubmit?: (email: string) => void;
+    } & Pick<NewsletterSignupProps, "buttonClassName" | "endpoint" | "errorMessage" | "inputClassName" | "inputLabel" | "source" | "submittingLabel" | "successClassName" | "successDescription" | "successTitle">);
+}
+declare function Footer({ logo, linkGroups, socialLinks, copyright, bottomContent, className, containerClassName, variant, tagline, newsletter, }: FooterProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Navigation link definition
+ */
+interface NavLink {
+    /** Display label */
+    label: string;
+    /** Optional supporting copy rendered under the label in grouped menus */
+    description?: ReactNode;
+    /** Link destination */
+    href: string;
+    /** Whether link opens in new tab */
+    external?: boolean;
+    /** Optional icon to display */
+    icon?: ReactNode;
+}
+interface NavbarMenuGroup {
+    /** Trigger label for the grouped desktop menu */
+    label: string;
+    /** Navigation links rendered in the menu content */
+    links: NavLink[];
+    /** Accessible label for the menu content */
+    ariaLabel?: string;
+    /** Whether to render the menu label inside the content panel */
+    showHeading?: boolean;
+}
+interface NavbarMenuClassNames {
+    /** Classes for the shared navigation menu root */
+    root?: string;
+    /** Classes for the navigation menu list */
+    list?: string;
+    /** Classes for each navigation menu item wrapper */
+    menuItem?: string;
+    /** Classes for each menu trigger button */
+    trigger?: string;
+    /** Classes for the trigger chevron icon */
+    triggerIcon?: string;
+    /** Classes for each content panel */
+    content?: string;
+    /** Classes for the optional content heading */
+    heading?: string;
+    /** Classes for each link inside a content panel */
+    item?: string;
+    /** Classes for each content-panel link label */
+    itemLabel?: string;
+    /** Classes for each content-panel link description */
+    itemDescription?: string;
+}
+/**
+ * Props for the Navbar component
+ */
+interface NavbarProps {
+    /** Logo/brand element (typically an image with text) */
+    logo: ReactNode;
+    /** Optional named styling preset for site-specific chrome */
+    preset?: "default" | "keenan";
+    /** Navigation links to display in desktop view */
+    links?: NavLink[];
+    /** Grouped desktop menus rendered with the shared navigation menu primitive */
+    menuGroups?: NavbarMenuGroup[];
+    /** Slot class hooks for restyling grouped desktop menus */
+    menuClassNames?: NavbarMenuClassNames;
+    /** Right side content (user menu, theme toggle, etc.) */
+    rightContent?: ReactNode;
+    /** Content to render in mobile menu (replaces default link rendering) */
+    mobileContent?: ReactNode;
+    /** Whether navbar should stick to top on scroll */
+    sticky?: boolean;
+    /**
+     * Hide navbar when scrolling down, show when scrolling up.
+     * Only applies when sticky is true.
+     * Common pattern for marketing pages to maximize content area.
+     */
+    hideOnScrollDown?: boolean;
+    /** Background style variant */
+    variant?: "transparent" | "solid" | "blur";
+    /** Additional className for the header element */
+    className?: string;
+    /** Link component for client-side navigation (e.g., Next.js Link) */
+    LinkComponent?: React.ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+        onClick?: () => void;
+    }>;
+    /** Whether to show mobile menu button */
+    showMobileMenu?: boolean;
+    /** Custom mobile menu button content when open */
+    mobileMenuOpenIcon?: ReactNode;
+    /** Custom mobile menu button content when closed */
+    mobileMenuClosedIcon?: ReactNode;
+    /** Mobile menu height behavior */
+    mobileMenuHeight?: "content" | "screen";
+    /** Additional classes layered onto the shared container width/padding system. */
+    containerClassName?: string;
+}
+/**
+ * A configurable navigation bar component with responsive mobile menu.
+ *
+ * @example
+ * ```tsx
+ * <Navbar
+ *   logo={<Image src="/logo.png" alt="Brand" />}
+ *   links={[
+ *     { label: "Home", href: "/" },
+ *     { label: "About", href: "/about" },
+ *     { label: "Docs", href: "https://docs.example.com", external: true },
+ *   ]}
+ *   rightContent={<ThemeToggle />}
+ *   sticky
+ *   variant="blur"
+ * />
+ * ```
+ */
+declare function Navbar({ logo, preset, links, menuGroups, menuClassNames, rightContent, mobileContent, sticky, hideOnScrollDown, variant, className, LinkComponent, showMobileMenu, mobileMenuOpenIcon, mobileMenuClosedIcon, mobileMenuHeight, containerClassName, }: NavbarProps): react_jsx_runtime.JSX.Element;
+
+interface MarketingHeaderPresetCta {
+    href: string;
+    label: string;
+    external?: boolean;
+    variant?: "default" | "outline" | "secondary" | "link";
+}
+interface MarketingHeaderPresetProps {
+    logo: ReactNode;
+    links?: NavLink[];
+    primaryCta?: MarketingHeaderPresetCta;
+    secondaryCta?: MarketingHeaderPresetCta;
+    rightContent?: ReactNode;
+    mobileContent?: ReactNode;
+    className?: string;
+    containerClassName?: string;
+    variant?: NavbarProps["variant"];
+    preset?: NavbarProps["preset"];
+    sticky?: boolean;
+    hideOnScrollDown?: boolean;
+    showMobileMenu?: boolean;
+    LinkComponent?: NavbarProps["LinkComponent"];
+}
+declare function MarketingHeaderPreset({ logo, links, primaryCta, secondaryCta, rightContent, mobileContent, className, containerClassName, variant, preset, sticky, hideOnScrollDown, showMobileMenu, LinkComponent, }: MarketingHeaderPresetProps): react_jsx_runtime.JSX.Element;
+
+interface NavbarLogoProps {
+    /** Link destination (typically "/") */
+    href?: string;
+    /** Image source URL */
+    imageSrc: string;
+    /** Image alt text */
+    imageAlt: string;
+    /** Brand text to display next to image */
+    text?: string;
+    /** Image width in pixels */
+    imageWidth?: number;
+    /** Image height in pixels */
+    imageHeight?: number;
+    /** Whether to invert the image in dark mode */
+    invertInDarkMode?: boolean;
+    /** Additional className for the container */
+    className?: string;
+    /** Additional className for the image */
+    imageClassName?: string;
+    /** Additional className for the text */
+    textClassName?: string;
+    /** Link component for client-side navigation */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+    /** Image component (e.g., Next.js Image) */
+    ImageComponent?: ComponentType<{
+        src: string;
+        alt: string;
+        width: number;
+        height: number;
+        className?: string;
+    }>;
+}
+/**
+ * Navbar logo component with image and optional text.
+ * Supports dark mode image inversion and custom Link/Image components.
+ *
+ * @example
+ * ```tsx
+ * // With Next.js
+ * <NavbarLogo
+ *   href="/"
+ *   imageSrc="/logo.png"
+ *   imageAlt="My Brand"
+ *   text="My Brand"
+ *   invertInDarkMode
+ *   LinkComponent={Link}
+ *   ImageComponent={Image}
+ * />
+ *
+ * // Without framework components
+ * <NavbarLogo
+ *   href="/"
+ *   imageSrc="/logo.png"
+ *   imageAlt="My Brand"
+ *   text="My Brand"
+ * />
+ * ```
+ */
+declare function NavbarLogo({ href, imageSrc, imageAlt, text, imageWidth, imageHeight, invertInDarkMode, className, imageClassName, textClassName, LinkComponent, ImageComponent, }: NavbarLogoProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * User data for the navbar menu
+ */
+interface NavbarUser {
+    /** User ID (used for avatar gradient) */
+    id: string;
+    /** User email */
+    email?: string | null;
+    /** User metadata from OAuth provider */
+    metadata?: {
+        full_name?: string;
+        name?: string;
+        picture?: string;
+        avatar_url?: string;
+        [key: string]: unknown;
+    };
+}
+/**
+ * Profile data that overrides OAuth metadata
+ */
+interface NavbarUserProfile {
+    firstName?: string | null;
+    lastName?: string | null;
+    first_name?: string | null;
+    last_name?: string | null;
+    avatarUrl?: string | null;
+    avatar_url?: string | null;
+}
+/**
+ * Menu item for the user dropdown
+ */
+interface NavbarUserMenuItem {
+    /** Display label */
+    label: string;
+    /** Icon component */
+    icon?: LucideIcon;
+    /** Link destination (mutually exclusive with onClick) */
+    href?: string;
+    /** Click handler (mutually exclusive with href) */
+    onClick?: () => void;
+    /** Whether this is a destructive action (shown in red) */
+    destructive?: boolean;
+    /** Whether to show a separator before this item */
+    separatorBefore?: boolean;
+}
+interface NavbarUserMenuProps {
+    /** User data */
+    user: NavbarUser;
+    /** Profile data (overrides OAuth metadata) */
+    profile?: NavbarUserProfile | null;
+    /** Whether profile is loading */
+    loading?: boolean;
+    /** Sign out handler */
+    onSignOut: () => void | Promise<void>;
+    /** Additional menu items (sign out is always added at the end) */
+    additionalItems?: NavbarUserMenuItem[];
+    /** Avatar size */
+    size?: "sm" | "md" | "lg";
+    /** Menu alignment */
+    align?: "start" | "center" | "end";
+    /** Link component for client-side navigation */
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }>;
+}
+/**
+ * Navbar user menu with avatar, loading state, and OAuth metadata handling.
+ * Automatically parses user metadata from various OAuth providers (Google, GitHub, etc.)
+ * and shows a dropdown menu with configurable items.
+ *
+ * @example
+ * ```tsx
+ * <NavbarUserMenu
+ *   user={{ id: user.id, email: user.email, metadata: user.user_metadata }}
+ *   profile={profile}
+ *   loading={profileLoading}
+ *   onSignOut={handleSignOut}
+ *   additionalItems={[
+ *     { label: "Settings", icon: Settings, href: "/settings" },
+ *   ]}
+ *   LinkComponent={Link}
+ * />
+ * ```
+ */
+declare function NavbarUserMenu({ user, profile, loading, onSignOut, additionalItems, size, align, LinkComponent, }: NavbarUserMenuProps): react_jsx_runtime.JSX.Element;
+
+interface NonprofitFooterPresetLink {
+    href: string;
+    label: string;
+    external?: boolean;
+}
+interface NonprofitFooterPresetProps {
+    logo?: ReactNode;
+    tagline?: ReactNode;
+    supportTitle?: string;
+    supportLinks?: NonprofitFooterPresetLink[];
+    legalTitle?: string;
+    legalLinks?: NonprofitFooterPresetLink[];
+    socialLinks?: FooterProps["socialLinks"];
+    newsletter?: FooterProps["newsletter"];
+    copyright?: string;
+    bottomContent?: ReactNode;
+    className?: string;
+    containerClassName?: string;
+}
+declare function NonprofitFooterPreset({ logo, tagline, supportTitle, supportLinks, legalTitle, legalLinks, socialLinks, newsletter, copyright, bottomContent, className, containerClassName, }: NonprofitFooterPresetProps): react_jsx_runtime.JSX.Element;
+
+type SegmentedSwitcherMatchMode = "exact" | "prefix";
+interface SegmentedSwitcherItem {
+    id: string;
+    label: ReactNode;
+    disabled?: boolean;
+    href?: string;
+    match?: SegmentedSwitcherMatchMode;
+}
+interface SegmentedSwitcherProps {
+    items: SegmentedSwitcherItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (id: string) => void;
+    variant?: "investor" | "admin";
+    showTrackBorder?: boolean;
+    showTrackBackground?: boolean;
+    ariaLabel?: string;
+    className?: string;
+}
+interface RouteSegmentedSwitcherItem extends SegmentedSwitcherItem {
+    href: string;
+    enabled?: boolean;
+}
+interface RouteSegmentedSwitcherProps {
+    items: RouteSegmentedSwitcherItem[];
+    pathname?: string;
+    value?: string;
+    onValueChange?: (id: string) => void;
+    LinkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children: ReactNode;
+        onClick?: MouseEventHandler<HTMLAnchorElement>;
+        "aria-current"?: "page";
+        "aria-disabled"?: boolean;
+        tabIndex?: number;
+        "data-slot"?: string;
+        "data-active"?: "true";
+        "data-disabled"?: "true";
+    }>;
+    variant?: "investor" | "admin";
+    showTrackBorder?: boolean;
+    showTrackBackground?: boolean;
+    ariaLabel?: string;
+    className?: string;
+}
+declare function SegmentedSwitcher({ items, value, defaultValue, onValueChange, variant, showTrackBorder, showTrackBackground, ariaLabel, className, }: SegmentedSwitcherProps): react_jsx_runtime.JSX.Element | null;
+declare function RouteSegmentedSwitcher({ pathname, ...props }: RouteSegmentedSwitcherProps): react_jsx_runtime.JSX.Element;
+
+export { type AppDefinition, AppSwitcher, type AppSwitcherProps, ComingSoonButton, type ComingSoonButtonProps, type Entity, EntitySwitcher, type EntitySwitcherProps, type EntitySwitcherShortcut, Footer, type FooterLinkGroup, type FooterProps, MarketingHeaderPreset, type MarketingHeaderPresetCta, type MarketingHeaderPresetProps, type NavLink, Navbar, NavbarLogo, type NavbarLogoProps, type NavbarMenuClassNames, type NavbarMenuGroup, type NavbarProps, type NavbarUser, NavbarUserMenu, type NavbarUserMenuItem, type NavbarUserMenuProps, type NavbarUserProfile, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NavigationMenuViewportPrimitive, NonprofitFooterPreset, type NonprofitFooterPresetLink, type NonprofitFooterPresetProps, RouteSegmentedSwitcher, type RouteSegmentedSwitcherItem, type RouteSegmentedSwitcherProps, SegmentedSwitcher, type SegmentedSwitcherItem, type SegmentedSwitcherMatchMode, type SegmentedSwitcherProps, navigationMenuTriggerStyle };