xertica-ui 2.5.3 → 2.6.0

package/components/ui/sheet/sheet.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as SheetStories from './sheet.stories';
-
-<Meta of={SheetStories} />
-
-<Title />
-<Subtitle>An edge-anchored slide-in panel for deep-dive editing or filtering.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Side Selection** — Use `side="right"` for sidebars and filters, and `side="left"` for mobile navigation menus.
-> - **Mandatory Title** — Always include a `SheetTitle` for accessibility, even if it's visually simple.
-> - **Closing Logic** — Use a `SheetClose` component around any button intended to dismiss the panel.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as SheetStories from './sheet.stories';
+
+<Meta of={SheetStories} />
+
+<Title />
+<Subtitle>An edge-anchored slide-in panel for deep-dive editing or filtering.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Side Selection** — Use `side="right"` for sidebars and filters, and `side="left"` for mobile navigation menus.
+> - **Mandatory Title** — Always include a `SheetTitle` for accessibility, even if it's visually simple.
+> - **Closing Logic** — Use a `SheetClose` component around any button intended to dismiss the panel.

package/components/ui/simple-map/simple-map.mdx

@@ -1,25 +1,25 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as SimpleMapStories from './simple-map.stories';
-
-<Meta of={SimpleMapStories} />
-
-<Title />
-<Subtitle>A simplified wrapper for Google Maps, optimized for single-location displays.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Center Requirement** — Always provide the `center` prop; without it, the map will fail to initialize.
-> - **Limited Scope** — Use `SimpleMap` for basic single-point visualization. If you need multiple markers, polygons, or complex event handling, use the base `<Map>` component instead.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as SimpleMapStories from './simple-map.stories';
+
+<Meta of={SimpleMapStories} />
+
+<Title />
+<Subtitle>A simplified wrapper for Google Maps, optimized for single-location displays.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Center Requirement** — Always provide the `center` prop; without it, the map will fail to initialize.
+> - **Limited Scope** — Use `SimpleMap` for basic single-point visualization. If you need multiple markers, polygons, or complex event handling, use the base `<Map>` component instead.

package/components/ui/skeleton/skeleton.mdx

@@ -1,25 +1,25 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as SkeletonStories from './skeleton.stories';
-
-<Meta of={SkeletonStories} />
-
-<Title />
-<Subtitle>Used to show a placeholder while content is loading.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Shape Matching** — Match the skeleton dimensions as closely as possible to the final content.
-> - **Animation** — Skeleton components include a subtle pulse animation by default.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as SkeletonStories from './skeleton.stories';
+
+<Meta of={SkeletonStories} />
+
+<Title />
+<Subtitle>Used to show a placeholder while content is loading.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Shape Matching** — Match the skeleton dimensions as closely as possible to the final content.
+> - **Animation** — Skeleton components include a subtle pulse animation by default.

package/components/ui/slider/slider.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as SliderStories from './slider.stories';
-
-<Meta of={SliderStories} />
-
-<Title />
-<Subtitle>A numeric range input for continuous or discrete values.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Array Values** — The `value` prop is always an array, even for single-thumb sliders.
-> - **Interaction** — Use `onValueChange` to handle value updates.
-> - **Visual Feedback** — Always display the numeric value alongside the slider for precise user feedback.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as SliderStories from './slider.stories';
+
+<Meta of={SliderStories} />
+
+<Title />
+<Subtitle>A numeric range input for continuous or discrete values.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Array Values** — The `value` prop is always an array, even for single-thumb sliders.
+> - **Interaction** — Use `onValueChange` to handle value updates.
+> - **Visual Feedback** — Always display the numeric value alongside the slider for precise user feedback.

package/components/ui/sonner/sonner.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as SonnerStories from './sonner.stories';
-
-<Meta of={SonnerStories} />
-
-<Title />
-<Subtitle>An opinionated toast component for React.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Provider Injection** — The `<Toaster>` component is already included in `<XerticaProvider>`. You don't need to add it manually in your app.
-> - **Semantic Toasts** — Use `toast.success`, `toast.error`, and `toast.promise` to match the intent of the notification.
-> - **Actions** — You can add action buttons to toasts for "Undo" or "View" functionality.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as SonnerStories from './sonner.stories';
+
+<Meta of={SonnerStories} />
+
+<Title />
+<Subtitle>An opinionated toast component for React.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Provider Injection** — The `<Toaster>` component is already included in `<XerticaProvider>`. You don't need to add it manually in your app.
+> - **Semantic Toasts** — Use `toast.success`, `toast.error`, and `toast.promise` to match the intent of the notification.
+> - **Actions** — You can add action buttons to toasts for "Undo" or "View" functionality.

