@cortexasystem/ui 0.1.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cortexasystem/ui",
-  "version": "0.1.0",
+  "version": "1.0.1",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -15,7 +15,7 @@
   },
   "files": [
     "dist",
-    "src/styles.css"
+    "src"
   ],
   "publishConfig": {
     "access": "public"
@@ -42,7 +42,7 @@
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",
     "vaul": "^1.1.2",
-    "@cortexasystem/tokens": "0.1.0"
+    "@cortexasystem/tokens": "0.1.1"
   },
   "devDependencies": {
     "@types/react": "^19.2.14",

package/src/components/ai/ai-chat.tsx

@@ -0,0 +1,597 @@
+import * as React from "react";
+import { Bot, Clock3, MessageSquareText, PanelRightOpen, Send, Sparkles, type LucideIcon } from "lucide-react";
+
+import { cn } from "../../lib/cn";
+import { Sheet, SheetContent, SheetTrigger } from "../overlays/sheet";
+import { Badge } from "../primitives/badge";
+import { Button, type ButtonProps } from "../primitives/button";
+import { Textarea } from "../primitives/textarea";
+
+type AiChatLayoutVariant = "screen" | "sidebar";
+type AiChatRole = "assistant" | "user" | "system";
+type AiChatMessageStatus = "complete" | "streaming" | "error";
+
+interface AiChatLayoutProps extends React.HTMLAttributes<HTMLElement> {
+  variant?: AiChatLayoutVariant;
+}
+
+function AiChatLayout({ className, variant = "screen", ...props }: AiChatLayoutProps) {
+  return (
+    <section
+      className={cn(
+        "overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-sm",
+        variant === "screen"
+          ? "grid min-h-[720px] w-full lg:grid-cols-[320px_minmax(0,1fr)]"
+          : "flex h-full min-h-0 w-full flex-col",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+const AiChatSidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <aside
+      ref={ref}
+      className={cn(
+        "flex min-h-0 flex-col border-b bg-muted/20 lg:border-b-0 lg:border-r",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+
+AiChatSidebar.displayName = "AiChatSidebar";
+
+interface AiChatSidebarHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+function AiChatSidebarHeader({ className, title, description, action, ...props }: AiChatSidebarHeaderProps) {
+  return (
+    <div className={cn("border-b px-4 py-4", className)} {...props}>
+      <div className="flex items-start justify-between gap-3">
+        <div className="grid gap-1">
+          <p className="text-sm font-semibold text-foreground">{title}</p>
+          {description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
+        </div>
+        {action ? <div className="shrink-0">{action}</div> : null}
+      </div>
+    </div>
+  );
+}
+
+const AiChatThreadList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex-1 space-y-2 overflow-y-auto p-3", className)} {...props} />
+  )
+);
+
+AiChatThreadList.displayName = "AiChatThreadList";
+
+interface AiChatThreadButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  title: string;
+  preview?: string;
+  timestamp?: string;
+  active?: boolean;
+  unreadCount?: number;
+  icon?: LucideIcon;
+}
+
+const AiChatThreadButton = React.forwardRef<HTMLButtonElement, AiChatThreadButtonProps>(
+  (
+    {
+      className,
+      title,
+      preview,
+      timestamp,
+      active = false,
+      unreadCount,
+      icon: Icon = MessageSquareText,
+      type = "button",
+      ...props
+    },
+    ref
+  ) => (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(
+        "flex w-full items-start gap-3 rounded-xl border px-3 py-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        active
+          ? "border-[var(--color-accent-blue)]/40 bg-[var(--color-accent-blue)]/8"
+          : "border-transparent bg-transparent hover:border-border hover:bg-accent/40",
+        className
+      )}
+      {...props}
+    >
+      <span
+        className={cn(
+          "mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border",
+          active
+            ? "border-[var(--color-accent-blue)]/30 bg-[var(--color-accent-blue)]/12 text-[var(--color-accent-blue)]"
+            : "border-border bg-background text-muted-foreground"
+        )}
+      >
+        <Icon className="h-4 w-4" />
+      </span>
+
+      <span className="grid min-w-0 flex-1 gap-1">
+        <span className="flex items-start justify-between gap-3">
+          <span className="truncate text-sm font-medium text-foreground">{title}</span>
+          {timestamp ? (
+            <span className="inline-flex shrink-0 items-center gap-1 text-[11px] text-muted-foreground">
+              <Clock3 className="h-3 w-3" />
+              {timestamp}
+            </span>
+          ) : null}
+        </span>
+        {preview ? <span className="line-clamp-2 text-xs text-muted-foreground">{preview}</span> : null}
+      </span>
+
+      {typeof unreadCount === "number" && unreadCount > 0 ? (
+        <Badge className="shrink-0 rounded-full px-2 py-0.5 text-[11px]">{unreadCount > 9 ? "9+" : unreadCount}</Badge>
+      ) : null}
+    </button>
+  )
+);
+
+AiChatThreadButton.displayName = "AiChatThreadButton";
+
+const AiChatPanel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex min-h-0 flex-1 flex-col bg-background/40", className)} {...props} />
+  )
+);
+
+AiChatPanel.displayName = "AiChatPanel";
+
+interface AiChatHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  meta?: React.ReactNode;
+  actions?: React.ReactNode;
+}
+
+function AiChatHeader({ className, title, description, meta, actions, ...props }: AiChatHeaderProps) {
+  return (
+    <header className={cn("border-b bg-card/95 px-5 py-4 backdrop-blur", className)} {...props}>
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="grid gap-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <p className="text-base font-semibold text-foreground">{title}</p>
+            {meta ? <div className="flex items-center gap-2 text-xs text-muted-foreground">{meta}</div> : null}
+          </div>
+          {description ? <p className="text-sm text-muted-foreground">{description}</p> : null}
+        </div>
+        {actions ? <div className="flex flex-wrap items-center gap-2">{actions}</div> : null}
+      </div>
+    </header>
+  );
+}
+
+const AiChatMessageList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="log"
+      aria-live="polite"
+      className={cn("flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-5 py-5", className)}
+      {...props}
+    />
+  )
+);
+
+AiChatMessageList.displayName = "AiChatMessageList";
+
+interface AiChatMessageSource {
+  label: string;
+  href?: string;
+}
+
+interface AiChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  role?: AiChatRole;
+  author?: string;
+  timestamp?: string;
+  status?: AiChatMessageStatus;
+  avatar?: React.ReactNode;
+  actions?: React.ReactNode;
+  sources?: AiChatMessageSource[];
+}
+
+function getDefaultAvatar(role: AiChatRole) {
+  if (role === "assistant") {
+    return (
+      <span className="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--color-brand)] text-white shadow-sm">
+        <Bot className="h-4 w-4" />
+      </span>
+    );
+  }
+
+  if (role === "system") {
+    return (
+      <span className="flex h-9 w-9 items-center justify-center rounded-full bg-secondary text-secondary-foreground shadow-sm">
+        <Sparkles className="h-4 w-4" />
+      </span>
+    );
+  }
+
+  return (
+    <span className="flex h-9 w-9 items-center justify-center rounded-full bg-foreground text-background shadow-sm">
+      <span className="text-xs font-semibold">TU</span>
+    </span>
+  );
+}
+
+function AiChatMessage({
+  className,
+  role = "assistant",
+  author,
+  timestamp,
+  status = "complete",
+  avatar,
+  actions,
+  sources,
+  children,
+  ...props
+}: AiChatMessageProps) {
+  const isUser = role === "user";
+
+  return (
+    <article
+      className={cn("flex gap-3", isUser ? "justify-end" : "justify-start", className)}
+      {...props}
+    >
+      {!isUser ? <div className="shrink-0">{avatar ?? getDefaultAvatar(role)}</div> : null}
+
+      <div className={cn("grid max-w-[90%] gap-2 md:max-w-[74%]", isUser && "justify-items-end")}>
+        <div className={cn("flex items-center gap-2", isUser && "justify-end")}>
+          <span className="text-xs font-medium text-foreground">{author ?? (isUser ? "Tu" : "Cortexa AI")}</span>
+          {timestamp ? <span className="text-xs text-muted-foreground">{timestamp}</span> : null}
+          {status !== "complete" ? (
+            <Badge variant={status === "error" ? "destructive" : "secondary"}>
+              {status === "streaming" ? "Generando" : "Error"}
+            </Badge>
+          ) : null}
+        </div>
+
+        <div
+          className={cn(
+            "rounded-2xl border px-4 py-3 text-sm leading-6 shadow-sm",
+            isUser
+              ? "border-primary bg-primary text-primary-foreground"
+              : role === "system"
+                ? "border-secondary bg-secondary text-secondary-foreground"
+                : "bg-card text-foreground"
+          )}
+        >
+          <div className="whitespace-pre-wrap">{children}</div>
+        </div>
+
+        {sources?.length ? (
+          <div className={cn("flex flex-wrap gap-2", isUser && "justify-end")}>
+            {sources.map((source) =>
+              source.href ? (
+                <a
+                  key={`${source.label}-${source.href}`}
+                  href={source.href}
+                  className="inline-flex items-center gap-1 rounded-full border px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                >
+                  {source.label}
+                  <PanelRightOpen className="h-3 w-3" />
+                </a>
+              ) : (
+                <span
+                  key={source.label}
+                  className="inline-flex items-center rounded-full border px-2.5 py-1 text-xs text-muted-foreground"
+                >
+                  {source.label}
+                </span>
+              )
+            )}
+          </div>
+        ) : null}
+
+        {actions ? <div className={cn("flex flex-wrap gap-2", isUser && "justify-end")}>{actions}</div> : null}
+      </div>
+
+      {isUser ? <div className="shrink-0">{avatar ?? getDefaultAvatar(role)}</div> : null}
+    </article>
+  );
+}
+
+type AiChatAssistantMessageProps = Omit<AiChatMessageProps, "role">;
+
+function AiChatAssistantMessage(props: AiChatAssistantMessageProps) {
+  return <AiChatMessage role="assistant" {...props} />;
+}
+
+type AiChatUserMessageProps = Omit<AiChatMessageProps, "role">;
+
+function AiChatUserMessage(props: AiChatUserMessageProps) {
+  return <AiChatMessage role="user" {...props} />;
+}
+
+interface AiChatSummaryActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  description?: string;
+  actionsClassName?: string;
+}
+
+function AiChatSummaryActions({
+  className,
+  title = "Quick actions",
+  description,
+  actionsClassName,
+  children,
+  ...props
+}: AiChatSummaryActionsProps) {
+  return (
+    <section className={cn("grid gap-3 rounded-2xl border bg-card p-4 shadow-sm", className)} {...props}>
+      <div className="grid gap-1">
+        <p className="text-sm font-semibold text-foreground">{title}</p>
+        {description ? <p className="text-xs text-muted-foreground">{description}</p> : null}
+      </div>
+      <div className={cn("grid gap-3 md:grid-cols-3", actionsClassName)}>{children}</div>
+    </section>
+  );
+}
+
+interface AiChatSummaryActionProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  title: string;
+  description?: string;
+  icon?: LucideIcon;
+  active?: boolean;
+  badge?: string;
+}
+
+const AiChatSummaryAction = React.forwardRef<HTMLButtonElement, AiChatSummaryActionProps>(
+  (
+    {
+      className,
+      title,
+      description,
+      icon: Icon = Sparkles,
+      active = false,
+      badge,
+      type = "button",
+      ...props
+    },
+    ref
+  ) => (
+    <button
+      ref={ref}
+      type={type}
+      className={cn(
+        "flex w-full items-start gap-3 rounded-xl border px-4 py-4 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        active
+          ? "border-[var(--color-accent-blue)]/40 bg-[var(--color-accent-blue)]/10"
+          : "hover:border-border hover:bg-accent/40",
+        className
+      )}
+      {...props}
+    >
+      <span className="mt-0.5 flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-[var(--color-brand)]/10 text-[var(--color-brand)]">
+        <Icon className="h-5 w-5" />
+      </span>
+      <span className="grid flex-1 gap-1">
+        <span className="flex flex-wrap items-center gap-2">
+          <span className="text-sm font-medium text-foreground">{title}</span>
+          {badge ? <Badge variant="secondary">{badge}</Badge> : null}
+        </span>
+        {description ? <span className="text-xs leading-5 text-muted-foreground">{description}</span> : null}
+      </span>
+    </button>
+  )
+);
+
+AiChatSummaryAction.displayName = "AiChatSummaryAction";
+
+interface AiChatComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
+  textareaProps?: React.ComponentPropsWithoutRef<typeof Textarea>;
+  onSubmit?: React.FormEventHandler<HTMLFormElement>;
+  submitLabel?: string;
+  submitIcon?: React.ReactNode;
+  leadingActions?: React.ReactNode;
+  trailingActions?: React.ReactNode;
+  helperText?: React.ReactNode;
+  disabled?: boolean;
+}
+
+function AiChatComposer({
+  className,
+  textareaProps,
+  onSubmit,
+  submitLabel = "Send",
+  submitIcon = <Send className="h-4 w-4" />,
+  leadingActions,
+  trailingActions,
+  helperText,
+  disabled = false,
+  ...props
+}: AiChatComposerProps) {
+  const { className: textareaClassName, placeholder, disabled: textareaDisabled, ...restTextareaProps } = textareaProps ?? {};
+  const isDisabled = disabled || Boolean(textareaDisabled);
+
+  return (
+    <form className={cn("border-t bg-card px-4 py-4", className)} onSubmit={onSubmit} {...props}>
+      <div className="rounded-2xl border bg-background p-3 shadow-sm">
+        <Textarea
+          className={cn(
+            "min-h-24 resize-none border-0 bg-transparent p-0 text-sm shadow-none focus-visible:ring-0",
+            textareaClassName
+          )}
+          placeholder={placeholder ?? "Describe what you need from the assistant..."}
+          disabled={isDisabled}
+          {...restTextareaProps}
+        />
+        <div className="mt-3 flex flex-wrap items-center justify-between gap-3">
+          <div className="flex flex-wrap items-center gap-2">{leadingActions}</div>
+          <div className="flex flex-wrap items-center gap-2">
+            {trailingActions}
+            <Button type="submit" disabled={isDisabled}>
+              {submitIcon}
+              {submitLabel}
+            </Button>
+          </div>
+        </div>
+      </div>
+      {helperText ? <p className="mt-2 text-xs text-muted-foreground">{helperText}</p> : null}
+    </form>
+  );
+}
+
+interface AiChatEmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description: string;
+  prompts?: string[];
+  onPromptSelect?: (prompt: string) => void;
+}
+
+function AiChatEmptyState({
+  className,
+  title,
+  description,
+  prompts,
+  onPromptSelect,
+  ...props
+}: AiChatEmptyStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-1 flex-col items-center justify-center gap-5 rounded-2xl border border-dashed bg-card/70 px-6 py-10 text-center",
+        className
+      )}
+      {...props}
+    >
+      <span className="flex h-14 w-14 items-center justify-center rounded-2xl bg-[var(--color-brand)]/10 text-[var(--color-brand)]">
+        <Sparkles className="h-6 w-6" />
+      </span>
+      <div className="grid max-w-xl gap-2">
+        <p className="text-lg font-semibold text-foreground">{title}</p>
+        <p className="text-sm leading-6 text-muted-foreground">{description}</p>
+      </div>
+
+      {prompts?.length ? (
+        <div className="flex max-w-2xl flex-wrap items-center justify-center gap-2">
+          {prompts.map((prompt) => (
+            <Button key={prompt} type="button" variant="outline" size="sm" onClick={() => onPromptSelect?.(prompt)}>
+              {prompt}
+            </Button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+interface AiChatFloatingButtonProps extends ButtonProps {
+  label?: string;
+  unreadCount?: number;
+  icon?: LucideIcon;
+}
+
+function AiChatFloatingButton({
+  className,
+  label = "Asistente IA",
+  unreadCount,
+  icon: Icon = Sparkles,
+  variant = "default",
+  size = "lg",
+  children,
+  ...props
+}: AiChatFloatingButtonProps) {
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      className={cn("fixed bottom-6 right-6 h-14 rounded-full px-5 shadow-lg", className)}
+      {...props}
+    >
+      <Icon className="h-4 w-4" />
+      <span>{children ?? label}</span>
+      {typeof unreadCount === "number" && unreadCount > 0 ? (
+        <span className="rounded-full bg-white/15 px-2 py-0.5 text-xs font-semibold text-inherit">
+          {unreadCount > 9 ? "9+" : unreadCount}
+        </span>
+      ) : null}
+    </Button>
+  );
+}
+
+type AiChatFloatingSidebarSide = "left" | "right";
+
+interface AiChatFloatingSidebarProps {
+  children: React.ReactNode;
+  trigger?: React.ReactNode;
+  side?: AiChatFloatingSidebarSide;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  contentClassName?: string;
+  triggerAsChild?: boolean;
+}
+
+function AiChatFloatingSidebar({
+  children,
+  trigger,
+  side = "right",
+  open,
+  defaultOpen,
+  onOpenChange,
+  contentClassName,
+  triggerAsChild = true
+}: AiChatFloatingSidebarProps) {
+  const resolvedTrigger = trigger ?? <AiChatFloatingButton />;
+
+  return (
+    <Sheet open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      <SheetTrigger asChild={triggerAsChild}>{resolvedTrigger}</SheetTrigger>
+      <SheetContent side={side} className={cn("w-full p-0 sm:max-w-[460px]", contentClassName)}>
+        <AiChatLayout variant="sidebar" className="h-full rounded-none border-0 shadow-none">
+          {children}
+        </AiChatLayout>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export {
+  AiChatAssistantMessage,
+  AiChatComposer,
+  AiChatEmptyState,
+  AiChatFloatingButton,
+  AiChatFloatingSidebar,
+  AiChatHeader,
+  AiChatLayout,
+  AiChatMessage,
+  AiChatMessageList,
+  AiChatPanel,
+  AiChatSidebar,
+  AiChatSidebarHeader,
+  AiChatSummaryAction,
+  AiChatSummaryActions,
+  AiChatThreadButton,
+  AiChatThreadList,
+  AiChatUserMessage
+};
+export type {
+  AiChatAssistantMessageProps,
+  AiChatFloatingButtonProps,
+  AiChatFloatingSidebarProps,
+  AiChatFloatingSidebarSide,
+  AiChatLayoutProps,
+  AiChatLayoutVariant,
+  AiChatMessageProps,
+  AiChatMessageSource,
+  AiChatMessageStatus,
+  AiChatRole,
+  AiChatSummaryActionProps,
+  AiChatSummaryActionsProps,
+  AiChatThreadButtonProps,
+  AiChatUserMessageProps
+};

package/src/components/branding/brand-logo.tsx

@@ -0,0 +1,77 @@
+import { cn } from "../../lib/cn";
+import { useTheme } from "../../providers/theme-provider";
+import LogoDark from "../../assets/isotipo-cortexa-dark.png";
+import LogoLight from "../../assets/isotipo-cortexa-light.png";
+
+interface BrandLogoProps {
+  className?: string;
+  size?: "sm" | "md" | "lg";
+  href?: string;
+}
+
+const sizeMap = {
+  sm: { icon: "h-6 w-6", text: "text-sm", gap: "gap-2" },
+  md: { icon: "h-7 w-7", text: "text-lg", gap: "gap-3" },
+  lg: { icon: "h-9 w-9", text: "text-xl", gap: "gap-3" }
+} as const;
+
+export function BrandLogo({ className, size = "md", href }: BrandLogoProps) {
+  const { resolvedTheme } = useTheme();
+  const isDark = resolvedTheme === "dark";
+  const s = sizeMap[size];
+
+  const content = (
+    <>
+      <div
+        className={cn(
+          "flex shrink-0 items-center justify-center rounded-md",
+          s.icon,
+          isDark ? "bg-[var(--color-brand)] p-1" : "bg-transparent"
+        )}
+      >
+        <img
+          src={isDark ? LogoDark : LogoLight}
+          alt="Cortexa"
+          className="max-h-full max-w-full object-contain"
+        />
+      </div>
+
+      <div className="flex items-baseline">
+        <span
+          className={cn(
+            "font-bold leading-none",
+            s.text,
+            isDark ? "text-white" : "text-[var(--color-brand)]"
+          )}
+        >
+          Cortexa
+        </span>
+        <span
+          className={cn(
+            "ml-1 font-normal leading-none",
+            s.text,
+            isDark ? "text-white" : "text-[var(--color-accent-blue)]"
+          )}
+        >
+          Fiscal
+        </span>
+      </div>
+    </>
+  );
+
+  const wrapperClass = cn("flex items-center", s.gap, className);
+
+  if (href) {
+    return (
+      <a href={href} className={wrapperClass} aria-label="Cortexa Fiscal — Inicio">
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <div className={wrapperClass} aria-label="Cortexa Fiscal">
+      {content}
+    </div>
+  );
+}