canny-ui-react 6.4.0 → 6.6.0

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

@@ -1,6 +1,11 @@
-import type { NavbarProps, NavbarBrandProps, NavbarNavProps, NavbarItemProps, NavbarActionsProps } from './Navbar.types';
+import type { NavbarProps, NavbarBrandProps, NavbarNavProps, NavbarItemProps, NavbarActionsProps, NavbarToggleProps } from './Navbar.types';
 export declare const Navbar: import("react").ForwardRefExoticComponent<NavbarProps & import("react").RefAttributes<HTMLElement>>;
 export declare const NavbarBrand: import("react").ForwardRefExoticComponent<NavbarBrandProps & import("react").RefAttributes<HTMLAnchorElement>>;
 export declare const NavbarNav: import("react").ForwardRefExoticComponent<NavbarNavProps & import("react").RefAttributes<HTMLElement>>;
 export declare const NavbarItem: import("react").ForwardRefExoticComponent<NavbarItemProps & import("react").RefAttributes<HTMLAnchorElement>>;
 export declare const NavbarActions: import("react").ForwardRefExoticComponent<NavbarActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * Menu (hamburger) button for a responsive `Sidebar`: shown below 900px, where the
+ * sidebar becomes a drawer. Wire it to the sidebar's `mobileOpen`.
+ */
+export declare const NavbarToggle: import("react").ForwardRefExoticComponent<NavbarToggleProps & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1,7 +1,12 @@
-import type { AnchorHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 import type { SxProp } from '../Layout/sx';
 export interface NavbarProps extends HTMLAttributes<HTMLElement> {
     solid?: boolean;
+    /**
+     * Background (solid, no glass, when raised). `'base'` (default) sits on the page tone; `'raised'` uses the
+     * surface of drawers, dialogs and menus (white in light mode).
+     */
+    surface?: 'base' | 'raised';
     /**
      * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
      * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx
@@ -24,3 +29,9 @@ export interface NavbarItemProps extends AnchorHTMLAttributes<HTMLAnchorElement>
 export interface NavbarActionsProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
+export interface NavbarToggleProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Whether the menu it opens is open (sets aria-expanded and the default label). */
+    open?: boolean;
+    /** The icon; a menu (hamburger) icon by default. */
+    children?: ReactNode;
+}

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

@@ -1,2 +1,2 @@
-export { Navbar, NavbarBrand, NavbarNav, NavbarItem, NavbarActions } from './Navbar';
-export type { NavbarProps, NavbarBrandProps, NavbarNavProps, NavbarItemProps, NavbarActionsProps, } from './Navbar.types';
+export { Navbar, NavbarBrand, NavbarNav, NavbarItem, NavbarActions, NavbarToggle } from './Navbar';
+export type { NavbarProps, NavbarBrandProps, NavbarNavProps, NavbarItemProps, NavbarActionsProps, NavbarToggleProps, } from './Navbar.types';

package/dist/components/Sidebar/Sidebar.types.d.ts

@@ -6,6 +6,22 @@ export interface SidebarProps extends HTMLAttributes<HTMLElement> {
     sticky?: boolean;
     collapsed?: boolean;
     responsive?: boolean;
+    /**
+     * With `responsive`: below 900px the sidebar slides in from the left as a drawer
+     * (over a backdrop) while this is true, instead of being hidden. Open it from a
+     * menu button such as `NavbarToggle`. Ignored at 900px and wider.
+     */
+    mobileOpen?: boolean;
+    /**
+     * Background. `'base'` (default) sits on the page tone; `'raised'` uses the
+     * surface of drawers, dialogs and menus (white in light mode).
+     */
+    surface?: 'base' | 'raised';
+    /**
+     * Turns on the mobile drawer for a `responsive` sidebar. Called with `false` when
+     * the backdrop is clicked or Escape is pressed.
+     */
+    onMobileOpenChange?: (open: boolean) => void;
     /**
      * One-off CSS, same as `Box`'s `sx`: each value may be a scalar or a
      * responsive breakpoint map (`{ base, sm, md, lg, xl }`). Scalar-only sx