xertica-ui 2.1.2 → 2.1.3

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

@@ -1,72 +1,72 @@
-"use client"
-
-import * as React from "react"
-import { Card, CardHeader, CardTitle, CardContent, CardAction } from "../../ui/card"
-import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar"
-import { Badge } from "../../ui/badge"
-import { cn } from "../../shared/utils"
-
-export interface ActivityItem {
-  id: string
-  user: { name: string; avatar?: string; initials: string }
-  action: string
-  target: string
-  time: string
-  type?: "create" | "update" | "delete" | "comment" | "deploy"
-}
-
-export interface ActivityCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string
-  items: ActivityItem[]
-  action?: React.ReactNode
-  maxItems?: number
-}
-
-const activityTypeBadge: Record<NonNullable<ActivityItem["type"]>, { label: string; variant: React.ComponentProps<typeof Badge>["variant"] }> = {
-  create:  { label: "Criado",     variant: "success" },
-  update:  { label: "Atualizado", variant: "info" },
-  delete:  { label: "Removido",   variant: "destructive" },
-  comment: { label: "Comentou",   variant: "secondary" },
-  deploy:  { label: "Deploy",     variant: "default" },
-}
-
-export function ActivityCard({ title = "Atividade Recente", items, action, maxItems = 5, className, ...props }: ActivityCardProps) {
-  const visible = items.slice(0, maxItems)
-
-  return (
-    <Card className={cn("w-full", className)} {...props}>
-      <CardHeader>
-        <CardTitle>{title}</CardTitle>
-        {action && <CardAction>{action}</CardAction>}
-      </CardHeader>
-      <CardContent className="px-6 pb-6">
-        <ul className="space-y-4">
-          {visible.map((item) => {
-            const badge = item.type ? activityTypeBadge[item.type] : null
-            return (
-              <li key={item.id} className="flex items-start gap-3">
-                <Avatar className="size-8 shrink-0">
-                  {item.user.avatar && <AvatarImage src={item.user.avatar} alt={item.user.name} />}
-                  <AvatarFallback className="text-xs">{item.user.initials}</AvatarFallback>
-                </Avatar>
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm leading-snug">
-                    <span className="font-medium">{item.user.name}</span>
-                    {" "}{item.action}{" "}
-                    <span className="font-medium">{item.target}</span>
-                  </p>
-                  <p className="text-xs text-muted-foreground mt-0.5">{item.time}</p>
-                </div>
-                {badge && (
-                  <Badge variant={badge.variant} className="shrink-0 text-xs">
-                    {badge.label}
-                  </Badge>
-                )}
-              </li>
-            )
-          })}
-        </ul>
-      </CardContent>
-    </Card>
-  )
-}
+"use client"
+
+import * as React from "react"
+import { Card, CardHeader, CardTitle, CardContent, CardAction } from "../../ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar"
+import { Badge } from "../../ui/badge"
+import { cn } from "../../shared/utils"
+
+export interface ActivityItem {
+  id: string
+  user: { name: string; avatar?: string; initials: string }
+  action: string
+  target: string
+  time: string
+  type?: "create" | "update" | "delete" | "comment" | "deploy"
+}
+
+export interface ActivityCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string
+  items: ActivityItem[]
+  action?: React.ReactNode
+  maxItems?: number
+}
+
+const activityTypeBadge: Record<NonNullable<ActivityItem["type"]>, { label: string; variant: React.ComponentProps<typeof Badge>["variant"] }> = {
+  create:  { label: "Criado",     variant: "success" },
+  update:  { label: "Atualizado", variant: "info" },
+  delete:  { label: "Removido",   variant: "destructive" },
+  comment: { label: "Comentou",   variant: "secondary" },
+  deploy:  { label: "Deploy",     variant: "default" },
+}
+
+export function ActivityCard({ title = "Atividade Recente", items, action, maxItems = 5, className, ...props }: ActivityCardProps) {
+  const visible = items.slice(0, maxItems)
+
+  return (
+    <Card className={cn("w-full", className)} {...props}>
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {action && <CardAction>{action}</CardAction>}
+      </CardHeader>
+      <CardContent className="px-6 pb-6">
+        <ul className="space-y-4">
+          {visible.map((item) => {
+            const badge = item.type ? activityTypeBadge[item.type] : null
+            return (
+              <li key={item.id} className="flex items-start gap-3">
+                <Avatar className="size-8 shrink-0">
+                  {item.user.avatar && <AvatarImage src={item.user.avatar} alt={item.user.name} />}
+                  <AvatarFallback className="text-xs">{item.user.initials}</AvatarFallback>
+                </Avatar>
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm leading-snug">
+                    <span className="font-medium">{item.user.name}</span>
+                    {" "}{item.action}{" "}
+                    <span className="font-medium">{item.target}</span>
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-0.5">{item.time}</p>
+                </div>
+                {badge && (
+                  <Badge variant={badge.variant} className="shrink-0 text-xs">
+                    {badge.label}
+                  </Badge>
+                )}
+              </li>
+            )
+          })}
+        </ul>
+      </CardContent>
+    </Card>
+  )
+}

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

