@powerhousedao/document-engineering 1.38.0 → 1.40.0

package/dist/src/ui/components/dropdown/dropdown.stories.d.ts

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import DropdownExample from './dropdown-example.js';
+/**
+ * The `Dropdown` component system provides a flexible way to create interactive menus.
+ * It follows a strict parent-child component structure where:
+ * - `Dropdown` is the root container
+ * - `DropdownTrigger` activates the menu
+ * - `DropdownContent` wraps the menu items
+ * - `DropdownItem` represents individual menu options
+ *
+ * ## How to setup the component
+ *
+ * First import the necessary components:
+ *
+ * ```tsx
+ * import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@powerhousedao/document-engineering/ui";
+ * ```
+ *
+ * Basic implementation:
+ *
+ * ```tsx
+ * function MyComponent() {
+ *   return (
+ *     <Dropdown>
+ *       <DropdownTrigger>Open Menu</DropdownTrigger>
+ *       <DropdownContent>
+ *         <DropdownItem>Item 1</DropdownItem>
+ *         <DropdownItem>Item 2</DropdownItem>
+ *       </DropdownContent>
+ *     </Dropdown>
+ *   );
+ * }
+ * ```
+ *
+ * Basic usage with icons:
+ *
+ * ```tsx
+ * <Dropdown>
+ *   <DropdownTrigger className="w-[184px]">
+ *     <DownloadIcon width={16} height={16} />
+ *     Export Options
+ *   </DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem>
+ *       <PDFIcon width={16} height={16} />
+ *       Save as PDF
+ *     </DropdownItem>
+ *     <DropdownItem>
+ *       <CSVIcon width={16} height={16} />
+ *       Export CSV
+ *     </DropdownItem>
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
+ *
+ * ## Component Structure Rules
+ * 1. `DropdownItem` must always be wrapped in `DropdownContent`
+ * 2. `DropdownContent` must be a direct child of `Dropdown`
+ * 3. Icons should be placed as direct children before text content
+ *
+ * ## Creating Different Menu Types
+ *
+ * Example 1: Export Menu (from current implementation)
+ *
+ * ```tsx
+ * <Dropdown>
+ *   <DropdownTrigger>
+ *     <DownloadFileIcon />
+ *     Export Format
+ *   </DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem><ZipIcon /> ZIP Archive</DropdownItem>
+ *     <DropdownItem><UBLIcon /> UBL Format</DropdownItem>
+ *     <DropdownItem><PDFIcon /> PDF Document</DropdownItem>
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
+ *
+ * Example 2: Settings Menu
+ *
+ * ```tsx
+ * <Dropdown>
+ *   <DropdownTrigger>
+ *     <SettingsIcon />
+ *     Configuration
+ *   </DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem><UserIcon /> Profile</DropdownItem>
+ *     <DropdownItem><SecurityIcon /> Privacy</DropdownItem>
+ *     <DropdownItem><NotificationIcon /> Alerts</DropdownItem>
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
+ *
+ * Example 3: Navigation Menu
+ *
+ * ```tsx
+ * <Dropdown>
+ *   <DropdownTrigger>
+ *     <MenuIcon />
+ *     Quick Links
+ *   </DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem><HomeIcon /> Dashboard</DropdownItem>
+ *     <DropdownItem><AnalyticsIcon /> Reports</DropdownItem>
+ *     <DropdownItem><SupportIcon /> Help Center</DropdownItem>
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
+ *
+ * ## Icon Implementation
+ * Icons can be used in two ways:
+ *
+ * ** Direct SVG Import** (Recommended for custom icons):
+ *
+ * ```tsx
+ * import DownloadFile from "@/assets/icon-components/DownloadFile";
+ * <DropdownItem>
+ *   <DownloadFile width={16} height={16} /> Download File
+ * </DropdownItem>
+ * ```
+ *
+ *
+ * ** Using Icon Component** (Recommended for dynamic icons):
+ *
+ * ```tsx
+ * import { Icon } from "@/powerhouse";
+ * <Dropdown>
+ *   <DropdownTrigger>
+ *     <Icon name="DownloadFile" />
+ *     Download File
+ *   </DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem>
+ *       <Icon name="DownloadFile" />
+ *       Download File
+ *     </DropdownItem>
+ *     <DropdownItem>
+ *       <Icon name="Settings" />
+ *       Configuration
+ *     </DropdownItem>
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
+ *
+ * ## Event Handling
+ * `DropdownItem` component extends `HTMLDivElement` attributes. To handle click events:
+ *
+ * **Inline implementation:**
+ *
+ * ```tsx
+ * <DropdownItem onClick={() => console.log('Item clicked')}>
+ *   <SettingsIcon /> Configuration
+ * </DropdownItem>
+ * ```
+ *
+ * The component accepts all `div` element props including:
+ * - `onClick`: Mouse click handler
+ * - `onMouseEnter`: Hover handler
+ * - `data-*`: Custom data attributes
+ * - `aria-*`: Accessibility attributes
+ *
+ * TypeScript users get full type checking for native div element props.
+ */
+declare const meta: Meta<typeof DropdownExample>;
+export default meta;
+type Story = StoryObj<typeof DropdownExample>;
+export declare const Default: Story;
+//# sourceMappingURL=dropdown.stories.d.ts.map

