xertica-ui 2.5.3 → 2.7.0

package/components/pages/verify-email-page/verify-email-page.mdx

@@ -1,55 +1,55 @@
-import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
-
-<Meta title="Pages/VerifyEmailPage" />
-
-<Title>VerifyEmailPage</Title>
-<Subtitle>Full-page confirmation screen for email verification with a resend action.</Subtitle>
-
----
-
-## Overview
-
-`VerifyEmailPage` is shown after a user submits their email on `ForgotPasswordPage`. It reads the email address from `location.state?.email` (passed via React Router navigation state) and displays it in the confirmation message.
-
-The page includes a "Resend email" button that shows a 3-second success feedback before resetting.
-
-This component requires React Router v6+.
-
-```tsx
-import { VerifyEmailPage } from 'xertica-ui';
-
-// In your router config:
-{ path: '/verify-email', element: <VerifyEmailPage /> }
-```
-
----
-
-## Navigation Flow
-
-```
-/forgot-password  ──▶  /verify-email  (state: { email: string })
-                            │
-                    [resend button]  (no navigation — UI feedback only)
-```
-
----
-
-## Reading Location State
-
-The page automatically reads `location.state?.email` from React Router. If no email is present (e.g., the user navigates directly to `/verify-email`), the email display gracefully omits the address.
-
----
-
-## Props
-
-This component accepts no props — it is a self-contained page.
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Router requirement** — Must be inside a React Router `<BrowserRouter>`. `useLocation` is used to read navigation state.
-> - **State dependency** — Navigate to this page using `navigate('/verify-email', { state: { email } })` or the email display will be blank.
-> - **Resend logic** — The resend button currently provides visual-only feedback. Wire your actual resend API call by forking the component or wrapping it with a custom route element.
-> - **Expiry handling** — Add a link back to `/forgot-password` for cases where the verification link expires, so users can restart the flow.
+import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
+
+<Meta title="Pages/VerifyEmailPage" />
+
+<Title>VerifyEmailPage</Title>
+<Subtitle>Full-page confirmation screen for email verification with a resend action.</Subtitle>
+
+---
+
+## Overview
+
+`VerifyEmailPage` is shown after a user submits their email on `ForgotPasswordPage`. It reads the email address from `location.state?.email` (passed via React Router navigation state) and displays it in the confirmation message.
+
+The page includes a "Resend email" button that shows a 3-second success feedback before resetting.
+
+This component requires React Router v6+.
+
+```tsx
+import { VerifyEmailPage } from 'xertica-ui';
+
+// In your router config:
+{ path: '/verify-email', element: <VerifyEmailPage /> }
+```
+
+---
+
+## Navigation Flow
+
+```
+/forgot-password  ──▶  /verify-email  (state: { email: string })
+                            │
+                    [resend button]  (no navigation — UI feedback only)
+```
+
+---
+
+## Reading Location State
+
+The page automatically reads `location.state?.email` from React Router. If no email is present (e.g., the user navigates directly to `/verify-email`), the email display gracefully omits the address.
+
+---
+
+## Props
+
+This component accepts no props — it is a self-contained page.
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Router requirement** — Must be inside a React Router `<BrowserRouter>`. `useLocation` is used to read navigation state.
+> - **State dependency** — Navigate to this page using `navigate('/verify-email', { state: { email } })` or the email display will be blank.
+> - **Resend logic** — The resend button currently provides visual-only feedback. Wire your actual resend API call by forking the component or wrapping it with a custom route element.
+> - **Expiry handling** — Add a link back to `/forgot-password` for cases where the verification link expires, so users can restart the flow.

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { renderHook } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { describe, expect, it } from 'vitest';
 import * as Root from './index';
 import * as Assistant from './assistant';
