@axzydev/axzy_ui_system 1.4.8 → 1.5.0

package/src/components/organisms/navbar/navbar.doc.mdx

@@ -1,77 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './navbar.stories';
-
-<Meta of={StoriesData} />
-
-# ITNavbar
-
-A full sidebar navigation shell for application layouts. Provides collapsible submenus with expand/collapse animation, active state highlighting via `isActive`, and an optional user menu dropdown with avatar, name, and email.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `navigationItems` | `ITNavigationItem[]` | `undefined` | Navigation items with labels, icons, subitems, and active states. |
-| `logo` | `ReactNode` | `undefined` | Logo element rendered in the sidebar header. |
-| `logoText` | `string` | `undefined` | Text displayed next to the logo. |
-| `userMenu` | `{ userImage?, userName, userEmail, menuItems }` | `undefined` | User dropdown configuration. |
-| `children` | `ReactNode` | `undefined` | Main content rendered next to the sidebar. |
-| `navItems` | `ReactNode` | `undefined` | **Deprecated.** Use `navigationItems` instead. |
-| `showSidebar` | `boolean` | `undefined` | **Deprecated.** Legacy flag. |
-| `showSidebarOnMobile` | `boolean` | `undefined` | **Deprecated.** Legacy flag. |
-| `sidebarItems` | `ReactNode` | `undefined` | **Deprecated.** Use `navigationItems` instead. |
-
-### ITNavigationItem
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `string` | required | Unique identifier. |
-| `label` | `string` | required | Display label. |
-| `icon` | `ReactNode` | `undefined` | Icon rendered next to the label. |
-| `action` | `() => void` | `undefined` | Callback on click. |
-| `isActive` | `boolean` | `false` | Whether the item is currently highlighted as active. |
-| `subitems` | `ITNavigationSubItem[]` | `undefined` | Nested items shown on expand. |
-
-### ITNavigationSubItem
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `id` | `string` | required | Unique identifier. |
-| `label` | `string` | required | Display label. |
-| `action` | `() => void` | required | Callback on click. |
-| `isActive` | `boolean` | `false` | Whether the sub-item is highlighted. |
-
-## Usage
-
-```tsx
-import { ITNavbar } from '@axzydev/axzy_ui_system';
-import { FaHome, FaChartBar } from 'react-icons/fa';
-
-<ITNavbar
-  logoText="AXZY"
-  navigationItems={[
-    { id: 'home', label: 'Dashboard', icon: <FaHome />, isActive: true },
-    { id: 'analytics', label: 'Analytics', icon: <FaChartBar />,
-      subitems: [{ id: 'reports', label: 'Reports', action: () => {} }]
-    }
-  ]}
-  userMenu={{ userName: 'John', userEmail: 'john@axzy.dev', menuItems: [...] }}
->
-  <div>Content area</div>
-</ITNavbar>
-```
-
-## Notes
-
-- Sidebar has a collapsed state where only icons are visible; expanding shows labels.
-- Submenus animate open/closed with a height transition.
-- Items with `isActive` are visually highlighted.
-- `userMenu` renders a dropdown at the bottom of the sidebar with user info and action items.
-- Legacy props (`navItems`, `showSidebar`, etc.) are maintained for backward compatibility but should be migrated to `navigationItems`.
-- Supports dark mode via CSS variables from the theme provider.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/organisms/navbar/navbar.stories.tsx

