xertica-ui 2.2.0 → 2.3.0

package/components/blocks/card-patterns/QuickActionCardSkeleton.tsx

@@ -1,44 +1,44 @@
-'use client';
-
-import * as React from 'react';
-import { Card, CardContent } from '../../ui/card';
-import { Skeleton } from '../../ui/skeleton';
-import { cn } from '../../shared/utils';
-
-export interface QuickActionCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-/**
- * Loading placeholder for `QuickActionCard`.
- *
- * @description
- * Mirrors the visual layout of `QuickActionCard`: icon block + optional badge
- * in the top row, title + description text, and an action button.
- *
- * @example
- * ```tsx
- * {isLoading ? <QuickActionCardSkeleton /> : <QuickActionCard {...data} />}
- * ```
- */
-export function QuickActionCardSkeleton({ className, ...props }: QuickActionCardSkeletonProps) {
-  return (
-    <Card className={cn('w-full', className)} {...props}>
-      <CardContent className="pt-6 flex flex-col items-start gap-4">
-        {/* Icon + badge row */}
-        <div className="flex items-start justify-between w-full">
-          <Skeleton className="size-10 rounded-[var(--radius)]" />
-          <Skeleton className="h-5 w-14 rounded-full" />
-        </div>
-
-        {/* Title + description */}
-        <div className="space-y-1.5 flex-1 w-full">
-          <Skeleton className="h-4 w-3/4" />
-          <Skeleton className="h-3 w-full" />
-          <Skeleton className="h-3 w-5/6" />
-        </div>
-
-        {/* Action button */}
-        <Skeleton className="h-8 w-full rounded-md" />
-      </CardContent>
-    </Card>
-  );
-}
+'use client';
+
+import * as React from 'react';
+import { Card, CardContent } from '../../ui/card';
+import { Skeleton } from '../../ui/skeleton';
+import { cn } from '../../shared/utils';
+
+export interface QuickActionCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+/**
+ * Loading placeholder for `QuickActionCard`.
+ *
+ * @description
+ * Mirrors the visual layout of `QuickActionCard`: icon block + optional badge
+ * in the top row, title + description text, and an action button.
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? <QuickActionCardSkeleton /> : <QuickActionCard {...data} />}
+ * ```
+ */
+export function QuickActionCardSkeleton({ className, ...props }: QuickActionCardSkeletonProps) {
+  return (
+    <Card className={cn('w-full', className)} {...props}>
+      <CardContent className="pt-6 flex flex-col items-start gap-4">
+        {/* Icon + badge row */}
+        <div className="flex items-start justify-between w-full">
+          <Skeleton className="size-10 rounded-[var(--radius)]" />
+          <Skeleton className="h-5 w-14 rounded-full" />
+        </div>
+
+        {/* Title + description */}
+        <div className="space-y-1.5 flex-1 w-full">
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-3 w-full" />
+          <Skeleton className="h-3 w-5/6" />
+        </div>
+
+        {/* Action button */}
+        <Skeleton className="h-8 w-full rounded-md" />
+      </CardContent>
+    </Card>
+  );
+}

package/components/blocks/card-patterns/card-patterns.mdx

