xertica-ui 2.4.0 → 2.5.0

package/components/ui/resizable/resizable.mdx

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

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

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

package/components/ui/scroll-area/scroll-area.mdx

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

package/components/ui/search/search.mdx

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

package/components/ui/select/select.mdx

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

package/components/ui/separator/separator.mdx

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

package/components/ui/sheet/sheet.mdx

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

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.stories.tsx

@@ -1,99 +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' },
-  },
-};
-
-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 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>
+  ),
+};

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

@@ -12,6 +12,16 @@ interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
     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;
 }
 
 /**
@@ -30,7 +40,7 @@ interface StatsCardProps extends React.HTMLAttributes<HTMLDivElement> {
  * 4. `trend.label` takes precedence over `description` for below-value text.
  */
 const StatsCard = React.forwardRef<HTMLDivElement, StatsCardProps>(
-  ({ className, title, value, description, trend, icon, ...props }, ref) => {
+  ({ className, title, value, description, trend, icon, iconColor, iconBg, ...props }, ref) => {
     const getTrendIcon = () => {
       if (!trend) return null;
 
@@ -77,7 +87,13 @@ const StatsCard = React.forwardRef<HTMLDivElement, StatsCardProps>(
               )}
             </div>
             {icon && (
-              <div className="rounded-[var(--radius)] bg-muted p-2 sm:p-3 text-muted-foreground flex-shrink-0">
+              <div
+                className={cn(
+                  'rounded-[var(--radius)] p-2 sm:p-3 flex-shrink-0',
+                  iconBg || 'bg-muted',
+                  iconColor || 'text-muted-foreground'
+                )}
+              >
                 {icon}
               </div>
             )}