@@ -1,83 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITNavbar from '@/components/organisms/navbar/navbar';
-import { FaHome, FaChartBar, FaCog, FaUsers } from 'react-icons/fa';
-
-const meta = {
-  title: 'Components/Layout & Navigation/ITNavbar',
-  component: ITNavbar,
-  parameters: { layout: 'fullscreen' },
-  argTypes: {
-    logoText: { control: 'text', description: 'Text displayed next to the logo' },
-    navigationItems: { control: false, description: 'Navigation items with optional sub-items' },
-    userMenu: { control: false, description: 'User menu configuration' },
-    children: { control: false, description: 'Main content area' },
-  },
-} satisfies Meta<typeof ITNavbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const sampleNavigationItems = [
-  {
-    id: 'home',
-    label: 'Dashboard',
-    icon: <FaHome />,
-    action: () => {},
-    isActive: true,
-  },
-  {
-    id: 'analytics',
-    label: 'Analytics',
-    icon: <FaChartBar />,
-    action: () => {},
-    subitems: [
-      { id: 'reports', label: 'Reports', action: () => {} },
-      { id: 'metrics', label: 'Metrics', action: () => {} },
-    ],
-  },
-  {
-    id: 'users',
-    label: 'Users',
-    icon: <FaUsers />,
-    action: () => {},
-  },
-  {
-    id: 'settings',
-    label: 'Settings',
-    icon: <FaCog />,
-    action: () => {},
-  },
-];
-
-export const Default: Story = {
-  args: {
-    logoText: 'AXZY',
-    navigationItems: sampleNavigationItems,
-    userMenu: {
-      userName: 'John Doe',
-      userEmail: 'john@axzy.dev',
-      menuItems: [
-        { label: 'Profile', onClick: () => alert('Profile') },
-        { label: 'Logout', onClick: () => alert('Logout') },
-      ],
-    },
-    children: (
-      <div className="p-8">
-        <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Welcome to AXZY</h1>
-        <p className="text-slate-500 dark:text-slate-400 mt-2">Main content area goes here.</p>
-      </div>
-    ),
-  },
-};
-
-export const NoUserMenu: Story = {
-  args: {
-    logoText: 'AXZY',
-    navigationItems: sampleNavigationItems,
-    children: (
-      <div className="p-8">
-        <h1 className="text-2xl font-bold text-slate-800 dark:text-white">Public View</h1>
-      </div>
-    ),
-  },
-};

package/src/components/organisms/page-header/page-header.doc.mdx

@@ -1,54 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './page-header.stories';
-
-<Meta of={StoriesData} />
-
-# ITPageHeader
-
-A page title bar component that displays a heading with optional breadcrumbs, description text, action buttons, and a back navigation button. Designed to sit at the top of page content for consistent page-level navigation.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | required | Page title displayed as the main heading. |
-| `description` | `string` | `undefined` | Optional description text shown below the title. |
-| `breadcrumbs` | `ITBreadcrumbItem[]` | `undefined` | Breadcrumb navigation items above the title. |
-| `actions` | `ReactNode` | `undefined` | Action buttons or elements rendered on the right side. |
-| `backAction` | `() => void` | `undefined` | Callback fired when the back button is clicked. |
-| `icon` | `ReactNode` | `undefined` | Optional icon displayed next to the title. |
-| `iconColor` | `string` | `undefined` | Custom CSS color value for the icon. |
-| `className` | `string` | `undefined` | Additional CSS classes for the container. |
-
-## Usage
-
-```tsx
-import { ITPageHeader } from '@axzydev/axzy_ui_system';
-import { FaUsers } from 'react-icons/fa';
-
-<ITPageHeader
-  title="Users"
-  description="Manage system users"
-  breadcrumbs={[{ label: 'Dashboard', href: '#' }, { label: 'Users' }]}
-  actions={<ITButton label="Add User" />}
-/>
-<ITPageHeader
-  title="Edit User"
-  backAction={() => navigate(-1)}
-  breadcrumbs={[{ label: 'Users', href: '/users' }, { label: 'Edit' }]}
-/>
-```
-
-## Notes
-
-- Breadcrumbs render above the title using the ITBreadcrumbs component.
-- `backAction` renders a left-arrow button before the content; breadcrumbs shift to the right of the back button.
-- The `icon` slot places an icon beside the title, colored by `iconColor` or the primary theme color.
-- Actions area accepts any React nodes; typically ITButton components with `small` sizing.
-- The component uses a flex layout: breadcrumbs + back button on the left, actions on the right.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/organisms/page-header/page-header.stories.tsx

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { FaUsers } from "react-icons/fa";
-import ITPageHeader from "@/components/organisms/page-header/page-header";
-import ITButton from "@/components/atoms/button/button";
-
-const meta: Meta<typeof ITPageHeader> = {
-  title: "Components/Layout/ITPageHeader",
-  component: ITPageHeader,
-};
-
-export default meta;
-type Story = StoryObj<typeof ITPageHeader>;
-
-export const Default: Story = {
-  args: {
-    title: "Usuarios",
-    description: "Gestiona los usuarios del sistema",
-  },
-};
-
-export const WithBreadcrumbs: Story = {
-  args: {
-    title: "Editar Usuario",
-    description: "Modifica los datos del usuario seleccionado",
-    breadcrumbs: [
-      { label: "Inicio", href: "#" },
-      { label: "Usuarios", href: "#" },
-      { label: "Editar Usuario" },
-    ],
-  },
-};
-
-export const WithActions: Story = {
-  args: {
-    title: "Órdenes de Compra",
-    description: "Listado de órdenes activas",
-    breadcrumbs: [
-      { label: "Dashboard", href: "#" },
-      { label: "Órdenes" },
-    ],
-    actions: (
-      <>
-        <ITButton label="Exportar" variant="outlined" size="sm" />
-        <ITButton label="Nueva Orden" size="sm" />
-      </>
-    ),
-  },
-};
-
-export const WithBackAction: Story = {
-  args: {
-    title: "Detalle del Producto",
-    description: "Información completa del producto",
-    backAction: () => alert("Back clicked"),
-    breadcrumbs: [
-      { label: "Productos", href: "#" },
-      { label: "Detalle" },
-    ],
-    actions: <ITButton label="Editar" size="sm" />,
-  },
-};
-
-export const WithIcon: Story = {
-  args: {
-    title: "Usuarios",
-    description: "Gestiona los usuarios del sistema",
-    icon: <FaUsers size={20} />,
-    iconColor: "#6366f1",
-    breadcrumbs: [
-      { label: "Inicio", href: "#" },
-      { label: "Usuarios" },
-    ],
-  },
-};