@@ -1,123 +1,123 @@
-import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
-import * as CardPatternsStories from './card-patterns.stories';
-
-<Meta of={CardPatternsStories} />
-
-<Title />
-<Subtitle>Pre-composed card blocks for dashboards and feature pages — plus matching skeleton variants for loading states.</Subtitle>
-
-<Description />
-
-<Primary />
-
----
-
-## Overview
-
-Six composed card components built exclusively from `ui/` primitives — no external dependencies. Each card has a matching `*Skeleton` companion that mirrors its layout with pulsing placeholders for use while data is loading.
-
-| Card                | Skeleton companion         |
-| ------------------- | -------------------------- |
-| `ActivityCard`      | `ActivityCardSkeleton`     |
-| `ProfileCard`       | `ProfileCardSkeleton`      |
-| `ProjectCard`       | `ProjectCardSkeleton`      |
-| `NotificationCard`  | `NotificationCardSkeleton` |
-| `QuickActionCard`   | `QuickActionCardSkeleton`  |
-| `FeatureCard`       | `FeatureCardSkeleton`      |
-
-> A matching `StatsCardSkeleton` is also available from `xertica-ui` (lives in `ui/stats-card/`).
-
----
-
-## Import
-
-```tsx
-// All cards and skeletons are re-exported from the root barrel
-import {
-  ActivityCard, ActivityCardSkeleton,
-  ProfileCard, ProfileCardSkeleton,
-  ProjectCard, ProjectCardSkeleton,
-  NotificationCard, NotificationCardSkeleton,
-  QuickActionCard, QuickActionCardSkeleton,
-  FeatureCard, FeatureCardSkeleton,
-} from 'xertica-ui';
-```
-
----
-
-## When to Use Cards
-
-- You need a recurring dashboard pattern (activity feed, KPI, project status, notifications) and don't want to re-compose it from scratch in every feature.
-- The pattern is stable and reused across multiple pages.
-
-## When NOT to Use Cards
-
-- One-off layouts specific to a single page — compose directly from `Card` and `ui/` primitives instead.
-- When the pattern has significant data-fetching logic — keep the block as a pure presentational component and handle state in the feature layer.
-
----
-
-## Loading-state pattern
-
-Always pair each card with its matching `*Skeleton` for loading states — never render a spinner or empty container while data fetches. The skeleton variants mirror the final layout closely, preventing layout shift when data arrives.
-
-```tsx
-function ActivityFeed() {
-  const { data: items, isLoading } = useActivityItems();
-
-  if (isLoading) return <ActivityCardSkeleton rows={5} />;
-  return <ActivityCard items={items!} />;
-}
-```
-
-For grids, render one skeleton per expected card:
-
-```tsx
-{isLoading ? (
-  <>
-    <FeatureCardSkeleton showAction />
-    <FeatureCardSkeleton showAction />
-    <FeatureCardSkeleton showAction />
-  </>
-) : (
-  data.map(item => <FeatureCard key={item.id} {...item} />)
-)}
-```
-
----
-
-## Skeleton configuration
-
-Each skeleton accepts props that tune which layout regions are rendered, so the placeholder matches the loaded state exactly.
-
-| Skeleton                   | Props                                       |
-| -------------------------- | ------------------------------------------- |
-| `ActivityCardSkeleton`     | `rows` (default `5`)                        |
-| `ProfileCardSkeleton`      | `showStats`, `showActions`                  |
-| `ProjectCardSkeleton`      | `memberCount` (default `3`)                 |
-| `NotificationCardSkeleton` | `rows` (default `4`), `showViewAll`         |
-| `QuickActionCardSkeleton`  | —                                           |
-| `FeatureCardSkeleton`      | `showAction`                                |
-| `StatsCardSkeleton`        | `showIcon`, `showTrend`                     |
-
-Set `rows={maxItems}` on list-style skeletons to match the loaded state's row count.
-
----
-
-## Stories
-
-<Stories />
-
----
-
-## AI Rules
-
-> [!IMPORTANT]
->
-> - **Import block components from `xertica-ui`** — they are included in the root barrel.
-> - **Pass all data as props** — never embed fetch calls inside block components.
-> - **Keep `maxItems` at a sensible limit (4–6)** to avoid overflow in fixed-height containers.
-> - **Always pair each card with its matching `*Skeleton`** — do not render a spinner or empty container while data fetches.
-> - **Skeleton row counts should match the expected data count** — pass `rows={maxItems}` to `ActivityCardSkeleton`/`NotificationCardSkeleton`.
-> - **For chart panels**, use `ChartCard` from `xertica-ui/ui` (not a block component) with any dashboard-ready chart as `children`.
-> - **`FeatureCard` badge wraps to a new line** when title + badge don't fit — this is intentional; do not constrain the container width to force inline layout.
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Canvas } from '@storybook/addon-docs/blocks';
+import * as CardPatternsStories from './card-patterns.stories';
+
+<Meta of={CardPatternsStories} />
+
+<Title />
+<Subtitle>Pre-composed card blocks for dashboards and feature pages — plus matching skeleton variants for loading states.</Subtitle>
+
+<Description />
+
+<Primary />
+
+---
+
+## Overview
+
+Six composed card components built exclusively from `ui/` primitives — no external dependencies. Each card has a matching `*Skeleton` companion that mirrors its layout with pulsing placeholders for use while data is loading.
+
+| Card                | Skeleton companion         |
+| ------------------- | -------------------------- |
+| `ActivityCard`      | `ActivityCardSkeleton`     |
+| `ProfileCard`       | `ProfileCardSkeleton`      |
+| `ProjectCard`       | `ProjectCardSkeleton`      |
+| `NotificationCard`  | `NotificationCardSkeleton` |
+| `QuickActionCard`   | `QuickActionCardSkeleton`  |
+| `FeatureCard`       | `FeatureCardSkeleton`      |
+
+> A matching `StatsCardSkeleton` is also available from `xertica-ui` (lives in `ui/stats-card/`).
+
+---
+
+## Import
+
+```tsx
+// All cards and skeletons are re-exported from the root barrel
+import {
+  ActivityCard, ActivityCardSkeleton,
+  ProfileCard, ProfileCardSkeleton,
+  ProjectCard, ProjectCardSkeleton,
+  NotificationCard, NotificationCardSkeleton,
+  QuickActionCard, QuickActionCardSkeleton,
+  FeatureCard, FeatureCardSkeleton,
+} from 'xertica-ui';
+```
+
+---
+
+## When to Use Cards
+
+- You need a recurring dashboard pattern (activity feed, KPI, project status, notifications) and don't want to re-compose it from scratch in every feature.
+- The pattern is stable and reused across multiple pages.
+
+## When NOT to Use Cards
+
+- One-off layouts specific to a single page — compose directly from `Card` and `ui/` primitives instead.
+- When the pattern has significant data-fetching logic — keep the block as a pure presentational component and handle state in the feature layer.
+
+---
+
+## Loading-state pattern
+
+Always pair each card with its matching `*Skeleton` for loading states — never render a spinner or empty container while data fetches. The skeleton variants mirror the final layout closely, preventing layout shift when data arrives.
+
+```tsx
+function ActivityFeed() {
+  const { data: items, isLoading } = useActivityItems();
+
+  if (isLoading) return <ActivityCardSkeleton rows={5} />;
+  return <ActivityCard items={items!} />;
+}
+```
+
+For grids, render one skeleton per expected card:
+
+```tsx
+{isLoading ? (
+  <>
+    <FeatureCardSkeleton showAction />
+    <FeatureCardSkeleton showAction />
+    <FeatureCardSkeleton showAction />
+  </>
+) : (
+  data.map(item => <FeatureCard key={item.id} {...item} />)
+)}
+```
+
+---
+
+## Skeleton configuration
+
+Each skeleton accepts props that tune which layout regions are rendered, so the placeholder matches the loaded state exactly.
+
+| Skeleton                   | Props                                       |
+| -------------------------- | ------------------------------------------- |
+| `ActivityCardSkeleton`     | `rows` (default `5`)                        |
+| `ProfileCardSkeleton`      | `showStats`, `showActions`                  |
+| `ProjectCardSkeleton`      | `memberCount` (default `3`)                 |
+| `NotificationCardSkeleton` | `rows` (default `4`), `showViewAll`         |
+| `QuickActionCardSkeleton`  | —                                           |
+| `FeatureCardSkeleton`      | `showAction`                                |
+| `StatsCardSkeleton`        | `showIcon`, `showTrend`                     |
+
+Set `rows={maxItems}` on list-style skeletons to match the loaded state's row count.
+
+---
+
+## Stories
+
+<Stories />
+
+---
+
+## AI Rules
+
+> [!IMPORTANT]
+>
+> - **Import block components from `xertica-ui`** — they are included in the root barrel.
+> - **Pass all data as props** — never embed fetch calls inside block components.
+> - **Keep `maxItems` at a sensible limit (4–6)** to avoid overflow in fixed-height containers.
+> - **Always pair each card with its matching `*Skeleton`** — do not render a spinner or empty container while data fetches.
+> - **Skeleton row counts should match the expected data count** — pass `rows={maxItems}` to `ActivityCardSkeleton`/`NotificationCardSkeleton`.
+> - **For chart panels**, use `ChartCard` from `xertica-ui/ui` (not a block component) with any dashboard-ready chart as `children`.
+> - **`FeatureCard` badge wraps to a new line** when title + badge don't fit — this is intentional; do not constrain the container width to force inline layout.

