@cortexasystem/ui 0.1.0 → 1.0.1

package/src/components/data-display/icons.tsx

@@ -0,0 +1,81 @@
+import { type LucideIcon } from "lucide-react";
+
+import { cn } from "../../lib/cn";
+
+type IconTone = "brand" | "info" | "success" | "warning" | "danger" | "neutral";
+type IconSize = "sm" | "md" | "lg";
+
+const toneStyles: Record<IconTone, string> = {
+  brand: "bg-[var(--color-brand)]/10 text-[var(--color-brand)]",
+  info: "bg-[var(--color-info-bg)] text-[var(--color-accent-blue)]",
+  success: "bg-[var(--color-success-bg)] text-[var(--color-success)]",
+  warning: "bg-[var(--color-warning-bg)] text-[var(--color-warning)]",
+  danger: "bg-destructive/10 text-destructive",
+  neutral: "bg-muted text-muted-foreground"
+};
+
+const sizeStyles: Record<IconSize, { wrapper: string; icon: string }> = {
+  sm: { wrapper: "h-8 w-8 rounded-lg", icon: "h-4 w-4" },
+  md: { wrapper: "h-10 w-10 rounded-lg", icon: "h-5 w-5" },
+  lg: { wrapper: "h-12 w-12 rounded-xl", icon: "h-6 w-6" }
+};
+
+interface FeatureIconProps {
+  className?: string;
+  icon: LucideIcon;
+  tone?: IconTone;
+  size?: IconSize;
+  iconClassName?: string;
+}
+
+function FeatureIcon({ className, icon: Icon, tone = "brand", size = "md", iconClassName }: FeatureIconProps) {
+  const classes = sizeStyles[size];
+
+  return (
+    <span className={cn("inline-flex items-center justify-center", classes.wrapper, toneStyles[tone], className)}>
+      <Icon className={cn(classes.icon, iconClassName)} />
+    </span>
+  );
+}
+
+interface ModuleIconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: LucideIcon;
+  label: string;
+  description?: string;
+  tone?: IconTone;
+}
+
+function ModuleIconButton({
+  className,
+  type = "button",
+  icon,
+  label,
+  description,
+  tone = "brand",
+  ...props
+}: ModuleIconButtonProps) {
+  return (
+    <button
+      type={type}
+      className={cn(
+        "group flex flex-col items-center gap-3 rounded-lg border border-border bg-card p-5 text-center transition-all hover:bg-accent/30 hover:border-[var(--color-accent-blue)]/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <FeatureIcon
+        icon={icon}
+        tone={tone}
+        size="md"
+        className="transition-colors group-hover:bg-[var(--color-brand)]/20"
+      />
+      <span className="grid gap-1">
+        <span className="text-sm font-medium text-foreground">{label}</span>
+        {description ? <span className="text-xs text-muted-foreground">{description}</span> : null}
+      </span>
+    </button>
+  );
+}
+
+export { FeatureIcon, ModuleIconButton };
+export type { FeatureIconProps, ModuleIconButtonProps, IconSize, IconTone };

package/src/components/data-display/profile-avatar.tsx

@@ -0,0 +1,154 @@
+import { type ReactNode } from "react";
+
+import { cn } from "../../lib/cn";
+import { Avatar, AvatarFallback, AvatarImage } from "../primitives/avatar";
+
+type ProfileAvatarSize = "xs" | "sm" | "md" | "lg";
+type ProfileAvatarStatus = "online" | "away" | "offline" | "inactive";
+
+const sizeMap: Record<ProfileAvatarSize, { avatar: string; text: string; dot: string }> = {
+  xs: { avatar: "h-8 w-8", text: "text-xs", dot: "h-2.5 w-2.5" },
+  sm: { avatar: "h-10 w-10", text: "text-sm", dot: "h-3 w-3" },
+  md: { avatar: "h-12 w-12", text: "text-base", dot: "h-3.5 w-3.5" },
+  lg: { avatar: "h-16 w-16", text: "text-lg", dot: "h-4 w-4" }
+};
+
+const statusMap: Record<ProfileAvatarStatus, string> = {
+  online: "bg-[var(--color-success)]",
+  away: "bg-[var(--color-warning)]",
+  offline: "bg-muted-foreground",
+  inactive: "bg-border"
+};
+
+function getInitials(name: string) {
+  return name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("");
+}
+
+interface ProfileAvatarProps {
+  className?: string;
+  avatarClassName?: string;
+  fallbackClassName?: string;
+  name: string;
+  src?: string;
+  alt?: string;
+  initials?: string;
+  size?: ProfileAvatarSize;
+  status?: ProfileAvatarStatus;
+}
+
+function ProfileAvatar({
+  className,
+  avatarClassName,
+  fallbackClassName,
+  name,
+  src,
+  alt,
+  initials,
+  size = "sm",
+  status
+}: ProfileAvatarProps) {
+  const classes = sizeMap[size];
+
+  return (
+    <div className={cn("relative inline-flex", className)}>
+      <Avatar className={cn(classes.avatar, avatarClassName)}>
+        {src ? <AvatarImage src={src} alt={alt ?? name} /> : null}
+        <AvatarFallback className={cn("bg-[var(--color-brand)] text-white font-medium", classes.text, fallbackClassName)}>
+          {initials ?? getInitials(name)}
+        </AvatarFallback>
+      </Avatar>
+      {status ? (
+        <span
+          aria-hidden="true"
+          className={cn("absolute bottom-0 right-0 rounded-full border-2 border-card", classes.dot, statusMap[status])}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+interface AvatarGroupUser {
+  id?: string;
+  name: string;
+  src?: string;
+  initials?: string;
+  status?: ProfileAvatarStatus;
+}
+
+interface AvatarGroupProps {
+  className?: string;
+  users: AvatarGroupUser[];
+  size?: Exclude<ProfileAvatarSize, "lg">;
+  limit?: number;
+  extraLabel?: ReactNode;
+}
+
+function AvatarGroup({ className, users, size = "xs", limit = 4, extraLabel }: AvatarGroupProps) {
+  const visibleUsers = users.slice(0, limit);
+  const hiddenCount = Math.max(0, users.length - limit);
+  const classes = sizeMap[size];
+
+  return (
+    <div className={cn("flex items-center gap-3", className)}>
+      <div className="flex -space-x-2">
+        {visibleUsers.map((user) => (
+          <ProfileAvatar
+            key={user.id ?? user.name}
+            name={user.name}
+            src={user.src}
+            initials={user.initials}
+            size={size}
+            status={user.status}
+            avatarClassName="border-2 border-card"
+          />
+        ))}
+        {hiddenCount > 0 ? (
+          <div
+            className={cn(
+              "flex items-center justify-center rounded-full border-2 border-card bg-muted text-muted-foreground font-medium",
+              classes.avatar,
+              classes.text
+            )}
+          >
+            +{hiddenCount}
+          </div>
+        ) : null}
+      </div>
+      {extraLabel ? <div className="text-sm text-muted-foreground">{extraLabel}</div> : null}
+    </div>
+  );
+}
+
+interface ProfileAvatarRowProps {
+  className?: string;
+  name: string;
+  role?: string;
+  src?: string;
+  initials?: string;
+  status?: ProfileAvatarStatus;
+  size?: ProfileAvatarSize;
+  aside?: ReactNode;
+}
+
+function ProfileAvatarRow({ className, name, role, src, initials, status, size = "sm", aside }: ProfileAvatarRowProps) {
+  return (
+    <div className={cn("flex items-center justify-between gap-3", className)}>
+      <div className="flex items-center gap-3">
+        <ProfileAvatar name={name} src={src} initials={initials} status={status} size={size} />
+        <div className="grid gap-0.5">
+          <p className="text-sm font-medium text-foreground">{name}</p>
+          {role ? <p className="text-xs text-muted-foreground">{role}</p> : null}
+        </div>
+      </div>
+      {aside}
+    </div>
+  );
+}
+
+export { ProfileAvatar, AvatarGroup, ProfileAvatarRow };
+export type { AvatarGroupUser, ProfileAvatarProps, ProfileAvatarSize, ProfileAvatarStatus };

package/src/components/data-display/typography.tsx

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithoutRef, type ElementType, type ReactNode } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/cn";
+
+const typographyVariants = cva("text-foreground", {
+  variants: {
+    variant: {
+      h1: "font-display text-4xl font-bold tracking-tight",
+      h2: "font-display text-3xl font-bold tracking-tight",
+      h3: "font-display text-2xl font-semibold tracking-tight",
+      h4: "text-xl font-semibold",
+      lead: "text-lg text-muted-foreground",
+      body: "text-base",
+      small: "text-sm text-muted-foreground",
+      muted: "text-sm text-muted-foreground",
+      code: "font-mono text-sm"
+    }
+  },
+  defaultVariants: {
+    variant: "body"
+  }
+});
+
+type TypographyProps<T extends ElementType> = {
+  as?: T;
+  children: ReactNode;
+  className?: string;
+} & VariantProps<typeof typographyVariants> &
+  Omit<ComponentPropsWithoutRef<T>, "as" | "children" | "className">;
+
+export function Typography<T extends ElementType = "p">({
+  as,
+  className,
+  variant,
+  children,
+  ...props
+}: TypographyProps<T>) {
+  const Component = as ?? "p";
+
+  return (
+    <Component className={cn(typographyVariants({ variant }), className)} {...props}>
+      {children}
+    </Component>
+  );
+}

package/src/components/feedback/empty-state.tsx

@@ -0,0 +1,63 @@
+import { Inbox, type LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+
+import { cn } from "../../lib/cn";
+
+interface EmptyStateProps {
+  className?: string;
+  icon?: LucideIcon;
+  title: string;
+  description?: ReactNode;
+  action?: ReactNode;
+  secondaryAction?: ReactNode;
+  align?: "left" | "center";
+  compact?: boolean;
+}
+
+export function EmptyState({
+  className,
+  icon: Icon = Inbox,
+  title,
+  description,
+  action,
+  secondaryAction,
+  align = "center",
+  compact = false
+}: EmptyStateProps) {
+  const isCentered = align === "center";
+
+  return (
+    <section
+      className={cn(
+        "rounded-2xl border border-dashed bg-card text-card-foreground shadow-sm",
+        compact ? "p-5" : "p-8 sm:p-10",
+        className
+      )}
+    >
+      <div
+        className={cn(
+          "flex flex-col gap-5",
+          isCentered ? "items-center text-center" : "items-start text-left"
+        )}
+      >
+        <div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--color-brand)]/10 text-[var(--color-brand)]">
+          <Icon className="h-6 w-6" />
+        </div>
+
+        <div className="grid max-w-xl gap-2">
+          <p className="text-lg font-semibold text-foreground">{title}</p>
+          {description ? <div className="text-sm leading-6 text-muted-foreground">{description}</div> : null}
+        </div>
+
+        {action || secondaryAction ? (
+          <div className={cn("flex flex-wrap gap-3", isCentered && "justify-center")}>
+            {action}
+            {secondaryAction}
+          </div>
+        ) : null}
+      </div>
+    </section>
+  );
+}
+
+export type { EmptyStateProps };

package/src/components/feedback/loading-state.tsx

@@ -0,0 +1,93 @@
+import { type ReactNode } from "react";
+
+import { cn } from "../../lib/cn";
+import { Card, CardContent } from "../primitives/card";
+import { Skeleton } from "./skeleton";
+import { Spinner } from "./spinner";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../tables/table";
+
+interface LoadingStateProps {
+  className?: string;
+  title?: string;
+  description?: string;
+  size?: "sm" | "md" | "lg";
+  icon?: ReactNode;
+}
+
+function LoadingState({
+  className,
+  title = "Cargando datos",
+  description = "Estamos preparando la informacion para ti.",
+  size = "md",
+  icon
+}: LoadingStateProps) {
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      className={cn("flex items-center gap-3 rounded-xl border border-border bg-card px-4 py-3 text-foreground", className)}
+    >
+      {icon ?? <Spinner size={size} className="text-primary" />}
+      <div className="grid gap-0.5">
+        <p className="text-sm font-medium">{title}</p>
+        <p className="text-xs text-muted-foreground">{description}</p>
+      </div>
+    </div>
+  );
+}
+
+interface LoadingCardProps {
+  className?: string;
+  rows?: number;
+}
+
+function LoadingCard({ className, rows = 3 }: LoadingCardProps) {
+  return (
+    <Card className={className}>
+      <CardContent className="grid gap-3 p-5">
+        <Skeleton className="h-6 w-40" />
+        {Array.from({ length: rows }).map((_, index) => (
+          <Skeleton key={index} className={cn("h-4", index === rows - 1 ? "w-2/3" : "w-full")} />
+        ))}
+        <Skeleton className="mt-1 h-10 w-full rounded-lg" />
+      </CardContent>
+    </Card>
+  );
+}
+
+interface LoadingTableRowsProps {
+  className?: string;
+  columns?: number;
+  rows?: number;
+}
+
+function LoadingTableRows({ className, columns = 5, rows = 4 }: LoadingTableRowsProps) {
+  return (
+    <div className={cn("rounded-xl border", className)}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {Array.from({ length: columns }).map((_, index) => (
+              <TableHead key={index}>
+                <Skeleton className="h-4 w-20" />
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {Array.from({ length: rows }).map((_, rowIndex) => (
+            <TableRow key={rowIndex}>
+              {Array.from({ length: columns }).map((_, columnIndex) => (
+                <TableCell key={columnIndex}>
+                  <Skeleton className={cn("h-4", columnIndex === 0 ? "w-24" : "w-full")} />
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+export { LoadingState, LoadingCard, LoadingTableRows };

package/src/components/feedback/module-skeleton.tsx

@@ -0,0 +1,76 @@
+import { Skeleton } from "./skeleton";
+import { cn } from "../../lib/cn";
+
+type ModuleSkeletonVariant = "cards" | "table" | "form";
+
+interface ModuleSkeletonProps {
+  className?: string;
+  variant?: ModuleSkeletonVariant;
+  cardCount?: number;
+  showHeaderAction?: boolean;
+}
+
+export function ModuleSkeleton({
+  className,
+  variant = "cards",
+  cardCount = 6,
+  showHeaderAction = true
+}: ModuleSkeletonProps) {
+  return (
+    <div role="status" aria-label="Cargando modulo" className={cn("grid gap-6 p-6", className)}>
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div className="grid gap-2">
+          <Skeleton className="h-8 w-52" />
+          <Skeleton className="h-4 w-72 max-w-full" />
+        </div>
+        {showHeaderAction ? <Skeleton className="h-10 w-36" /> : null}
+      </div>
+
+      {variant === "cards" ? (
+        <div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+          {Array.from({ length: cardCount }).map((_, index) => (
+            <Skeleton key={index} className="h-32 w-full rounded-xl" />
+          ))}
+        </div>
+      ) : null}
+
+      {variant === "table" ? (
+        <div className="rounded-xl border bg-card p-4">
+          <div className="mb-4 flex flex-wrap gap-3">
+            <Skeleton className="h-10 w-64 max-w-full" />
+            <Skeleton className="h-10 w-36" />
+          </div>
+          <div className="grid gap-3">
+            <Skeleton className="h-10 w-full rounded-lg" />
+            {Array.from({ length: 6 }).map((_, index) => (
+              <Skeleton key={index} className="h-14 w-full rounded-lg" />
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {variant === "form" ? (
+        <div className="rounded-xl border bg-card p-5">
+          <div className="grid gap-5 md:grid-cols-2">
+            {Array.from({ length: 6 }).map((_, index) => (
+              <div key={index} className="grid gap-2">
+                <Skeleton className="h-4 w-28" />
+                <Skeleton className="h-10 w-full" />
+              </div>
+            ))}
+            <div className="grid gap-2 md:col-span-2">
+              <Skeleton className="h-4 w-32" />
+              <Skeleton className="h-28 w-full rounded-xl" />
+            </div>
+          </div>
+          <div className="mt-6 flex flex-wrap justify-end gap-3">
+            <Skeleton className="h-10 w-24" />
+            <Skeleton className="h-10 w-36" />
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+export type { ModuleSkeletonProps, ModuleSkeletonVariant };

package/src/components/feedback/notification.tsx

@@ -0,0 +1,111 @@
+import { AlertCircle, AlertTriangle, CheckCircle2, Info, Loader2, type LucideIcon } from "lucide-react";
+import { toast } from "sonner";
+import { type ReactNode } from "react";
+
+import { cn } from "../../lib/cn";
+import { Button } from "../primitives/button";
+
+type NotificationTone = "info" | "success" | "warning" | "danger" | "loading";
+
+const notificationStyles: Record<NotificationTone, string> = {
+  info: "border-[var(--color-accent-blue)]/20 bg-[linear-gradient(135deg,rgba(59,130,246,0.14),rgba(239,246,255,0.96))] text-[var(--color-accent-blue)]",
+  success: "border-[var(--color-success)]/20 bg-[linear-gradient(135deg,rgba(22,163,74,0.14),rgba(220,252,231,0.96))] text-[var(--color-success)]",
+  warning: "border-[var(--color-warning)]/20 bg-[linear-gradient(135deg,rgba(217,119,6,0.16),rgba(255,251,235,0.96))] text-[var(--color-warning)]",
+  danger: "border-destructive/20 bg-[linear-gradient(135deg,rgba(220,74,65,0.16),rgba(254,242,242,0.96))] text-destructive",
+  loading: "border-[var(--color-accent-blue)]/20 bg-[linear-gradient(135deg,rgba(59,130,246,0.14),rgba(239,246,255,0.96))] text-[var(--color-accent-blue)]"
+};
+
+const notificationIcons: Record<NotificationTone, LucideIcon> = {
+  info: Info,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  danger: AlertCircle,
+  loading: Loader2
+};
+
+interface NotificationMessageProps {
+  className?: string;
+  tone?: NotificationTone;
+  title: string;
+  description?: ReactNode;
+  action?: ReactNode;
+  icon?: LucideIcon;
+}
+
+function NotificationMessage({
+  className,
+  tone = "info",
+  title,
+  description,
+  action,
+  icon
+}: NotificationMessageProps) {
+  const Icon = icon ?? notificationIcons[tone];
+
+  return (
+    <div
+      role="status"
+      className={cn(
+        "flex items-start justify-between gap-3 rounded-xl border px-4 py-3 shadow-sm",
+        notificationStyles[tone],
+        className
+      )}
+    >
+      <div className="flex items-start gap-3">
+        <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/70 shadow-sm">
+          <Icon className={cn("h-4 w-4", tone === "loading" && "animate-spin")} />
+        </div>
+        <div className="grid gap-1">
+          <p className="text-sm font-semibold">{title}</p>
+          {description ? <div className="text-xs leading-5 opacity-90">{description}</div> : null}
+        </div>
+      </div>
+      {action ? <div className="shrink-0">{action}</div> : null}
+    </div>
+  );
+}
+
+interface NotifyPayload {
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  duration?: number;
+}
+
+function buildToastOptions(payload: NotifyPayload) {
+  return {
+    description: payload.description,
+    duration: payload.duration,
+    action: payload.actionLabel
+      ? {
+          label: payload.actionLabel,
+          onClick: payload.onAction ?? (() => undefined)
+        }
+      : undefined
+  };
+}
+
+const notify = {
+  info: (payload: NotifyPayload) => toast.info(payload.title, buildToastOptions(payload)),
+  success: (payload: NotifyPayload) => toast.success(payload.title, buildToastOptions(payload)),
+  warning: (payload: NotifyPayload) => toast.warning(payload.title, buildToastOptions(payload)),
+  danger: (payload: NotifyPayload) => toast.error(payload.title, buildToastOptions(payload)),
+  error: (payload: NotifyPayload) => toast.error(payload.title, buildToastOptions(payload)),
+  loading: (payload: NotifyPayload) => toast.loading(payload.title, buildToastOptions(payload))
+};
+
+interface NotificationActionProps extends React.ComponentProps<typeof Button> {
+  children: ReactNode;
+}
+
+function NotificationAction({ children, variant = "outline", size = "sm", ...props }: NotificationActionProps) {
+  return (
+    <Button variant={variant} size={size} {...props}>
+      {children}
+    </Button>
+  );
+}
+
+export { NotificationMessage, NotificationAction, notify };
+export type { NotificationMessageProps, NotificationTone };

package/src/components/feedback/skeleton.tsx

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from "react";
+
+import { cn } from "../../lib/cn";
+
+function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
+}
+
+export { Skeleton };

package/src/components/feedback/spinner.tsx

@@ -0,0 +1,18 @@
+import { Loader2 } from "lucide-react";
+
+import { cn } from "../../lib/cn";
+
+interface SpinnerProps {
+  className?: string;
+  size?: "sm" | "md" | "lg";
+}
+
+const sizeMap = {
+  sm: "h-4 w-4",
+  md: "h-5 w-5",
+  lg: "h-7 w-7"
+} as const;
+
+export function Spinner({ className, size = "md" }: SpinnerProps) {
+  return <Loader2 className={cn("animate-spin text-current", sizeMap[size], className)} />;
+}