xertica-ui 2.5.1 → 2.5.2

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

@@ -10,14 +10,14 @@ import * as SimpleMapStories from './simple-map.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/skeleton/skeleton.mdx

@@ -10,14 +10,14 @@ import * as SkeletonStories from './skeleton.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/slider/slider.mdx

@@ -10,14 +10,14 @@ import * as SliderStories from './slider.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/sonner/sonner.mdx

@@ -10,14 +10,14 @@ import * as SonnerStories from './sonner.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/stats-card/index.ts

@@ -1,2 +1,2 @@
-export * from './stats-card';
-export * from './stats-card-skeleton';
+export * from './stats-card';
+export * from './stats-card-skeleton';

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

@@ -1,60 +1,60 @@
-import * as React from 'react';
-import { Card, CardContent } from '../card';
-import { Skeleton } from '../skeleton';
-import { cn } from '../../shared/utils';
-
-interface StatsCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Whether to show the icon placeholder on the right */
-  showIcon?: boolean;
-  /** Whether to show the trend indicator placeholder */
-  showTrend?: boolean;
-}
-
-/**
- * Loading placeholder for `StatsCard`.
- *
- * @description
- * Mirrors the visual layout of `StatsCard`: title line, large value + optional
- * trend badge, description line below, and an optional icon block on the right.
- *
- * @example
- * ```tsx
- * {isLoading ? <StatsCardSkeleton showIcon showTrend /> : <StatsCard {...data} />}
- * ```
- */
-function StatsCardSkeleton({
-  showIcon = true,
-  showTrend = true,
-  className,
-  ...props
-}: StatsCardSkeletonProps) {
-  return (
-    <Card className={cn('', className)} {...props}>
-      <CardContent className="p-4 sm:p-6">
-        <div className="flex items-start justify-between gap-3">
-          <div className="flex-1 min-w-0">
-            {/* Title */}
-            <Skeleton className="h-3.5 w-28 mb-2" />
-
-            {/* Value + trend */}
-            <div className="flex flex-wrap items-baseline gap-2">
-              <Skeleton className="h-7 w-24" />
-              {showTrend && <Skeleton className="h-4 w-14 rounded-full" />}
-            </div>
-
-            {/* Description */}
-            <Skeleton className="h-3 w-32 mt-2" />
-          </div>
-
-          {/* Icon block */}
-          {showIcon && <Skeleton className="size-9 sm:size-11 rounded-[var(--radius)] shrink-0" />}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-StatsCardSkeleton.displayName = 'StatsCardSkeleton';
-
-export { StatsCardSkeleton };
-export type { StatsCardSkeletonProps };
+import * as React from 'react';
+import { Card, CardContent } from '../card';
+import { Skeleton } from '../skeleton';
+import { cn } from '../../shared/utils';
+
+interface StatsCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Whether to show the icon placeholder on the right */
+  showIcon?: boolean;
+  /** Whether to show the trend indicator placeholder */
+  showTrend?: boolean;
+}
+
+/**
+ * Loading placeholder for `StatsCard`.
+ *
+ * @description
+ * Mirrors the visual layout of `StatsCard`: title line, large value + optional
+ * trend badge, description line below, and an optional icon block on the right.
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? <StatsCardSkeleton showIcon showTrend /> : <StatsCard {...data} />}
+ * ```
+ */
+function StatsCardSkeleton({
+  showIcon = true,
+  showTrend = true,
+  className,
+  ...props
+}: StatsCardSkeletonProps) {
+  return (
+    <Card className={cn('', className)} {...props}>
+      <CardContent className="p-4 sm:p-6">
+        <div className="flex items-start justify-between gap-3">
+          <div className="flex-1 min-w-0">
+            {/* Title */}
+            <Skeleton className="h-3.5 w-28 mb-2" />
+
+            {/* Value + trend */}
+            <div className="flex flex-wrap items-baseline gap-2">
+              <Skeleton className="h-7 w-24" />
+              {showTrend && <Skeleton className="h-4 w-14 rounded-full" />}
+            </div>
+
+            {/* Description */}
+            <Skeleton className="h-3 w-32 mt-2" />
+          </div>
+
+          {/* Icon block */}
+          {showIcon && <Skeleton className="size-9 sm:size-11 rounded-[var(--radius)] shrink-0" />}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+StatsCardSkeleton.displayName = 'StatsCardSkeleton';
+
+export { StatsCardSkeleton };
+export type { StatsCardSkeletonProps };

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

@@ -10,14 +10,14 @@ import * as StatsCardStories from './stats-card.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

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

@@ -1,109 +1,109 @@
-import * as React from 'react';
-import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
-import { cn } from '../../shared/utils';
-import { Card, CardContent } from '../card';
-
-interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  value: string | number;
-  description?: string;
-  trend?: {
-    value: number;
-    label?: string;
-  };
-  icon?: React.ReactNode;
-  /**
-   * Tailwind class for the icon text/foreground color.
-   * @default "text-muted-foreground"
-   */
-  iconColor?: string;
-  /**
-   * Tailwind class for the icon background color.
-   * @default "bg-muted"
-   */
-  iconBg?: string;
-}
-
-/**
- * KPI metric card for dashboard overview pages.
- *
- * @description
- * Standardized layout for displaying a metric title, a large value, an
- * optional icon, and an optional trend indicator with automatic up/down/neutral
- * icon and color. Built on top of `<Card>`.
- *
- * @ai-rules
- * 1. Provide the `icon` as a Lucide React element with `className="size-5"`.
- * 2. `trend.value` is a raw number (e.g., `20.1` for +20.1%) — the component
- *    displays `Math.abs(value)%` automatically. Do NOT pre-format as string.
- * 3. `value` IS a pre-formatted display string: `"$45,231"`, `"3.6%"`, etc.
- * 4. `trend.label` takes precedence over `description` for below-value text.
- */
-const StatsCard = React.forwardRef<HTMLDivElement, StatsCardProps>(
-  ({ className, title, value, description, trend, icon, iconColor, iconBg, ...props }, ref) => {
-    const getTrendIcon = () => {
-      if (!trend) return null;
-
-      if (trend.value > 0) {
-        return <TrendingUp className="h-4 w-4 text-success" />;
-      } else if (trend.value < 0) {
-        return <TrendingDown className="h-4 w-4 text-destructive" />;
-      } else {
-        return <Minus className="h-4 w-4 text-muted-foreground" />;
-      }
-    };
-
-    const getTrendColor = () => {
-      if (!trend) return '';
-
-      if (trend.value > 0) {
-        return 'text-success';
-      } else if (trend.value < 0) {
-        return 'text-destructive';
-      } else {
-        return 'text-muted-foreground';
-      }
-    };
-
-    return (
-      <Card ref={ref} className={cn('', className)} {...props}>
-        <CardContent className="p-4 sm:p-6">
-          <div className="flex items-start justify-between gap-3">
-            <div className="flex-1 min-w-0">
-              <p className="text-muted-foreground mb-1 text-sm">{title}</p>
-              <div className="flex flex-wrap items-baseline gap-2">
-                <h3 className="text-foreground text-xl sm:text-2xl">{value}</h3>
-                {trend && (
-                  <div className={cn('flex items-center gap-1 text-sm', getTrendColor())}>
-                    {getTrendIcon()}
-                    <span>{Math.abs(trend.value)}%</span>
-                  </div>
-                )}
-              </div>
-              {(description || trend?.label) && (
-                <p className="text-muted-foreground mt-1 text-xs sm:text-sm">
-                  {trend?.label || description}
-                </p>
-              )}
-            </div>
-            {icon && (
-              <div
-                className={cn(
-                  'rounded-[var(--radius)] p-2 sm:p-3 flex-shrink-0',
-                  iconBg || 'bg-muted',
-                  iconColor || 'text-muted-foreground'
-                )}
-              >
-                {icon}
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-    );
-  }
-);
-StatsCard.displayName = 'StatsCard';
-
-export { StatsCard };
-export type { StatsCardProps };
+import * as React from 'react';
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import { cn } from '../../shared/utils';
+import { Card, CardContent } from '../card';
+
+interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  value: string | number;
+  description?: string;
+  trend?: {
+    value: number;
+    label?: string;
+  };
+  icon?: React.ReactNode;
+  /**
+   * Tailwind class for the icon text/foreground color.
+   * @default "text-muted-foreground"
+   */
+  iconColor?: string;
+  /**
+   * Tailwind class for the icon background color.
+   * @default "bg-muted"
+   */
+  iconBg?: string;
+}
+
+/**
+ * KPI metric card for dashboard overview pages.
+ *
+ * @description
+ * Standardized layout for displaying a metric title, a large value, an
+ * optional icon, and an optional trend indicator with automatic up/down/neutral
+ * icon and color. Built on top of `<Card>`.
+ *
+ * @ai-rules
+ * 1. Provide the `icon` as a Lucide React element with `className="size-5"`.
+ * 2. `trend.value` is a raw number (e.g., `20.1` for +20.1%) — the component
+ *    displays `Math.abs(value)%` automatically. Do NOT pre-format as string.
+ * 3. `value` IS a pre-formatted display string: `"$45,231"`, `"3.6%"`, etc.
+ * 4. `trend.label` takes precedence over `description` for below-value text.
+ */
+const StatsCard = React.forwardRef<HTMLDivElement, StatsCardProps>(
+  ({ className, title, value, description, trend, icon, iconColor, iconBg, ...props }, ref) => {
+    const getTrendIcon = () => {
+      if (!trend) return null;
+
+      if (trend.value > 0) {
+        return <TrendingUp className="h-4 w-4 text-success" />;
+      } else if (trend.value < 0) {
+        return <TrendingDown className="h-4 w-4 text-destructive" />;
+      } else {
+        return <Minus className="h-4 w-4 text-muted-foreground" />;
+      }
+    };
+
+    const getTrendColor = () => {
+      if (!trend) return '';
+
+      if (trend.value > 0) {
+        return 'text-success';
+      } else if (trend.value < 0) {
+        return 'text-destructive';
+      } else {
+        return 'text-muted-foreground';
+      }
+    };
+
+    return (
+      <Card ref={ref} className={cn('', className)} {...props}>
+        <CardContent className="p-4 sm:p-6">
+          <div className="flex items-start justify-between gap-3">
+            <div className="flex-1 min-w-0">
+              <p className="text-muted-foreground mb-1 text-sm">{title}</p>
+              <div className="flex flex-wrap items-baseline gap-2">
+                <h3 className="text-foreground text-xl sm:text-2xl">{value}</h3>
+                {trend && (
+                  <div className={cn('flex items-center gap-1 text-sm', getTrendColor())}>
+                    {getTrendIcon()}
+                    <span>{Math.abs(trend.value)}%</span>
+                  </div>
+                )}
+              </div>
+              {(description || trend?.label) && (
+                <p className="text-muted-foreground mt-1 text-xs sm:text-sm">
+                  {trend?.label || description}
+                </p>
+              )}
+            </div>
+            {icon && (
+              <div
+                className={cn(
+                  'rounded-[var(--radius)] p-2 sm:p-3 flex-shrink-0',
+                  iconBg || 'bg-muted',
+                  iconColor || 'text-muted-foreground'
+                )}
+              >
+                {icon}
+              </div>
+            )}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+);
+StatsCard.displayName = 'StatsCard';
+
+export { StatsCard };
+export type { StatsCardProps };

package/components/ui/stepper/stepper.mdx

@@ -10,14 +10,14 @@ import * as StepperStories from './stepper.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/switch/switch.mdx

@@ -10,14 +10,14 @@ import * as SwitchStories from './switch.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/table/table.mdx

@@ -10,14 +10,14 @@ import * as TableStories from './table.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/tabs/tabs.mdx

@@ -10,14 +10,14 @@ import * as TabsStories from './tabs.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/textarea/textarea.mdx

@@ -10,14 +10,14 @@ import * as TextareaStories from './textarea.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/timeline/timeline.mdx

@@ -10,14 +10,14 @@ import * as TimelineStories from './timeline.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/toggle/toggle.mdx

@@ -10,14 +10,14 @@ import * as ToggleStories from './toggle.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/toggle-group/toggle-group.mdx

@@ -10,14 +10,14 @@ import * as ToggleGroupStories from './toggle-group.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]

package/components/ui/tooltip/tooltip.mdx

@@ -10,14 +10,14 @@ import * as TooltipStories from './tooltip.stories';
 
 <Primary />
 
----
-
-## Variations
-
-<Stories />
-
----
-
+---
+
+## Variations
+
+<Stories />
+
+---
+
 ## AI Best Practices
 
 > [!IMPORTANT]