xertica-ui 2.1.2 → 2.1.3

package/components/pages/template-content/TemplateContent.tsx

@@ -72,7 +72,7 @@ interface TemplateContentProps {
 export function TemplateContent({ user, onLogout, onSettings }: TemplateContentProps) {
   const layout = useOptionalLayout();
   const [localSidebarExpanded, setLocalSidebarExpanded] = useState(false);
-  const [localSidebarWidth, setLocalSidebarWidth] = useState(256);
+  const [localSidebarWidth, setLocalSidebarWidth] = useState(280);
   const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
   const sidebarWidth = layout?.sidebarWidth ?? localSidebarWidth;
   const setSidebarWidth = layout?.setSidebarWidth ?? setLocalSidebarWidth;
@@ -118,7 +118,7 @@ export function TemplateContent({ user, onLogout, onSettings }: TemplateContentP
           <div className="p-2 sm:p-4 md:p-6">
             <div className="max-w-6xl mx-auto space-y-8">
               {/* Page header */}
-              <PageHeader 
+              <PageHeader
                 title="Página de Template"
                 subtitle="Template completo com componentes do Design System"
               />
@@ -413,10 +413,10 @@ export function TemplateContent({ user, onLogout, onSettings }: TemplateContentP
                         <div className="mb-4">
                           <div className="relative">
                             <Search className="absolute left-3 top-3 h-4 w-4 text-muted-foreground" />
-                            <Input 
-                              placeholder="Buscar usuários..." 
+                            <Input
+                              placeholder="Buscar usuários..."
                               aria-label="Buscar usuários"
-                              className="pl-10" 
+                              className="pl-10"
                             />
                           </div>
                         </div>

package/components/pages/template-content/template-content.mdx

@@ -1,61 +1,61 @@
-import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-
-<Meta title="Pages/TemplateContent" />
-
-<Title>TemplateContent</Title>
-<Subtitle>Kitchen-sink showcase and CLI starter template demonstrating the full Xertica UI component set.</Subtitle>
-
----
-
-## Overview
-
-`TemplateContent` is a comprehensive living demo that assembles the majority of Xertica UI primitives into a single scrollable page. It serves two purposes:
-
-1. **Development reference** - Shows the correct composition patterns for every major component.
-2. **CLI starter** - Acts as the baseline when scaffolding a new application page.
-
-It includes interactive showcases for cards, tabs, forms, tables, dialogs, alerts, progress, sliders, maps, headers, and sidebars.
-
-```tsx
-import { TemplateContent } from 'xertica-ui';
-
-{ path: '/template', element: <TemplateContent /> }
-```
-
----
-
-## Props
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `user` | `{ name?: string; email?: string; avatar?: string } \| null` | - | Currently authenticated user for the header. |
-| `onLogout` | `() => void` | - | Logout handler forwarded to the header. |
-| `onSettings` | `() => void` | - | Settings handler forwarded to the header. |
-
----
-
-## Layout Dependency
-
-`TemplateContent` uses optional layout state. When wrapped in `XerticaProvider`, it synchronizes sidebar width, expanded state, and layout controls. Without the provider, it renders with local fallback sidebar state.
-
-React Router is still required because the showcase uses `Link` and `useNavigate`.
-
----
-
-## Sidebar Showcase
-
-`TemplateContent` includes an embedded, interactive `Sidebar` preview with controls for:
-
-- Toggling footer sections.
-- Adjusting sidebar width via a `Slider`.
-- Switching between `variant="assistant"` and `variant="default"` modes.
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Reference first** - Before building a new page, check `TemplateContent` for the correct composition pattern.
-> - **Provider fallback** - `TemplateContent` renders without `XerticaProvider`, but the provider is recommended for synchronized layout state.
-> - **Router requirement** - React Router is still required for navigation hooks and links.
-> - **Map section** - The Maps showcase requires a valid `googleMapsApiKey` passed to `XerticaProvider`.
+import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
+
+<Meta title="Pages/TemplateContent" />
+
+<Title>TemplateContent</Title>
+<Subtitle>Kitchen-sink showcase and CLI starter template demonstrating the full Xertica UI component set.</Subtitle>
+
+---
+
+## Overview
+
+`TemplateContent` is a comprehensive living demo that assembles the majority of Xertica UI primitives into a single scrollable page. It serves two purposes:
+
+1. **Development reference** - Shows the correct composition patterns for every major component.
+2. **CLI starter** - Acts as the baseline when scaffolding a new application page.
+
+It includes interactive showcases for cards, tabs, forms, tables, dialogs, alerts, progress, sliders, maps, headers, and sidebars.
+
+```tsx
+import { TemplateContent } from 'xertica-ui';
+
+{ path: '/template', element: <TemplateContent /> }
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `user` | `{ name?: string; email?: string; avatar?: string } \| null` | - | Currently authenticated user for the header. |
+| `onLogout` | `() => void` | - | Logout handler forwarded to the header. |
+| `onSettings` | `() => void` | - | Settings handler forwarded to the header. |
+
+---
+
+## Layout Dependency
+
+`TemplateContent` uses optional layout state. When wrapped in `XerticaProvider`, it synchronizes sidebar width, expanded state, and layout controls. Without the provider, it renders with local fallback sidebar state.
+
+React Router is still required because the showcase uses `Link` and `useNavigate`.
+
+---
+
+## Sidebar Showcase
+
+`TemplateContent` includes an embedded, interactive `Sidebar` preview with controls for:
+
+- Toggling footer sections.
+- Adjusting sidebar width via a `Slider`.
+- Switching between `variant="assistant"` and `variant="default"` modes.
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Reference first** - Before building a new page, check `TemplateContent` for the correct composition pattern.
+> - **Provider fallback** - `TemplateContent` renders without `XerticaProvider`, but the provider is recommended for synchronized layout state.
+> - **Router requirement** - React Router is still required for navigation hooks and links.
+> - **Map section** - The Maps showcase requires a valid `googleMapsApiKey` passed to `XerticaProvider`.

package/components/pages/template-page/TemplatePage.stories.tsx

@@ -1,39 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TemplatePage } from './TemplatePage';
-import { MemoryRouter } from 'react-router-dom';
-import { LayoutProvider } from '../../../contexts/LayoutContext';
-import React from 'react';
-
-const meta: Meta<typeof TemplatePage> = {
-  title: 'Pages/TemplatePage',
-  component: TemplatePage,
-  decorators: [
-    (Story) => (
-      <MemoryRouter initialEntries={['/template']}>
-        <LayoutProvider>
-          <Story />
-        </LayoutProvider>
-      </MemoryRouter>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof TemplatePage>;
-
-export const Default: Story = {
-  args: {
-    user: { email: 'ariel@xertica.com' },
-    onLogout: () => {},
-  },
-};
-
-export const NoUser: Story = {
-  args: {
-    user: null,
-    onLogout: () => {},
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { TemplatePage } from './TemplatePage';
+import { MemoryRouter } from 'react-router-dom';
+import { LayoutProvider } from '../../../contexts/LayoutContext';
+import React from 'react';
+
+const meta: Meta<typeof TemplatePage> = {
+  title: 'Pages/TemplatePage',
+  component: TemplatePage,
+  decorators: [
+    (Story) => (
+      <MemoryRouter initialEntries={['/template']}>
+        <LayoutProvider>
+          <Story />
+        </LayoutProvider>
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplatePage>;
+
+export const Default: Story = {
+  args: {
+    user: { email: 'ariel@xertica.com' },
+    onLogout: () => {},
+  },
+};
+
+export const NoUser: Story = {
+  args: {
+    user: null,
+    onLogout: () => {},
+  },
+};

package/components/pages/template-page/TemplatePage.tsx

@@ -32,7 +32,7 @@ export function TemplatePage({ user, onLogout }: TemplatePageProps) {
   const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
   const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
   const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
-  const sidebarWidth = layout?.sidebarWidth ?? 256;
+  const sidebarWidth = layout?.sidebarWidth ?? 280;
   const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
   const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded((value) => !value));
   const toggleAssistente = layout?.toggleAssistente ?? (() => setLocalAssistantExpanded((value) => !value));
@@ -56,10 +56,10 @@ export function TemplatePage({ user, onLogout }: TemplatePageProps) {
         navigate={navigate}
         routes={routes}
       />
-      <TemplateContent 
-        user={user} 
-        onLogout={onLogout} 
-        onSettings={() => navigate('/settings')} 
+      <TemplateContent
+        user={user}
+        onLogout={onLogout}
+        onSettings={() => navigate('/settings')}
       />
       <XerticaAssistant
         isExpanded={assistenteExpanded}

package/components/pages/template-page/template-page.mdx

@@ -1,53 +1,53 @@
-import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-import * as TemplatePageStories from './TemplatePage.stories';
-
-<Meta of={TemplatePageStories} />
-
-<Title>TemplatePage</Title>
-<Subtitle>Full application shell with the component kitchen-sink reference.</Subtitle>
-
----
-
-## Overview
-
-`TemplatePage` is the reference implementation of the full application layout. It assembles:
-
-- **Sidebar** - Primary navigation.
-- **TemplateContent** - Kitchen-sink showcase of Xertica UI components.
-- **XerticaAssistant** - Floating AI assistant panel.
-
-When `XerticaProvider` is present, the page synchronizes sidebar width, sidebar expansion, and assistant visibility through `LayoutContext`. Without the provider, it renders with local fallback layout state.
-
-**Requires:** React Router v6. `XerticaProvider` is recommended for app-level synchronization.
-
----
-
-## Props
-
-| Prop | Type | Required | Description |
-|---|---|---|---|
-| `user` | `{ email: string } \| null` | Yes | Currently authenticated user. Passed to Sidebar for avatar and user menu display. |
-| `onLogout` | `() => void` | Yes | Called when the user triggers logout from the Sidebar. |
-
----
-
-## Composition
-
-```tsx
-import { TemplatePage } from 'xertica-ui';
-
-<Route
-  path="/template"
-  element={<TemplatePage user={currentUser} onLogout={handleLogout} />}
-/>
-```
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Reference implementation** - Use `TemplatePage` as the primary reference for assembling complex layouts.
-> - **Top-level only** - This is a full-screen layout component. Do not nest it inside other layouts.
-> - **Provider fallback** - The page renders without `XerticaProvider`, but the provider is recommended for synchronized app layout.
-> - **Extend via TemplateContent** - To change showcased components, edit `TemplateContent`.
+import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
+import * as TemplatePageStories from './TemplatePage.stories';
+
+<Meta of={TemplatePageStories} />
+
+<Title>TemplatePage</Title>
+<Subtitle>Full application shell with the component kitchen-sink reference.</Subtitle>
+
+---
+
+## Overview
+
+`TemplatePage` is the reference implementation of the full application layout. It assembles:
+
+- **Sidebar** - Primary navigation.
+- **TemplateContent** - Kitchen-sink showcase of Xertica UI components.
+- **XerticaAssistant** - Floating AI assistant panel.
+
+When `XerticaProvider` is present, the page synchronizes sidebar width, sidebar expansion, and assistant visibility through `LayoutContext`. Without the provider, it renders with local fallback layout state.
+
+**Requires:** React Router v6. `XerticaProvider` is recommended for app-level synchronization.
+
+---
+
+## Props
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `user` | `{ email: string } \| null` | Yes | Currently authenticated user. Passed to Sidebar for avatar and user menu display. |
+| `onLogout` | `() => void` | Yes | Called when the user triggers logout from the Sidebar. |
+
+---
+
+## Composition
+
+```tsx
+import { TemplatePage } from 'xertica-ui';
+
+<Route
+  path="/template"
+  element={<TemplatePage user={currentUser} onLogout={handleLogout} />}
+/>
+```
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Reference implementation** - Use `TemplatePage` as the primary reference for assembling complex layouts.
+> - **Top-level only** - This is a full-screen layout component. Do not nest it inside other layouts.
+> - **Provider fallback** - The page renders without `XerticaProvider`, but the provider is recommended for synchronized app layout.
+> - **Extend via TemplateContent** - To change showcased components, edit `TemplateContent`.

package/components/public-api-smoke.test.tsx

@@ -1,52 +1,52 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import * as Root from './index';
-import * as Assistant from './assistant';
-import * as Blocks from './blocks';
-import * as Brand from './brand';
-import * as Hooks from './hooks';
-import * as Layout from './layout';
-import * as Media from './media';
-import * as Pages from './pages';
-import * as UI from './ui';
-
-describe('public API smoke tests', () => {
-  it('keeps all documented subpath entrypoints importable', () => {
-    expect(UI.Button).toBeDefined();
-    expect(Brand.XerticaProvider).toBeTypeOf('function');
-    expect(Layout.Header).toBeTypeOf('function');
-    expect(Assistant.XerticaAssistant).toBeTypeOf('function');
-    expect(Blocks.FeatureCard).toBeTypeOf('function');
-    expect(Media.AudioPlayer).toBeTypeOf('function');
-    expect(Pages.TemplateContent).toBeTypeOf('function');
-    expect(UI.CalendarDayButton).toBeTypeOf('function');
-    expect(Hooks.useOptionalLayout).toBeTypeOf('function');
-    expect(Hooks.useMobile).toBeTypeOf('function');
-    expect(Root.TemplateContent).toBe(Pages.TemplateContent);
-    expect(Root.XerticaProvider).toBe(Brand.XerticaProvider);
-  });
-
-  it('renders representative components from the public subpaths', () => {
-    render(
-      <Brand.XerticaProvider>
-        <UI.Button>Action</UI.Button>
-        <Layout.Header title="Header smoke" />
-        <Assistant.MarkdownMessage content="**Assistant** smoke" />
-        <Media.AudioPlayer title="Audio smoke" enableAutoFloat={false} />
-      </Brand.XerticaProvider>
-    );
-
-    expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
-    expect(screen.getByText('Header smoke')).toBeInTheDocument();
-    expect(screen.getByText('Assistant')).toBeInTheDocument();
-    expect(screen.getByText('Audio smoke')).toBeInTheDocument();
-  });
-
-  it('exposes optional hooks that can be called without root providers', () => {
-    const { result } = renderHook(() => Hooks.useOptionalLayout());
-
-    expect(result.current).toBeNull();
-  });
-});
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import * as Root from './index';
+import * as Assistant from './assistant';
+import * as Blocks from './blocks';
+import * as Brand from './brand';
+import * as Hooks from './hooks';
+import * as Layout from './layout';
+import * as Media from './media';
+import * as Pages from './pages';
+import * as UI from './ui';
+
+describe('public API smoke tests', () => {
+  it('keeps all documented subpath entrypoints importable', () => {
+    expect(UI.Button).toBeDefined();
+    expect(Brand.XerticaProvider).toBeTypeOf('function');
+    expect(Layout.Header).toBeTypeOf('function');
+    expect(Assistant.XerticaAssistant).toBeTypeOf('function');
+    expect(Blocks.FeatureCard).toBeTypeOf('function');
+    expect(Media.AudioPlayer).toBeTypeOf('function');
+    expect(Pages.TemplateContent).toBeTypeOf('function');
+    expect(UI.CalendarDayButton).toBeTypeOf('function');
+    expect(Hooks.useOptionalLayout).toBeTypeOf('function');
+    expect(Hooks.useMobile).toBeTypeOf('function');
+    expect(Root.TemplateContent).toBe(Pages.TemplateContent);
+    expect(Root.XerticaProvider).toBe(Brand.XerticaProvider);
+  });
+
+  it('renders representative components from the public subpaths', () => {
+    render(
+      <Brand.XerticaProvider>
+        <UI.Button>Action</UI.Button>
+        <Layout.Header title="Header smoke" />
+        <Assistant.MarkdownMessage content="**Assistant** smoke" />
+        <Media.AudioPlayer title="Audio smoke" enableAutoFloat={false} />
+      </Brand.XerticaProvider>
+    );
+
+    expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();
+    expect(screen.getByText('Header smoke')).toBeInTheDocument();
+    expect(screen.getByText('Assistant')).toBeInTheDocument();
+    expect(screen.getByText('Audio smoke')).toBeInTheDocument();
+  });
+
+  it('exposes optional hooks that can be called without root providers', () => {
+    const { result } = renderHook(() => Hooks.useOptionalLayout());
+
+    expect(result.current).toBeNull();
+  });
+});

package/components/shared/assistant-utils.ts

@@ -1,44 +1,44 @@
-import { BarChart3, ImageIcon, Table as TableIcon, FileText } from 'lucide-react';
-import React from 'react';
-
-export interface AssistantSuggestion {
-    id: string;
-    text: string;
-    icon?: React.ReactNode;
-}
-
-export interface AssistantMessage {
-    id: string;
-    type: 'user' | 'assistant' | 'system';
-    content: string;
-    timestamp: Date;
-    isFavorite?: boolean;
-    chartData?: any[];
-    chartConfig?: any;
-    attachmentType?: 'file' | 'audio' | 'image' | 'video' | 'document' | 'podcast' | 'search';
-    attachmentName?: string;
-    documentContent?: string;
-    documentTitle?: string;
-    tableData?: {
-        caption?: string;
-        headers: string[];
-        rows: (string | React.ReactNode)[][];
-    };
-    audioUrl?: string;
-    evaluation?: 'like' | 'dislike';
-    evaluationReason?: string;
-}
-
-export interface MockResponse {
-    trigger: string | RegExp;
-    response: string | Partial<AssistantMessage>;
-    delay?: number;
-}
-
-/**
- * Default suggestion chips for the chat interface.
- */
-export const sugestoesPadrao: AssistantSuggestion[] = [
+import { BarChart3, ImageIcon, Table as TableIcon, FileText } from 'lucide-react';
+import React from 'react';
+
+export interface AssistantSuggestion {
+    id: string;
+    text: string;
+    icon?: React.ReactNode;
+}
+
+export interface AssistantMessage {
+    id: string;
+    type: 'user' | 'assistant' | 'system';
+    content: string;
+    timestamp: Date;
+    isFavorite?: boolean;
+    chartData?: any[];
+    chartConfig?: any;
+    attachmentType?: 'file' | 'audio' | 'image' | 'video' | 'document' | 'podcast' | 'search';
+    attachmentName?: string;
+    documentContent?: string;
+    documentTitle?: string;
+    tableData?: {
+        caption?: string;
+        headers: string[];
+        rows: (string | React.ReactNode)[][];
+    };
+    audioUrl?: string;
+    evaluation?: 'like' | 'dislike';
+    evaluationReason?: string;
+}
+
+export interface MockResponse {
+    trigger: string | RegExp;
+    response: string | Partial<AssistantMessage>;
+    delay?: number;
+}
+
+/**
+ * Default suggestion chips for the chat interface.
+ */
+export const sugestoesPadrao: AssistantSuggestion[] = [
     { id: '1', text: 'O que posso pedir para você fazer?' },
     { id: '2', text: 'O que você faz?' },
     { id: '3', text: 'Com quais projetos devo me preocupar agora?' },
@@ -49,7 +49,7 @@ export const sugestoesPadrao: AssistantSuggestion[] = [
 /**
  * Rich suggestion chips with icons for the chat interface.
  */
-export const sugestoesRicas: AssistantSuggestion[] = [
+export const sugestoesRicas: AssistantSuggestion[] = [
     { id: 'rich-1', text: 'Ver exemplo de Gráfico', icon: React.createElement(BarChart3, { className: "w-4 h-4 mr-2" }) },
     { id: 'rich-2', text: 'Ver exemplo de Imagem', icon: React.createElement(ImageIcon, { className: "w-4 h-4 mr-2" }) },
     { id: 'rich-3', text: 'Ver exemplo de Tabela', icon: React.createElement(TableIcon, { className: "w-4 h-4 mr-2" }) },
@@ -67,7 +67,7 @@ export const sugestoesRicas: AssistantSuggestion[] = [
  * @param customResponses Optional list of custom mock responses.
  * @returns A string or a Message object with the response.
  */
-export const gerarResposta = (mensagemUsuario: string, customResponses?: MockResponse[]): string | Partial<AssistantMessage> => {
+export const gerarResposta = (mensagemUsuario: string, customResponses?: MockResponse[]): string | Partial<AssistantMessage> => {
     const mensagemLower = mensagemUsuario.toLowerCase();
 
     // 1. Check custom responses first

package/components/shared/layout-constants.ts

@@ -1,5 +1,5 @@
 /** Width of the sidebar when expanded (Desktop) */
-export const SIDEBAR_EXPANDED_WIDTH = 256;
+export const SIDEBAR_EXPANDED_WIDTH = 280;
 /** Width of the sidebar when collapsed (Desktop) */
 export const SIDEBAR_COLLAPSED_WIDTH = 80;
 /** Width of the assistant panel when expanded (Desktop) */

package/components/ui/accordion/accordion.mdx

@@ -13,14 +13,14 @@ import * as AccordionStories from './accordion.stories';
 ## Controls
 <Controls />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]