@fairgarden/design 0.1.0-0.canary.0

package/navigation/navigation-menu/NavigationMenu.d.ts

@@ -0,0 +1,243 @@
+import * as React from 'react';
+import { NavigationMenu as BaseNavigationMenu } from '@base-ui/react/navigation-menu';
+import { type VariantProps } from 'class-variance-authority';
+import { type SitemapSection } from '../../utils/navigation';
+import { NAV_DELAY_MS } from '../../utils/tokens';
+export { NAV_DELAY_MS };
+export declare const navigationMenu: (props?: ({
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Panel classes: `kind` → dropdown (default) | overview | index [D182]. */
+export declare const navigationMenuContent: (props?: ({
+    kind?: "index" | "dropdown" | "overview" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type NavigationMenuVariants = VariantProps<typeof navigationMenu>;
+/** The panel kinds of `navigationMenuContent` [D182]. */
+export type NavigationMenuContentKind = NonNullable<VariantProps<typeof navigationMenuContent>['kind']>;
+export { toPath, isCurrentPath, isInSection } from '../../utils/navigation';
+/**
+ * What a host frame (the Navigation Bar) tells its menu: the bar whose
+ * bottom rule the panels attach under, the content container an `index` or
+ * `dropdown` panel end-aligns inside, and the current page's path.
+ */
+export interface NavigationMenuFrame {
+    /** The bar element; panels attach at 0 offset under its bottom rule. Default: the menu's `nav`. */
+    anchorRef?: React.RefObject<HTMLElement | null>;
+    /** The content container (--fgd-container-content). Default: the anchor. */
+    boundaryRef?: React.RefObject<HTMLElement | null>;
+    /** The current page's URL path, for current and parent-of-current. */
+    currentPath?: string;
+}
+/** Provided by the Navigation Bar (§11.5); a menu outside a bar uses its own `nav`. */
+export declare const NavigationMenuFrameContext: React.Context<NavigationMenuFrame>;
+/** Props for NavigationMenu: Base UI Root props (without the delays), the color axes and the page path. */
+export type NavigationMenuProps = Omit<BaseNavigationMenu.Root.Props<string>, 'delay' | 'closeDelay' | 'orientation' | 'children'> & {
+    /**
+     * Primary Radix scale for the bar's parts: labels, bars and focus ring.
+     * Never defaulted; omitted, it inherits the scope [D133]. The panels keep
+     * the `white` preset's scales.
+     */
+    primary?: NavigationMenuVariants['primary'];
+    /**
+     * Secondary Radix scale for the bar's parts: the chevrons and the hover
+     * underline (`--role-glyph`, `--role-accent`). Never defaulted.
+     */
+    secondary?: NavigationMenuVariants['secondary'];
+    /**
+     * The current page's URL path. A link whose path equals it is current
+     * (`aria-current="page"`); a bar item whose section is a path prefix of it
+     * is the parent of current (`aria-current="true"`). Inside a Navigation
+     * Bar it defaults to the bar's `currentPath`.
+     */
+    currentPath?: string;
+    /** The landmark's name. Default "Main". */
+    label?: string;
+    /** `NavigationMenuItem`s, in bar order. */
+    children?: React.ReactNode;
+};
+/**
+ * The desktop site navigation [D182]: a `nav` labelled "Main" holding the
+ * bar's items. Triggers are buttons that open their panel on click, Enter,
+ * Space or ArrowDown, and on hover intent under a mouse
+ * (--fgd-delay-nav-open, closing --fgd-delay-nav-close after the pointer
+ * leaves); focus alone never opens one. Opening from the keyboard moves
+ * focus to the panel's first link; Escape closes and returns focus to the
+ * trigger. Panels attach at 0 offset under the bar's bottom rule, switch
+ * instantly and scroll in a Scroll Area when taller than the viewport.
+ */
+export declare function NavigationMenu(props: NavigationMenuProps): React.JSX.Element;
+/** Props for NavigationMenuItem: Base UI Item props. */
+export type NavigationMenuItemProps = BaseNavigationMenu.Item.Props;
+/**
+ * One bar item: a `NavigationMenuTrigger` with its `NavigationMenuContent`,
+ * or a plain `NavigationMenuLink`. `value` identifies it when the menu is
+ * controlled; omitted, one is generated.
+ */
+export declare function NavigationMenuItem(props: NavigationMenuItemProps): React.JSX.Element;
+/** Props for NavigationMenuTrigger: Base UI Trigger props plus the section path. */
+export type NavigationMenuTriggerProps = BaseNavigationMenu.Trigger.Props & {
+    /**
+     * The path of the section this trigger opens (`/what-we-do`). While the
+     * page lies in it, the trigger is the parent of current
+     * (`aria-current="true"`, the --border-size-2 bar) [D182].
+     */
+    section?: string;
+};
+/**
+ * A bar trigger: a button with a caps label (`type-label`, [D165]) and the
+ * `expand_more` chevron in `--role-glyph`, which flips while open. It opens
+ * its panel on click, Enter, Space, ArrowDown or mouse hover intent, never
+ * on focus alone; the section's landing page is the panel's first link.
+ */
+export declare function NavigationMenuTrigger(props: NavigationMenuTriggerProps): React.JSX.Element;
+/** Props for NavigationMenuLink: Base UI Link props. */
+export type NavigationMenuLinkProps = BaseNavigationMenu.Link.Props;
+/**
+ * A link. In the bar it is a caps item with no rest underline; in a panel
+ * it is a `type-body-ui` row at a `--fgd-size-hit` pitch in Link's list-link
+ * build (`kind="nav"` with `list`), whose hover is `--role-link-hover` only
+ * (§9.3) [D181]. `active` defaults to "its path is the current page"
+ * (`aria-current="page"`); a bar link whose path is a prefix of the page is
+ * the parent of current. Panel links close the panel on click.
+ */
+export declare function NavigationMenuLink(props: NavigationMenuLinkProps): React.JSX.Element;
+type ContentBaseProps = Omit<BaseNavigationMenu.Content.Props, 'children'> & {
+    children?: React.ReactNode;
+};
+/**
+ * Props for NavigationMenuContent: Base UI Content props and the panel
+ * `kind`, with each kind's slots. A discriminated union on `kind`.
+ */
+export type NavigationMenuContentProps = ContentBaseProps & ({
+    /** `dropdown` (default): a simple list panel of 3–8 `NavigationMenuLink`s. */
+    kind?: 'dropdown';
+    featured?: never;
+    search?: never;
+    promo?: never;
+    featuredBar?: never;
+} | {
+    /**
+     * `overview`: the section's overview link and description, a
+     * hairline tier rule, an optional search, caps link groups (the
+     * children: `NavigationMenuGroup`s) 2-up in columns 1–8 beside the
+     * promo, or up to 4-up across 12 without one.
+     */
+    kind: 'overview';
+    /** The overview link, a `NavigationMenuFeatured`: the section's landing page, the panel's first link. */
+    featured?: React.ReactNode;
+    /** One §9.10 Search field under the overview row; the panel stays open while it has focus. */
+    search?: React.ReactNode;
+    /** At most one `NavigationMenuPromo` card, in columns 9–12. */
+    promo?: React.ReactNode;
+    featuredBar?: never;
+} | {
+    /**
+     * `index`: a category list (the children:
+     * `NavigationMenuCategory`s) beside the selected category's link
+     * pane, with a featured bar across both.
+     */
+    kind: 'index';
+    /** One `NavigationMenuFeaturedBar` across both panes, at the foot. */
+    featuredBar?: React.ReactNode;
+    featured?: never;
+    search?: never;
+    promo?: never;
+});
+/**
+ * A panel. It renders in the menu's portaled `white` overlay scope,
+ * attached under the bar's bottom rule: `overview` full-bleed with its
+ * content on the 12-column grid of `--fgd-container-content`; `index` and
+ * `dropdown` at the trigger's start edge, end-aligned to the content
+ * container, with square top and `--radius-2-25` bottom corners.
+ */
+export declare function NavigationMenuContent(props: NavigationMenuContentProps): React.JSX.Element;
+/** Props for NavigationMenuFeatured: Base UI Link props plus the one-line description. */
+export type NavigationMenuFeaturedProps = BaseNavigationMenu.Link.Props & {
+    /** One line of `type-body-ui` in `--role-muted` under the link. */
+    description?: React.ReactNode;
+};
+/**
+ * The overview link (`featured`): the trigger's own section landing page, a
+ * `type-itemhead` serif link in `--role-heading` with a trailing › in
+ * `--role-accent`, then its description. Put it in `featured`.
+ */
+export declare function NavigationMenuFeatured(props: NavigationMenuFeaturedProps): React.JSX.Element;
+/** Props for NavigationMenuGroup: `div` props, the heading and its optional link. */
+export type NavigationMenuGroupProps = Omit<React.ComponentProps<'div'>, 'children'> & {
+    /** The group heading, set in `type-label` caps. */
+    heading: React.ReactNode;
+    /** Makes the heading a link with a trailing ›, to the group's landing page. */
+    href?: string;
+    /** The group's `NavigationMenuLink`s. */
+    children?: React.ReactNode;
+};
+/**
+ * A caps link group in an `overview` panel: a heading (a link with › when
+ * `href` is given) over its links at a `--fgd-size-hit` pitch.
+ */
+export declare function NavigationMenuGroup(props: NavigationMenuGroupProps): React.JSX.Element;
+/** Props for NavigationMenuPromo. */
+export type NavigationMenuPromoProps = {
+    /** The destination: the card's one Tab stop, its stretched title link. */
+    href: string;
+    /** The title, `type-itemhead`. */
+    title: React.ReactNode;
+    /** A 16:9 image (an `img` with its `alt`). */
+    image?: React.ReactNode;
+    /** A two-line `type-body-ui` blurb. */
+    children?: React.ReactNode;
+    /** Class names for the card, added after its own. */
+    className?: string;
+};
+/**
+ * The optional promo card of an `overview` panel (≤ 1 per panel): a §12.2
+ * card with a 16:9 image, a stretched title link (one Tab stop) and a
+ * blurb. Its hover is the title link's `--role-link-hover`; no shadow.
+ */
+export declare function NavigationMenuPromo(props: NavigationMenuPromoProps): React.JSX.Element;
+/** Props for NavigationMenuCategory. */
+export type NavigationMenuCategoryProps = {
+    /** The category row's label. */
+    label: React.ReactNode;
+    /** Identifies the category; omitted, the panel assigns one. */
+    value?: string;
+    /** The category's `NavigationMenuLink`s, shown in the link pane. */
+    children?: React.ReactNode;
+    /** Class names for the category row, added after its own. */
+    className?: string;
+};
+/**
+ * One category of an `index` panel: a row in the category list (a trigger
+ * of the nested vertical menu) and its links in the pane. The selected
+ * category takes a `--border-size-2-25` start-edge bar and `--font-weight-7`.
+ */
+export declare function NavigationMenuCategory(props: NavigationMenuCategoryProps): React.JSX.Element;
+/** Props for NavigationMenuFeaturedBar: Base UI Link props. */
+export type NavigationMenuFeaturedBarProps = BaseNavigationMenu.Link.Props;
+/**
+ * The featured bar of an `index` panel: one `type-itemhead` link with a ›
+ * in `--role-glyph`, across both panes above a `--role-hairline` rule. Put
+ * it in `featuredBar`.
+ */
+export declare function NavigationMenuFeaturedBar(props: NavigationMenuFeaturedBarProps): React.JSX.Element;
+/** Props for NavigationMenuSections. */
+export type NavigationMenuSectionsProps = {
+    /**
+     * The shared navigation data (utils/navigation): the top-level sections,
+     * in bar order. The same object feeds the drawer and the footer sitemap.
+     */
+    sections: readonly SitemapSection[];
+};
+/**
+ * The bar's items built from the shared navigation data [D187], the object
+ * that also feeds `NavDrawer`'s `sections` and `Footer`'s `sitemap`. Each
+ * section is a trigger (its `href` marks the parent of current) and the
+ * panel `sitemapPanel` picks: `overview` (the overview link and
+ * description, a caps group per link over its own `links`, the promo),
+ * `index` (a category per link and the featured bar) or `dropdown` (the
+ * landing page, then the links). A section without links is a plain bar
+ * link. Put it inside `NavigationMenu`, alone or beside hand-built items.
+ */
+export declare function NavigationMenuSections(props: NavigationMenuSectionsProps): React.JSX.Element;
+//# sourceMappingURL=NavigationMenu.d.ts.map

package/navigation/navigation-menu/NavigationMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.d.ts","sourceRoot":"","sources":["../../src/navigation/navigation-menu/NavigationMenu.tsx"],"names":[],"mappings":"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"}