package/src/components/organisms/searchTable/searchTable.doc.mdx

@@ -1,79 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './searchTable.stories';
-
-<Meta of={StoriesData} />
-
-# ITSearchTable
-
-Server-side data table with global search across all fields, column-level filtering, sortable columns, inline row editing, and integrated pagination. Supports six column types and optional Yup validation schema.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `columns` | `SearchColumn<T>[]` | — | Column definitions with key, label, type, filter, sortable, editable, and custom render options. |
-| `data` | `T[]` | — | Array of row data objects (server-side paginated). |
-| `title` | `string` | — | Title displayed in the table header bar. |
-| `searchInputPlaceholder` | `string` | — | Placeholder text for the global search input. |
-| `variant` | `"default" \| "striped" \| "bordered"` | — | Table visual variant. |
-| `size` | `"sm" \| "md" \| "lg"` | — | Table row size. |
-| `containerClassName` | `string` | — | Additional CSS class for the outer container wrapper. |
-| `className` | `string` | — | Additional CSS class applied to the `<table>` element. |
-| `itemsPerPageOptions` | `number[]` | — | Available page-size options for the pagination dropdown. |
-| `defaultItemsPerPage` | `number` | — | Initial/default number of rows per page. |
-| `validationSchema` | `yup.ObjectSchema` | — | Yup validation schema for inline row editing. |
-| `pageIndex` | `number` | — | Current page index (0-based, server-side). |
-| `totalCount` | `number` | — | Total number of rows across all pages. |
-| `totalPages` | `number` | — | Total number of available pages. |
-| `hasPreviousPage` | `boolean` | — | Whether there is a previous page available. |
-| `hasNextPage` | `boolean` | — | Whether there is a next page available. |
-| `onPageChange` | `(page: number) => void` | — | Callback when the user navigates to a different page. |
-| `onItemsPerPageChange` | `(itemsPerPage: number) => void` | — | Callback when the user changes the page size. |
-| `onSortChange` | `(sortConfig: { key: string, direction: "asc" \| "desc" }) => void` | — | Callback when a column header sort is triggered. |
-| `onFilterChange` | `(filters: Record<string, string \| boolean \| number>) => void` | — | Callback when global search or column filter changes. |
-
-## Usage
-
-```tsx
-import { ITSearchTable } from '@axzydev/axzy_ui_system';
-import type { SearchColumn } from '@axzydev/axzy_ui_system';
-
-const columns: SearchColumn<MyRow>[] = [
-  { key: 'id', label: 'ID', type: 'number', sortable: true },
-  { key: 'name', label: 'Name', type: 'string', sortable: true, filter: true, editable: true },
-  { key: 'email', label: 'Email', type: 'string', sortable: true },
-  { key: 'status', label: 'Status', type: 'catalog', filter: 'catalog', sortable: true },
-];
-
-<ITSearchTable
-  columns={columns}
-  data={rows}
-  title="Users"
-  searchInputPlaceholder="Search users..."
-  pageIndex={0}
-  totalCount={100}
-  totalPages={10}
-  hasPreviousPage={false}
-  hasNextPage={true}
-  onPageChange={handlePageChange}
-  onSortChange={handleSort}
-  onFilterChange={handleFilter}
-/>
-```
-
-## Notes
-
-- **Column types**: `string`, `number`, `boolean`, `date`, `actions`, and `catalog` provide specialized filtering and rendering.
-- **Global search**: built-in search input filters across all filterable columns via `onFilterChange`.
-- **Column filtering**: `filter: true` enables text filtering; `filter: 'catalog'` renders a dropdown with `catalogOptions`.
-- **Sorting**: `sortable: true` on a column triggers `onSortChange` with `{ key, direction }`.
-- **Inline editing**: `editable: true` with `inputType` enables cell-level editing with optional `validation` and Yup `validationSchema` support.
-- **Pagination**: fully server-driven via `pageIndex`, `totalPages`, `hasPreviousPage`, `hasNextPage`, and callbacks.
-- **Rendering**: `currencyMX` formats numbers as MXN; `render` provides a custom cell render function; `actions` renders custom action buttons with edit helpers.
-- Variants `striped` and `bordered` provide alternative visual styles.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />

