xertica-ui 2.2.1 → 2.3.0

package/components/pages/reset-password-page/ResetPasswordPage.stories.tsx

@@ -1,24 +1,24 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ResetPasswordPage } from './ResetPasswordPage';
-import { MemoryRouter } from 'react-router-dom';
-import React from 'react';
-
-const meta: Meta<typeof ResetPasswordPage> = {
-  title: 'Pages/ResetPasswordPage',
-  component: ResetPasswordPage,
-  decorators: [
-    Story => (
-      <MemoryRouter initialEntries={['/reset-password']}>
-        <Story />
-      </MemoryRouter>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ResetPasswordPage>;
-
-export const Default: Story = {};
+import type { Meta, StoryObj } from '@storybook/react';
+import { ResetPasswordPage } from './ResetPasswordPage';
+import { MemoryRouter } from 'react-router-dom';
+import React from 'react';
+
+const meta: Meta<typeof ResetPasswordPage> = {
+  title: 'Pages/ResetPasswordPage',
+  component: ResetPasswordPage,
+  decorators: [
+    Story => (
+      <MemoryRouter initialEntries={['/reset-password']}>
+        <Story />
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ResetPasswordPage>;
+
+export const Default: Story = {};

package/components/pages/reset-password-page/index.ts

@@ -1 +1 @@
-export * from './ResetPasswordPage';
+export * from './ResetPasswordPage';

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

@@ -1,43 +1,43 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { TemplateContent } from './TemplateContent';
-import { MemoryRouter } from 'react-router-dom';
-import { LayoutProvider } from '../../../contexts/LayoutContext';
-import React from 'react';
-
-const meta: Meta<typeof TemplateContent> = {
-  title: 'Pages/TemplateContent',
-  component: TemplateContent,
-  decorators: [
-    Story => (
-      <MemoryRouter initialEntries={['/template']}>
-        <LayoutProvider>
-          <Story />
-        </LayoutProvider>
-      </MemoryRouter>
-    ),
-  ],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'Kitchen-sink showcase of all Xertica UI primitives. The Maps section requires a Google Maps API key and will not render in Storybook without one.',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof TemplateContent>;
-
-export const Default: Story = {
-  args: {
-    user: {
-      name: 'Ariel Santos',
-      email: 'ariel@xertica.com',
-      avatar: 'https://github.com/shadcn.png',
-    },
-    onLogout: () => console.log('logout'),
-    onSettings: () => console.log('settings'),
-  },
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { TemplateContent } from './TemplateContent';
+import { MemoryRouter } from 'react-router-dom';
+import { LayoutProvider } from '../../../contexts/LayoutContext';
+import React from 'react';
+
+const meta: Meta<typeof TemplateContent> = {
+  title: 'Pages/TemplateContent',
+  component: TemplateContent,
+  decorators: [
+    Story => (
+      <MemoryRouter initialEntries={['/template']}>
+        <LayoutProvider>
+          <Story />
+        </LayoutProvider>
+      </MemoryRouter>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Kitchen-sink showcase of all Xertica UI primitives. The Maps section requires a Google Maps API key and will not render in Storybook without one.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TemplateContent>;
+
+export const Default: Story = {
+  args: {
+    user: {
+      name: 'Ariel Santos',
+      email: 'ariel@xertica.com',
+      avatar: 'https://github.com/shadcn.png',
+    },
+    onLogout: () => console.log('logout'),
+    onSettings: () => console.log('settings'),
+  },
+};

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

@@ -153,7 +153,7 @@ export function TemplateContent() {
       {/* Content area */}
       <main className="flex-1 overflow-hidden bg-muted">
         <ScrollArea className="h-full">
-          <div className="p-2 sm:p-4 md:p-6">
+          <div className="p-5 sm:p-4 md:p-6">
             <div className="max-w-6xl mx-auto space-y-8">
               {/* Page header */}
               <PageHeader

package/components/pages/template-content/index.ts

@@ -1 +1 @@
-export * from './TemplateContent';
+export * from './TemplateContent';

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

@@ -1,62 +1,62 @@
-import React from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { Sidebar } from '../../layout/sidebar';
-import { TemplateContent } from '../template-content/TemplateContent';
-import { XerticaAssistant } from '../../assistant/xertica-assistant/xertica-assistant';
-import { routes } from '../../shared/navigation';
-import { useOptionalLayout } from '../../../contexts/LayoutContext';
-import { useAuth } from '../../../contexts/AuthContext';
-
-/**
- * Main Template Shell Page.
- *
- * @description
- * A complete layout assembly including the Sidebar, Main Content area (TemplateContent),
- * and the floating AI Assistant. Auth state is consumed from `AuthContext` — no props required.
- *
- * @ai-rules
- * 1. Use this page as the primary reference for assembling complex layouts within Xertica UI.
- * 2. It relies on `useLayout` context to synchronize the expansive states of the Sidebar and Assistant.
- */
-export function TemplatePage() {
-  const { user, logout } = useAuth();
-  const layout = useOptionalLayout();
-  const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
-  const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
-  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
-  const sidebarWidth = layout?.sidebarWidth ?? 280;
-  const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
-  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded(value => !value));
-  const toggleAssistente =
-    layout?.toggleAssistente ?? (() => setLocalAssistantExpanded(value => !value));
-  const location = useLocation();
-  const navigate = useNavigate();
-
-  return (
-    <div className="h-screen flex bg-muted overflow-hidden relative">
-      <Sidebar
-        expanded={sidebarExpanded}
-        width={sidebarWidth}
-        onToggle={toggleSidebar}
-        user={{
-          ...user,
-          name: 'Ariel Santos',
-          avatar: 'https://github.com/shadcn.png',
-        }}
-        onLogout={logout}
-        onSettingsClick={() => navigate('/settings')}
-        location={location}
-        navigate={navigate}
-        routes={routes}
-      />
-      <TemplateContent />
-      <XerticaAssistant
-        isExpanded={assistenteExpanded}
-        onToggle={toggleAssistente}
-        onEvaluation={() => {
-          // Wire your feedback persistence logic here
-        }}
-      />
-    </div>
-  );
-}
+import React from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { Sidebar } from '../../layout/sidebar';
+import { TemplateContent } from '../template-content/TemplateContent';
+import { XerticaAssistant } from '../../assistant/xertica-assistant/xertica-assistant';
+import { routes } from '../../shared/navigation';
+import { useOptionalLayout } from '../../../contexts/LayoutContext';
+import { useAuth } from '../../../contexts/AuthContext';
+
+/**
+ * Main Template Shell Page.
+ *
+ * @description
+ * A complete layout assembly including the Sidebar, Main Content area (TemplateContent),
+ * and the floating AI Assistant. Auth state is consumed from `AuthContext` — no props required.
+ *
+ * @ai-rules
+ * 1. Use this page as the primary reference for assembling complex layouts within Xertica UI.
+ * 2. It relies on `useLayout` context to synchronize the expansive states of the Sidebar and Assistant.
+ */
+export function TemplatePage() {
+  const { user, logout } = useAuth();
+  const layout = useOptionalLayout();
+  const [localSidebarExpanded, setLocalSidebarExpanded] = React.useState(false);
+  const [localAssistantExpanded, setLocalAssistantExpanded] = React.useState(false);
+  const sidebarExpanded = layout?.sidebarExpanded ?? localSidebarExpanded;
+  const sidebarWidth = layout?.sidebarWidth ?? 280;
+  const assistenteExpanded = layout?.assistenteExpanded ?? localAssistantExpanded;
+  const toggleSidebar = layout?.toggleSidebar ?? (() => setLocalSidebarExpanded(value => !value));
+  const toggleAssistente =
+    layout?.toggleAssistente ?? (() => setLocalAssistantExpanded(value => !value));
+  const location = useLocation();
+  const navigate = useNavigate();
+
+  return (
+    <div className="h-screen flex bg-muted overflow-hidden relative">
+      <Sidebar
+        expanded={sidebarExpanded}
+        width={sidebarWidth}
+        onToggle={toggleSidebar}
+        user={{
+          ...user,
+          name: 'Ariel Santos',
+          avatar: 'https://github.com/shadcn.png',
+        }}
+        onLogout={logout}
+        onSettingsClick={() => navigate('/settings')}
+        location={location}
+        navigate={navigate}
+        routes={routes}
+      />
+      <TemplateContent />
+      <XerticaAssistant
+        isExpanded={assistenteExpanded}
+        onToggle={toggleAssistente}
+        onEvaluation={() => {
+          // Wire your feedback persistence logic here
+        }}
+      />
+    </div>
+  );
+}

package/components/pages/template-page/index.ts

@@ -1 +1 @@
-export * from './TemplatePage';
+export * from './TemplatePage';

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`.