xertica-ui 2.1.2 → 2.1.3

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

@@ -1,84 +1,84 @@
-"use client"
-
-import * as React from "react"
-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 statusConfig = {
-  online:  { label: "Online",     variant: "success"     as const },
-  offline: { label: "Offline",    variant: "secondary"   as const },
-  away:    { label: "Ausente",    variant: "warning"     as const },
-  busy:    { label: "Ocupado",    variant: "destructive" as const },
-}
-
-export function ProfileCard({
-  name, role, department, avatar, initials, status,
-  stats, primaryAction, secondaryAction, className, ...props
-}: ProfileCardProps) {
-  const s = status ? statusConfig[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 { 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 statusConfig = {
+  online:  { label: "Online",     variant: "success"     as const },
+  offline: { label: "Offline",    variant: "secondary"   as const },
+  away:    { label: "Ausente",    variant: "warning"     as const },
+  busy:    { label: "Ocupado",    variant: "destructive" as const },
+}
+
+export function ProfileCard({
+  name, role, department, avatar, initials, status,
+  stats, primaryAction, secondaryAction, className, ...props
+}: ProfileCardProps) {
+  const s = status ? statusConfig[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/ProjectCard.tsx

@@ -1,89 +1,89 @@
-"use client"
-
-import * as React from "react"
-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 statusConfig: Record<ProjectStatus, { label: string; variant: React.ComponentProps<typeof Badge>["variant"]; progressVariant: ProgressVariant }> = {
-  active:   { label: "Em andamento", variant: "info",        progressVariant: "info" },
-  review:   { label: "Em revisão",   variant: "warning",     progressVariant: "warning" },
-  done:     { label: "Concluído",    variant: "success",     progressVariant: "success" },
-  paused:   { label: "Pausado",      variant: "secondary",   progressVariant: "default" },
-  "at-risk":{ label: "Em risco",     variant: "destructive", progressVariant: "destructive" },
-}
-
-export function ProjectCard({
-  title, description, status, progress, dueDate,
-  members = [], maxMembers = 4, action, className, ...props
-}: ProjectCardProps) {
-  const { label, variant, progressVariant } = statusConfig[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>Progresso</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 { 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 statusConfig: Record<ProjectStatus, { label: string; variant: React.ComponentProps<typeof Badge>["variant"]; progressVariant: ProgressVariant }> = {
+  active:   { label: "Em andamento", variant: "info",        progressVariant: "info" },
+  review:   { label: "Em revisão",   variant: "warning",     progressVariant: "warning" },
+  done:     { label: "Concluído",    variant: "success",     progressVariant: "success" },
+  paused:   { label: "Pausado",      variant: "secondary",   progressVariant: "default" },
+  "at-risk":{ label: "Em risco",     variant: "destructive", progressVariant: "destructive" },
+}
+
+export function ProjectCard({
+  title, description, status, progress, dueDate,
+  members = [], maxMembers = 4, action, className, ...props
+}: ProjectCardProps) {
+  const { label, variant, progressVariant } = statusConfig[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>Progresso</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>
+  )
+}

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

@@ -1,62 +1,62 @@
-"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>
+  )
+}