package/components/ui/stats-card/stats-card.mdx

@@ -1,26 +1,26 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as StatsCardStories from './stats-card.stories';
-
-<Meta of={StatsCardStories} />
-
-<Title />
-<Subtitle>A pre-configured KPI card for dashboard overview panels.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Variations
-
-<Stories />
-
----
-
-## AI Best Practices
-
-> [!IMPORTANT]
-> - **Trend Direction** — Provide a numeric `trend.value` (positive or negative); the component will automatically select the appropriate icon (Up/Down) and color (Success/Destructive).
-> - **Icon Selection** — Use high-level descriptive icons (e.g., `DollarSign`, `Users`) with `className="size-5"`.
-> - **Formatting** — Pass the `value` as a pre-formatted string (e.g., `"$45,231"`) while passing the `trend.value` as a raw number for built-in calculation.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as StatsCardStories from './stats-card.stories';
+
+<Meta of={StatsCardStories} />
+
+<Title />
+<Subtitle>A pre-configured KPI card for dashboard overview panels.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Variations
+
+<Stories />
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Trend Direction** — Provide a numeric `trend.value` (positive or negative); the component will automatically select the appropriate icon (Up/Down) and color (Success/Destructive).
+> - **Icon Selection** — Use high-level descriptive icons (e.g., `DollarSign`, `Users`) with `className="size-5"`.
+> - **Formatting** — Pass the `value` as a pre-formatted string (e.g., `"$45,231"`) while passing the `trend.value` as a raw number for built-in calculation.

package/components/ui/stats-card/stats-card.stories.tsx

