@vjdesigns/vjdesigns-ui 2.3.0 → 2.5.0

package/dist/components/navigation/Navbar/Navbar.d.ts

@@ -1,5 +1,5 @@
 import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
-import { Responsive, Size, Space } from '../../../types/common';
+import { Responsive, Size, Space, Tone } from '../../../types/common';
 import { ContainerSize } from '../../layout/Container';
 /**
  * Visual style of the bar.
@@ -178,9 +178,26 @@ interface NavbarLinkOwnProps<C extends ElementType> {
     active?: boolean;
     /** Decorative icon before the label. Hidden from assistive technology. */
     icon?: ReactNode;
+    /**
+     * A count (rendered with `Badge` `count`, capped at 99+, hidden at 0) or a
+     * short text such as "New", after the label. It's part of the link's name
+     * ("Messages 3"), in the bar and the mobile menu.
+     */
+    badge?: NavbarBadgeValue;
+    /** Screen-reader text for the badge, e.g. "3 unread messages". Replaces the visible badge text in the accessible name. */
+    badgeLabel?: string;
+    /**
+     * Badge color. By default `accent`, except in the `solid` bar, where the
+     * badge takes the bar's own colors swapped (a `Badge` `variant="inverse"`)
+     * so it stands out from the bar in both themes. Setting it always gives a
+     * solid badge in that tone.
+     */
+    badgeTone?: Tone;
     /** The visible label. */
     children?: ReactNode;
 }
+/** A count or short text shown in a link's badge. */
+export type NavbarBadgeValue = number | string;
 /** Props for `Navbar.Link`, typed for the component chosen with `as`. */
 export type NavbarLinkProps<C extends ElementType = "a"> = NavbarLinkOwnProps<C> & Omit<ComponentPropsWithRef<C>, keyof NavbarLinkOwnProps<C>>;
 /**
@@ -195,6 +212,48 @@ declare function NavbarLink<C extends ElementType = "a">(props: NavbarLinkProps<
 declare namespace NavbarLink {
     var displayName: string;
 }
+export interface NavbarGroupProps extends Omit<ComponentPropsWithRef<"li">, "children"> {
+    /** The group button's visible label, and its accessible name. */
+    label: ReactNode;
+    /** Decorative icon before the label. */
+    icon?: ReactNode;
+    /** The group's `Navbar.Link`s. */
+    children?: ReactNode;
+    /**
+     * One of the group's links is the current page. The button then shows the
+     * active look (it doesn't set `aria-current`; the link does), and the
+     * group starts open in the mobile menu. @default false
+     */
+    active?: boolean;
+    /** A count or short text on the group button, like `Navbar.Link`'s `badge`. */
+    badge?: NavbarBadgeValue;
+    /** Screen-reader text for the badge. */
+    badgeLabel?: string;
+    /** Badge color. Same default as `Navbar.Link`'s `badgeTone` (inverse on the solid bar). */
+    badgeTone?: Tone;
+    /** Controlled open state of the dropdown in the bar. */
+    open?: boolean;
+    /** Initial open state of the dropdown when uncontrolled. @default false */
+    defaultOpen?: boolean;
+    /** Called with the next open state of the dropdown in the bar. */
+    onOpenChange?: (open: boolean) => void;
+    /** Disables the group button. @default false */
+    disabled?: boolean;
+}
+/**
+ * A group of links under one button, following the WAI-ARIA disclosure
+ * navigation pattern (not a `menu`): the button has `aria-expanded`, and the
+ * links stay ordinary links in the Tab order.
+ *
+ * - In the bar: the button opens a dropdown below it. Escape closes it and
+ *   returns focus to the button; so do a press outside, Tab moving focus out
+ *   of the group, and activating a link. Opening one group closes the others.
+ * - In the mobile menu: an expandable section with the links indented below.
+ */
+declare const NavbarGroup: {
+    ({ label, icon, children, active, badge, badgeLabel, badgeTone, open: openProp, defaultOpen, onOpenChange, disabled, className, ref, ...rest }: NavbarGroupProps): import("react").JSX.Element;
+    displayName: string;
+};
 export interface NavbarActionsProps extends ComponentPropsWithRef<"div"> {
     /** Buttons, an avatar, a theme toggle, a search field. Stays visible at every width, so keep it short on phones. */
     children?: ReactNode;
@@ -237,9 +296,13 @@ export declare const Navbar: {
         displayName: string;
     };
     Link: typeof NavbarLink;
+    Group: {
+        ({ label, icon, children, active, badge, badgeLabel, badgeTone, open: openProp, defaultOpen, onOpenChange, disabled, className, ref, ...rest }: NavbarGroupProps): import("react").JSX.Element;
+        displayName: string;
+    };
     Actions: {
         ({ className, children, ...rest }: NavbarActionsProps): import("react").JSX.Element;
         displayName: string;
     };
 };
-export { NavbarActions, NavbarBrand, NavbarItem, NavbarLink, NavbarNav };
+export { NavbarActions, NavbarBrand, NavbarGroup, NavbarItem, NavbarLink, NavbarNav };