package/dist/src/ui/components/dropdown/dropdown.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.stories.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/dropdown/dropdown.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,eAAe,MAAM,uBAAuB,CAAA;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiKG;AACH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,eAAe,CAuBC,CAAA;AAExC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,eAAe,CAAC,CAAA;AAC7C,eAAO,MAAM,OAAO,EAAE,KAIrB,CAAA"}

package/dist/src/ui/components/dropdown/dropdown.stories.js

@@ -0,0 +1,194 @@
+import { StorybookControlCategory } from '../../../scalars/lib/storybook-arg-types.js';
+import DropdownExample from './dropdown-example.js';
+/**
+ * The `Dropdown` component system provides a flexible way to create interactive menus.
+ * It follows a strict parent-child component structure where:
+ * - `Dropdown` is the root container
+ * - `DropdownTrigger` activates the menu
+ * - `DropdownContent` wraps the menu items
+ * - `DropdownItem` represents individual menu options
+ *
+ * ## How to setup the component
+ *
+ * First import the necessary components:
+ *
+ * ```tsx
+ * import { Dropdown, DropdownTrigger, DropdownContent, DropdownItem } from "@powerhousedao/document-engineering/ui";
+ * ```
+ *
+ * Basic implementation:
+ *
+ * ```tsx
+ * function MyComponent() {
+ *   return (
+ *     <Dropdown>
+ *       <DropdownTrigger>Open Menu</DropdownTrigger>
+ *       <DropdownContent>
+ *         <DropdownItem>Item 1</DropdownItem>
+ *         <DropdownItem>Item 2</DropdownItem>
+ *       </DropdownContent>
+ *     </Dropdown>
+ *   );
+ * }
+ * ```
+ *
+ * Basic usage with icons:
+ *
+ * ```tsx
+ * <Dropdown>
+ *   <DropdownTrigger className="w-[184px]">
+ *     <DownloadIcon width={16} height={16} />
+ *     Export Options
+ *   </DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem>
+ *       <PDFIcon width={16} height={16} />
+ *       Save as PDF
+ *     </DropdownItem>
+ *     <DropdownItem>
+ *       <CSVIcon width={16} height={16} />
+ *       Export CSV
+ *     </DropdownItem>
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
+ *
+ * ## Component Structure Rules
+ * 1. `DropdownItem` must always be wrapped in `DropdownContent`
+ * 2. `DropdownContent` must be a direct child of `Dropdown`
+ * 3. Icons should be placed as direct children before text content
+ *
+ * ## Creating Different Menu Types
+ *
+ * Example 1: Export Menu (from current implementation)
+ *
+ * ```tsx
+ * <Dropdown>
+ *   <DropdownTrigger>
+ *     <DownloadFileIcon />
+ *     Export Format
+ *   </DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem><ZipIcon /> ZIP Archive</DropdownItem>
+ *     <DropdownItem><UBLIcon /> UBL Format</DropdownItem>
+ *     <DropdownItem><PDFIcon /> PDF Document</DropdownItem>
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
+ *
+ * Example 2: Settings Menu
+ *
+ * ```tsx
+ * <Dropdown>
+ *   <DropdownTrigger>
+ *     <SettingsIcon />
+ *     Configuration
+ *   </DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem><UserIcon /> Profile</DropdownItem>
+ *     <DropdownItem><SecurityIcon /> Privacy</DropdownItem>
+ *     <DropdownItem><NotificationIcon /> Alerts</DropdownItem>
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
+ *
+ * Example 3: Navigation Menu
+ *
+ * ```tsx
+ * <Dropdown>
+ *   <DropdownTrigger>
+ *     <MenuIcon />
+ *     Quick Links
+ *   </DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem><HomeIcon /> Dashboard</DropdownItem>
+ *     <DropdownItem><AnalyticsIcon /> Reports</DropdownItem>
+ *     <DropdownItem><SupportIcon /> Help Center</DropdownItem>
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
+ *
+ * ## Icon Implementation
+ * Icons can be used in two ways:
+ *
+ * ** Direct SVG Import** (Recommended for custom icons):
+ *
+ * ```tsx
+ * import DownloadFile from "@/assets/icon-components/DownloadFile";
+ * <DropdownItem>
+ *   <DownloadFile width={16} height={16} /> Download File
+ * </DropdownItem>
+ * ```
+ *
+ *
+ * ** Using Icon Component** (Recommended for dynamic icons):
+ *
+ * ```tsx
+ * import { Icon } from "@/powerhouse";
+ * <Dropdown>
+ *   <DropdownTrigger>
+ *     <Icon name="DownloadFile" />
+ *     Download File
+ *   </DropdownTrigger>
+ *   <DropdownContent>
+ *     <DropdownItem>
+ *       <Icon name="DownloadFile" />
+ *       Download File
+ *     </DropdownItem>
+ *     <DropdownItem>
+ *       <Icon name="Settings" />
+ *       Configuration
+ *     </DropdownItem>
+ *   </DropdownContent>
+ * </Dropdown>
+ * ```
+ *
+ * ## Event Handling
+ * `DropdownItem` component extends `HTMLDivElement` attributes. To handle click events:
+ *
+ * **Inline implementation:**
+ *
+ * ```tsx
+ * <DropdownItem onClick={() => console.log('Item clicked')}>
+ *   <SettingsIcon /> Configuration
+ * </DropdownItem>
+ * ```
+ *
+ * The component accepts all `div` element props including:
+ * - `onClick`: Mouse click handler
+ * - `onMouseEnter`: Hover handler
+ * - `data-*`: Custom data attributes
+ * - `aria-*`: Accessibility attributes
+ *
+ * TypeScript users get full type checking for native div element props.
+ */
+const meta = {
+    title: 'Data Display/Dropdown',
+    component: DropdownExample,
+    parameters: {
+        layout: 'centered',
+        chromatic: {
+            disableSnapshot: true,
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: {
+            label: {
+                control: 'text',
+                description: 'Sets the visible label text for the input field',
+                table: {
+                    type: { summary: 'string' },
+                    category: StorybookControlCategory.COMPONENT_SPECIFIC,
+                },
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        label: 'Export as',
+    },
+};
+//# sourceMappingURL=dropdown.stories.js.map

package/dist/src/ui/components/dropdown/dropdown.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.stories.js","sourceRoot":"","sources":["../../../../../src/ui/components/dropdown/dropdown.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,6CAA6C,CAAA;AACtF,OAAO,eAAe,MAAM,uBAAuB,CAAA;AAEnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiKG;AACH,MAAM,IAAI,GAAiC;IACzC,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,eAAe;IAC1B,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;QAClB,SAAS,EAAE;YACT,eAAe,EAAE,IAAI;SACtB;KACF;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,WAAW,EAAE,iDAAiD;gBAC9D,KAAK,EAAE;oBACL,IAAI,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;oBAC3B,QAAQ,EAAE,wBAAwB,CAAC,kBAAkB;iBACtD;aACF;SACF;KACF;CACqC,CAAA;AAExC,eAAe,IAAI,CAAA;AAEnB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;KACnB;CACF,CAAA"}

package/dist/src/ui/components/icon/icon.stories.d.ts

@@ -0,0 +1,16 @@
+import type { StoryObj } from '@storybook/react';
+import { Icon } from './icon.js';
+declare const meta: {
+    title: string;
+    component: ({ name, size, color, style, ...props }: import("./icon.js").IconProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof Icon>;
+export declare const AllIcons: Story;
+export declare const CustomColor: Story;
+export declare const CustomSize: Story;
+export declare const SingleIcon: Story;
+//# sourceMappingURL=icon.stories.d.ts.map

package/dist/src/ui/components/icon/icon.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.stories.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/icon/icon.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,QAAA,MAAM,IAAI;;;;;;CAMmB,CAAA;AAE7B,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,QAAQ,EAAE,KAqBtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAKzB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAKxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAIxB,CAAA"}

package/dist/src/ui/components/icon/icon.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { iconNames } from '../icon-components/index.js';
+import { Icon } from './icon.js';
+const meta = {
+    title: 'Data Display/Icon',
+    component: Icon,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const AllIcons = {
+    args: {
+        name: 'Circle',
+    },
+    render: () => {
+        return (_jsxs("div", { className: "bg-white p-8", children: [_jsx("h2", { className: "mb-6 text-xl font-semibold", children: "All Available Icons" }), _jsx("div", { className: "flex flex-wrap", children: iconNames.map((name) => (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-lg border border-gray-200 p-4", children: [_jsx("div", { className: "flex size-10 items-center justify-center", children: _jsx(Icon, { name: name, className: "text-gray-700" }) }), _jsx("span", { className: "text-xs text-gray-600", children: name })] }, name))) })] }));
+    },
+};
+export const CustomColor = {
+    args: {
+        name: 'Circle',
+        color: 'blue',
+    },
+};
+export const CustomSize = {
+    args: {
+        name: 'Circle',
+        size: 48,
+    },
+};
+export const SingleIcon = {
+    args: {
+        name: 'Circle',
+    },
+};
+//# sourceMappingURL=icon.stories.js.map

package/dist/src/ui/components/icon/icon.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.stories.js","sourceRoot":"","sources":["../../../../../src/ui/components/icon/icon.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAEhC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,mBAAmB;IAC1B,SAAS,EAAE,IAAI;IACf,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;CAC0B,CAAA;AAE7B,eAAe,IAAI,CAAA;AAGnB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;KACf;IACD,MAAM,EAAE,GAAG,EAAE;QACX,OAAO,CACL,eAAK,SAAS,EAAC,cAAc,aAC3B,aAAI,SAAS,EAAC,4BAA4B,oCAAyB,EACnE,cAAK,SAAS,EAAC,gBAAgB,YAC5B,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACvB,eAAgB,SAAS,EAAC,wEAAwE,aAChG,cAAK,SAAS,EAAC,0CAA0C,YACvD,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,eAAe,GAAG,GAC1C,EACN,eAAM,SAAS,EAAC,uBAAuB,YAAE,IAAI,GAAQ,KAJ7C,IAAI,CAKR,CACP,CAAC,GACE,IACF,CACP,CAAA;IACH,CAAC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,MAAM;KACd;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,EAAE;KACT;CACF,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;KACf;CACF,CAAA"}

package/dist/src/ui/components/icon/index.js

@@ -1,3 +1,4 @@
 export * from './icon.js';
+export {} from '../icon-components/index.js';
 export { iconNames } from '../icon-components/index.js';
 //# sourceMappingURL=index.js.map

package/dist/src/ui/components/icon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/components/icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,OAAO,EAAiB,MAAM,6BAA6B,CAAA;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA"}

package/dist/src/ui/components/sidebar/sidebar.stories.d.ts

@@ -0,0 +1,147 @@
+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

package/dist/src/ui/components/sidebar/sidebar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/ui/components/sidebar/sidebar.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAItD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAA;AAKtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmHG;AAEH,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAwJ9B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,OAAO,CAAC,CAAA;AAErC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAA;AAEhC;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,EAAE,KAqCpC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAqDvC,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAgF9B,CAAA;AAED,eAAO,MAAM,uBAAuB,EAAE,KAsErC,CAAA;AACD;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAqCrB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAoC/B,CAAA"}