@@ -1,100 +1,100 @@
-"use client"
-
-import * as React from "react"
-import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../../ui/card"
-import { Button } from "../../ui/button"
-import { Badge } from "../../ui/badge"
-import { cn } from "../../shared/utils"
-
-export type FeatureCardColor =
-  | "primary"
-  | "chart-1"
-  | "chart-2"
-  | "chart-3"
-  | "chart-4"
-  | "chart-5"
-  | "success"
-  | "info"
-  | "warning"
-  | "destructive"
-
-const colorTokens: Record<FeatureCardColor, { bg: string; icon: string }> = {
-  primary:     { bg: "bg-primary/10",     icon: "text-primary" },
-  "chart-1":   { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
-  "chart-2":   { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
-  "chart-3":   { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
-  "chart-4":   { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
-  "chart-5":   { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
-  success:     { bg: "bg-success/10",     icon: "text-success" },
-  info:        { bg: "bg-info/10",        icon: "text-info" },
-  warning:     { bg: "bg-warning/10",     icon: "text-warning" },
-  destructive: { bg: "bg-destructive/10", icon: "text-destructive" },
-}
-
-export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title: string
-  description: string
-  icon: React.ReactNode
-  color?: FeatureCardColor
-  badge?: string
-  badgeVariant?: React.ComponentProps<typeof Badge>["variant"]
-  actionLabel?: string
-  actionVariant?: React.ComponentProps<typeof Button>["variant"]
-  onAction?: () => void
-}
-
-export function FeatureCard({
-  title,
-  description,
-  icon,
-  color = "primary",
-  badge,
-  badgeVariant = "default",
-  actionLabel,
-  actionVariant = "outline",
-  onAction,
-  className,
-  ...props
-}: FeatureCardProps) {
-  const { bg, icon: iconColor } = colorTokens[color]
-
-  return (
-    <Card
-      className={cn(
-        "flex flex-col h-full hover:shadow-md transition-shadow duration-200",
-        className,
-      )}
-      {...props}
-    >
-      <CardHeader>
-        <div className="flex items-center gap-3">
-          <div className={cn("p-2 rounded-[var(--radius)] shrink-0", bg)}>
-            <div className={cn("size-6 flex items-center justify-center [&>svg]:size-6", iconColor)}>
-              {icon}
-            </div>
-          </div>
-          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0">
-            <CardTitle className="text-sm">{title}</CardTitle>
-            {badge && (
-              <Badge variant={badgeVariant} className="text-xs">
-                {badge}
-              </Badge>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-
-      <CardContent className="flex-1">
-        <CardDescription className="text-sm leading-relaxed">{description}</CardDescription>
-      </CardContent>
-
-      {actionLabel && (
-        <CardFooter>
-          <Button variant={actionVariant} className="w-full" onClick={onAction}>
-            {actionLabel}
-          </Button>
-        </CardFooter>
-      )}
-    </Card>
-  )
-}
+"use client"
+
+import * as React from "react"
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "../../ui/card"
+import { Button } from "../../ui/button"
+import { Badge } from "../../ui/badge"
+import { cn } from "../../shared/utils"
+
+export type FeatureCardColor =
+  | "primary"
+  | "chart-1"
+  | "chart-2"
+  | "chart-3"
+  | "chart-4"
+  | "chart-5"
+  | "success"
+  | "info"
+  | "warning"
+  | "destructive"
+
+const colorTokens: Record<FeatureCardColor, { bg: string; icon: string }> = {
+  primary:     { bg: "bg-primary/10",     icon: "text-primary" },
+  "chart-1":   { bg: "bg-[var(--chart-1)]/15", icon: "text-[var(--chart-1)]" },
+  "chart-2":   { bg: "bg-[var(--chart-2)]/15", icon: "text-[var(--chart-2)]" },
+  "chart-3":   { bg: "bg-[var(--chart-3)]/15", icon: "text-[var(--chart-3)]" },
+  "chart-4":   { bg: "bg-[var(--chart-4)]/15", icon: "text-[var(--chart-4)]" },
+  "chart-5":   { bg: "bg-[var(--chart-5)]/15", icon: "text-[var(--chart-5)]" },
+  success:     { bg: "bg-success/10",     icon: "text-success" },
+  info:        { bg: "bg-info/10",        icon: "text-info" },
+  warning:     { bg: "bg-warning/10",     icon: "text-warning" },
+  destructive: { bg: "bg-destructive/10", icon: "text-destructive" },
+}
+
+export interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string
+  description: string
+  icon: React.ReactNode
+  color?: FeatureCardColor
+  badge?: string
+  badgeVariant?: React.ComponentProps<typeof Badge>["variant"]
+  actionLabel?: string
+  actionVariant?: React.ComponentProps<typeof Button>["variant"]
+  onAction?: () => void
+}
+
+export function FeatureCard({
+  title,
+  description,
+  icon,
+  color = "primary",
+  badge,
+  badgeVariant = "default",
+  actionLabel,
+  actionVariant = "outline",
+  onAction,
+  className,
+  ...props
+}: FeatureCardProps) {
+  const { bg, icon: iconColor } = colorTokens[color]
+
+  return (
+    <Card
+      className={cn(
+        "flex flex-col h-full hover:shadow-md transition-shadow duration-200",
+        className,
+      )}
+      {...props}
+    >
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div className={cn("p-2 rounded-[var(--radius)] shrink-0", bg)}>
+            <div className={cn("size-6 flex items-center justify-center [&>svg]:size-6", iconColor)}>
+              {icon}
+            </div>
+          </div>
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0">
+            <CardTitle className="text-sm">{title}</CardTitle>
+            {badge && (
+              <Badge variant={badgeVariant} className="text-xs">
+                {badge}
+              </Badge>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex-1">
+        <CardDescription className="text-sm leading-relaxed">{description}</CardDescription>
+      </CardContent>
+
+      {actionLabel && (
+        <CardFooter>
+          <Button variant={actionVariant} className="w-full" onClick={onAction}>
+            {actionLabel}
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  )
+}

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

@@ -1,127 +1,127 @@
-"use client"
-
-import * as React from "react"
-import { Card, CardHeader, CardTitle, CardContent, CardFooter, CardAction } 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 type NotificationType = "info" | "warning" | "success" | "error" | "default"
-
-export interface NotificationItem {
-  id: string
-  title: string
-  message: string
-  time: string
-  read?: boolean
-  type?: NotificationType
-  user?: { name: string; initials: string; avatar?: string }
-}
-
-export interface NotificationCardProps extends React.HTMLAttributes<HTMLDivElement> {
-  title?: string
-  items: NotificationItem[]
-  unreadCount?: number
-  onMarkAllRead?: () => void
-  onViewAll?: () => void
-  maxItems?: number
-}
-
-const typeVariant: Record<NotificationType, React.ComponentProps<typeof Badge>["variant"]> = {
-  info:    "info",
-  warning: "warning",
-  success: "success",
-  error:   "destructive",
-  default: "secondary",
-}
-
-export function NotificationCard({
-  title = "Notificações",
-  items,
-  unreadCount,
-  onMarkAllRead,
-  onViewAll,
-  maxItems = 4,
-  className,
-  ...props
-}: NotificationCardProps) {
-  const visible = items.slice(0, maxItems)
-  const count = unreadCount ?? items.filter((i) => !i.read).length
-
-  return (
-    <Card className={cn("w-full", className)} {...props}>
-      <CardHeader>
-        <div className="flex items-center gap-2">
-          <CardTitle>{title}</CardTitle>
-          {count > 0 && (
-            <Badge variant="destructive" className="h-5 text-[11px] px-1.5">{count}</Badge>
-          )}
-        </div>
-        {onMarkAllRead && count > 0 && (
-          <CardAction>
-            <Button variant="ghost" size="sm" className="text-xs h-7" onClick={onMarkAllRead}>
-              Marcar todas como lidas
-            </Button>
-          </CardAction>
-        )}
-      </CardHeader>
-
-      <CardContent className="px-0 pb-0">
-        <ul className="divide-y divide-border">
-          {visible.map((item) => (
-            <li
-              key={item.id}
-              className={cn(
-                "flex items-start gap-3 px-6 py-3 transition-colors",
-                !item.read && "bg-muted/40",
-              )}
-            >
-              {item.user ? (
-                <Avatar className="size-8 shrink-0 mt-0.5">
-                  {item.user.avatar && <AvatarImage src={item.user.avatar} alt={item.user.name} />}
-                  <AvatarFallback className="text-xs">{item.user.initials}</AvatarFallback>
-                </Avatar>
-              ) : (
-                <div className="size-8 shrink-0 mt-0.5 rounded-full bg-muted flex items-center justify-center">
-                  <div className={cn(
-                    "size-2 rounded-full",
-                    item.type === "error"   ? "bg-destructive" :
-                    item.type === "warning" ? "bg-warning"     :
-                    item.type === "success" ? "bg-success"     :
-                    item.type === "info"    ? "bg-info"        : "bg-muted-foreground",
-                  )} />
-                </div>
-              )}
-
-              <div className="flex-1 min-w-0">
-                <div className="flex items-center justify-between gap-2">
-                  <p className="text-sm font-medium truncate">{item.title}</p>
-                  {item.type && item.type !== "default" && (
-                    <Badge variant={typeVariant[item.type]} className="text-[10px] px-1.5 h-4 shrink-0">
-                      {item.type}
-                    </Badge>
-                  )}
-                </div>
-                <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">{item.message}</p>
-                <p className="text-[11px] text-muted-foreground/70 mt-1">{item.time}</p>
-              </div>
-
-              {!item.read && (
-                <div className="size-2 rounded-full bg-primary shrink-0 mt-2" />
-              )}
-            </li>
-          ))}
-        </ul>
-      </CardContent>
-
-      {onViewAll && (
-        <CardFooter className="pt-2">
-          <Button variant="ghost" size="sm" className="w-full text-xs" onClick={onViewAll}>
-            Ver todas as notificações
-          </Button>
-        </CardFooter>
-      )}
-    </Card>
-  )
-}
+"use client"
+
+import * as React from "react"
+import { Card, CardHeader, CardTitle, CardContent, CardFooter, CardAction } 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 type NotificationType = "info" | "warning" | "success" | "error" | "default"
+
+export interface NotificationItem {
+  id: string
+  title: string
+  message: string
+  time: string
+  read?: boolean
+  type?: NotificationType
+  user?: { name: string; initials: string; avatar?: string }
+}
+
+export interface NotificationCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string
+  items: NotificationItem[]
+  unreadCount?: number
+  onMarkAllRead?: () => void
+  onViewAll?: () => void
+  maxItems?: number
+}
+
+const typeVariant: Record<NotificationType, React.ComponentProps<typeof Badge>["variant"]> = {
+  info:    "info",
+  warning: "warning",
+  success: "success",
+  error:   "destructive",
+  default: "secondary",
+}
+
+export function NotificationCard({
+  title = "Notificações",
+  items,
+  unreadCount,
+  onMarkAllRead,
+  onViewAll,
+  maxItems = 4,
+  className,
+  ...props
+}: NotificationCardProps) {
+  const visible = items.slice(0, maxItems)
+  const count = unreadCount ?? items.filter((i) => !i.read).length
+
+  return (
+    <Card className={cn("w-full", className)} {...props}>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <CardTitle>{title}</CardTitle>
+          {count > 0 && (
+            <Badge variant="destructive" className="h-5 text-[11px] px-1.5">{count}</Badge>
+          )}
+        </div>
+        {onMarkAllRead && count > 0 && (
+          <CardAction>
+            <Button variant="ghost" size="sm" className="text-xs h-7" onClick={onMarkAllRead}>
+              Marcar todas como lidas
+            </Button>
+          </CardAction>
+        )}
+      </CardHeader>
+
+      <CardContent className="px-0 pb-0">
+        <ul className="divide-y divide-border">
+          {visible.map((item) => (
+            <li
+              key={item.id}
+              className={cn(
+                "flex items-start gap-3 px-6 py-3 transition-colors",
+                !item.read && "bg-muted/40",
+              )}
+            >
+              {item.user ? (
+                <Avatar className="size-8 shrink-0 mt-0.5">
+                  {item.user.avatar && <AvatarImage src={item.user.avatar} alt={item.user.name} />}
+                  <AvatarFallback className="text-xs">{item.user.initials}</AvatarFallback>
+                </Avatar>
+              ) : (
+                <div className="size-8 shrink-0 mt-0.5 rounded-full bg-muted flex items-center justify-center">
+                  <div className={cn(
+                    "size-2 rounded-full",
+                    item.type === "error"   ? "bg-destructive" :
+                    item.type === "warning" ? "bg-warning"     :
+                    item.type === "success" ? "bg-success"     :
+                    item.type === "info"    ? "bg-info"        : "bg-muted-foreground",
+                  )} />
+                </div>
+              )}
+
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between gap-2">
+                  <p className="text-sm font-medium truncate">{item.title}</p>
+                  {item.type && item.type !== "default" && (
+                    <Badge variant={typeVariant[item.type]} className="text-[10px] px-1.5 h-4 shrink-0">
+                      {item.type}
+                    </Badge>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">{item.message}</p>
+                <p className="text-[11px] text-muted-foreground/70 mt-1">{item.time}</p>
+              </div>
+
+              {!item.read && (
+                <div className="size-2 rounded-full bg-primary shrink-0 mt-2" />
+              )}
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+
+      {onViewAll && (
+        <CardFooter className="pt-2">
+          <Button variant="ghost" size="sm" className="w-full text-xs" onClick={onViewAll}>
+            Ver todas as notificações
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  )
+}