@@ -29,13 +30,16 @@ describe('public API smoke tests', () => {
   });
 
   it('renders representative components from the public subpaths', () => {
+    const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
     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>
+      <QueryClientProvider client={queryClient}>
+        <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>
+      </QueryClientProvider>
     );
 
     expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument();

package/components/shared/assistant-utils.ts

@@ -1,5 +1,6 @@
 import { BarChart3, ImageIcon, Table as TableIcon, FileText } from 'lucide-react';
 import React from 'react';
+import type { ChartConfig, DashboardChartDatum } from '../ui/chart';
 
 export interface AssistantSuggestion {
   id: string;
@@ -13,8 +14,8 @@ export interface AssistantMessage {
   content: string;
   timestamp: Date;
   isFavorite?: boolean;
-  chartData?: any[];
-  chartConfig?: any;
+  chartData?: DashboardChartDatum[];
+  chartConfig?: ChartConfig;
   attachmentType?: 'file' | 'audio' | 'image' | 'video' | 'document' | 'podcast' | 'search';
   attachmentName?: string;
   documentContent?: string;

package/components/shared/navigation.ts

@@ -11,9 +11,9 @@ export interface RouteConfig {
   /** Display label (used in sidebar and breadcrumbs) */
   label: string;
   /** Leading icon component */
-  icon: React.ComponentType<any>;
+  icon: React.ComponentType<{ className?: string }>;
   /** Optional page component (not used by the sidebar directly) */
-  component?: React.ComponentType<any>;
+  component?: React.ComponentType<{ className?: string }>;
 }
 
 // ─────────────────────────────────────────────────────────────────────────────

package/components/ui/accordion/accordion.mdx

@@ -1,29 +1,29 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as AccordionStories from './accordion.stories';
-
-<Meta of={AccordionStories} />
-
-<Title />
-<Subtitle>A vertically stacked set of collapsible sections.</Subtitle>
-
-<Description />
-
-<Primary />
-
-## Controls
-<Controls />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Anatomy** — `AccordionItem` requires a unique `value`.
-> - **Icons** — The chevron icon is built-in; do not add your own.
-> - **Context** — Use `type="single" collapsible` for FAQs. Use `type="multiple"` for settings panels.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as AccordionStories from './accordion.stories';
+
+<Meta of={AccordionStories} />
+
+<Title />
+<Subtitle>A vertically stacked set of collapsible sections.</Subtitle>
+
+<Description />
+
+<Primary />
+
+## Controls
+<Controls />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Anatomy** — `AccordionItem` requires a unique `value`.
+> - **Icons** — The chevron icon is built-in; do not add your own.
+> - **Context** — Use `type="single" collapsible` for FAQs. Use `type="multiple"` for settings panels.

package/components/ui/alert/alert.mdx

@@ -1,29 +1,29 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as AlertStories from './alert.stories';
-
-<Meta of={AlertStories} />
-
-<Title />
-<Subtitle>Inline message banners for contextual feedback.</Subtitle>
-
-<Description />
-
-<Primary />
-
-## Controls
-<Controls />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Icons** — Always pair an alert with a matching semantic icon from `lucide-react`.
-> - **Placement** — Alerts are persistent inline elements. For temporary feedback, use `Sonner`.
-> - **Content** — Keep alert descriptions concise and actionable.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as AlertStories from './alert.stories';
+
+<Meta of={AlertStories} />
+
+<Title />
+<Subtitle>Inline message banners for contextual feedback.</Subtitle>
+
+<Description />
+
+<Primary />
+
+## Controls
+<Controls />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Icons** — Always pair an alert with a matching semantic icon from `lucide-react`.
+> - **Placement** — Alerts are persistent inline elements. For temporary feedback, use `Sonner`.
+> - **Content** — Keep alert descriptions concise and actionable.

package/components/ui/alert-dialog/alert-dialog.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as AlertDialogStories from './alert-dialog.stories';
-
-<Meta of={AlertDialogStories} />
-
-<Title />
-<Subtitle>A modal for irreversible destructive actions that requires explicit confirmation.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Mandatory Content** — Both `AlertDialogTitle` and `AlertDialogDescription` are required for accessibility and clarity.
-> - **Action Pair** — Always provide a `Cancel` option alongside the `Action`.
-> - **Visual Weight** — Assign destructive styling (`bg-destructive`) to the confirm button to signal danger.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as AlertDialogStories from './alert-dialog.stories';
+
+<Meta of={AlertDialogStories} />
+
+<Title />
+<Subtitle>A modal for irreversible destructive actions that requires explicit confirmation.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Mandatory Content** — Both `AlertDialogTitle` and `AlertDialogDescription` are required for accessibility and clarity.
+> - **Action Pair** — Always provide a `Cancel` option alongside the `Action`.
+> - **Visual Weight** — Assign destructive styling (`bg-destructive`) to the confirm button to signal danger.

package/components/ui/aspect-ratio/aspect-ratio.mdx

@@ -1,25 +1,25 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as AspectRatioStories from './aspect-ratio.stories';
-
-<Meta of={AspectRatioStories} />
-
-<Title />
-<Subtitle>Displays content within a fixed ratio.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Width Constraints** — Hand over a defined width to the parent container; `AspectRatio` will compute the height.
-> - **Child Fill** — Children must use `w-full h-full` and `object-cover` for images to properly fill the container.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as AspectRatioStories from './aspect-ratio.stories';
+
+<Meta of={AspectRatioStories} />
+
+<Title />
+<Subtitle>Displays content within a fixed ratio.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Width Constraints** — Hand over a defined width to the parent container; `AspectRatio` will compute the height.
+> - **Child Fill** — Children must use `w-full h-full` and `object-cover` for images to properly fill the container.

package/components/ui/assistant-chart/AssistantChart.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
-import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from '../chart';
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  DashboardChartDatum,
+} from '../chart';
 import { cn } from '../../shared/utils';
 
 export interface BarConfig {
@@ -13,7 +19,7 @@ export interface BarConfig {
 }
 
 export interface AssistantChartProps {
-  data: any[];
+  data: DashboardChartDatum[];
   config: ChartConfig;
   /** Field used for X axis category labels. @default "month" */
   categoryKey?: string;

package/components/ui/assistant-chart/assistant-chart.mdx

@@ -1,25 +1,25 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as AssistantChartStories from './assistant-chart.stories';
-
-<Meta of={AssistantChartStories} />
-
-<Title />
-<Subtitle>A specialized chart wrapper for the Xertica Assistant interface.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Configuration Object** — Provide a `ChartConfig` object mapping your data keys (e.g., `desktop`, `mobile`) to labels and theme-aware colors.
-> - **Data Structure** — Ensure your data array contains objects with keys matching those defined in your config and a `month` key for the X-axis.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as AssistantChartStories from './assistant-chart.stories';
+
+<Meta of={AssistantChartStories} />
+
+<Title />
+<Subtitle>A specialized chart wrapper for the Xertica Assistant interface.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Configuration Object** — Provide a `ChartConfig` object mapping your data keys (e.g., `desktop`, `mobile`) to labels and theme-aware colors.
+> - **Data Structure** — Ensure your data array contains objects with keys matching those defined in your config and a `month` key for the X-axis.

package/components/ui/avatar/avatar.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as AvatarStories from './avatar.stories';
-
-<Meta of={AvatarStories} />
-
-<Title />
-<Subtitle>Displays a user&apos;s identity visually as a photo or initials.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Fallback is mandatory** — Always include `<AvatarFallback>`.
-> - **Accessibility** — Provide descriptive `alt` text for `<AvatarImage>`.
-> - **Sizing** — Use standard sizes: `h-8 w-8` for small and `h-10 w-10` for default.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as AvatarStories from './avatar.stories';
+
+<Meta of={AvatarStories} />
+
+<Title />
+<Subtitle>Displays a user&apos;s identity visually as a photo or initials.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Fallback is mandatory** — Always include `<AvatarFallback>`.
+> - **Accessibility** — Provide descriptive `alt` text for `<AvatarImage>`.
+> - **Sizing** — Use standard sizes: `h-8 w-8` for small and `h-10 w-10` for default.

package/components/ui/badge/badge.mdx

@@ -1,28 +1,28 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as BadgeStories from './badge.stories';
-
-<Meta of={BadgeStories} />
-
-<Title />
-<Subtitle>Compact status indicators and category labels.</Subtitle>
-
-<Description />
-
-<Primary />
-
-## Controls
-<Controls />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Non-interactive** — Badges are for information display. If you need a clickable action, use a `Button`.
-> - **Consistency** — Stick to the predefined variants for status communication (e.g., `destructive` for errors).
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as BadgeStories from './badge.stories';
+
+<Meta of={BadgeStories} />
+
+<Title />
+<Subtitle>Compact status indicators and category labels.</Subtitle>
+
+<Description />
+
+<Primary />
+
+## Controls
+<Controls />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Non-interactive** — Badges are for information display. If you need a clickable action, use a `Button`.
+> - **Consistency** — Stick to the predefined variants for status communication (e.g., `destructive` for errors).

package/components/ui/breadcrumb/breadcrumb.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as BreadcrumbStories from './breadcrumb.stories';
-
-<Meta of={BreadcrumbStories} />
-
-<Title />
-<Subtitle>A hierarchical navigation trail showing the user&apos;s current position.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Last Item** — The final element represents the current page and must use `BreadcrumbPage`.
-> - **Injected Breadcrumbs** — Prefer using the `breadcrumbs` prop on the `Header` component for automatic management.
-> - **Separators** — Always include a `BreadcrumbSeparator` between items.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as BreadcrumbStories from './breadcrumb.stories';
+
+<Meta of={BreadcrumbStories} />
+
+<Title />
+<Subtitle>A hierarchical navigation trail showing the user&apos;s current position.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Last Item** — The final element represents the current page and must use `BreadcrumbPage`.
+> - **Injected Breadcrumbs** — Prefer using the `breadcrumbs` prop on the `Header` component for automatic management.
+> - **Separators** — Always include a `BreadcrumbSeparator` between items.