package/src/components/organisms/searchTable/searchTable.stories.tsx

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import ITSearchTable from '@/components/organisms/searchTable/searchTable';
-import { SearchColumn } from './searchTable.props';
-
-interface SampleRow {
-  id: number;
-  name: string;
-  email: string;
-  status: string;
-}
-
-const sampleColumns: SearchColumn<SampleRow>[] = [
-  { key: 'id', label: 'ID', type: 'number', sortable: true },
-  { key: 'name', label: 'Name', type: 'string', sortable: true, filter: true },
-  { key: 'email', label: 'Email', type: 'string', sortable: true },
-  { key: 'status', label: 'Status', type: 'catalog', filter: 'catalog', sortable: true },
-];
-
-const sampleData: SampleRow[] = [
-  { id: 1, name: 'Alice', email: 'alice@example.com', status: 'Active' },
-  { id: 2, name: 'Bob', email: 'bob@example.com', status: 'Inactive' },
-  { id: 3, name: 'Charlie', email: 'charlie@example.com', status: 'Active' },
-];
-
-const meta = {
-  title: 'Components/Data Display/ITSearchTable',
-  component: ITSearchTable,
-  parameters: { layout: 'padded' },
-  argTypes: {
-    columns: { control: false, description: 'Column definitions' },
-    data: { control: false, description: 'Row data array' },
-    title: { control: 'text', description: 'Table header title' },
-    searchInputPlaceholder: { control: 'text', description: 'Placeholder for the search input' },
-    variant: { control: 'select', options: ['default', 'striped', 'bordered'], description: 'Visual variant' },
-    size: { control: 'select', options: ['sm', 'md', 'lg'], description: 'Row size' },
-    pageIndex: { control: 'number', description: 'Current page index (0-based)' },
-    totalCount: { control: 'number', description: 'Total number of rows across all pages' },
-    totalPages: { control: 'number', description: 'Total number of pages' },
-    hasPreviousPage: { control: 'boolean', description: 'Whether there is a previous page' },
-    hasNextPage: { control: 'boolean', description: 'Whether there is a next page' },
-  },
-} satisfies Meta<typeof ITSearchTable>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    columns: sampleColumns,
-    data: sampleData,
-    title: 'Users',
-    searchInputPlaceholder: 'Search users...',
-    pageIndex: 0,
-    totalCount: 3,
-    totalPages: 1,
-    hasPreviousPage: false,
-    hasNextPage: false,
-  } as any,
-};
-
-export const EmptyState: Story = {
-  args: {
-    columns: sampleColumns,
-    data: [],
-    title: 'Users',
-    searchInputPlaceholder: 'Search users...',
-    pageIndex: 0,
-    totalCount: 0,
-    totalPages: 0,
-    hasPreviousPage: false,
-    hasNextPage: false,
-  } as any,
-};

package/src/components/organisms/sidebar/sidebar.doc.mdx

