xertica-ui 2.4.0 → 2.5.0

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

@@ -1,112 +1,112 @@
-'use client';
-
-import * as React from 'react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Card, CardContent } from '../../ui/card';
-import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
-import { Badge } from '../../ui/badge';
-import { Button } from '../../ui/button';
-import { cn } from '../../shared/utils';
-
-export interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  name: string;
-  role: string;
-  department?: string;
-  avatar?: string;
-  initials: string;
-  status?: 'online' | 'offline' | 'away' | 'busy';
-  stats?: Array<{ label: string; value: string | number }>;
-  primaryAction?: { label: string; onClick?: () => void };
-  secondaryAction?: { label: string; onClick?: () => void };
-}
-
-const statusVariant = {
-  online: 'success' as const,
-  offline: 'secondary' as const,
-  away: 'warning' as const,
-  busy: 'destructive' as const,
-};
-
-export function ProfileCard({
-  name,
-  role,
-  department,
-  avatar,
-  initials,
-  status,
-  stats,
-  primaryAction,
-  secondaryAction,
-  className,
-  ...props
-}: ProfileCardProps) {
-  const { t } = useTranslation();
-  const statusLabelMap = useMemo(
-    () => ({
-      online: t('profileCard.status.online'),
-      offline: t('profileCard.status.offline'),
-      away: t('profileCard.status.away'),
-      busy: t('profileCard.status.busy'),
-    }),
-    [t]
-  );
-  const s = status ? { label: statusLabelMap[status], variant: statusVariant[status] } : null;
-
-  return (
-    <Card className={cn('w-full', className)} {...props}>
-      <CardContent className="pt-6 flex flex-col items-center text-center gap-3">
-        <div className="relative">
-          <Avatar className="size-16">
-            {avatar && <AvatarImage src={avatar} alt={name} />}
-            <AvatarFallback className="text-lg font-semibold">{initials}</AvatarFallback>
-          </Avatar>
-          {s && (
-            <span className="absolute -bottom-0.5 -right-0.5">
-              <Badge variant={s.variant} className="text-[10px] px-1.5 py-0 h-5">
-                {s.label}
-              </Badge>
-            </span>
-          )}
-        </div>
-
-        <div className="space-y-0.5">
-          <p className="font-semibold text-base leading-tight">{name}</p>
-          <p className="text-sm text-muted-foreground">{role}</p>
-          {department && <p className="text-xs text-muted-foreground">{department}</p>}
-        </div>
-
-        {stats && stats.length > 0 && (
-          <div className="w-full grid grid-cols-3 divide-x divide-border border-y border-border py-3 mt-1">
-            {stats.map(stat => (
-              <div key={stat.label} className="flex flex-col items-center gap-0.5 px-2">
-                <span className="text-base font-bold">{stat.value}</span>
-                <span className="text-[11px] text-muted-foreground">{stat.label}</span>
-              </div>
-            ))}
-          </div>
-        )}
-
-        {(primaryAction || secondaryAction) && (
-          <div className="flex gap-2 w-full">
-            {secondaryAction && (
-              <Button
-                variant="outline"
-                className="flex-1"
-                size="sm"
-                onClick={secondaryAction.onClick}
-              >
-                {secondaryAction.label}
-              </Button>
-            )}
-            {primaryAction && (
-              <Button className="flex-1" size="sm" onClick={primaryAction.onClick}>
-                {primaryAction.label}
-              </Button>
-            )}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}
+'use client';
+
+import * as React from 'react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Card, CardContent } from '../../ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
+import { Badge } from '../../ui/badge';
+import { Button } from '../../ui/button';
+import { cn } from '../../shared/utils';
+
+export interface ProfileCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  name: string;
+  role: string;
+  department?: string;
+  avatar?: string;
+  initials: string;
+  status?: 'online' | 'offline' | 'away' | 'busy';
+  stats?: Array<{ label: string; value: string | number }>;
+  primaryAction?: { label: string; onClick?: () => void };
+  secondaryAction?: { label: string; onClick?: () => void };
+}
+
+const statusVariant = {
+  online: 'success' as const,
+  offline: 'secondary' as const,
+  away: 'warning' as const,
+  busy: 'destructive' as const,
+};
+
+export function ProfileCard({
+  name,
+  role,
+  department,
+  avatar,
+  initials,
+  status,
+  stats,
+  primaryAction,
+  secondaryAction,
+  className,
+  ...props
+}: ProfileCardProps) {
+  const { t } = useTranslation();
+  const statusLabelMap = useMemo(
+    () => ({
+      online: t('profileCard.status.online'),
+      offline: t('profileCard.status.offline'),
+      away: t('profileCard.status.away'),
+      busy: t('profileCard.status.busy'),
+    }),
+    [t]
+  );
+  const s = status ? { label: statusLabelMap[status], variant: statusVariant[status] } : null;
+
+  return (
+    <Card className={cn('w-full', className)} {...props}>
+      <CardContent className="pt-6 flex flex-col items-center text-center gap-3">
+        <div className="relative">
+          <Avatar className="size-16">
+            {avatar && <AvatarImage src={avatar} alt={name} />}
+            <AvatarFallback className="text-lg font-semibold">{initials}</AvatarFallback>
+          </Avatar>
+          {s && (
+            <span className="absolute -bottom-0.5 -right-0.5">
+              <Badge variant={s.variant} className="text-[10px] px-1.5 py-0 h-5">
+                {s.label}
+              </Badge>
+            </span>
+          )}
+        </div>
+
+        <div className="space-y-0.5">
+          <p className="font-semibold text-base leading-tight">{name}</p>
+          <p className="text-sm text-muted-foreground">{role}</p>
+          {department && <p className="text-xs text-muted-foreground">{department}</p>}
+        </div>
+
+        {stats && stats.length > 0 && (
+          <div className="w-full grid grid-cols-3 divide-x divide-border border-y border-border py-3 mt-1">
+            {stats.map(stat => (
+              <div key={stat.label} className="flex flex-col items-center gap-0.5 px-2">
+                <span className="text-base font-bold">{stat.value}</span>
+                <span className="text-[11px] text-muted-foreground">{stat.label}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {(primaryAction || secondaryAction) && (
+          <div className="flex gap-2 w-full">
+            {secondaryAction && (
+              <Button
+                variant="outline"
+                className="flex-1"
+                size="sm"
+                onClick={secondaryAction.onClick}
+              >
+                {secondaryAction.label}
+              </Button>
+            )}
+            {primaryAction && (
+              <Button className="flex-1" size="sm" onClick={primaryAction.onClick}>
+                {primaryAction.label}
+              </Button>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </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/ProjectCard.tsx

@@ -1,123 +1,123 @@
-'use client';
-
-import * as React from 'react';
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Card,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-  CardContent,
-  CardFooter,
-  CardAction,
-} from '../../ui/card';
-import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
-import { Badge } from '../../ui/badge';
-import { Progress } from '../../ui/progress';
-import { cn } from '../../shared/utils';
-import type { ProgressVariant } from '../../ui/progress';
-
-export type ProjectStatus = 'active' | 'review' | 'done' | 'paused' | 'at-risk';
-
-export interface ProjectMember {
-  name: string;
-  initials: string;
-  avatar?: string;
-}
-
-export interface ProjectCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string;
-  description?: string;
-  status: ProjectStatus;
-  progress: number;
-  dueDate?: string;
-  members?: ProjectMember[];
-  maxMembers?: number;
-  action?: React.ReactNode;
-}
-
-const statusVariantConfig: Record<
-  ProjectStatus,
-  {
-    variant: React.ComponentProps<typeof Badge>['variant'];
-    progressVariant: ProgressVariant;
-  }
-> = {
-  active: { variant: 'info', progressVariant: 'info' },
-  review: { variant: 'warning', progressVariant: 'warning' },
-  done: { variant: 'success', progressVariant: 'success' },
-  paused: { variant: 'secondary', progressVariant: 'default' },
-  'at-risk': { variant: 'destructive', progressVariant: 'destructive' },
-};
-
-export function ProjectCard({
-  title,
-  description,
-  status,
-  progress,
-  dueDate,
-  members = [],
-  maxMembers = 4,
-  action,
-  className,
-  ...props
-}: ProjectCardProps) {
-  const { t } = useTranslation();
-  const statusLabelMap = useMemo<Record<ProjectStatus, string>>(
-    () => ({
-      active: t('projectCard.status.active'),
-      review: t('projectCard.status.review'),
-      done: t('projectCard.status.completed'),
-      paused: t('projectCard.status.paused'),
-      'at-risk': t('projectCard.status.atRisk'),
-    }),
-    [t]
-  );
-  const { variant, progressVariant } = statusVariantConfig[status];
-  const label = statusLabelMap[status];
-  const visible = members.slice(0, maxMembers);
-  const overflow = members.length - maxMembers;
-
-  return (
-    <Card className={cn('w-full', className)} {...props}>
-      <CardHeader>
-        <div className="flex flex-col gap-1 min-w-0">
-          <CardTitle className="truncate">{title}</CardTitle>
-          {description && <CardDescription className="line-clamp-2">{description}</CardDescription>}
-        </div>
-        <CardAction className="flex items-center gap-2">
-          <Badge variant={variant}>{label}</Badge>
-          {action}
-        </CardAction>
-      </CardHeader>
-
-      <CardContent className="space-y-4">
-        <div className="space-y-1.5">
-          <div className="flex justify-between text-xs text-muted-foreground">
-            <span>{t('projectCard.progress')}</span>
-            <span>{progress}%</span>
-          </div>
-          <Progress value={progress} variant={progressVariant} className="h-2" />
-        </div>
-      </CardContent>
-
-      <CardFooter className="flex items-center justify-between">
-        <div className="flex -space-x-2">
-          {visible.map(m => (
-            <Avatar key={m.name} className="size-7 border-2 border-background">
-              {m.avatar && <AvatarImage src={m.avatar} alt={m.name} />}
-              <AvatarFallback className="text-[10px]">{m.initials}</AvatarFallback>
-            </Avatar>
-          ))}
-          {overflow > 0 && (
-            <div className="size-7 rounded-full border-2 border-background bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground">
-              +{overflow}
-            </div>
-          )}
-        </div>
-        {dueDate && <span className="text-xs text-muted-foreground">{dueDate}</span>}
-      </CardFooter>
-    </Card>
-  );
-}
+'use client';
+
+import * as React from 'react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  CardAction,
+} from '../../ui/card';
+import { Avatar, AvatarFallback, AvatarImage } from '../../ui/avatar';
+import { Badge } from '../../ui/badge';
+import { Progress } from '../../ui/progress';
+import { cn } from '../../shared/utils';
+import type { ProgressVariant } from '../../ui/progress';
+
+export type ProjectStatus = 'active' | 'review' | 'done' | 'paused' | 'at-risk';
+
+export interface ProjectMember {
+  name: string;
+  initials: string;
+  avatar?: string;
+}
+
+export interface ProjectCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  status: ProjectStatus;
+  progress: number;
+  dueDate?: string;
+  members?: ProjectMember[];
+  maxMembers?: number;
+  action?: React.ReactNode;
+}
+
+const statusVariantConfig: Record<
+  ProjectStatus,
+  {
+    variant: React.ComponentProps<typeof Badge>['variant'];
+    progressVariant: ProgressVariant;
+  }
+> = {
+  active: { variant: 'info', progressVariant: 'info' },
+  review: { variant: 'warning', progressVariant: 'warning' },
+  done: { variant: 'success', progressVariant: 'success' },
+  paused: { variant: 'secondary', progressVariant: 'default' },
+  'at-risk': { variant: 'destructive', progressVariant: 'destructive' },
+};
+
+export function ProjectCard({
+  title,
+  description,
+  status,
+  progress,
+  dueDate,
+  members = [],
+  maxMembers = 4,
+  action,
+  className,
+  ...props
+}: ProjectCardProps) {
+  const { t } = useTranslation();
+  const statusLabelMap = useMemo<Record<ProjectStatus, string>>(
+    () => ({
+      active: t('projectCard.status.active'),
+      review: t('projectCard.status.review'),
+      done: t('projectCard.status.completed'),
+      paused: t('projectCard.status.paused'),
+      'at-risk': t('projectCard.status.atRisk'),
+    }),
+    [t]
+  );
+  const { variant, progressVariant } = statusVariantConfig[status];
+  const label = statusLabelMap[status];
+  const visible = members.slice(0, maxMembers);
+  const overflow = members.length - maxMembers;
+
+  return (
+    <Card className={cn('w-full', className)} {...props}>
+      <CardHeader>
+        <div className="flex flex-col gap-1 min-w-0">
+          <CardTitle className="truncate">{title}</CardTitle>
+          {description && <CardDescription className="line-clamp-2">{description}</CardDescription>}
+        </div>
+        <CardAction className="flex items-center gap-2">
+          <Badge variant={variant}>{label}</Badge>
+          {action}
+        </CardAction>
+      </CardHeader>
+
+      <CardContent className="space-y-4">
+        <div className="space-y-1.5">
+          <div className="flex justify-between text-xs text-muted-foreground">
+            <span>{t('projectCard.progress')}</span>
+            <span>{progress}%</span>
+          </div>
+          <Progress value={progress} variant={progressVariant} className="h-2" />
+        </div>
+      </CardContent>
+
+      <CardFooter className="flex items-center justify-between">
+        <div className="flex -space-x-2">
+          {visible.map(m => (
+            <Avatar key={m.name} className="size-7 border-2 border-background">
+              {m.avatar && <AvatarImage src={m.avatar} alt={m.name} />}
+              <AvatarFallback className="text-[10px]">{m.initials}</AvatarFallback>
+            </Avatar>
+          ))}
+          {overflow > 0 && (
+            <div className="size-7 rounded-full border-2 border-background bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground">
+              +{overflow}
+            </div>
+          )}
+        </div>
+        {dueDate && <span className="text-xs text-muted-foreground">{dueDate}</span>}
+      </CardFooter>
+    </Card>
+  );
+}