xertica-ui 2.2.1 → 2.3.0

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

@@ -1,81 +1,81 @@
-'use client';
-
-import * as React from 'react';
-import { Card, CardHeader, CardContent, CardFooter } from '../../ui/card';
-import { Skeleton } from '../../ui/skeleton';
-import { cn } from '../../shared/utils';
-
-export interface NotificationCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Number of notification rows to display (mirrors `maxItems` on NotificationCard) */
-  rows?: number;
-  /** Whether to show the "View all" footer button placeholder */
-  showViewAll?: boolean;
-}
-
-/**
- * Loading placeholder for `NotificationCard`.
- *
- * @description
- * Mirrors the visual layout of `NotificationCard`: header with title + badge,
- * a list of notification rows (icon + title + message + timestamp), and an
- * optional "View all" footer.
- *
- * @example
- * ```tsx
- * {isLoading ? <NotificationCardSkeleton rows={4} showViewAll /> : <NotificationCard items={items} />}
- * ```
- */
-export function NotificationCardSkeleton({
-  rows = 4,
-  showViewAll = false,
-  className,
-  ...props
-}: NotificationCardSkeletonProps) {
-  return (
-    <Card className={cn('w-full', className)} {...props}>
-      <CardHeader>
-        <div className="flex items-center gap-2">
-          {/* Title */}
-          <Skeleton className="h-5 w-32" />
-          {/* Unread count badge */}
-          <Skeleton className="h-5 w-6 rounded-full" />
-        </div>
-        {/* "Mark all as read" action */}
-        <Skeleton className="h-7 w-32 rounded-md" />
-      </CardHeader>
-
-      <CardContent className="px-0 pb-0">
-        <ul className="divide-y divide-border">
-          {Array.from({ length: rows }).map((_, i) => (
-            <li key={i} className="flex items-start gap-3 px-6 py-3">
-              {/* Icon / avatar circle */}
-              <Skeleton className="size-8 rounded-full shrink-0 mt-0.5" />
-
-              <div className="flex-1 min-w-0 space-y-1.5">
-                {/* Title row */}
-                <div className="flex items-center justify-between gap-2">
-                  <Skeleton className="h-3.5 w-40" />
-                  <Skeleton className="h-4 w-12 rounded-full shrink-0" />
-                </div>
-                {/* Message */}
-                <Skeleton className="h-3 w-full" />
-                <Skeleton className="h-3 w-3/4" />
-                {/* Timestamp */}
-                <Skeleton className="h-2.5 w-16 mt-0.5" />
-              </div>
-
-              {/* Unread dot */}
-              <Skeleton className="size-2 rounded-full shrink-0 mt-2" />
-            </li>
-          ))}
-        </ul>
-      </CardContent>
-
-      {showViewAll && (
-        <CardFooter className="pt-2">
-          <Skeleton className="h-8 w-full rounded-md" />
-        </CardFooter>
-      )}
-    </Card>
-  );
-}
+'use client';
+
+import * as React from 'react';
+import { Card, CardHeader, CardContent, CardFooter } from '../../ui/card';
+import { Skeleton } from '../../ui/skeleton';
+import { cn } from '../../shared/utils';
+
+export interface NotificationCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Number of notification rows to display (mirrors `maxItems` on NotificationCard) */
+  rows?: number;
+  /** Whether to show the "View all" footer button placeholder */
+  showViewAll?: boolean;
+}
+
+/**
+ * Loading placeholder for `NotificationCard`.
+ *
+ * @description
+ * Mirrors the visual layout of `NotificationCard`: header with title + badge,
+ * a list of notification rows (icon + title + message + timestamp), and an
+ * optional "View all" footer.
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? <NotificationCardSkeleton rows={4} showViewAll /> : <NotificationCard items={items} />}
+ * ```
+ */
+export function NotificationCardSkeleton({
+  rows = 4,
+  showViewAll = false,
+  className,
+  ...props
+}: NotificationCardSkeletonProps) {
+  return (
+    <Card className={cn('w-full', className)} {...props}>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          {/* Title */}
+          <Skeleton className="h-5 w-32" />
+          {/* Unread count badge */}
+          <Skeleton className="h-5 w-6 rounded-full" />
+        </div>
+        {/* "Mark all as read" action */}
+        <Skeleton className="h-7 w-32 rounded-md" />
+      </CardHeader>
+
+      <CardContent className="px-0 pb-0">
+        <ul className="divide-y divide-border">
+          {Array.from({ length: rows }).map((_, i) => (
+            <li key={i} className="flex items-start gap-3 px-6 py-3">
+              {/* Icon / avatar circle */}
+              <Skeleton className="size-8 rounded-full shrink-0 mt-0.5" />
+
+              <div className="flex-1 min-w-0 space-y-1.5">
+                {/* Title row */}
+                <div className="flex items-center justify-between gap-2">
+                  <Skeleton className="h-3.5 w-40" />
+                  <Skeleton className="h-4 w-12 rounded-full shrink-0" />
+                </div>
+                {/* Message */}
+                <Skeleton className="h-3 w-full" />
+                <Skeleton className="h-3 w-3/4" />
+                {/* Timestamp */}
+                <Skeleton className="h-2.5 w-16 mt-0.5" />
+              </div>
+
+              {/* Unread dot */}
+              <Skeleton className="size-2 rounded-full shrink-0 mt-2" />
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+
+      {showViewAll && (
+        <CardFooter className="pt-2">
+          <Skeleton className="h-8 w-full rounded-md" />
+        </CardFooter>
+      )}
+    </Card>
+  );
+}

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

@@ -1,69 +1,69 @@
-'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 ProfileCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Whether to show the stats grid row (3 columns) */
-  showStats?: boolean;
-  /** Whether to show the action buttons row */
-  showActions?: boolean;
-}
-
-/**
- * Loading placeholder for `ProfileCard`.
- *
- * @description
- * Mirrors the visual layout of `ProfileCard`: centered avatar, name + role
- * text lines, optional stats grid, and optional action buttons.
- *
- * @example
- * ```tsx
- * {isLoading ? <ProfileCardSkeleton showStats showActions /> : <ProfileCard {...data} />}
- * ```
- */
-export function ProfileCardSkeleton({
-  showStats = true,
-  showActions = true,
-  className,
-  ...props
-}: ProfileCardSkeletonProps) {
-  return (
-    <Card className={cn('w-full', className)} {...props}>
-      <CardContent className="pt-6 flex flex-col items-center text-center gap-3">
-        {/* Avatar */}
-        <Skeleton className="size-16 rounded-full" />
-
-        {/* Name + role */}
-        <div className="space-y-1.5 w-full flex flex-col items-center">
-          <Skeleton className="h-4 w-32" />
-          <Skeleton className="h-3 w-24" />
-          {/* Optional department line */}
-          <Skeleton className="h-3 w-20" />
-        </div>
-
-        {/* Stats grid */}
-        {showStats && (
-          <div className="w-full grid grid-cols-3 divide-x divide-border border-y border-border py-3 mt-1">
-            {[0, 1, 2].map(i => (
-              <div key={i} className="flex flex-col items-center gap-1 px-2">
-                <Skeleton className="h-5 w-10" />
-                <Skeleton className="h-2.5 w-12" />
-              </div>
-            ))}
-          </div>
-        )}
-
-        {/* Action buttons */}
-        {showActions && (
-          <div className="flex gap-2 w-full">
-            <Skeleton className="h-8 flex-1 rounded-md" />
-            <Skeleton className="h-8 flex-1 rounded-md" />
-          </div>
-        )}
-      </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 ProfileCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Whether to show the stats grid row (3 columns) */
+  showStats?: boolean;
+  /** Whether to show the action buttons row */
+  showActions?: boolean;
+}
+
+/**
+ * Loading placeholder for `ProfileCard`.
+ *
+ * @description
+ * Mirrors the visual layout of `ProfileCard`: centered avatar, name + role
+ * text lines, optional stats grid, and optional action buttons.
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? <ProfileCardSkeleton showStats showActions /> : <ProfileCard {...data} />}
+ * ```
+ */
+export function ProfileCardSkeleton({
+  showStats = true,
+  showActions = true,
+  className,
+  ...props
+}: ProfileCardSkeletonProps) {
+  return (
+    <Card className={cn('w-full', className)} {...props}>
+      <CardContent className="pt-6 flex flex-col items-center text-center gap-3">
+        {/* Avatar */}
+        <Skeleton className="size-16 rounded-full" />
+
+        {/* Name + role */}
+        <div className="space-y-1.5 w-full flex flex-col items-center">
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-3 w-24" />
+          {/* Optional department line */}
+          <Skeleton className="h-3 w-20" />
+        </div>
+
+        {/* Stats grid */}
+        {showStats && (
+          <div className="w-full grid grid-cols-3 divide-x divide-border border-y border-border py-3 mt-1">
+            {[0, 1, 2].map(i => (
+              <div key={i} className="flex flex-col items-center gap-1 px-2">
+                <Skeleton className="h-5 w-10" />
+                <Skeleton className="h-2.5 w-12" />
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Action buttons */}
+        {showActions && (
+          <div className="flex gap-2 w-full">
+            <Skeleton className="h-8 flex-1 rounded-md" />
+            <Skeleton className="h-8 flex-1 rounded-md" />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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

@@ -1,72 +1,72 @@
-'use client';
-
-import * as React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardContent,
-  CardFooter,
-} from '../../ui/card';
-import { Skeleton } from '../../ui/skeleton';
-import { cn } from '../../shared/utils';
-
-export interface ProjectCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Number of member avatar placeholders in the footer */
-  memberCount?: number;
-}
-
-/**
- * Loading placeholder for `ProjectCard`.
- *
- * @description
- * Mirrors the visual layout of `ProjectCard`: title + badge in header,
- * progress bar in content, and member avatars + due date in footer.
- *
- * @example
- * ```tsx
- * {isLoading ? <ProjectCardSkeleton memberCount={3} /> : <ProjectCard {...data} />}
- * ```
- */
-export function ProjectCardSkeleton({
-  memberCount = 3,
-  className,
-  ...props
-}: ProjectCardSkeletonProps) {
-  return (
-    <Card className={cn('w-full', className)} {...props}>
-      <CardHeader>
-        <div className="flex flex-col gap-1 min-w-0 flex-1">
-          {/* Title */}
-          <Skeleton className="h-5 w-3/4" />
-          {/* Description */}
-          <Skeleton className="h-3.5 w-full mt-0.5" />
-        </div>
-        {/* Status badge */}
-        <Skeleton className="h-5 w-20 rounded-full shrink-0" />
-      </CardHeader>
-
-      <CardContent className="space-y-4">
-        <div className="space-y-1.5">
-          {/* "Progress" label + % */}
-          <div className="flex justify-between">
-            <Skeleton className="h-3 w-14" />
-            <Skeleton className="h-3 w-8" />
-          </div>
-          {/* Progress bar */}
-          <Skeleton className="h-2 w-full rounded-full" />
-        </div>
-      </CardContent>
-
-      <CardFooter className="flex items-center justify-between">
-        {/* Member avatars */}
-        <div className="flex -space-x-2">
-          {Array.from({ length: Math.min(memberCount, 4) }).map((_, i) => (
-            <Skeleton key={i} className="size-7 rounded-full border-2 border-background" />
-          ))}
-        </div>
-        {/* Due date */}
-        <Skeleton className="h-3 w-20" />
-      </CardFooter>
-    </Card>
-  );
-}
+'use client';
+
+import * as React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardContent,
+  CardFooter,
+} from '../../ui/card';
+import { Skeleton } from '../../ui/skeleton';
+import { cn } from '../../shared/utils';
+
+export interface ProjectCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Number of member avatar placeholders in the footer */
+  memberCount?: number;
+}
+
+/**
+ * Loading placeholder for `ProjectCard`.
+ *
+ * @description
+ * Mirrors the visual layout of `ProjectCard`: title + badge in header,
+ * progress bar in content, and member avatars + due date in footer.
+ *
+ * @example
+ * ```tsx
+ * {isLoading ? <ProjectCardSkeleton memberCount={3} /> : <ProjectCard {...data} />}
+ * ```
+ */
+export function ProjectCardSkeleton({
+  memberCount = 3,
+  className,
+  ...props
+}: ProjectCardSkeletonProps) {
+  return (
+    <Card className={cn('w-full', className)} {...props}>
+      <CardHeader>
+        <div className="flex flex-col gap-1 min-w-0 flex-1">
+          {/* Title */}
+          <Skeleton className="h-5 w-3/4" />
+          {/* Description */}
+          <Skeleton className="h-3.5 w-full mt-0.5" />
+        </div>
+        {/* Status badge */}
+        <Skeleton className="h-5 w-20 rounded-full shrink-0" />
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="space-y-1.5">
+          {/* "Progress" label + % */}
+          <div className="flex justify-between">
+            <Skeleton className="h-3 w-14" />
+            <Skeleton className="h-3 w-8" />
+          </div>
+          {/* Progress bar */}
+          <Skeleton className="h-2 w-full rounded-full" />
+        </div>
+      </CardContent>
+
+      <CardFooter className="flex items-center justify-between">
+        {/* Member avatars */}
+        <div className="flex -space-x-2">
+          {Array.from({ length: Math.min(memberCount, 4) }).map((_, i) => (
+            <Skeleton key={i} className="size-7 rounded-full border-2 border-background" />
+          ))}
+        </div>
+        {/* Due date */}
+        <Skeleton className="h-3 w-20" />
+      </CardFooter>
+    </Card>
+  );
+}

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

@@ -1,68 +1,68 @@
-'use client';
-
-import * as React from 'react';
-import { Card, CardContent } from '../../ui/card';
-import { Button } from '../../ui/button';
-import { Badge } from '../../ui/badge';
-import { cn } from '../../shared/utils';
-
-export interface QuickActionCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  description?: string;
-  icon: React.ReactNode;
-  badge?: string;
-  badgeVariant?: React.ComponentProps<typeof Badge>['variant'];
-  actionLabel: string;
-  actionVariant?: React.ComponentProps<typeof Button>['variant'];
-  onAction?: () => void;
-  disabled?: boolean;
-}
-
-export function QuickActionCard({
-  title,
-  description,
-  icon,
-  badge,
-  badgeVariant = 'secondary',
-  actionLabel,
-  actionVariant = 'default',
-  onAction,
-  disabled,
-  className,
-  ...props
-}: QuickActionCardProps) {
-  return (
-    <Card
-      className={cn(
-        'w-full group transition-shadow hover:shadow-md',
-        disabled && 'opacity-60 pointer-events-none',
-        className
-      )}
-      {...props}
-    >
-      <CardContent className="pt-6 flex flex-col items-start gap-4">
-        <div className="flex items-start justify-between w-full">
-          <div className="p-2.5 rounded-[var(--radius)] bg-primary/10 text-primary">{icon}</div>
-          {badge && <Badge variant={badgeVariant}>{badge}</Badge>}
-        </div>
-
-        <div className="space-y-1 flex-1">
-          <p className="font-semibold text-sm leading-tight">{title}</p>
-          {description && (
-            <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
-          )}
-        </div>
-
-        <Button
-          variant={actionVariant}
-          size="sm"
-          className="w-full"
-          onClick={onAction}
-          disabled={disabled}
-        >
-          {actionLabel}
-        </Button>
-      </CardContent>
-    </Card>
-  );
-}
+'use client';
+
+import * as React from 'react';
+import { Card, CardContent } from '../../ui/card';
+import { Button } from '../../ui/button';
+import { Badge } from '../../ui/badge';
+import { cn } from '../../shared/utils';
+
+export interface QuickActionCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  icon: React.ReactNode;
+  badge?: string;
+  badgeVariant?: React.ComponentProps<typeof Badge>['variant'];
+  actionLabel: string;
+  actionVariant?: React.ComponentProps<typeof Button>['variant'];
+  onAction?: () => void;
+  disabled?: boolean;
+}
+
+export function QuickActionCard({
+  title,
+  description,
+  icon,
+  badge,
+  badgeVariant = 'secondary',
+  actionLabel,
+  actionVariant = 'default',
+  onAction,
+  disabled,
+  className,
+  ...props
+}: QuickActionCardProps) {
+  return (
+    <Card
+      className={cn(
+        'w-full group transition-shadow hover:shadow-md',
+        disabled && 'opacity-60 pointer-events-none',
+        className
+      )}
+      {...props}
+    >
+      <CardContent className="pt-6 flex flex-col items-start gap-4">
+        <div className="flex items-start justify-between w-full">
+          <div className="p-2.5 rounded-[var(--radius)] bg-primary/10 text-primary">{icon}</div>
+          {badge && <Badge variant={badgeVariant}>{badge}</Badge>}
+        </div>
+
+        <div className="space-y-1 flex-1">
+          <p className="font-semibold text-sm leading-tight">{title}</p>
+          {description && (
+            <p className="text-xs text-muted-foreground leading-relaxed">{description}</p>
+          )}
+        </div>
+
+        <Button
+          variant={actionVariant}
+          size="sm"
+          className="w-full"
+          onClick={onAction}
+          disabled={disabled}
+        >
+          {actionLabel}
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}