@vamos-ui/react 0.0.0-stage → 0.2.0

package/dist/components/navigation-menu.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { Dialog, NavigationMenu as RadixNav } from "radix-ui";
+import { ChevronDown, Menu, X } from "lucide-react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/cn.js";
+import { useLabels } from "../lib/labels.js";
+import { SmartLink, useNavigation } from "../lib/provider.js";
+import { usePortalContainer } from "../lib/theme-scope.js";
+import { Layer } from "../lib/layer.js";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion.js";
+const navLabels = {
+    label: "Main",
+    open: "Open menu",
+    close: "Close menu",
+    title: "Menu",
+};
+/* ------------------------------------------------------------------ */
+/* Root                                                                */
+/* ------------------------------------------------------------------ */
+const rootVariants = cva("relative z-(--z-nav) flex max-w-max flex-1 items-center justify-center", {
+    variants: {
+        variant: {
+            /** Sits in a site header. */
+            bar: "",
+            /** A floating glass pill — the site's one permanent blur. */
+            floating: "surface rounded-full p-1",
+        },
+    },
+    defaultVariants: { variant: "bar" },
+});
+/**
+ * A website's top navigation, including mega menus (Radix NavigationMenu: disclosure-based site
+ * navigation with hover intent, arrow keys and Escape). Admin panels use Sidebar instead.
+ *
+ * ```tsx
+ * <NavigationMenu items={nav} />                 // data-driven
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuTrigger>Products</NavigationMenuTrigger>
+ *       <NavigationMenuContent layout="grid-2">
+ *         <NavigationMenuLink href="/vtag" title="vTag" description="NFC business cards" />
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *     <NavigationMenuItem><NavigationMenuLink href="/pricing" variant="top">Pricing</NavigationMenuLink></NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ */
+export const NavigationMenu = React.forwardRef(function NavigationMenu({ variant = "bar", viewport = true, items, labels, className, children, "aria-label": ariaLabel, ...props }, ref) {
+    const t = useLabels("navigationMenu", navLabels, labels);
+    return (_jsxs(RadixNav.Root, { ref: ref, "data-slot": "navigation-menu", "data-variant": variant, "data-viewport": viewport || undefined, "aria-label": ariaLabel ?? t("label"), className: cn(rootVariants({ variant }), className), ...props, children: [items ? _jsx(NavigationMenuItems, { items: items, viewport: viewport }) : children, viewport ? _jsx(NavigationMenuViewport, {}) : null] }));
+});
+function NavigationMenuItems({ items, viewport }) {
+    return (_jsx(NavigationMenuList, { children: items.map((item, i) => (_jsx(NavigationMenuItem, { children: item.children?.length ? (_jsxs(_Fragment, { children: [_jsx(NavigationMenuTrigger, { children: item.label }), _jsxs(NavigationMenuContent, { layout: item.layout, inline: !viewport, children: [item.layout === "featured" && item.featured ? _jsx(NavigationMenuFeatured, { ...item.featured }) : null, _jsx(NavigationMenuGroup, { children: item.children.map((child, j) => (_jsx("li", { children: _jsx(NavigationMenuLink, { href: child.href ?? "#", title: child.label, description: child.description, icon: child.icon }) }, child.id ?? j))) })] })] })) : (_jsx(NavigationMenuLink, { href: item.href ?? "#", variant: "top", children: item.label })) }, item.id ?? i))) }));
+}
+/** The row of top-level items. */
+export const NavigationMenuList = React.forwardRef(function NavigationMenuList({ className, ...props }, ref) {
+    return _jsx(RadixNav.List, { ref: ref, "data-slot": "navigation-menu-list", className: cn("flex flex-1 list-none items-center justify-center gap-0.5", className), ...props });
+});
+/** One top-level item (a trigger + content, or a plain link). */
+export const NavigationMenuItem = React.forwardRef(function NavigationMenuItem({ className, ...props }, ref) {
+    return _jsx(RadixNav.Item, { ref: ref, "data-slot": "navigation-menu-item", className: cn("relative", className), ...props });
+});
+const topItemClass = cn("group/nav inline-flex h-9 select-none items-center justify-center gap-1 rounded-full px-3.5 text-sm font-medium text-fg-muted outline-none", "transition-colors duration-150 hover:bg-hover hover:text-fg focus-ring", "data-[state=open]:bg-hover data-[state=open]:text-fg data-active:text-fg aria-[current=page]:text-fg");
+/** Opens a panel. Hover (with intent delay), click, Enter/Space or ↓. */
+export const NavigationMenuTrigger = React.forwardRef(function NavigationMenuTrigger({ className, children, ...props }, ref) {
+    return (_jsxs(RadixNav.Trigger, { ref: ref, "data-slot": "navigation-menu-trigger", className: cn(topItemClass, className), ...props, children: [children, _jsx(ChevronDown, { "aria-hidden": true, className: "relative top-px size-3.5 text-fg-subtle transition-transform duration-200 motion-reduce:transition-none group-data-[state=open]/nav:rotate-180" })] }));
+});
+const contentLayouts = {
+    list: "w-[min(22rem,calc(100vw-2rem))]",
+    "grid-2": "w-[min(36rem,calc(100vw-2rem))] [&_[data-slot=navigation-menu-group]]:grid-cols-2",
+    featured: "grid w-[min(42rem,calc(100vw-2rem))] grid-cols-[minmax(0,15rem)_minmax(0,1fr)] gap-2",
+};
+/** The panel of an item. */
+export const NavigationMenuContent = React.forwardRef(function NavigationMenuContent({ layout = "list", inline, className, ...props }, ref) {
+    return (_jsx(RadixNav.Content, { ref: ref, "data-slot": "navigation-menu-content", "data-layout": layout, className: cn("ui-nav-content p-2", inline ? "surface-popover ui-pop absolute start-0 top-full z-(--z-popover) mt-2 rounded-ui-lg" : "start-0 top-0 md:absolute", contentLayouts[layout], className), ...props }));
+});
+/** The shared, animated container all panels render into. Rendered by `NavigationMenu` unless `viewport={false}`. */
+export const NavigationMenuViewport = React.forwardRef(function NavigationMenuViewport({ className, ...props }, ref) {
+    return (_jsx("div", { className: "absolute start-0 top-full z-(--z-popover) flex w-full justify-center pt-2", children: _jsx(Layer, { asChild: true, children: _jsx(RadixNav.Viewport, { ref: ref, "data-slot": "navigation-menu-viewport", className: cn("ui-pop ui-nav-viewport surface-popover relative shrink-0 origin-top overflow-hidden rounded-ui-lg", "h-(--radix-navigation-menu-viewport-height) w-full md:w-(--radix-navigation-menu-viewport-width)", className), ...props }) }) }));
+});
+/** A list of links inside a panel (`ul`). */
+export const NavigationMenuGroup = React.forwardRef(function NavigationMenuGroup({ heading, className, children, ...props }, ref) {
+    return (_jsxs("div", { className: "min-w-0", children: [heading ? _jsx("p", { className: "px-3 pt-2 pb-1 text-[11px] font-medium tracking-[0.06em] text-fg-subtle", children: heading }) : null, _jsx("ul", { ref: ref, "data-slot": "navigation-menu-group", className: cn("grid list-none gap-0.5", className), ...props, children: children })] }));
+});
+/** A link — in the bar (`variant="top"`) or in a panel with icon and description. Uses the app's router `Link`. */
+export const NavigationMenuLink = React.forwardRef(function NavigationMenuLink({ href, variant = "panel", title, description, icon, active, className, children, ...props }, ref) {
+    const { isActive } = useNavigation();
+    const current = active ?? isActive(href);
+    if (variant === "top") {
+        return (_jsx(RadixNav.Link, { asChild: true, active: current, ...props, children: _jsx(SmartLink, { ref: ref, href: href, "aria-current": current ? "page" : undefined, "data-slot": "navigation-menu-link", className: cn(topItemClass, className), children: children ?? title }) }));
+    }
+    return (_jsx(RadixNav.Link, { asChild: true, active: current, ...props, children: _jsxs(SmartLink, { ref: ref, href: href, "aria-current": current ? "page" : undefined, "data-slot": "navigation-menu-link", className: cn("group/link flex select-none gap-3 rounded-ui p-3 outline-none transition-colors duration-100 hover:bg-hover focus-visible:bg-hover focus-ring", "aria-[current=page]:bg-selected", className), children: [icon ? (_jsx("span", { "aria-hidden": true, className: "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-ui-sm border border-line bg-surface-2 text-fg-muted transition-colors group-hover/link:text-fg [&_svg]:size-4", children: icon })) : null, _jsxs("span", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium text-fg", children: title ?? children }), description ? _jsx("span", { className: "line-clamp-2 text-[13px] leading-snug text-fg-muted", children: description }) : null] })] }) }));
+});
+/** The highlighted card of a `featured` panel. */
+export function NavigationMenuFeatured({ title, description, href, eyebrow, className }) {
+    return (_jsx(RadixNav.Link, { asChild: true, children: _jsxs(SmartLink, { href: href, "data-slot": "navigation-menu-featured", className: cn("group/feat relative flex min-h-full flex-col justify-end overflow-hidden rounded-ui bg-fg p-5 text-scene outline-none focus-ring", className), children: [_jsx("span", { "aria-hidden": true, className: "absolute -end-10 -top-10 size-40 rounded-full border-[18px] border-accent opacity-90 transition-transform duration-300 group-hover/feat:scale-105 motion-reduce:transition-none" }), eyebrow ? _jsx("span", { className: "relative mb-auto text-[11px] font-medium tracking-[0.08em] opacity-70", children: eyebrow }) : null, _jsx("span", { className: "relative mt-10 font-display text-[1.375rem] leading-tight", children: title }), description ? _jsx("span", { className: "relative mt-1.5 text-[13px] leading-snug opacity-75", children: description }) : null] }) }));
+}
+/** Optional arrow under the open trigger. */
+export const NavigationMenuIndicator = React.forwardRef(function NavigationMenuIndicator({ className, ...props }, ref) {
+    return (_jsx(RadixNav.Indicator, { ref: ref, "data-slot": "navigation-menu-indicator", className: cn("top-full z-[1] flex h-2 items-end justify-center overflow-hidden ui-fade", className), ...props, children: _jsx("span", { className: "relative top-[60%] size-2.5 rotate-45 rounded-tl-sm border-s border-t border-popover-border bg-popover" }) }));
+});
+/**
+ * The mobile counterpart of `NavigationMenu`: a menu button that opens a side sheet with the same
+ * items, groups as an accordion. Following a link closes the sheet.
+ *
+ * ```tsx
+ * <NavigationMenu items={nav} className="max-md:hidden" />
+ * <MobileNav items={nav} className="md:hidden" footer={<Button variant="primary" block>Book a demo</Button>} />
+ * ```
+ */
+export function MobileNav({ items, footer, title, open, defaultOpen, onOpenChange, className, labels }) {
+    const t = useLabels("navigationMenu", navLabels, labels);
+    const container = usePortalContainer();
+    const [isOpen, setOpen] = React.useState(defaultOpen ?? false);
+    const controlled = open !== undefined;
+    const value = controlled ? open : isOpen;
+    const set = (v) => {
+        if (!controlled)
+            setOpen(v);
+        onOpenChange?.(v);
+    };
+    const { isActive } = useNavigation();
+    const leaf = (item, nested = false) => (_jsxs(SmartLink, { href: item.href ?? "#", "aria-current": item.href && isActive(item.href) ? "page" : undefined, onClick: () => set(false), className: cn("flex flex-col gap-0.5 rounded-ui-sm py-2.5 outline-none focus-ring aria-[current=page]:text-fg", nested ? "px-3 text-sm text-fg-muted hover:bg-hover hover:text-fg" : "text-[15px] font-medium text-fg"), children: [_jsx("span", { children: item.label }), nested && item.description ? _jsx("span", { className: "text-[13px] text-fg-subtle", children: item.description }) : null] }));
+    return (_jsxs(Dialog.Root, { open: value, onOpenChange: set, children: [_jsx(Dialog.Trigger, { "aria-label": t("open"), className: cn("inline-flex size-10 items-center justify-center rounded-full text-fg transition-colors hover:bg-hover focus-ring [&_svg]:size-5", className), children: _jsx(Menu, { "aria-hidden": true }) }), _jsxs(Dialog.Portal, { container: container, children: [_jsx(Dialog.Overlay, { className: "ui-fade fixed inset-0 z-(--z-overlay) bg-overlay backdrop-blur-(--overlay-blur)" }), _jsx(Layer, { asChild: true, children: _jsxs(Dialog.Content, { "data-slot": "mobile-nav", "aria-describedby": undefined, className: "ui-sheet-end surface-popover fixed inset-y-0 end-0 z-(--z-overlay) flex w-[min(24rem,calc(100vw-3rem))] flex-col rounded-none border-y-0 border-e-0 outline-none", children: [_jsxs("div", { className: "flex h-16 shrink-0 items-center justify-between gap-3 border-b border-line ps-5 pe-3", children: [_jsx(Dialog.Title, { className: "text-sm font-semibold text-fg", children: title ?? t("title") }), _jsx(Dialog.Close, { "aria-label": t("close"), className: "inline-flex size-9 items-center justify-center rounded-full text-fg-muted transition-colors hover:bg-hover hover:text-fg focus-ring [&_svg]:size-[18px]", children: _jsx(X, { "aria-hidden": true }) })] }), _jsx("nav", { "aria-label": t("label"), className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-2", children: _jsx(Accordion, { type: "multiple", headingLevel: 2, children: items.map((item, i) => item.children?.length ? (_jsxs(AccordionItem, { value: item.id ?? String(i), children: [_jsx(AccordionTrigger, { className: "text-[15px]", children: item.label }), _jsx(AccordionContent, { className: "-mx-3 flex flex-col gap-0.5", children: item.children.map((child, j) => (_jsx(React.Fragment, { children: leaf(child, true) }, child.id ?? j))) })] }, item.id ?? i)) : (_jsx("div", { className: "border-b border-line py-1 last:border-b-0", children: leaf(item) }, item.id ?? i))) }) }), footer ? _jsx("div", { className: "shrink-0 border-t border-line p-5", children: footer }) : null] }) })] })] }));
+}

package/dist/components/notification-center.d.ts

@@ -0,0 +1,164 @@
+import * as React from "react";
+declare const notificationLabels: {
+    label: string;
+    trigger: string;
+    triggerUnread: string;
+    unreadCount: string;
+    markAllRead: string;
+    markRead: string;
+    empty: string;
+    emptyDescription: string;
+    error: string;
+    retry: string;
+    loadMore: string;
+    settings: string;
+    today: string;
+    yesterday: string;
+    earlier: string;
+    all: string;
+    unread: string;
+    mentions: string;
+    filter: string;
+    newItem: string;
+    unreadDot: string;
+};
+export type NotificationLabels = typeof notificationLabels;
+export type NotificationTone = "neutral" | "info" | "success" | "warning" | "danger";
+export interface AppNotification {
+    id: string;
+    title: React.ReactNode;
+    body?: React.ReactNode;
+    /** ISO string or Date. */
+    createdAt: Date | string;
+    readAt?: Date | string | null;
+    actor?: {
+        name: string;
+        avatar?: string;
+    };
+    /** Shown when there is no actor. */
+    icon?: React.ReactNode;
+    tone?: NotificationTone;
+    /** Opens on click (marks it read, closes the panel). */
+    href?: string;
+    /** App badge in multi-app shells ("CRM"). */
+    app?: string;
+    /** For tab filters ("mention", "approval"). */
+    category?: string;
+    /** Inline actions ("Approve" / "Reject"); removed after `onAction` succeeds. */
+    actions?: {
+        id: string;
+        label: string;
+        variant?: "primary" | "secondary";
+    }[];
+    /** Turns the bell badge red while unread. */
+    important?: boolean;
+}
+/** The kit owns the UI; the app owns transport (REST, SSE, websockets). */
+export interface NotificationAdapter {
+    list(options: {
+        cursor?: string;
+        filter?: string;
+        signal: AbortSignal;
+    }): Promise<{
+        items: AppNotification[];
+        nextCursor?: string;
+    }>;
+    unreadCount(): Promise<number>;
+    markRead(ids: string[] | "all"): Promise<void>;
+    onAction?(id: string, actionId: string): Promise<void>;
+    /** Live items. Return the unsubscribe function. */
+    subscribe?(callback: (n: AppNotification) => void): () => void;
+}
+export interface NotificationTab {
+    id: string;
+    label: string;
+    /** Passed to `adapter.list({ filter })`. Omit for "all". */
+    filter?: string;
+}
+export interface MemoryNotificationAdapter extends NotificationAdapter {
+    /** Simulate a live notification (calls subscribers). */
+    push(n: AppNotification): void;
+}
+/**
+ * An in-memory adapter: `filter` "unread" keeps unread items, any other value matches `category`
+ * or `app`. Pages of `pageSize` (default 20), with optional `latency` in ms.
+ */
+export declare function createMemoryNotificationAdapter(initial: AppNotification[], options?: {
+    pageSize?: number;
+    latency?: number;
+    onAction?: (id: string, actionId: string) => Promise<void> | void;
+}): MemoryNotificationAdapter;
+export interface NotificationCenterProps {
+    adapter: NotificationAdapter;
+    /** Default: All · Unread · Mentions (`filter: "mention"`). */
+    tabs?: NotificationTab[];
+    /** Toast when a live item arrives (or a predicate). */
+    toastOnNew?: boolean | ((n: AppNotification) => boolean);
+    /** ms between unread-count refreshes when the adapter has no `subscribe`. */
+    pollInterval?: number;
+    /** Panel width: `md` 380px (default), `lg` 440px. */
+    size?: "md" | "lg";
+    /** "Notification settings" link in the footer. */
+    settingsHref?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Custom composition; default trigger + panel (tabs, list, footer). */
+    children?: React.ReactNode;
+    labels?: Partial<NotificationLabels>;
+}
+/**
+ * An in-app inbox: the bell in the top bar, a panel (popover ≥768px, sheet below) with filter tabs,
+ * a grouped feed (Today / Yesterday / Earlier), read/unread, inline actions and "Mark all as read".
+ * Data comes through an adapter, so the app chooses REST, SSE or websockets.
+ *
+ * ```tsx
+ * <NotificationCenter adapter={inbox} settingsHref="/settings/notifications" toastOnNew />
+ * ```
+ */
+export declare function NotificationCenter({ adapter, tabs: tabsProp, toastOnNew, pollInterval, size, settingsHref, open: openProp, defaultOpen, onOpenChange, children, labels, }: NotificationCenterProps): React.JSX.Element;
+/** The bell with the unread badge (99+). `aria-label` includes the count. */
+export declare const NotificationTrigger: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    size?: "xs" | "sm" | "md";
+} & React.RefAttributes<HTMLButtonElement>>;
+/** Popover anchored to the bell on ≥768px, an end Sheet below. Titled "Notifications". */
+export declare function NotificationPanel({ className, children }: {
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
+/** Filter tabs (All · Unread · Mentions by default). Toggle buttons with `aria-pressed`. */
+export declare function NotificationTabs({ className }: {
+    className?: string;
+}): React.JSX.Element | null;
+/** Splits notifications into Today / Yesterday / Earlier in the provider's time zone. */
+export declare function groupNotifications(items: AppNotification[], timeZone?: string, now?: Date): Array<{
+    id: "today" | "yesterday" | "earlier";
+    items: AppNotification[];
+}>;
+/** The grouped feed with loading, empty, error and "Load more" states. */
+export declare function NotificationList({ className, grouped }: {
+    className?: string;
+    grouped?: boolean;
+}): React.JSX.Element;
+export interface NotificationItemProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
+    notification: AppNotification;
+    /** Clicked the item's link. */
+    onOpen?: () => void;
+    onMarkRead?: () => void;
+    onAction?: (actionId: string) => unknown;
+    /** Id of the action currently running (spinner on that button). */
+    pendingAction?: string;
+    /** Position in the feed (`aria-posinset` / `aria-setsize`). */
+    posinset?: number;
+    setsize?: number;
+    labels?: Partial<NotificationLabels>;
+}
+/** One notification. Usable on its own — e.g. a full "/notifications" page. */
+export declare const NotificationItem: React.ForwardRefExoticComponent<NotificationItemProps & React.RefAttributes<HTMLElement>>;
+/** Footer: "Mark all as read" and a settings link. */
+export declare function NotificationFooter({ className }: {
+    className?: string;
+}): React.JSX.Element;
+/** Spinner row while paginating (for custom lists). */
+export declare function NotificationLoadingRow(): React.JSX.Element;
+export {};