import type { Meta, StoryObj } from '@storybook/react';
import { Sidebar } from './sidebar.js';
/**
 * The `Sidebar` component can be used within a page layout to provide a sidebar navigation.
 * It provided a tree structure of nodes that can be used to navigate the application offering customization, search and more.
 *
 * The `Sidebar` component requires a `SidebarProvider` ancestor component to function correctly. The `SidebarProvider` accepts an optional `nodes` prop
 * which defines the navigation tree structure. If `nodes` is not provided to the provider, the `Sidebar` component can accept its own `nodes` prop.
 * If neither source provides nodes, the sidebar will render empty.
 *
 * Usage:
 *
 * ```tsx
 * <SidebarProvider nodes={nodes}>
 *   <Sidebar {...sidebarProps} />
 * </SidebarProvider>
 * ```
 *
 * The sidebar nodes are defined as follows:
 *
 * ```tsx
 * type SidebarNode = {
 *   id: string;
 *   title: string;
 *   children: SidebarNode[];
 *   icon?: IconName | ReactElement;
 *   expandedIcon?: IconName | ReactElement;
 *   status?: NodeStatus;
 * };
 * enum NodeStatus {
 *   CREATED = "CREATED",
 *   MODIFIED = "MODIFIED",
 *   REMOVED = "REMOVED",
 *   MOVED = "MOVED",
 *   DUPLICATED = "DUPLICATED",
 *   UNCHANGED = "UNCHANGED", // default status, no need to set it
 * }
 * ```
 *
 * The `icon` and `expandedIcon` properties are optional and can be used to display an icon in the sidebar item.
 * This icons must be one of the [available icons](?path=/docs/powerhouse-iconography--readme)
 *
 *
 * ## Sidebar Events
 *
 * The `Sidebar` component emits the following custom events:
 *
 * - `sidebar:change`: it is triggered when the sidebar item is clicked.
 *  - Data: `{ node: SidebarNode }`
 * - `sidebar:resize:start`: it is triggered when the sidebar resize starts at the moment the user clicks down in the resizing handle.
 *  - Data: `{ isSidebarOpen: boolean }`
 * - `sidebar:resize:active`: it is triggered when the sidebar is being resized while the user is dragging the resizing handle.
 * It could be triggered multiple times while the user is dragging the resizing handle.
 *  - Data: `{ isSidebarOpen: boolean, sidebarWidth: number }`
 * - `sidebar:resize`: it is triggered when the sidebar resize stops at the moment the user releases the resizing handle.
 *  - Data: `{ isSidebarOpen: boolean, sidebarWidth: number }`
 * - `sidebar:resize:toggle`: it is triggered when the sidebar is toggled (collapsed or expanded).
 *  - Data: `{ isSidebarOpen: boolean }`
 *
 * ### Example of listening to the events
 *
 * ```tsx
 * useEffect(() => {
 *   const onResize = (event: Event) => {
 *     console.log("sidebar:resize", event);
 *   };
 *
 *   // you can add the listener directly to the document or add a
 *   // `className`, get the sidebar element and add the listener to it.
 *   document.addEventListener("sidebar:resize", onResize);
 *
 *   return () => {
 *     document.removeEventListener("sidebar:resize", onResize);
 *   };
 * }, []);
 * ```
 *  ## Customization
 * The sidebar can be customized using the `className` prop which accepts a string of Tailwind classes.
 * Each class should follow the format `[&_.sidebar\\_\\_{element}]:{tailwind-classes}`.
 *
 * Base classes available for customization:
 * - .sidebar__container: Main sidebar container
 * - .sidebar__item: Individual sidebar item
 * - .sidebar__item--active: Active sidebar item
 * - .sidebar__item-title: Item title text
 * - .sidebar__item-caret: Expand/collapse caret button
 * - .sidebar__item-caret--no-children: Caret for items without children
 * - .sidebar__item-pin: Pin button for items
 * - .sidebar__item-pin--active: Active pin button
 * - .sidebar__header: Sidebar header container
 * - .sidebar__header-title: Header title text
 * - .sidebar__header-macro-item: Macro item in header
 * - .sidebar__pinning-area: Pinned items area
 *
 * ## Example Usage
 *
 *
 * ```tsx
 * import { Sidebar } from './sidebar'
 *
 * function MyCustomSidebar() {
 *   return (
 *     <Sidebar
 *       className={String.raw`
 *         [&_.sidebar\\_\\_item]:bg-blue-500
 *         [&_.sidebar\\_\\_item]:text-white
 *         [&_.sidebar\\_\\_item--active]:bg-green-500
 *         [&_.sidebar\\_\\_item--active]:text-black
 *         [&_.sidebar\\_\\_item-caret]:bg-yellow-500
 *         [&_.sidebar\\_\\_item-pin]:fill-red-500
 *         [&_.sidebar\\_\\_header]:bg-red-500
 *         [&_.sidebar\\_\\_header-title]:text-white
 *       `}
 *     />
 *   )
 * }
 * ```
 */
declare const meta: Meta<typeof Sidebar>;
export default meta;
type Story = StoryObj<typeof Sidebar>;
export declare const Default: Story;
/**
 * The `Sidebar` component can be used within a page layout to provide a sidebar navigation.
 * It can also be used to display additional content within the sidebar, such as authentication buttons.
 * or any other react component.
 */
export declare const WithinLayoutAndContent: Story;
/**
 * Example showing how to use the `handleOnTitleClick` callback to implement custom navigation.
 * This allows developers to make the sidebar title clickable for custom navigation logic.
 */
export declare const WithCustomTitleNavigation: Story;
export declare const WithCustomStyles: Story;
export declare const WithCustomTargetElement: Story;
/**
 * Demonstrates the loading state of the sidebar when data is being fetched.
 * The sidebar displays skeleton items with animated placeholders while preserving
 * all other functionality like header, search bar, and footer content.
 */
export declare const Loading: Story;
/**
 * Demonstrates how to use a custom sorting function for nodes.
 * This example shows sorting by string length (shorter titles first) then alphabetically if lengths are equal.
 */
export declare const WithCustomSorting: Story;
//# sourceMappingURL=sidebar.stories.d.ts.map