xertica-ui 2.5.3 → 2.7.0

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.

package/components/ui/chart/chart.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as ChartStories from './chart.stories';
-
-<Meta of={ChartStories} />
-
-<Title />
-<Subtitle>Token-driven, theme-aware chart components built on Recharts.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **No Hard-coded Colors** — Never use hex codes for `fill` or `stroke`. Use `fill="var(--color-yourKey)"`.
-> - **Chart Container** — Always wrap charts in `ChartContainer` to inject the necessary CSS variables from your `ChartConfig`.
-> - **Theme support** — Reference theme-aware colors in `ChartConfig` using `hsl(var(--primary))`.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as ChartStories from './chart.stories';
+
+<Meta of={ChartStories} />
+
+<Title />
+<Subtitle>Token-driven, theme-aware chart components built on Recharts.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **No Hard-coded Colors** — Never use hex codes for `fill` or `stroke`. Use `fill="var(--color-yourKey)"`.
+> - **Chart Container** — Always wrap charts in `ChartContainer` to inject the necessary CSS variables from your `ChartConfig`.
+> - **Theme support** — Reference theme-aware colors in `ChartConfig` using `hsl(var(--primary))`.

package/components/ui/chart/chart.test.tsx

@@ -1,178 +1,178 @@
-/** @vitest-environment jsdom */
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import {
-  ChartContainer,
-  ChartTooltipContent,
-  ChartCard,
-  DashboardBarChart,
-  DashboardLineChart,
-  HorizontalBarChart,
-  ComboMetricChart,
-  DonutBreakdownChart,
-} from './chart';
-import React from 'react';
-
-// Mock recharts
-vi.mock('recharts', () => ({
-  ResponsiveContainer: ({ children }: any) => <div>{children}</div>,
-  Legend: ({ children }: any) => <div>{children}</div>,
-  Tooltip: ({ content, payload, active }: any) => {
-    if (typeof content === 'function') return content({ payload, active });
-    return React.cloneElement(content, { payload, active });
-  },
-  BarChart: ({ children }: any) => <div data-testid="mock-chart">{children}</div>,
-  LineChart: ({ children }: any) => <div data-testid="mock-chart">{children}</div>,
-  AreaChart: ({ children }: any) => <div data-testid="mock-chart">{children}</div>,
-  ComposedChart: ({ children }: any) => <div data-testid="mock-chart">{children}</div>,
-  PieChart: ({ children }: any) => <div data-testid="mock-chart">{children}</div>,
-  CartesianGrid: ({ children }: any) => <div data-testid="mock-primitive">{children}</div>,
-  XAxis: ({ children }: any) => <div data-testid="mock-primitive">{children}</div>,
-  YAxis: ({ children }: any) => <div data-testid="mock-primitive">{children}</div>,
-  Bar: ({ children, dataKey, barSize }: any) => (
-    <div data-testid={`series-${dataKey}`} data-bar-size={barSize}>
-      {children}
-    </div>
-  ),
-  Area: ({ children, dataKey }: any) => <div data-testid={`series-${dataKey}`}>{children}</div>,
-  Line: ({ children, dataKey }: any) => <div data-testid={`series-${dataKey}`}>{children}</div>,
-  Pie: ({ children }: any) => <div data-testid="mock-pie">{children}</div>,
-  Cell: ({ children }: any) => <div data-testid="mock-cell">{children}</div>,
-  Label: ({ children }: any) => <div data-testid="mock-label">{children}</div>,
-}));
-
-describe('Chart Components', () => {
-  const config = {
-    label1: { label: 'Label 1', color: '#000' },
-  };
-
-  it('renders ChartContainer correctly', () => {
-    render(
-      <ChartContainer config={config}>
-        <div data-testid="chart-child">Chart Content</div>
-      </ChartContainer>
-    );
-    expect(screen.getByTestId('chart-child')).toBeInTheDocument();
-  });
-
-  it('renders ChartTooltipContent correctly', () => {
-    const payload = [{ name: 'item1', value: 10, fill: '#000', dataKey: 'label1', graphicalItemId: 'item1' }];
-
-    // Test the content component directly since Tooltip is tricky
-    render(
-      <ChartContainer config={config}>
-        <ChartTooltipContent payload={payload} active={true} />
-      </ChartContainer>
-    );
-
-    expect(screen.getByText('Label 1')).toBeInTheDocument();
-    expect(screen.getByText('10')).toBeInTheDocument();
-  });
-
-  it('renders ChartCard structure', () => {
-    render(
-      <ChartCard title="Revenue" description="Monthly view" footer="Updated now">
-        <div>Chart body</div>
-      </ChartCard>
-    );
-
-    expect(screen.getByText('Revenue')).toBeInTheDocument();
-    expect(screen.getByText('Monthly view')).toBeInTheDocument();
-    expect(screen.getByText('Chart body')).toBeInTheDocument();
-    expect(screen.getByText('Updated now')).toBeInTheDocument();
-    expect(screen.getByText('Revenue').closest('[data-slot="card"]')).toHaveClass('w-full');
-  });
-
-  it('renders dashboard chart series from config', () => {
-    render(
-      <DashboardBarChart
-        data={[{ name: 'Jan', revenue: 100, expenses: 80 }]}
-        config={{
-          revenue: { label: 'Revenue', color: 'var(--chart-1)' },
-          expenses: { label: 'Expenses', color: 'var(--chart-5)' },
-        }}
-        colors={{ revenue: 'var(--chart-1)', expenses: 'var(--chart-5)' }}
-        barSize="lg"
-      />
-    );
-
-    expect(screen.getByTestId('series-revenue')).toBeInTheDocument();
-    expect(screen.getByTestId('series-expenses')).toBeInTheDocument();
-    expect(screen.getByTestId('series-revenue')).toHaveAttribute('data-bar-size', '22');
-  });
-
-  it('renders empty, loading, and connection error states', () => {
-    render(
-      <>
-        <DashboardBarChart
-          data={[]}
-          config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
-        />
-        <DashboardLineChart
-          data={[]}
-          config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
-          isLoading
-        />
-        <HorizontalBarChart
-          data={[{ name: 'Enterprise', revenue: 100 }]}
-          config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
-          error="Unable to connect to the analytics service."
-        />
-      </>
-    );
-
-    expect(screen.getByText('No data available')).toBeInTheDocument();
-    expect(screen.getByLabelText('Loading chart data')).toBeInTheDocument();
-    expect(screen.getByText('Connection error')).toBeInTheDocument();
-    expect(screen.getByText('Unable to connect to the analytics service.')).toBeInTheDocument();
-  });
-
-  it('renders line and horizontal chart series', () => {
-    const config = {
-      revenue: { label: 'Revenue', color: 'var(--chart-1)' },
-      pipeline: { label: 'Pipeline', color: 'var(--chart-4)' },
-    };
-
-    render(
-      <>
-        <DashboardLineChart data={[{ name: 'Jan', revenue: 100, pipeline: 80 }]} config={config} />
-        <HorizontalBarChart
-          data={[{ name: 'Enterprise', revenue: 100 }]}
-          config={config}
-          series={[{ key: 'revenue' }]}
-        />
-      </>
-    );
-
-    expect(screen.getAllByTestId('series-revenue')[0]).toBeInTheDocument();
-    expect(screen.getByTestId('series-pipeline')).toBeInTheDocument();
-  });
-
-  it('renders combo chart and donut chart primitives', () => {
-    const config = {
-      revenue: { label: 'Revenue', color: 'var(--chart-1)' },
-      conversion: { label: 'Conversion', color: 'var(--chart-2)' },
-    };
-
-    render(
-      <>
-        <ComboMetricChart
-          data={[{ name: 'Jan', revenue: 100, conversion: 25 }]}
-          config={config}
-          series={[
-            { key: 'revenue', type: 'bar' },
-            { key: 'conversion', type: 'line' },
-          ]}
-        />
-        <DonutBreakdownChart
-          data={[{ name: 'revenue', value: 100 }]}
-          config={config}
-          centerValue="100"
-        />
-      </>
-    );
-
-    expect(screen.getAllByTestId('series-revenue')[0]).toBeInTheDocument();
-    expect(screen.getByTestId('series-conversion')).toBeInTheDocument();
-  });
-});
+/** @vitest-environment jsdom */
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import {
+  ChartContainer,
+  ChartTooltipContent,
+  ChartCard,
+  DashboardBarChart,
+  DashboardLineChart,
+  HorizontalBarChart,
+  ComboMetricChart,
+  DonutBreakdownChart,
+} from './chart';
+import React from 'react';
+
+// Mock recharts
+vi.mock('recharts', () => ({
+  ResponsiveContainer: ({ children }: any) => <div>{children}</div>,
+  Legend: ({ children }: any) => <div>{children}</div>,
+  Tooltip: ({ content, payload, active }: any) => {
+    if (typeof content === 'function') return content({ payload, active });
+    return React.cloneElement(content, { payload, active });
+  },
+  BarChart: ({ children }: any) => <div data-testid="mock-chart">{children}</div>,
+  LineChart: ({ children }: any) => <div data-testid="mock-chart">{children}</div>,
+  AreaChart: ({ children }: any) => <div data-testid="mock-chart">{children}</div>,
+  ComposedChart: ({ children }: any) => <div data-testid="mock-chart">{children}</div>,
+  PieChart: ({ children }: any) => <div data-testid="mock-chart">{children}</div>,
+  CartesianGrid: ({ children }: any) => <div data-testid="mock-primitive">{children}</div>,
+  XAxis: ({ children }: any) => <div data-testid="mock-primitive">{children}</div>,
+  YAxis: ({ children }: any) => <div data-testid="mock-primitive">{children}</div>,
+  Bar: ({ children, dataKey, barSize }: any) => (
+    <div data-testid={`series-${dataKey}`} data-bar-size={barSize}>
+      {children}
+    </div>
+  ),
+  Area: ({ children, dataKey }: any) => <div data-testid={`series-${dataKey}`}>{children}</div>,
+  Line: ({ children, dataKey }: any) => <div data-testid={`series-${dataKey}`}>{children}</div>,
+  Pie: ({ children }: any) => <div data-testid="mock-pie">{children}</div>,
+  Cell: ({ children }: any) => <div data-testid="mock-cell">{children}</div>,
+  Label: ({ children }: any) => <div data-testid="mock-label">{children}</div>,
+}));
+
+describe('Chart Components', () => {
+  const config = {
+    label1: { label: 'Label 1', color: '#000' },
+  };
+
+  it('renders ChartContainer correctly', () => {
+    render(
+      <ChartContainer config={config}>
+        <div data-testid="chart-child">Chart Content</div>
+      </ChartContainer>
+    );
+    expect(screen.getByTestId('chart-child')).toBeInTheDocument();
+  });
+
+  it('renders ChartTooltipContent correctly', () => {
+    const payload = [{ name: 'item1', value: 10, fill: '#000', dataKey: 'label1', graphicalItemId: 'item1' }];
+
+    // Test the content component directly since Tooltip is tricky
+    render(
+      <ChartContainer config={config}>
+        <ChartTooltipContent payload={payload} active={true} />
+      </ChartContainer>
+    );
+
+    expect(screen.getByText('Label 1')).toBeInTheDocument();
+    expect(screen.getByText('10')).toBeInTheDocument();
+  });
+
+  it('renders ChartCard structure', () => {
+    render(
+      <ChartCard title="Revenue" description="Monthly view" footer="Updated now">
+        <div>Chart body</div>
+      </ChartCard>
+    );
+
+    expect(screen.getByText('Revenue')).toBeInTheDocument();
+    expect(screen.getByText('Monthly view')).toBeInTheDocument();
+    expect(screen.getByText('Chart body')).toBeInTheDocument();
+    expect(screen.getByText('Updated now')).toBeInTheDocument();
+    expect(screen.getByText('Revenue').closest('[data-slot="card"]')).toHaveClass('w-full');
+  });
+
+  it('renders dashboard chart series from config', () => {
+    render(
+      <DashboardBarChart
+        data={[{ name: 'Jan', revenue: 100, expenses: 80 }]}
+        config={{
+          revenue: { label: 'Revenue', color: 'var(--chart-1)' },
+          expenses: { label: 'Expenses', color: 'var(--chart-5)' },
+        }}
+        colors={{ revenue: 'var(--chart-1)', expenses: 'var(--chart-5)' }}
+        barSize="lg"
+      />
+    );
+
+    expect(screen.getByTestId('series-revenue')).toBeInTheDocument();
+    expect(screen.getByTestId('series-expenses')).toBeInTheDocument();
+    expect(screen.getByTestId('series-revenue')).toHaveAttribute('data-bar-size', '22');
+  });
+
+  it('renders empty, loading, and connection error states', () => {
+    render(
+      <>
+        <DashboardBarChart
+          data={[]}
+          config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
+        />
+        <DashboardLineChart
+          data={[]}
+          config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
+          isLoading
+        />
+        <HorizontalBarChart
+          data={[{ name: 'Enterprise', revenue: 100 }]}
+          config={{ revenue: { label: 'Revenue', color: 'var(--chart-1)' } }}
+          error="Unable to connect to the analytics service."
+        />
+      </>
+    );
+
+    expect(screen.getByText('No data available')).toBeInTheDocument();
+    expect(screen.getByLabelText('Loading chart data')).toBeInTheDocument();
+    expect(screen.getByText('Connection error')).toBeInTheDocument();
+    expect(screen.getByText('Unable to connect to the analytics service.')).toBeInTheDocument();
+  });
+
+  it('renders line and horizontal chart series', () => {
+    const config = {
+      revenue: { label: 'Revenue', color: 'var(--chart-1)' },
+      pipeline: { label: 'Pipeline', color: 'var(--chart-4)' },
+    };
+
+    render(
+      <>
+        <DashboardLineChart data={[{ name: 'Jan', revenue: 100, pipeline: 80 }]} config={config} />
+        <HorizontalBarChart
+          data={[{ name: 'Enterprise', revenue: 100 }]}
+          config={config}
+          series={[{ key: 'revenue' }]}
+        />
+      </>
+    );
+
+    expect(screen.getAllByTestId('series-revenue')[0]).toBeInTheDocument();
+    expect(screen.getByTestId('series-pipeline')).toBeInTheDocument();
+  });
+
+  it('renders combo chart and donut chart primitives', () => {
+    const config = {
+      revenue: { label: 'Revenue', color: 'var(--chart-1)' },
+      conversion: { label: 'Conversion', color: 'var(--chart-2)' },
+    };
+
+    render(
+      <>
+        <ComboMetricChart
+          data={[{ name: 'Jan', revenue: 100, conversion: 25 }]}
+          config={config}
+          series={[
+            { key: 'revenue', type: 'bar' },
+            { key: 'conversion', type: 'line' },
+          ]}
+        />
+        <DonutBreakdownChart
+          data={[{ name: 'revenue', value: 100 }]}
+          config={config}
+          centerValue="100"
+        />
+      </>
+    );
+
+    expect(screen.getAllByTestId('series-revenue')[0]).toBeInTheDocument();
+    expect(screen.getByTestId('series-conversion')).toBeInTheDocument();
+  });
+});