xertica-ui 2.1.2 → 2.1.4

package/components/brand/theme-toggle/ThemeToggle.tsx

@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Sun, Moon } from 'lucide-react';
 import { Button } from '../../ui/button';
+import { useTheme } from '../../../contexts/ThemeContext';
 
 interface ThemeToggleProps {
   size?: 'sm' | 'md' | 'lg';
@@ -9,33 +10,13 @@ interface ThemeToggleProps {
   showLabel?: boolean;
 }
 
-export function ThemeToggle({ 
-  size = 'md', 
-  variant = 'ghost', 
+export function ThemeToggle({
+  size = 'md',
+  variant = 'ghost',
   className = '',
-  showLabel = false 
+  showLabel = false
 }: ThemeToggleProps) {
-  const [isDark, setIsDark] = useState(false);
-
-  useEffect(() => {
-    // Check initial state from HTML element
-    if (typeof document !== 'undefined') {
-      setIsDark(document.documentElement.classList.contains('dark'));
-    }
-  }, []);
-
-  const toggleTheme = () => {
-    if (typeof document !== 'undefined') {
-      const isCurrentlyDark = document.documentElement.classList.contains('dark');
-      if (isCurrentlyDark) {
-        document.documentElement.classList.remove('dark');
-        setIsDark(false);
-      } else {
-        document.documentElement.classList.add('dark');
-        setIsDark(true);
-      }
-    }
-  };
+  const { isDark, toggleTheme } = useTheme();
 
   const getSizeClasses = () => {
     switch (size) {
@@ -82,4 +63,4 @@ export function ThemeToggle({
       )}
     </Button>
   );
-}
+}

package/components/hooks/index.ts

@@ -5,3 +5,6 @@ export * from '../../contexts/BrandColorsContext';
 export * from '../../contexts/AssistenteContext';
 export * from '../../contexts/ApiKeyContext';
 export { useMobile, useIsMobile } from '../shared/use-mobile';
+export { useLayoutShortcuts } from './use-layout-shortcuts';
+export { useAudioPlayer } from '../media/audio-player/use-audio-player';
+export type { UseAudioPlayerProps, UseAudioPlayerReturn } from '../media/audio-player/use-audio-player';

package/components/hooks/use-layout-shortcuts.ts

@@ -0,0 +1,46 @@
+import { useEffect } from 'react';
+import { useLayout } from '../../contexts/LayoutContext';
+
+const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+/**
+ * `useLayoutShortcuts` — Registra atalhos de teclado globais para controle de layout.
+ *
+ * Deve ser usado uma única vez no componente raiz da aplicação (ex: `App.tsx` ou `Layout.tsx`).
+ * Extrai a responsabilidade de atalhos de teclado do `LayoutContext`, seguindo o
+ * princípio de responsabilidade única.
+ *
+ * **Atalhos registrados:**
+ * - `Ctrl+B` / `Cmd+B` — Alterna a sidebar
+ *
+ * @example
+ * ```tsx
+ * // Em App.tsx ou no componente de layout raiz:
+ * import { useLayoutShortcuts } from 'xertica-ui/hooks';
+ *
+ * function AppLayout({ children }: { children: React.ReactNode }) {
+ *   useLayoutShortcuts(); // registra Ctrl+B para toggle da sidebar
+ *   return <div>{children}</div>;
+ * }
+ * ```
+ */
+export function useLayoutShortcuts() {
+    const { toggleSidebar } = useLayout();
+
+    useEffect(() => {
+        if (typeof window === 'undefined') return;
+
+        const handleKeyDown = (event: KeyboardEvent) => {
+            if (
+                event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+                (event.metaKey || event.ctrlKey)
+            ) {
+                event.preventDefault();
+                toggleSidebar();
+            }
+        };
+
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [toggleSidebar]);
+}

package/components/layout/sidebar/index.ts

@@ -1 +1,3 @@
 export * from './sidebar';
+export { useSidebar } from './use-sidebar';
+export type { UseSidebarProps } from './use-sidebar';

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

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { Sidebar } from './sidebar';
+import { Sidebar, useSidebar } from './sidebar';
 import { useLayout } from '../../../contexts/LayoutContext';
 import { BrowserRouter } from 'react-router-dom';
 import {
@@ -12,6 +12,7 @@ import {
   FileEdit,
   ArrowRightLeft,
   PanelLeft,
+  Menu,
   Trash2,
   Map,
   Archive
@@ -63,8 +64,8 @@ export const Default: Story = {
     const { sidebarWidth: contextWidth } = useLayout();
     const [isExpanded, setIsExpanded] = useState(args.expanded);
 
-    // In Storybook, we match the sidebar widths (256 expanded, 80 collapsed)
-    const currentWidth = isExpanded ? 256 : 80;
+    // 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)" }}>
@@ -136,7 +137,7 @@ export const DefaultWithGroups: Story = {
   },
   render: (args) => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 256 : 80;
+    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)" }}>
@@ -249,7 +250,7 @@ export const Assistant: Story = {
   },
   render: (args) => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 256 : 80;
+    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)" }}>
@@ -278,7 +279,7 @@ export const Collapsed: Story = {
   },
   render: (args) => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 256 : 80;
+    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)" }}>
@@ -306,7 +307,7 @@ export const NoFooter: Story = {
   },
   render: (args) => {
     const [isExpanded, setIsExpanded] = useState(args.expanded);
-    const currentWidth = isExpanded ? 256 : 80;
+    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)" }}>
@@ -344,7 +345,7 @@ export const Autonomous: Story = {
           <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. 
+              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">
@@ -356,3 +357,154 @@ export const Autonomous: Story = {
     );
   },
 };
+
+/**
+ * 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>
+    );
+  },
+};