xertica-ui 2.2.1 → 2.3.0

package/components/layout/sidebar/sidebar.stories.tsx

@@ -1,586 +1,586 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Sidebar, useSidebar } from './sidebar';
-import { useLayout } from '../../../contexts/LayoutContext';
-import { BrowserRouter } from 'react-router-dom';
-import {
-  Home,
-  Users,
-  Settings,
-  BarChart,
-  Plus,
-  Clock,
-  FileEdit,
-  ArrowRightLeft,
-  PanelLeft,
-  Menu,
-  Trash2,
-  Map,
-  Archive,
-} from 'lucide-react';
-import React, { useState } from 'react';
-import { Badge } from '../../ui/badge';
-import { Button } from '../../ui/button';
-import { Progress } from '../../ui/progress';
-
-const meta: Meta<typeof Sidebar> = {
-  title: 'Layout/Sidebar',
-  component: Sidebar,
-  decorators: [
-    Story => (
-      <BrowserRouter>
-        <div className="flex h-screen w-full overflow-hidden bg-background">
-          <Story />
-        </div>
-      </BrowserRouter>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Sidebar>;
-
-export const Default: Story = {
-  args: {
-    variant: 'default',
-    expanded: false,
-    user: { email: 'admin@example.com' },
-    onLogout: () => console.log('Logged out'),
-    location: { pathname: '/home' },
-    routes: [
-      { path: '/home', label: 'Home', icon: Home },
-      { path: '/dashboard', label: 'Dashboard', icon: Users },
-      { path: '/settings', label: 'Settings', icon: Settings },
-    ],
-    footer: {
-      showUser: true,
-      showSettings: true,
-      showLogout: true,
-    },
-  },
-  render: args => {
-    const { sidebarWidth: contextWidth } = useLayout();
-    const [isExpanded, setIsExpanded] = useState(args.expanded);
-
-    // In Storybook, we match the sidebar widths (280 expanded, 80 collapsed)
-    const currentWidth = isExpanded ? 280 : 80;
-
-    return (
-      <div
-        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-        style={{ transform: 'translateZ(0)' }}
-      >
-        <Sidebar
-          {...args}
-          expanded={isExpanded}
-          onToggle={() => setIsExpanded(!isExpanded)}
-          width={currentWidth}
-          navigate={() => {}}
-        />
-        <div
-          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-          style={{ left: `${currentWidth}px` }}
-        >
-          <div className="text-center">
-            <p className="text-muted-foreground">Traditional System Navigation</p>
-            <p className="text-xs text-muted-foreground mt-2">Click on the menu icon to expand</p>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const DefaultWithGroups: Story = {
-  args: {
-    variant: 'default',
-    expanded: false,
-    user: { name: 'Admin', email: 'admin@example.com' },
-    onLogout: () => console.log('Logged out'),
-    location: { pathname: '/home' },
-    navigationGroups: [
-      {
-        id: 'main',
-        label: 'Principal',
-        items: [
-          { path: '/home', label: 'Início', icon: Home },
-          {
-            path: '/dashboard',
-            label: 'Dashboard',
-            icon: BarChart,
-            children: [
-              { path: '/dashboard/overview', label: 'Visão Geral', icon: BarChart },
-              { path: '/dashboard/reports', label: 'Relatórios', icon: FileEdit },
-              { path: '/dashboard/analytics', label: 'Analytics', icon: Map },
-            ],
-          },
-        ],
-      },
-      {
-        id: 'admin',
-        label: 'Administração',
-        items: [
-          {
-            path: '/users',
-            label: 'Usuários',
-            icon: Users,
-            children: [
-              { path: '/users/list', label: 'Lista de Usuários', icon: Users },
-              { path: '/users/roles', label: 'Perfis de Acesso', icon: Settings },
-            ],
-          },
-          { path: '/settings', label: 'Configurações', icon: Settings },
-        ],
-      },
-    ],
-    footer: {
-      showUser: true,
-      showSettings: false,
-      showLogout: true,
-    },
-  },
-  render: args => {
-    const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 280 : 80;
-
-    return (
-      <div
-        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-        style={{ transform: 'translateZ(0)' }}
-      >
-        <Sidebar
-          {...args}
-          expanded={isExpanded}
-          onToggle={() => setIsExpanded(!isExpanded)}
-          width={currentWidth}
-          navigate={() => {}}
-        />
-        <div
-          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-          style={{ left: `${currentWidth}px` }}
-        >
-          <div className="text-center">
-            <p className="text-muted-foreground">Navigation with Groups and Children</p>
-            <p className="text-xs text-muted-foreground mt-2">
-              Expand and click the arrow button on items to see sub-menus
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Assistant: Story = {
-  args: {
-    variant: 'assistant',
-    expanded: false,
-    user: { email: 'admin@example.com' },
-    onLogout: () => console.log('Logged out'),
-    location: { pathname: '/assistant/refatoracao' },
-    search: {
-      show: true,
-      placeholder: 'Buscar tópicos...',
-      filter: {
-        show: true,
-        content: (
-          <div className="p-2 space-y-2">
-            <div className="text-xs font-semibold uppercase text-muted-foreground px-2 text-left">
-              Filter by Status
-            </div>
-            <div className="flex flex-wrap gap-2 p-1">
-              <Badge className="bg-sidebar-foreground/20 text-sidebar-foreground border-none cursor-pointer hover:bg-sidebar-foreground/30">
-                Active
-              </Badge>
-              <Badge
-                variant="outline"
-                className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
-              >
-                Archived
-              </Badge>
-              <Badge
-                variant="outline"
-                className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
-              >
-                Pending
-              </Badge>
-            </div>
-          </div>
-        ),
-      },
-    },
-    fixedArea: {
-      show: true,
-      icon: Plus,
-      onClick: () => console.log('New Conversation clicked'),
-      content: (
-        <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
-          <Plus className="w-4 h-4 mr-2" />
-          New Conversation
-        </Button>
-      ),
-    },
-    navigationGroups: [
-      {
-        id: 'recent',
-        label: 'Recent',
-        icon: Clock,
-        items: [
-          {
-            path: '/assistant/refatoracao',
-            label: 'Edit Sidebar',
-            description: 'Active now',
-            actions: [
-              { label: 'Rename', icon: FileEdit, onClick: () => console.log('Open rename...') },
-              {
-                label: 'Move',
-                icon: ArrowRightLeft,
-                children: [
-                  {
-                    label: 'Active Projects',
-                    onClick: () => console.log('Moved to Active Projects'),
-                  },
-                  { label: 'Monitoring', onClick: () => console.log('Moved to Monitoring') },
-                  { label: 'Archive', onClick: () => console.log('Moved to Archive') },
-                ],
-              },
-              {
-                label: 'Clear',
-                icon: Trash2,
-                onClick: () => console.log('History Cleared!'),
-                variant: 'destructive',
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: 'projects',
-        label: 'Project Monitoring',
-        icon: Map,
-        actions: [
-          {
-            label: 'New Category',
-            icon: Plus,
-            onClick: () => console.log('Create new category...'),
-          },
-          {
-            label: 'Archive Group',
-            icon: Archive,
-            onClick: () => console.log('Archiving group...'),
-          },
-        ],
-        items: [
-          {
-            path: '/assistant/br163',
-            label: 'Panel Status',
-            icon: () => <div className="w-2 h-2 rounded-full bg-yellow-500" />,
-            description: (
-              <div className="space-y-1.5 min-w-[160px]">
-                <Progress value={67} className="h-1.5 bg-sidebar-foreground/10" />
-                <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
-                  <span>Label</span>
-                  <span>67%</span>
-                </div>
-              </div>
-            ),
-          },
-        ],
-      },
-    ],
-  },
-  render: args => {
-    const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 280 : 80;
-
-    return (
-      <div
-        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-        style={{ transform: 'translateZ(0)' }}
-      >
-        <Sidebar
-          {...args}
-          expanded={isExpanded}
-          onToggle={() => setIsExpanded(!isExpanded)}
-          width={currentWidth}
-          navigate={() => {}}
-        />
-        <div
-          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-          style={{ left: `${currentWidth}px` }}
-        >
-          <div className="text-center">
-            <p className="text-muted-foreground">Assistant Mode Content</p>
-            <p className="text-xs text-muted-foreground mt-2">Click on the menu icon to expand</p>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Collapsed: Story = {
-  args: {
-    ...Default.args,
-    expanded: false,
-  },
-  render: args => {
-    const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 280 : 80;
-
-    return (
-      <div
-        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-        style={{ transform: 'translateZ(0)' }}
-      >
-        <Sidebar
-          {...args}
-          expanded={isExpanded}
-          onToggle={() => setIsExpanded(!isExpanded)}
-          width={currentWidth}
-          navigate={() => {}}
-        />
-        <div
-          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-          style={{ left: `${currentWidth}px` }}
-        >
-          <div className="text-center">
-            <p className="text-muted-foreground">Compact Navigation</p>
-            <p className="text-xs text-muted-foreground mt-2">Click on the menu icon to expand</p>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-export const NoFooter: Story = {
-  args: {
-    ...Default.args,
-    showFooter: false,
-  },
-  render: args => {
-    const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 280 : 80;
-
-    return (
-      <div
-        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-        style={{ transform: 'translateZ(0)' }}
-      >
-        <Sidebar
-          {...args}
-          expanded={isExpanded}
-          onToggle={() => setIsExpanded(!isExpanded)}
-          width={currentWidth}
-          navigate={() => {}}
-        />
-        <div
-          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-          style={{ left: `${currentWidth}px` }}
-        >
-          <div className="text-center">
-            <p className="text-muted-foreground">Sidebar without Footer</p>
-            <p className="text-xs text-muted-foreground mt-2">Click on the menu icon to expand</p>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Autonomous: Story = {
-  args: {
-    ...Default.args,
-    expanded: undefined,
-    onToggle: undefined,
-  },
-  render: args => {
-    return (
-      <div
-        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-        style={{ transform: 'translateZ(0)' }}
-      >
-        <Sidebar {...args} />
-        <div
-          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-          style={{ left: `80px` }}
-        >
-          <div className="text-center max-w-md">
-            <p className="text-muted-foreground font-bold">Autonomous Sidebar</p>
-            <p className="text-sm text-muted-foreground/80 mt-2">
-              This instance is managing its own state internally. No `expanded` or `onToggle` props
-              are passed.
-            </p>
-            <p className="text-xs text-muted-foreground mt-4">
-              Note: Layout coordination (content padding) must be handled manually when using
-              autonomous mode without LayoutProvider.
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-/**
- * Compound Component API — demonstrates using Sidebar.Root + sub-components
- * for full layout control. This is the recommended pattern for advanced
- * customization without forking the component.
- */
-export const CompoundComponentAPI: Story = {
-  name: 'Compound Component API',
-  render: () => {
-    const [isExpanded, setIsExpanded] = React.useState(true);
-    const currentWidth = isExpanded ? 280 : 80;
-    const groups = [
-      {
-        id: 'main',
-        label: 'Principal',
-        items: [
-          { path: '/home', label: 'Início', icon: Home },
-          { path: '/dashboard', label: 'Dashboard', icon: BarChart },
-        ],
-      },
-      {
-        id: 'admin',
-        label: 'Administração',
-        items: [
-          { path: '/users', label: 'Usuários', icon: Users },
-          { path: '/settings', label: 'Configurações', icon: Settings },
-        ],
-      },
-    ];
-
-    return (
-      <div
-        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-        style={{ transform: 'translateZ(0)' }}
-      >
-        {/* Compound Component usage */}
-        <Sidebar.Root
-          expanded={isExpanded}
-          onToggle={() => setIsExpanded(prev => !prev)}
-          width={currentWidth}
-          location={{ pathname: '/home' }}
-          navigate={() => {}}
-        >
-          <Sidebar.Header />
-          <Sidebar.Nav navigationGroups={groups} />
-          <Sidebar.Footer
-            user={{ name: 'Admin', email: 'admin@example.com' }}
-            onLogout={() => console.log('logout')}
-            showUser
-            showSettings
-            showLogout
-          />
-        </Sidebar.Root>
-
-        <div
-          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-          style={{ left: `${currentWidth}px` }}
-        >
-          <div className="text-center max-w-md space-y-3">
-            <p className="text-muted-foreground font-bold">Compound Component API</p>
-            <p className="text-sm text-muted-foreground/80">
-              Built with <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Root&gt;</code>
-              , <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Header&gt;</code>,{' '}
-              <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Nav&gt;</code>, and{' '}
-              <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Footer&gt;</code>.
-            </p>
-            <p className="text-xs text-muted-foreground">
-              Each sub-component reads shared state from{' '}
-              <code className="bg-muted px-1 rounded text-xs">SidebarContext</code> via{' '}
-              <code className="bg-muted px-1 rounded text-xs">Sidebar.Root</code>.
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
-
-/**
- * Headless Hook — demonstrates using `useSidebar` directly for fully custom rendering.
- * The hook manages all state; the UI is entirely up to the consumer.
- */
-export const HeadlessHook: Story = {
-  name: 'Headless Hook (useSidebar)',
-  render: () => {
-    const groups = [
-      {
-        id: 'main',
-        label: 'Principal',
-        items: [
-          { path: '/home', label: 'Início', icon: Home },
-          { path: '/dashboard', label: 'Dashboard', icon: BarChart },
-          { path: '/users', label: 'Usuários', icon: Users },
-        ],
-      },
-    ];
-
-    const {
-      expanded,
-      toggleExpanded,
-      navigationGroups: resolvedGroups,
-    } = useSidebar({ defaultExpanded: true, navigationGroups: groups });
-
-    const width = expanded ? 280 : 80;
-
-    return (
-      <div
-        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
-        style={{ transform: 'translateZ(0)' }}
-      >
-        {/* Fully custom sidebar built with useSidebar hook */}
-        <div
-          className="absolute inset-y-0 left-0 bg-sidebar text-sidebar-foreground flex flex-col transition-all duration-300 z-50"
-          style={{ width: `${width}px` }}
-        >
-          <div className="p-4">
-            <button
-              onClick={toggleExpanded}
-              className="w-full h-10 flex items-center justify-center rounded-md bg-sidebar-foreground/10 hover:bg-sidebar-foreground/20 text-sidebar-foreground transition-colors"
-              aria-label={expanded ? 'Collapse' : 'Expand'}
-            >
-              {expanded ? <PanelLeft className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
-            </button>
-          </div>
-          <nav className="flex-1 px-3 space-y-1">
-            {resolvedGroups
-              .flatMap(g => g.items)
-              .map(item => {
-                const Icon = item.icon;
-                return (
-                  <button
-                    key={item.path}
-                    className="w-full h-10 flex items-center gap-3 px-3 rounded-md text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground transition-colors"
-                  >
-                    {Icon && <Icon className="w-5 h-5 flex-shrink-0" />}
-                    {expanded && <span className="truncate text-sm">{item.label}</span>}
-                  </button>
-                );
-              })}
-          </nav>
-        </div>
-
-        <div
-          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
-          style={{ left: `${width}px` }}
-        >
-          <div className="text-center max-w-md space-y-3">
-            <p className="text-muted-foreground font-bold">Headless Hook</p>
-            <p className="text-sm text-muted-foreground/80">
-              State managed by <code className="bg-muted px-1 rounded text-xs">useSidebar()</code>.
-              The entire UI is custom — no Sidebar component used.
-            </p>
-            <p className="text-xs text-muted-foreground">
-              Sidebar is currently: <strong>{expanded ? 'Expanded' : 'Collapsed'}</strong>
-            </p>
-          </div>
-        </div>
-      </div>
-    );
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { Sidebar, useSidebar } from './sidebar';
+import { useLayout } from '../../../contexts/LayoutContext';
+import { BrowserRouter } from 'react-router-dom';
+import {
+  Home,
+  Users,
+  Settings,
+  BarChart,
+  Plus,
+  Clock,
+  FileEdit,
+  ArrowRightLeft,
+  PanelLeft,
+  Menu,
+  Trash2,
+  Map,
+  Archive,
+} from 'lucide-react';
+import React, { useState } from 'react';
+import { Badge } from '../../ui/badge';
+import { Button } from '../../ui/button';
+import { Progress } from '../../ui/progress';
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Layout/Sidebar',
+  component: Sidebar,
+  decorators: [
+    Story => (
+      <BrowserRouter>
+        <div className="flex h-screen w-full overflow-hidden bg-background">
+          <Story />
+        </div>
+      </BrowserRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Sidebar>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    expanded: false,
+    user: { email: 'admin@example.com' },
+    onLogout: () => console.log('Logged out'),
+    location: { pathname: '/home' },
+    routes: [
+      { path: '/home', label: 'Home', icon: Home },
+      { path: '/dashboard', label: 'Dashboard', icon: Users },
+      { path: '/settings', label: 'Settings', icon: Settings },
+    ],
+    footer: {
+      showUser: true,
+      showSettings: true,
+      showLogout: true,
+    },
+  },
+  render: args => {
+    const { sidebarWidth: contextWidth } = useLayout();
+    const [isExpanded, setIsExpanded] = useState(args.expanded);
+
+    // In Storybook, we match the sidebar widths (280 expanded, 80 collapsed)
+    const currentWidth = isExpanded ? 280 : 80;
+
+    return (
+      <div
+        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+        style={{ transform: 'translateZ(0)' }}
+      >
+        <Sidebar
+          {...args}
+          expanded={isExpanded}
+          onToggle={() => setIsExpanded(!isExpanded)}
+          width={currentWidth}
+          navigate={() => {}}
+        />
+        <div
+          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+          style={{ left: `${currentWidth}px` }}
+        >
+          <div className="text-center">
+            <p className="text-muted-foreground">Traditional System Navigation</p>
+            <p className="text-xs text-muted-foreground mt-2">Click on the menu icon to expand</p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const DefaultWithGroups: Story = {
+  args: {
+    variant: 'default',
+    expanded: false,
+    user: { name: 'Admin', email: 'admin@example.com' },
+    onLogout: () => console.log('Logged out'),
+    location: { pathname: '/home' },
+    navigationGroups: [
+      {
+        id: 'main',
+        label: 'Principal',
+        items: [
+          { path: '/home', label: 'Início', icon: Home },
+          {
+            path: '/dashboard',
+            label: 'Dashboard',
+            icon: BarChart,
+            children: [
+              { path: '/dashboard/overview', label: 'Visão Geral', icon: BarChart },
+              { path: '/dashboard/reports', label: 'Relatórios', icon: FileEdit },
+              { path: '/dashboard/analytics', label: 'Analytics', icon: Map },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'admin',
+        label: 'Administração',
+        items: [
+          {
+            path: '/users',
+            label: 'Usuários',
+            icon: Users,
+            children: [
+              { path: '/users/list', label: 'Lista de Usuários', icon: Users },
+              { path: '/users/roles', label: 'Perfis de Acesso', icon: Settings },
+            ],
+          },
+          { path: '/settings', label: 'Configurações', icon: Settings },
+        ],
+      },
+    ],
+    footer: {
+      showUser: true,
+      showSettings: false,
+      showLogout: true,
+    },
+  },
+  render: args => {
+    const [isExpanded, setIsExpanded] = useState(args.expanded);
+    const currentWidth = isExpanded ? 280 : 80;
+
+    return (
+      <div
+        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+        style={{ transform: 'translateZ(0)' }}
+      >
+        <Sidebar
+          {...args}
+          expanded={isExpanded}
+          onToggle={() => setIsExpanded(!isExpanded)}
+          width={currentWidth}
+          navigate={() => {}}
+        />
+        <div
+          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+          style={{ left: `${currentWidth}px` }}
+        >
+          <div className="text-center">
+            <p className="text-muted-foreground">Navigation with Groups and Children</p>
+            <p className="text-xs text-muted-foreground mt-2">
+              Expand and click the arrow button on items to see sub-menus
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Assistant: Story = {
+  args: {
+    variant: 'assistant',
+    expanded: false,
+    user: { email: 'admin@example.com' },
+    onLogout: () => console.log('Logged out'),
+    location: { pathname: '/assistant/refatoracao' },
+    search: {
+      show: true,
+      placeholder: 'Buscar tópicos...',
+      filter: {
+        show: true,
+        content: (
+          <div className="p-2 space-y-2">
+            <div className="text-xs font-semibold uppercase text-muted-foreground px-2 text-left">
+              Filter by Status
+            </div>
+            <div className="flex flex-wrap gap-2 p-1">
+              <Badge className="bg-sidebar-foreground/20 text-sidebar-foreground border-none cursor-pointer hover:bg-sidebar-foreground/30">
+                Active
+              </Badge>
+              <Badge
+                variant="outline"
+                className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
+              >
+                Archived
+              </Badge>
+              <Badge
+                variant="outline"
+                className="text-sidebar-foreground/70 border-sidebar-foreground/20 cursor-pointer hover:bg-sidebar-foreground/10"
+              >
+                Pending
+              </Badge>
+            </div>
+          </div>
+        ),
+      },
+    },
+    fixedArea: {
+      show: true,
+      icon: Plus,
+      onClick: () => console.log('New Conversation clicked'),
+      content: (
+        <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
+          <Plus className="w-4 h-4 mr-2" />
+          New Conversation
+        </Button>
+      ),
+    },
+    navigationGroups: [
+      {
+        id: 'recent',
+        label: 'Recent',
+        icon: Clock,
+        items: [
+          {
+            path: '/assistant/refatoracao',
+            label: 'Edit Sidebar',
+            description: 'Active now',
+            actions: [
+              { label: 'Rename', icon: FileEdit, onClick: () => console.log('Open rename...') },
+              {
+                label: 'Move',
+                icon: ArrowRightLeft,
+                children: [
+                  {
+                    label: 'Active Projects',
+                    onClick: () => console.log('Moved to Active Projects'),
+                  },
+                  { label: 'Monitoring', onClick: () => console.log('Moved to Monitoring') },
+                  { label: 'Archive', onClick: () => console.log('Moved to Archive') },
+                ],
+              },
+              {
+                label: 'Clear',
+                icon: Trash2,
+                onClick: () => console.log('History Cleared!'),
+                variant: 'destructive',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'projects',
+        label: 'Project Monitoring',
+        icon: Map,
+        actions: [
+          {
+            label: 'New Category',
+            icon: Plus,
+            onClick: () => console.log('Create new category...'),
+          },
+          {
+            label: 'Archive Group',
+            icon: Archive,
+            onClick: () => console.log('Archiving group...'),
+          },
+        ],
+        items: [
+          {
+            path: '/assistant/br163',
+            label: 'Panel Status',
+            icon: () => <div className="w-2 h-2 rounded-full bg-yellow-500" />,
+            description: (
+              <div className="space-y-1.5 min-w-[160px]">
+                <Progress value={67} className="h-1.5 bg-sidebar-foreground/10" />
+                <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
+                  <span>Label</span>
+                  <span>67%</span>
+                </div>
+              </div>
+            ),
+          },
+        ],
+      },
+    ],
+  },
+  render: args => {
+    const [isExpanded, setIsExpanded] = useState(args.expanded);
+    const currentWidth = isExpanded ? 280 : 80;
+
+    return (
+      <div
+        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+        style={{ transform: 'translateZ(0)' }}
+      >
+        <Sidebar
+          {...args}
+          expanded={isExpanded}
+          onToggle={() => setIsExpanded(!isExpanded)}
+          width={currentWidth}
+          navigate={() => {}}
+        />
+        <div
+          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+          style={{ left: `${currentWidth}px` }}
+        >
+          <div className="text-center">
+            <p className="text-muted-foreground">Assistant Mode Content</p>
+            <p className="text-xs text-muted-foreground mt-2">Click on the menu icon to expand</p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Collapsed: Story = {
+  args: {
+    ...Default.args,
+    expanded: false,
+  },
+  render: args => {
+    const [isExpanded, setIsExpanded] = useState(args.expanded);
+    const currentWidth = isExpanded ? 280 : 80;
+
+    return (
+      <div
+        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+        style={{ transform: 'translateZ(0)' }}
+      >
+        <Sidebar
+          {...args}
+          expanded={isExpanded}
+          onToggle={() => setIsExpanded(!isExpanded)}
+          width={currentWidth}
+          navigate={() => {}}
+        />
+        <div
+          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+          style={{ left: `${currentWidth}px` }}
+        >
+          <div className="text-center">
+            <p className="text-muted-foreground">Compact Navigation</p>
+            <p className="text-xs text-muted-foreground mt-2">Click on the menu icon to expand</p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+export const NoFooter: Story = {
+  args: {
+    ...Default.args,
+    showFooter: false,
+  },
+  render: args => {
+    const [isExpanded, setIsExpanded] = useState(args.expanded);
+    const currentWidth = isExpanded ? 280 : 80;
+
+    return (
+      <div
+        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+        style={{ transform: 'translateZ(0)' }}
+      >
+        <Sidebar
+          {...args}
+          expanded={isExpanded}
+          onToggle={() => setIsExpanded(!isExpanded)}
+          width={currentWidth}
+          navigate={() => {}}
+        />
+        <div
+          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+          style={{ left: `${currentWidth}px` }}
+        >
+          <div className="text-center">
+            <p className="text-muted-foreground">Sidebar without Footer</p>
+            <p className="text-xs text-muted-foreground mt-2">Click on the menu icon to expand</p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Autonomous: Story = {
+  args: {
+    ...Default.args,
+    expanded: undefined,
+    onToggle: undefined,
+  },
+  render: args => {
+    return (
+      <div
+        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+        style={{ transform: 'translateZ(0)' }}
+      >
+        <Sidebar {...args} />
+        <div
+          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+          style={{ left: `80px` }}
+        >
+          <div className="text-center max-w-md">
+            <p className="text-muted-foreground font-bold">Autonomous Sidebar</p>
+            <p className="text-sm text-muted-foreground/80 mt-2">
+              This instance is managing its own state internally. No `expanded` or `onToggle` props
+              are passed.
+            </p>
+            <p className="text-xs text-muted-foreground mt-4">
+              Note: Layout coordination (content padding) must be handled manually when using
+              autonomous mode without LayoutProvider.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Compound Component API — demonstrates using Sidebar.Root + sub-components
+ * for full layout control. This is the recommended pattern for advanced
+ * customization without forking the component.
+ */
+export const CompoundComponentAPI: Story = {
+  name: 'Compound Component API',
+  render: () => {
+    const [isExpanded, setIsExpanded] = React.useState(true);
+    const currentWidth = isExpanded ? 280 : 80;
+    const groups = [
+      {
+        id: 'main',
+        label: 'Principal',
+        items: [
+          { path: '/home', label: 'Início', icon: Home },
+          { path: '/dashboard', label: 'Dashboard', icon: BarChart },
+        ],
+      },
+      {
+        id: 'admin',
+        label: 'Administração',
+        items: [
+          { path: '/users', label: 'Usuários', icon: Users },
+          { path: '/settings', label: 'Configurações', icon: Settings },
+        ],
+      },
+    ];
+
+    return (
+      <div
+        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+        style={{ transform: 'translateZ(0)' }}
+      >
+        {/* Compound Component usage */}
+        <Sidebar.Root
+          expanded={isExpanded}
+          onToggle={() => setIsExpanded(prev => !prev)}
+          width={currentWidth}
+          location={{ pathname: '/home' }}
+          navigate={() => {}}
+        >
+          <Sidebar.Header />
+          <Sidebar.Nav navigationGroups={groups} />
+          <Sidebar.Footer
+            user={{ name: 'Admin', email: 'admin@example.com' }}
+            onLogout={() => console.log('logout')}
+            showUser
+            showSettings
+            showLogout
+          />
+        </Sidebar.Root>
+
+        <div
+          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+          style={{ left: `${currentWidth}px` }}
+        >
+          <div className="text-center max-w-md space-y-3">
+            <p className="text-muted-foreground font-bold">Compound Component API</p>
+            <p className="text-sm text-muted-foreground/80">
+              Built with <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Root&gt;</code>
+              , <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Header&gt;</code>,{' '}
+              <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Nav&gt;</code>, and{' '}
+              <code className="bg-muted px-1 rounded text-xs">&lt;Sidebar.Footer&gt;</code>.
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Each sub-component reads shared state from{' '}
+              <code className="bg-muted px-1 rounded text-xs">SidebarContext</code> via{' '}
+              <code className="bg-muted px-1 rounded text-xs">Sidebar.Root</code>.
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Headless Hook — demonstrates using `useSidebar` directly for fully custom rendering.
+ * The hook manages all state; the UI is entirely up to the consumer.
+ */
+export const HeadlessHook: Story = {
+  name: 'Headless Hook (useSidebar)',
+  render: () => {
+    const groups = [
+      {
+        id: 'main',
+        label: 'Principal',
+        items: [
+          { path: '/home', label: 'Início', icon: Home },
+          { path: '/dashboard', label: 'Dashboard', icon: BarChart },
+          { path: '/users', label: 'Usuários', icon: Users },
+        ],
+      },
+    ];
+
+    const {
+      expanded,
+      toggleExpanded,
+      navigationGroups: resolvedGroups,
+    } = useSidebar({ defaultExpanded: true, navigationGroups: groups });
+
+    const width = expanded ? 280 : 80;
+
+    return (
+      <div
+        className="relative h-screen w-full border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden"
+        style={{ transform: 'translateZ(0)' }}
+      >
+        {/* Fully custom sidebar built with useSidebar hook */}
+        <div
+          className="absolute inset-y-0 left-0 bg-sidebar text-sidebar-foreground flex flex-col transition-all duration-300 z-50"
+          style={{ width: `${width}px` }}
+        >
+          <div className="p-4">
+            <button
+              onClick={toggleExpanded}
+              className="w-full h-10 flex items-center justify-center rounded-md bg-sidebar-foreground/10 hover:bg-sidebar-foreground/20 text-sidebar-foreground transition-colors"
+              aria-label={expanded ? 'Collapse' : 'Expand'}
+            >
+              {expanded ? <PanelLeft className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
+            </button>
+          </div>
+          <nav className="flex-1 px-3 space-y-1">
+            {resolvedGroups
+              .flatMap(g => g.items)
+              .map(item => {
+                const Icon = item.icon;
+                return (
+                  <button
+                    key={item.path}
+                    className="w-full h-10 flex items-center gap-3 px-3 rounded-md text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground transition-colors"
+                  >
+                    {Icon && <Icon className="w-5 h-5 flex-shrink-0" />}
+                    {expanded && <span className="truncate text-sm">{item.label}</span>}
+                  </button>
+                );
+              })}
+          </nav>
+        </div>
+
+        <div
+          className="absolute inset-y-0 right-0 p-8 flex items-center justify-center transition-all duration-300"
+          style={{ left: `${width}px` }}
+        >
+          <div className="text-center max-w-md space-y-3">
+            <p className="text-muted-foreground font-bold">Headless Hook</p>
+            <p className="text-sm text-muted-foreground/80">
+              State managed by <code className="bg-muted px-1 rounded text-xs">useSidebar()</code>.
+              The entire UI is custom — no Sidebar component used.
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Sidebar is currently: <strong>{expanded ? 'Expanded' : 'Collapsed'}</strong>
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+};