@@ -1,117 +1,117 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { StatsCard } from './stats-card';
-import { StatsCardSkeleton } from './stats-card-skeleton';
-import { DollarSign, Users, Activity, ShoppingCart } from 'lucide-react';
-import React from 'react';
-
-const meta: Meta<typeof StatsCard> = {
-  title: 'UI/StatsCard',
-  component: StatsCard,
-  render: args => <StatsCard {...args} />,
-  argTypes: {
-    title: { control: 'text' },
-    value: { control: 'text' },
-    description: { control: 'text' },
-    iconColor: { control: 'text' },
-    iconBg: { control: 'text' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof StatsCard>;
-
-export const Default: Story = {
-  args: {
-    title: 'Total Revenue',
-    value: '$45,231.89',
-    trend: { value: 20.1, label: 'from last month' },
-    icon: <DollarSign className="size-5" />,
-  },
-  render: args => (
-    <div className="w-[300px]">
-      <StatsCard {...args} />
-    </div>
-  ),
-};
-
-export const CustomColors: Story = {
-  args: {
-    title: 'Active Users',
-    value: '2,350',
-    trend: { value: 8.2, label: 'new this week' },
-    icon: <Users className="size-5" />,
-    iconBg: 'bg-primary/10',
-    iconColor: 'text-primary',
-  },
-  render: args => (
-    <div className="w-[300px]">
-      <StatsCard {...args} />
-    </div>
-  ),
-};
-
-export const NegativeTrend: Story = {
-  args: {
-    title: 'Churn Rate',
-    value: '3.2%',
-    trend: { value: -0.8, label: 'vs last quarter' },
-    icon: <Activity className="size-5" />,
-  },
-  render: args => (
-    <div className="w-[300px]">
-      <StatsCard {...args} />
-    </div>
-  ),
-};
-
-export const Grid: Story = {
-  render: () => (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-      <StatsCard
-        title="Revenue"
-        value="$45,231"
-        trend={{ value: 20.1, label: 'from last month' }}
-        icon={<DollarSign className="size-5" />}
-      />
-      <StatsCard
-        title="Active Users"
-        value="2,350"
-        trend={{ value: 8.2, label: 'new this week' }}
-        icon={<Users className="size-5" />}
-      />
-      <StatsCard
-        title="Conversion"
-        value="3.6%"
-        trend={{ value: -0.4, label: 'vs last month' }}
-        icon={<Activity className="size-5" />}
-      />
-      <StatsCard
-        title="Avg. Ticket"
-        value="$89.40"
-        description="All time average"
-        icon={<ShoppingCart className="size-5" />}
-      />
-    </div>
-  ),
-};
-
-export const SkeletonDefault: Story = {
-  name: 'Skeleton',
-  render: () => (
-    <div className="w-[300px]">
-      <StatsCardSkeleton showIcon showTrend />
-    </div>
-  ),
-};
-
-export const SkeletonGrid: Story = {
-  name: 'Skeleton Grid',
-  render: () => (
-    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-      <StatsCardSkeleton showIcon showTrend />
-      <StatsCardSkeleton showIcon showTrend />
-      <StatsCardSkeleton showIcon showTrend />
-      <StatsCardSkeleton showIcon={false} showTrend={false} />
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { StatsCard } from './stats-card';
+import { StatsCardSkeleton } from './stats-card-skeleton';
+import { DollarSign, Users, Activity, ShoppingCart } from 'lucide-react';
+import React from 'react';
+
+const meta: Meta<typeof StatsCard> = {
+  title: 'UI/StatsCard',
+  component: StatsCard,
+  render: args => <StatsCard {...args} />,
+  argTypes: {
+    title: { control: 'text' },
+    value: { control: 'text' },
+    description: { control: 'text' },
+    iconColor: { control: 'text' },
+    iconBg: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof StatsCard>;
+
+export const Default: Story = {
+  args: {
+    title: 'Total Revenue',
+    value: '$45,231.89',
+    trend: { value: 20.1, label: 'from last month' },
+    icon: <DollarSign className="size-5" />,
+  },
+  render: args => (
+    <div className="w-[300px]">
+      <StatsCard {...args} />
+    </div>
+  ),
+};
+
+export const CustomColors: Story = {
+  args: {
+    title: 'Active Users',
+    value: '2,350',
+    trend: { value: 8.2, label: 'new this week' },
+    icon: <Users className="size-5" />,
+    iconBg: 'bg-primary/10',
+    iconColor: 'text-primary',
+  },
+  render: args => (
+    <div className="w-[300px]">
+      <StatsCard {...args} />
+    </div>
+  ),
+};
+
+export const NegativeTrend: Story = {
+  args: {
+    title: 'Churn Rate',
+    value: '3.2%',
+    trend: { value: -0.8, label: 'vs last quarter' },
+    icon: <Activity className="size-5" />,
+  },
+  render: args => (
+    <div className="w-[300px]">
+      <StatsCard {...args} />
+    </div>
+  ),
+};
+
+export const Grid: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      <StatsCard
+        title="Revenue"
+        value="$45,231"
+        trend={{ value: 20.1, label: 'from last month' }}
+        icon={<DollarSign className="size-5" />}
+      />
+      <StatsCard
+        title="Active Users"
+        value="2,350"
+        trend={{ value: 8.2, label: 'new this week' }}
+        icon={<Users className="size-5" />}
+      />
+      <StatsCard
+        title="Conversion"
+        value="3.6%"
+        trend={{ value: -0.4, label: 'vs last month' }}
+        icon={<Activity className="size-5" />}
+      />
+      <StatsCard
+        title="Avg. Ticket"
+        value="$89.40"
+        description="All time average"
+        icon={<ShoppingCart className="size-5" />}
+      />
+    </div>
+  ),
+};
+
+export const SkeletonDefault: Story = {
+  name: 'Skeleton',
+  render: () => (
+    <div className="w-[300px]">
+      <StatsCardSkeleton showIcon showTrend />
+    </div>
+  ),
+};
+
+export const SkeletonGrid: Story = {
+  name: 'Skeleton Grid',
+  render: () => (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      <StatsCardSkeleton showIcon showTrend />
+      <StatsCardSkeleton showIcon showTrend />
+      <StatsCardSkeleton showIcon showTrend />
+      <StatsCardSkeleton showIcon={false} showTrend={false} />
+    </div>
+  ),
+};