package/components/blocks/index.ts

@@ -1 +1 @@
-export * from './card-patterns';
+export * from './card-patterns';

package/components/brand/branding/branding.stories.tsx

@@ -1,57 +1,57 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { XerticaLogo } from '../../brand/xertica-logo';
-import { XerticaXLogo } from '../../brand/xertica-xlogo';
-import React from 'react';
-
-const meta: Meta = {
-  title: 'Brand/Branding',
-  parameters: {
-    layout: 'centered',
-  },
-};
-
-export default meta;
-
-export const Logos: StoryObj = {
-  render: () => (
-    <div className="space-y-12 p-10">
-      <section className="space-y-4">
-        <h3 className="text-lg font-semibold text-muted-foreground border-b pb-2">Full Logo</h3>
-        <div className="flex flex-wrap gap-8 items-center bg-muted/20 p-8 rounded-xl">
-          <div className="space-y-2 text-center">
-            <XerticaLogo variant="default" className="h-10 w-auto" />
-            <span className="text-xs text-muted-foreground">Default</span>
-          </div>
-          <div className="space-y-2 text-center">
-            <XerticaLogo variant="theme" className="h-10 w-auto" />
-            <span className="text-xs text-muted-foreground">Theme</span>
-          </div>
-          <div className="space-y-2 text-center bg-slate-900 p-4 rounded-lg">
-            <XerticaLogo variant="white" className="h-10 w-auto" />
-            <span className="text-xs text-[#94a3b8]">White</span>
-          </div>
-          <div className="space-y-2 text-center">
-            <XerticaLogo variant="theme" className="h-10 w-auto" />
-            <span className="text-xs text-muted-foreground">Theme-Aware</span>
-          </div>
-        </div>
-      </section>
-
-      <section className="space-y-4">
-        <h3 className="text-lg font-semibold text-muted-foreground border-b pb-2">
-          Icon Only (X-Logo)
-        </h3>
-        <div className="flex flex-wrap gap-8 items-center bg-muted/20 p-8 rounded-xl">
-          <div className="space-y-2 text-center">
-            <XerticaXLogo className="h-12 w-12 text-primary" />
-            <span className="text-xs text-muted-foreground">Primary</span>
-          </div>
-          <div className="space-y-2 text-center bg-slate-900 p-4 rounded-lg">
-            <XerticaXLogo variant="white" className="h-12 w-12" />
-            <span className="text-xs text-[#94a3b8]">White</span>
-          </div>
-        </div>
-      </section>
-    </div>
-  ),
-};
+import type { Meta, StoryObj } from '@storybook/react';
+import { XerticaLogo } from '../../brand/xertica-logo';
+import { XerticaXLogo } from '../../brand/xertica-xlogo';
+import React from 'react';
+
+const meta: Meta = {
+  title: 'Brand/Branding',
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+
+export const Logos: StoryObj = {
+  render: () => (
+    <div className="space-y-12 p-10">
+      <section className="space-y-4">
+        <h3 className="text-lg font-semibold text-muted-foreground border-b pb-2">Full Logo</h3>
+        <div className="flex flex-wrap gap-8 items-center bg-muted/20 p-8 rounded-xl">
+          <div className="space-y-2 text-center">
+            <XerticaLogo variant="default" className="h-10 w-auto" />
+            <span className="text-xs text-muted-foreground">Default</span>
+          </div>
+          <div className="space-y-2 text-center">
+            <XerticaLogo variant="theme" className="h-10 w-auto" />
+            <span className="text-xs text-muted-foreground">Theme</span>
+          </div>
+          <div className="space-y-2 text-center bg-slate-900 p-4 rounded-lg">
+            <XerticaLogo variant="white" className="h-10 w-auto" />
+            <span className="text-xs text-[#94a3b8]">White</span>
+          </div>
+          <div className="space-y-2 text-center">
+            <XerticaLogo variant="theme" className="h-10 w-auto" />
+            <span className="text-xs text-muted-foreground">Theme-Aware</span>
+          </div>
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <h3 className="text-lg font-semibold text-muted-foreground border-b pb-2">
+          Icon Only (X-Logo)
+        </h3>
+        <div className="flex flex-wrap gap-8 items-center bg-muted/20 p-8 rounded-xl">
+          <div className="space-y-2 text-center">
+            <XerticaXLogo className="h-12 w-12 text-primary" />
+            <span className="text-xs text-muted-foreground">Primary</span>
+          </div>
+          <div className="space-y-2 text-center bg-slate-900 p-4 rounded-lg">
+            <XerticaXLogo variant="white" className="h-12 w-12" />
+            <span className="text-xs text-[#94a3b8]">White</span>
+          </div>
+        </div>
+      </section>
+    </div>
+  ),
+};

package/components/brand/index.ts

@@ -1,6 +1,6 @@
-export * from './xertica-provider';
-export * from './xertica-logo';
-export * from './xertica-xlogo';
-export * from './xertica-orbe';
-export * from './theme-toggle';
-export * from './language-selector';
+export * from './xertica-provider';
+export * from './xertica-logo';
+export * from './xertica-xlogo';
+export * from './xertica-orbe';
+export * from './theme-toggle';
+export * from './language-selector';