@@ -1,176 +0,0 @@
-import { Meta, Title, Description, Primary, Controls, Stories } from '@storybook/blocks';
-import * as StoriesData from './sidebar.stories';
-
-<Meta of={StoriesData} />
-
-# ITSidebar
-
-Vertical navigation sidebar with collapsible submenus, tooltips when collapsed, active item highlighting, badge support, and themed glassmorphism styling. Designed for admin panels and dashboard layouts.
-
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `navigationItems` | `ITNavigationItem[]` | — | Navigation structure: top-level items with optional sub-items. |
-| `isCollapsed` | `boolean` | `false` | Whether the sidebar is collapsed to icon-only mode. |
-| `onToggleCollapse` | `() => void` | — | Accepted for API compatibility but never invoked by `ITSidebar`: the component renders no collapse toggle button (the rail expands on pointer hover). `ITLayout` still passes it through. |
-| `visibleOnMobile` | `boolean` | `false` | When `true`, the sidebar is always fully expanded (the collapsed 88px rail is disabled) and visible at every breakpoint. |
-| `onItemClick` | `(item: ITNavigationItem) => void` | — | Callback when a top-level navigation item is clicked. |
-| `onSubItemClick` | `(subitem: ITNavigationSubItem) => void` | — | Callback when a sub-navigation item is clicked. |
-| `subitemConnector` | `"dot" \| "\|" \| "none"` | `"dot"` | Visual connector style for sub-items. |
-| `className` | `string` | — | Additional CSS classes on the sidebar `<aside>`. |
-| `header` | `ReactNode` | — | Optional content rendered above the navigation list (e.g. a wordmark). Hidden while the sidebar is collapsed, so it only appears when the hover-expanded rail is shown. |
-| `notification` | `ITSidebarNotification` | — | Optional notification entry (icon + label + `ITBadget` counter) pinned above the navigation. Unlike `header`, it stays visible while collapsed, showing only the icon and counter. |
-| `brand` | `ITSidebarBrand` | — | Brand (`logo` + `text`) pinned in a 64px row at the very top. The logo stays visible while collapsed; the text does not. `ITLayout` fills it from `topBar.logo` / `topBar.logoText` when `sidebarFullHeight` is set. |
-| `expandOnHover` | `boolean` | `true` | `true`: the collapsed rail expands over the content on hover. `false`: it stays an icon-only rail (item name in a tooltip) and only opens through `onToggleCollapse` — the top bar menu button in `ITLayout`. Clicking a collapsed parent item opens the sidebar with that group expanded. |
-
-### ITNavigationItem
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `id` | `string` | Unique identifier. |
-| `label` | `string` | Display label. |
-| `icon` | `ReactNode` | Icon rendered left of the label. |
-| `action` | `() => void` | Click handler for top-level items without submenus. |
-| `isActive` | `boolean` | Whether this item is active/highlighted. |
-| `subitems` | `ITNavigationSubItemEntry[]` | Array of entries: plain sub-items or titled groups (`ITNavigationSubItemGroup`). |
-| `badge` | `number \| string` | Notification content rendered with `ITBadget` (e.g. an unread count). |
-| `badgeProps` | `ITBadgetProps` | Styling forwarded to the item badge (`color`, `size`, `variant`, `className` for padding). |
-
-### ITSidebarNotification
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `count` | `number` | — | Count displayed inside the notification `ITBadget`. |
-| `icon` | `ReactNode` | — | Icon rendered left of the label (e.g. a bell). Omit for a count-only pill. |
-| `label` | `string` | `"Notificaciones"` | Accessible label and tooltip for the notification button. |
-| `onClick` | `() => void` | — | Click handler for the notification button. |
-| `badgeProps` | `ITBadgetProps` | `{ color: "danger", size: "sm" }` | Styling forwarded to the internal `ITBadget`; use `className` for padding. |
-
-### ITNavigationSubItem
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `id` | `string` | Unique identifier. |
-| `label` | `string` | Display label. |
-| `action` | `() => void` | Click handler. |
-| `isActive` | `boolean` | Whether this sub-item is active/highlighted. |
-
-### ITNavigationSubItemGroup
-
-| Prop | Type | Description |
-|------|------|-------------|
-| `id` | `string` | Unique identifier for the group (used for the React key and the heading id). |
-| `label` | `string` | Heading text rendered above the group's items. |
-| `items` | `ITNavigationSubItem[]` | Sub-items belonging to this group. Nesting a group inside a group is not supported. |
-
-### ITNavigationSubItemEntry
-
-A submenu entry is either a plain `ITNavigationSubItem` or a titled `ITNavigationSubItemGroup`; narrow it with `"items" in entry`.
-
-## Usage
-
-```tsx
-import { ITSidebar } from '@axzydev/axzy_ui_system';
-import { FaHome, FaUsers, FaCog } from 'react-icons/fa';
-
-const items = [
-  { id: 'dashboard', label: 'Dashboard', icon: <FaHome />, isActive: true, action: () => {} },
-  {
-    id: 'users',
-    label: 'Users',
-    icon: <FaUsers />,
-    badge: '3',
-    subitems: [
-      { id: 'users-list', label: 'User List', action: () => {} },
-      { id: 'users-roles', label: 'Roles', action: () => {}, isActive: true },
-    ],
-  },
-];
-
-<ITSidebar
-  navigationItems={items}
-  isCollapsed={false}
-  subitemConnector="dot"
-/>
-```
-
-To group sub-items under a heading, replace a plain sub-item with a group object (`label` + `items`):
-
-```tsx
-const items = [
-  {
-    id: 'sales',
-    label: 'Sales',
-    subitems: [
-      { id: 'summary', label: 'Summary', action: () => {} },
-      {
-        id: 'gestion',
-        label: 'Management',
-        items: [
-          { id: 'orders', label: 'Orders', action: () => {} },
-          { id: 'invoices', label: 'Invoices', action: () => {} },
-        ],
-      },
-    ],
-  },
-];
-```
-
-Discriminate entries with `"items" in entry`. The heading style (uppercase, `0.68rem`, weight 700, `0.08em` tracking, `var(--it-sidebar-icon-color, var(--color-secondary-400))`) is applied by the component and cannot be overridden per group.
-
-## Notifications and badges
-
-Item badges and the notification row both render the `ITBadget` atom. Use `badge` for a per-item counter and `notification` for a top-level entry (e.g. a bell):
-
-```tsx
-import { ITSidebar } from '@axzydev/axzy_ui_system';
-import { FaBell } from 'react-icons/fa';
-
-const items = [
-  { id: 'dashboard', label: 'Dashboard', isActive: true, action: () => {} },
-  { id: 'inbox', label: 'Inbox', badge: 12, action: () => {} },
-  {
-    id: 'alerts',
-    label: 'Alerts',
-    badge: 3,
-    badgeProps: { color: 'warning', variant: 'outlined' },
-    action: () => {},
-  },
-];
-
-<ITSidebar
-  navigationItems={items}
-  notification={{
-    count: 5,
-    icon: <FaBell />,
-    label: 'Notifications',
-    onClick: () => {},
-    // Tweak the ITBadget, incl. padding via className.
-    badgeProps: { color: 'danger', className: 'px-2' },
-  }}
-/>
-```
-
-## Notes
-
-- There is no collapse toggle button: the collapsed 88px rail expands and collapses automatically on pointer hover (300 ms leave delay).
-- Collapsed mode shrinks to icon-only; a glassmorphism panel shows the item's sub-items on hover. For an item whose `subitems` contain groups, that panel **flattens** every group into one plain list and renders **no** group headings.
-- Submenus expand/collapse with smooth transitions when a parent item is clicked; the expanded submenu is animated with a `max-h` transition (cap `1000px`).
-- Active item highlighting uses a colored left-border accent and subtle background tint.
-- Badge support renders a notification-style counter on the item using the `ITBadget` atom; customize it with `badgeProps` (`color`, `size`, `variant`, `className`). The sidebar also accepts a `notification` entry (icon + label + `ITBadget` counter) pinned above the navigation, which stays visible while collapsed as icon + counter.
-- `subitemConnector` styles the visual link between parent and sub-items: `dot` (default), `|` (vertical bar), or `none`. Grouping does not change it: the `|` guide is a single `border-left` on the outer submenu `<ul>` only.
-- An active sub-item inside a group still auto-expands its parent, because auto-expand flattens groups the same way the collapsed flyout does.
-- `visibleOnMobile` forces the sidebar visible at every breakpoint and disables the collapsed rail, so it stays fully expanded.
-- Themed via CSS variables for consistent colors, shadows, and glassmorphism effects across light and dark modes.
-- Accessible by default: the `<nav>` is labelled and carries the `id` referenced by the toggle's `aria-controls`, the toggle exposes `aria-expanded` plus a visible `focus-visible` ring, group toggles expose `aria-expanded`/`aria-controls` and respond to Enter/Space, submenus are labelled `role="group"`, and the active sub-item carries `aria-current="page"`.
-- `subitems` accepts plain sub-items or titled groups (`label` + `items`); the group heading is rendered as a plain `<span>` inside a non-focusable `<div>`, so it is non-interactive and stays out of the tab order.
-- Each group's inner `<ul>` keeps list semantics and is named by its heading through `aria-labelledby`, so it is reachable as a named list.
-- Groups are purely visual: they add no third nesting level (the sidebar supports exactly one level of nesting).
-- Consumers that introspect `navigationItems[].subitems` must narrow each entry first, e.g. `"items" in entry ? entry.items : [entry]`, because entries are typed as `ITNavigationSubItemEntry`.
-
-## Stories
-
-<Primary />
-<Controls />
-<Stories />