xertica-ui 2.7.0 → 2.8.0

package/dist/FeatureCard-Cp8cVC6T.cjs

@@ -0,0 +1,497 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const reactI18next = require('react-i18next');
+const skeleton = require('./skeleton-C7nspYnC.cjs');
+const avatar = require('./avatar-DKIxHeKG.cjs');
+const ImageWithFallback = require('./ImageWithFallback-BkMXHCvV.cjs');
+const button = require('./button-Kd9Fj53S.cjs');
+
+const activityTypeVariant = {
+  create: "success",
+  update: "info",
+  delete: "destructive",
+  comment: "secondary",
+  deploy: "default"
+};
+function ActivityCard({
+  title,
+  items,
+  action,
+  maxItems = 5,
+  className,
+  ...props
+}) {
+  const { t } = reactI18next.useTranslation();
+  const cardTitle = title ?? t("activityCard.title");
+  const activityTypeBadge = React.useMemo(
+    () => ({
+      create: { label: t("activityCard.type.create"), variant: activityTypeVariant.create },
+      update: { label: t("activityCard.type.update"), variant: activityTypeVariant.update },
+      delete: { label: t("activityCard.type.remove"), variant: activityTypeVariant.delete },
+      comment: { label: t("activityCard.type.comment"), variant: activityTypeVariant.comment },
+      deploy: { label: t("activityCard.type.deploy"), variant: activityTypeVariant.deploy }
+    }),
+    [t]
+  );
+  const visible = items.slice(0, maxItems);
+  return /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { className: button.cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: cardTitle }),
+      action && /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardAction, { children: action })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "px-6 pb-6", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4", children: visible.map((item) => {
+      const badge = item.type ? activityTypeBadge[item.type] : null;
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "size-8 shrink-0", children: [
+          item.user.avatar && /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: item.user.avatar, alt: item.user.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "text-xs", children: item.user.initials })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm leading-snug", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: item.user.name }),
+            " ",
+            item.action,
+            " ",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: item.target })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mt-0.5", children: item.time })
+        ] }),
+        badge && /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: badge.variant, className: "shrink-0 text-xs", children: badge.label })
+      ] }, item.id);
+    }) }) })
+  ] });
+}
+
+function ActivityCardSkeleton({ rows = 5, className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { className: button.cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-40" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "px-6 pb-6", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-4", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-8 rounded-full shrink-0" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3.5 w-4/5" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-20" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-16 shrink-0 rounded-full" })
+    ] }, i)) }) })
+  ] });
+}
+
+const statusVariant = {
+  online: "success",
+  offline: "secondary",
+  away: "warning",
+  busy: "destructive"
+};
+function ProfileCard({
+  name,
+  role,
+  department,
+  avatar: avatar$1,
+  initials,
+  status,
+  stats,
+  primaryAction,
+  secondaryAction,
+  className,
+  ...props
+}) {
+  const { t } = reactI18next.useTranslation();
+  const statusLabelMap = React.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 /* @__PURE__ */ jsxRuntime.jsx(skeleton.Card, { className: button.cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "pt-6 flex flex-col items-center text-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "size-16", children: [
+        avatar$1 && /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: avatar$1, alt: name }),
+        /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "text-lg font-semibold", children: initials })
+      ] }),
+      s && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -bottom-0.5 -right-0.5", children: /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: s.variant, className: "text-[10px] px-1.5 py-0 h-5", children: s.label }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-base leading-tight", children: name }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: role }),
+      department && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: department })
+    ] }),
+    stats && stats.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full grid grid-cols-3 divide-x divide-border border-y border-border py-3 mt-1", children: stats.map((stat) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-0.5 px-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold", children: stat.value }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] text-muted-foreground", children: stat.label })
+    ] }, stat.label)) }),
+    (primaryAction || secondaryAction) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 w-full", children: [
+      secondaryAction && /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          variant: "outline",
+          className: "flex-1",
+          size: "sm",
+          onClick: secondaryAction.onClick,
+          children: secondaryAction.label
+        }
+      ),
+      primaryAction && /* @__PURE__ */ jsxRuntime.jsx(button.Button, { className: "flex-1", size: "sm", onClick: primaryAction.onClick, children: primaryAction.label })
+    ] })
+  ] }) });
+}
+
+function ProfileCardSkeleton({
+  showStats = true,
+  showActions = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(skeleton.Card, { className: button.cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "pt-6 flex flex-col items-center text-center gap-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-16 rounded-full" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 w-full flex flex-col items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-32" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-24" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-20" })
+    ] }),
+    showStats && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full grid grid-cols-3 divide-x divide-border border-y border-border py-3 mt-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1 px-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-10" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-2.5 w-12" })
+    ] }, i)) }),
+    showActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 flex-1 rounded-md" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 flex-1 rounded-md" })
+    ] })
+  ] }) });
+}
+
+const statusVariantConfig = {
+  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" }
+};
+function ProjectCard({
+  title,
+  description,
+  status,
+  progress,
+  dueDate,
+  members = [],
+  maxMembers = 4,
+  action,
+  className,
+  ...props
+}) {
+  const { t } = reactI18next.useTranslation();
+  const statusLabelMap = React.useMemo(
+    () => ({
+      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 /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { className: button.cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { className: "truncate", children: title }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { className: "line-clamp-2", children: description })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardAction, { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant, children: label }),
+        action
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("projectCard.progress") }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          progress,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Progress, { value: progress, variant: progressVariant, className: "h-2" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardFooter, { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex -space-x-2", children: [
+        visible.map((m) => /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "size-7 border-2 border-background", children: [
+          m.avatar && /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: m.avatar, alt: m.name }),
+          /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "text-[10px]", children: m.initials })
+        ] }, m.name)),
+        overflow > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "size-7 rounded-full border-2 border-background bg-muted flex items-center justify-center text-[10px] font-medium text-muted-foreground", children: [
+          "+",
+          overflow
+        ] })
+      ] }),
+      dueDate && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: dueDate })
+    ] })
+  ] });
+}
+
+function ProjectCardSkeleton({
+  memberCount = 3,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { className: button.cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1 min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-3/4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3.5 w-full mt-0.5" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-20 rounded-full shrink-0" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-14" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-8" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-2 w-full rounded-full" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardFooter, { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex -space-x-2", children: Array.from({ length: Math.min(memberCount, 4) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-7 rounded-full border-2 border-background" }, i)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-20" })
+    ] })
+  ] });
+}
+
+function QuickActionCard({
+  title,
+  description,
+  icon,
+  badge,
+  badgeVariant = "secondary",
+  actionLabel,
+  actionVariant = "default",
+  onAction,
+  disabled,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    skeleton.Card,
+    {
+      className: button.cn(
+        "w-full group transition-shadow hover:shadow-md",
+        disabled && "opacity-60 pointer-events-none",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "pt-6 flex flex-col items-start gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between w-full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2.5 rounded-[var(--radius)] bg-primary/10 text-primary", children: icon }),
+          badge && /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: badgeVariant, children: badge })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 flex-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-semibold text-sm leading-tight", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground leading-relaxed", children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          button.Button,
+          {
+            variant: actionVariant,
+            size: "sm",
+            className: "w-full",
+            onClick: onAction,
+            disabled,
+            children: actionLabel
+          }
+        )
+      ] })
+    }
+  );
+}
+
+function QuickActionCardSkeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(skeleton.Card, { className: button.cn("w-full", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardContent, { className: "pt-6 flex flex-col items-start gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-10 rounded-[var(--radius)]" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-14 rounded-full" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1.5 flex-1 w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-3/4" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-full" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-5/6" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-full rounded-md" })
+  ] }) });
+}
+
+const typeVariant = {
+  info: "info",
+  warning: "warning",
+  success: "success",
+  error: "destructive",
+  default: "secondary"
+};
+function NotificationCard({
+  title,
+  items,
+  unreadCount,
+  onMarkAllRead,
+  onViewAll,
+  maxItems = 4,
+  className,
+  ...props
+}) {
+  const { t } = reactI18next.useTranslation();
+  const visible = items.slice(0, maxItems);
+  const count = unreadCount ?? items.filter((i) => !i.read).length;
+  const cardTitle = title ?? t("notificationCard.title");
+  return /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { className: button.cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { children: cardTitle }),
+        count > 0 && /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: "destructive", className: "h-5 text-[11px] px-1.5", children: count })
+      ] }),
+      onMarkAllRead && count > 0 && /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardAction, { children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "sm", className: "text-xs h-7", onClick: onMarkAllRead, children: t("notificationCard.markAllRead") }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "px-0 pb-0", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-border", children: visible.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "li",
+      {
+        className: button.cn(
+          "flex items-start gap-3 px-6 py-3 transition-colors",
+          !item.read && "bg-muted/40"
+        ),
+        children: [
+          item.user ? /* @__PURE__ */ jsxRuntime.jsxs(avatar.Avatar, { className: "size-8 shrink-0 mt-0.5", children: [
+            item.user.avatar && /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarImage, { src: item.user.avatar, alt: item.user.name }),
+            /* @__PURE__ */ jsxRuntime.jsx(avatar.AvatarFallback, { className: "text-xs", children: item.user.initials })
+          ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-8 shrink-0 mt-0.5 rounded-full bg-muted flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: button.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"
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium truncate", children: item.title }),
+              item.type && item.type !== "default" && /* @__PURE__ */ jsxRuntime.jsx(
+                ImageWithFallback.Badge,
+                {
+                  variant: typeVariant[item.type],
+                  className: "text-[10px] px-1.5 h-4 shrink-0",
+                  children: item.type
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground line-clamp-2 mt-0.5", children: item.message }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-muted-foreground/70 mt-1", children: item.time })
+          ] }),
+          !item.read && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 rounded-full bg-primary shrink-0 mt-2" })
+        ]
+      },
+      item.id
+    )) }) }),
+    onViewAll && /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardFooter, { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "ghost", size: "sm", className: "w-full text-xs", onClick: onViewAll, children: t("notificationCard.viewAll") }) })
+  ] });
+}
+
+function NotificationCardSkeleton({
+  rows = 4,
+  showViewAll = false,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(skeleton.Card, { className: button.cn("w-full", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(skeleton.CardHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-32" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-5 w-6 rounded-full" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-7 w-32 rounded-md" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "px-0 pb-0", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "divide-y divide-border", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-3 px-6 py-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-8 rounded-full shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 space-y-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3.5 w-40" }),
+          /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-12 rounded-full shrink-0" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-full" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-3 w-3/4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-2.5 w-16 mt-0.5" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "size-2 rounded-full shrink-0 mt-2" })
+    ] }, i)) }) }),
+    showViewAll && /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardFooter, { className: "pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-8 w-full rounded-md" }) })
+  ] });
+}
+
+const colorTokens = {
+  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" }
+};
+function FeatureCard({
+  title,
+  description,
+  icon,
+  color = "primary",
+  badge,
+  badgeVariant = "default",
+  actionLabel,
+  actionVariant = "outline",
+  onAction,
+  className,
+  ...props
+}) {
+  const { bg, icon: iconColor } = colorTokens[color];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    skeleton.Card,
+    {
+      className: button.cn(
+        "flex flex-col h-full hover:shadow-md transition-shadow duration-200",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: button.cn("p-2 rounded-[var(--radius)] shrink-0", bg), children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: button.cn("size-6 flex items-center justify-center [&>svg]:size-6", iconColor),
+              children: icon
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardTitle, { className: "text-sm", children: title }),
+            badge && /* @__PURE__ */ jsxRuntime.jsx(ImageWithFallback.Badge, { variant: badgeVariant, className: "text-xs", children: badge })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardContent, { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardDescription, { className: "text-sm leading-relaxed", children: description }) }),
+        actionLabel && /* @__PURE__ */ jsxRuntime.jsx(skeleton.CardFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: actionVariant, className: "w-full", onClick: onAction, children: actionLabel }) })
+      ]
+    }
+  );
+}
+
+exports.ActivityCard = ActivityCard;
+exports.ActivityCardSkeleton = ActivityCardSkeleton;
+exports.FeatureCard = FeatureCard;
+exports.NotificationCard = NotificationCard;
+exports.NotificationCardSkeleton = NotificationCardSkeleton;
+exports.ProfileCard = ProfileCard;
+exports.ProfileCardSkeleton = ProfileCardSkeleton;
+exports.ProjectCard = ProjectCard;
+exports.ProjectCardSkeleton = ProjectCardSkeleton;
+exports.QuickActionCard = QuickActionCard;
+exports.QuickActionCardSkeleton = QuickActionCardSkeleton;