xertica-ui 2.5.2 → 2.6.0

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.

package/components/ui/button/button.mdx

@@ -1,29 +1,29 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas, Source } from '@storybook/addon-docs/blocks';
-import * as ButtonStories from './button.stories';
-
-<Meta of={ButtonStories} />
-
-<Title />
-<Subtitle>The primary interaction trigger for user actions.</Subtitle>
-
-<Description />
-
-<Primary />
-
-## Controls
-<Controls />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Never use native `<button>`** — always use `<Button>` from `xertica-ui`.
-> - **Action Pair** — When placing two buttons side-by-side, ensure only one is `variant="default"`.
-> - **Icon Only** — Always provide an `aria-label` for icon-only buttons.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas, Source } from '@storybook/addon-docs/blocks';
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories} />
+
+<Title />
+<Subtitle>The primary interaction trigger for user actions.</Subtitle>
+
+<Description />
+
+<Primary />
+
+## Controls
+<Controls />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Never use native `<button>`** — always use `<Button>` from `xertica-ui`.
+> - **Action Pair** — When placing two buttons side-by-side, ensure only one is `variant="default"`.
+> - **Icon Only** — Always provide an `aria-label` for icon-only buttons.

package/components/ui/calendar/calendar.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as CalendarStories from './calendar.stories';
-
-<Meta of={CalendarStories} />
-
-<Title />
-<Subtitle>A customizable calendar component for date selection.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Popover Wrap** — Almost always wrap the `Calendar` inside a `Popover` when used as an input field.
-> - **Accessibility** — Use `initialFocus` to ensure the calendar is immediately interactive when opened.
-> - **Formatting** — Use `date-fns` for consistent date display (e.g., `format(date, 'PPP')`).
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as CalendarStories from './calendar.stories';
+
+<Meta of={CalendarStories} />
+
+<Title />
+<Subtitle>A customizable calendar component for date selection.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Popover Wrap** — Almost always wrap the `Calendar` inside a `Popover` when used as an input field.
+> - **Accessibility** — Use `initialFocus` to ensure the calendar is immediately interactive when opened.
+> - **Formatting** — Use `date-fns` for consistent date display (e.g., `format(date, 'PPP')`).

package/components/ui/card/card.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as CardStories from './card.stories';
-
-<Meta of={CardStories} />
-
-<Title />
-<Subtitle>The primary structural container for content blocks.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **No Raw Divs** — Never use raw Tailwind classes for containers (`bg-white rounded-lg shadow`). Always use `<Card>`.
-> - **Hierarchy** — Use `CardHeader` for titles and descriptions, and `CardFooter` for action buttons.
-> - **Stats** — For KPI displays, use `text-sm font-medium` for titles and `text-2xl font-bold` for values.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as CardStories from './card.stories';
+
+<Meta of={CardStories} />
+
+<Title />
+<Subtitle>The primary structural container for content blocks.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **No Raw Divs** — Never use raw Tailwind classes for containers (`bg-white rounded-lg shadow`). Always use `<Card>`.
+> - **Hierarchy** — Use `CardHeader` for titles and descriptions, and `CardFooter` for action buttons.
+> - **Stats** — For KPI displays, use `text-sm font-medium` for titles and `text-2xl font-bold` for values.

package/components/ui/carousel/carousel.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as CarouselStories from './carousel.stories';
-
-<Meta of={CarouselStories} />
-
-<Title />
-<Subtitle>A responsive content slider with support for mouse and touch navigation.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Grid Control** — Use `md:basis-1/2` or `lg:basis-1/3` on `CarouselItem` to control how many items are visible simultaneously.
-> - **Navigation Layout** — `CarouselPrevious` and `CarouselNext` are positioned relative to the `Carousel` container.
-> - **Options** — Pass Embla Carousel options (like `align`, `loop`) via the `opts` prop.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as CarouselStories from './carousel.stories';
+
+<Meta of={CarouselStories} />
+
+<Title />
+<Subtitle>A responsive content slider with support for mouse and touch navigation.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Grid Control** — Use `md:basis-1/2` or `lg:basis-1/3` on `CarouselItem` to control how many items are visible simultaneously.
+> - **Navigation Layout** — `CarouselPrevious` and `CarouselNext` are positioned relative to the `Carousel` container.
+> - **Options** — Pass Embla Carousel options (like `align`, `loop`) via the `opts` prop.