@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/src/ai/prompt-input/prompt-input.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { ArrowUp, Square } from "lucide-react";
+import {
+  type FormEvent,
+  type KeyboardEvent,
+  type ReactNode,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "../../utils/cn.js";
+import { shouldSubmit } from "./keys.js";
+
+export interface PromptInputProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Called with the trimmed text on Enter or send. Never called when empty. */
+  onSubmit?: (value: string) => void;
+  /** While true the send button becomes a stop button. */
+  streaming?: boolean;
+  onStop?: () => void;
+  placeholder?: string;
+  /** Accessible name of the textarea. */
+  label?: string;
+  disabled?: boolean;
+  /** Rows after which the textarea scrolls instead of growing. */
+  maxRows?: number;
+  /** Row above the text (Attachment chips). */
+  attachments?: ReactNode;
+  /** Left of the send button (attach button, model picker…). */
+  actions?: ReactNode;
+  /** Hint line under the field. */
+  hint?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Composer: autosizing textarea, Enter to send, Shift+Enter for a new line, attachments slot
+ * and a stop button while a response streams.
+ */
+export function PromptInput({
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onSubmit,
+  streaming,
+  onStop,
+  placeholder = "Escribe un mensaje…",
+  label = "Mensaje",
+  disabled,
+  maxRows = 6,
+  attachments,
+  actions,
+  hint,
+  className,
+}: PromptInputProps) {
+  const [state, setState] = useState(defaultValue);
+  const value = valueProp ?? state;
+  const area = useRef<HTMLTextAreaElement>(null);
+
+  useLayoutEffect(() => {
+    const el = area.current;
+    if (!el) return;
+    // The value is read so the effect re-measures whenever the text changes.
+    void value;
+    el.style.height = "auto";
+    const line = Number.parseFloat(getComputedStyle(el).lineHeight) || 20;
+    const max = line * maxRows;
+    el.style.height = `${Math.min(el.scrollHeight, max)}px`;
+    el.style.overflowY = el.scrollHeight > max ? "auto" : "hidden";
+  }, [value, maxRows]);
+
+  const set = (next: string) => {
+    if (valueProp === undefined) setState(next);
+    onValueChange?.(next);
+  };
+
+  const submit = () => {
+    const text = value.trim();
+    if (!text || disabled || streaming) return;
+    onSubmit?.(text);
+    set("");
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (
+      shouldSubmit({
+        key: event.key,
+        shiftKey: event.shiftKey,
+        isComposing: event.nativeEvent.isComposing,
+      })
+    ) {
+      event.preventDefault();
+      submit();
+    }
+  };
+
+  const onFormSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    if (streaming) onStop?.();
+    else submit();
+  };
+
+  const canSend = value.trim().length > 0 && !disabled;
+
+  return (
+    <form onSubmit={onFormSubmit} className={cn("@container/prompt grid min-w-0 gap-1", className)}>
+      <div className="grid gap-density-sm rounded-card bg-surface-control p-2 text-ink border-control shadow-control focus-within:focus-ring">
+        {attachments ? <div className="flex flex-wrap gap-density-sm">{attachments}</div> : null}
+        <textarea
+          ref={area}
+          rows={1}
+          value={value}
+          disabled={disabled}
+          aria-label={label}
+          placeholder={placeholder}
+          onChange={(event) => set(event.target.value)}
+          onKeyDown={onKeyDown}
+          className="block max-h-none w-full min-w-0 resize-none bg-transparent px-1 py-1 text-body leading-normal text-ink outline-none placeholder:text-ink-3 disabled:cursor-not-allowed"
+        />
+        <div className="flex items-center justify-between gap-density-sm">
+          <div className="flex min-w-0 items-center gap-density-sm">{actions}</div>
+          {streaming ? (
+            <button
+              type="submit"
+              aria-label="Detener respuesta"
+              className="inline-grid size-8 shrink-0 cursor-pointer place-items-center rounded-button bg-ink text-bg pressable focus-visible:focus-ring"
+            >
+              <Square aria-hidden className="size-3.5 fill-current" />
+            </button>
+          ) : (
+            <button
+              type="submit"
+              aria-label="Enviar mensaje"
+              disabled={!canSend}
+              className="inline-grid size-8 shrink-0 cursor-pointer place-items-center rounded-button bg-accent text-on-accent pressable focus-visible:focus-ring disabled:cursor-not-allowed disabled:opacity-45"
+            >
+              <ArrowUp aria-hidden className="size-4" />
+            </button>
+          )}
+        </div>
+      </div>
+      {hint ? <p className="px-1 text-meta text-ink-3">{hint}</p> : null}
+    </form>
+  );
+}

package/src/ai/prompt-suggestion/index.ts

@@ -0,0 +1 @@
+export * from "./prompt-suggestion.js";

package/src/ai/prompt-suggestion/prompt-suggestion.tsx

@@ -0,0 +1,54 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../utils/cn.js";
+
+export interface PromptSuggestionProps
+  extends Omit<ComponentPropsWithoutRef<"button">, "onSelect" | "children"> {
+  /** Receives the suggestion text when pressed (the visible label is the text). */
+  onSelect?: (text: string) => void;
+  children: string;
+}
+
+/** Chip with a suggested prompt. Pressing it hands the text to `onSelect`. */
+export function PromptSuggestion({
+  onSelect,
+  children,
+  className,
+  onClick,
+  ...props
+}: PromptSuggestionProps) {
+  return (
+    <button
+      type="button"
+      onClick={(event) => {
+        onClick?.(event);
+        onSelect?.(children);
+      }}
+      className={cn(
+        "inline-flex h-control-sm min-w-0 max-w-full cursor-pointer items-center rounded-button bg-surface-control px-3 text-meta text-ink-2 border-control shadow-control pressable hover:bg-surface-2 hover:text-ink focus-visible:focus-ring",
+        className,
+      )}
+      {...props}
+    >
+      <span className="truncate">{children}</span>
+    </button>
+  );
+}
+
+export interface PromptSuggestionListProps extends ComponentPropsWithoutRef<"fieldset"> {
+  label?: string;
+}
+
+/** Wrapping group of suggestion chips. */
+export function PromptSuggestionList({
+  label = "Sugerencias",
+  className,
+  ...props
+}: PromptSuggestionListProps) {
+  return (
+    <fieldset
+      aria-label={label}
+      className={cn("@container/suggest flex min-w-0 flex-wrap gap-density-sm", className)}
+      {...props}
+    />
+  );
+}

package/src/ai/source/index.ts

@@ -0,0 +1 @@
+export * from "./source.js";

package/src/ai/source/source.tsx

@@ -0,0 +1,73 @@
+import type { ComponentPropsWithoutRef } from "react";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../../overlays/hover-card/hover-card.js";
+import { cn } from "../../utils/cn.js";
+import { safeHref } from "../markdown/parse.js";
+
+export interface SourceProps extends Omit<ComponentPropsWithoutRef<"a">, "href" | "title"> {
+  /** Citation number shown in the chip. */
+  index?: number;
+  title: string;
+  /** Only http(s) and mailto URLs are linked; anything else renders a non-clickable chip. */
+  url: string;
+  /** Short excerpt shown in the hover preview. */
+  snippet?: string;
+}
+
+function hostOf(url: string): string {
+  try {
+    return new URL(url).hostname.replace(/^www\./, "");
+  } catch {
+    return url;
+  }
+}
+
+/** Citation chip with a hover/focus preview of the source (title, host and excerpt). */
+export function Source({ index, title, url, snippet, className, ...props }: SourceProps) {
+  const href = safeHref(url);
+  const host = hostOf(url);
+  const chipClass = cn(
+    "inline-flex h-control-sm min-w-0 max-w-full items-center gap-1.5 rounded-badge bg-surface-control px-2 text-meta text-ink-2 no-underline border-control shadow-control pressable hover:text-ink focus-visible:focus-ring",
+    className,
+  );
+  const chip = (
+    <>
+      {index != null ? (
+        <span className="grid size-4 shrink-0 place-items-center rounded-badge bg-accent-soft text-[10px] font-bold text-accent-ink">
+          {index}
+        </span>
+      ) : null}
+      <span className="truncate">{host}</span>
+    </>
+  );
+
+  return (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        {href ? (
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer nofollow"
+            className={chipClass}
+            {...props}
+          >
+            {chip}
+          </a>
+        ) : (
+          <button type="button" className={chipClass}>
+            {chip}
+          </button>
+        )}
+      </HoverCardTrigger>
+      <HoverCardContent className="@container/source w-72 max-w-[calc(100vw-1rem)] rounded-popover bg-surface-overlay p-3 text-ink shadow-overlay border-control surface-overlay">
+        <p className="text-meta text-ink-3">{host}</p>
+        <p className="mt-0.5 line-clamp-2 text-body font-semibold">{title}</p>
+        {snippet ? <p className="mt-1 line-clamp-4 text-meta text-ink-2">{snippet}</p> : null}
+      </HoverCardContent>
+    </HoverCard>
+  );
+}

package/src/ai/text-shimmer/index.ts

@@ -0,0 +1 @@
+export * from "./text-shimmer.js";

package/src/ai/text-shimmer/text-shimmer.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import type { CSSProperties, ElementType, ReactNode } from "react";
+import { cn } from "../../utils/cn.js";
+import { usePrefersReducedMotion } from "../../utils/reduced-motion.js";
+import { AiKeyframes } from "../internal/keyframes.js";
+
+export interface TextShimmerProps {
+  children: ReactNode;
+  /** Element to render. */
+  as?: ElementType;
+  /** Seconds for one sweep. */
+  duration?: number;
+  className?: string;
+}
+
+/** Text with a light sweep, used for "thinking…" labels. Static with reduced motion. */
+export function TextShimmer({
+  children,
+  as: Comp = "span",
+  duration = 2,
+  className,
+}: TextShimmerProps) {
+  const reduced = usePrefersReducedMotion();
+  const style: CSSProperties | undefined = reduced
+    ? undefined
+    : {
+        backgroundImage:
+          "linear-gradient(100deg, var(--color-ink-3) 35%, var(--color-ink) 50%, var(--color-ink-3) 65%)",
+        backgroundSize: "250% 100%",
+        animation: `ui-ai-shimmer ${duration}s linear infinite`,
+        WebkitBackgroundClip: "text",
+        backgroundClip: "text",
+        color: "transparent",
+      };
+  return (
+    <Comp className={cn("inline-block text-ink-3", className)} style={style}>
+      <AiKeyframes />
+      {children}
+    </Comp>
+  );
+}

package/src/ai/tool-call/index.ts

@@ -0,0 +1 @@
+export * from "./tool-call.js";

package/src/ai/tool-call/tool-call.tsx

@@ -0,0 +1,108 @@
+import { Check, CircleAlert, Clock, LoaderCircle, Wrench } from "lucide-react";
+import { useMemo } from "react";
+import { cn } from "../../utils/cn.js";
+import { CodeBlock } from "../code-block/code-block.js";
+import { Disclosure } from "../internal/disclosure.js";
+
+export type ToolCallStatus = "pending" | "running" | "done" | "error";
+
+const STATUS: Record<ToolCallStatus, { label: string; tone: string }> = {
+  pending: { label: "En espera", tone: "text-ink-3" },
+  running: { label: "Ejecutando", tone: "text-accent-ink" },
+  done: { label: "Listo", tone: "text-success" },
+  error: { label: "Error", tone: "text-danger" },
+};
+
+function StatusIcon({ status }: { status: ToolCallStatus }) {
+  const cls = "size-3.5 shrink-0";
+  if (status === "running") return <LoaderCircle aria-hidden className={cn(cls, "animate-spin")} />;
+  if (status === "done") return <Check aria-hidden className={cls} />;
+  if (status === "error") return <CircleAlert aria-hidden className={cls} />;
+  return <Clock aria-hidden className={cls} />;
+}
+
+export interface ToolCallProps {
+  /** Tool identifier, e.g. `buscar_turnos`. */
+  name: string;
+  status?: ToolCallStatus;
+  /** Arguments sent to the tool; shown as formatted JSON. */
+  args?: unknown;
+  /** Result returned by the tool; shown as formatted JSON. */
+  result?: unknown;
+  /** Error text when `status` is `error`. */
+  error?: string;
+  /** Pre-formatted duration, e.g. `1,2 s`. */
+  duration?: string;
+  defaultOpen?: boolean;
+  className?: string;
+}
+
+const pretty = (value: unknown) =>
+  typeof value === "string" ? value : JSON.stringify(value, null, 2);
+
+/** Collapsible tool invocation with status, JSON arguments and JSON result. */
+export function ToolCall({
+  name,
+  status = "pending",
+  args,
+  result,
+  error,
+  duration,
+  defaultOpen = false,
+  className,
+}: ToolCallProps) {
+  const info = STATUS[status];
+  const argsText = useMemo(() => (args === undefined ? null : pretty(args)), [args]);
+  const resultText = useMemo(() => (result === undefined ? null : pretty(result)), [result]);
+
+  return (
+    <div
+      className={cn(
+        "@container/tool min-w-0 rounded-card bg-surface-card p-2 text-ink border-card shadow-card",
+        className,
+      )}
+    >
+      <Disclosure
+        defaultOpen={defaultOpen}
+        header={
+          <>
+            <Wrench aria-hidden className="size-3.5 shrink-0 text-ink-3" />
+            <span className="min-w-0 truncate font-mono text-meta font-medium">{name}</span>
+            <span className={cn("ml-auto flex shrink-0 items-center gap-1 text-meta", info.tone)}>
+              <StatusIcon status={status} />
+              <span className="hidden @xs/tool:inline">{info.label}</span>
+              <span className="sr-only @xs/tool:hidden">{info.label}</span>
+              {duration ? (
+                <span className="hidden text-ink-3 @sm/tool:inline">· {duration}</span>
+              ) : null}
+            </span>
+          </>
+        }
+        panelClassName="grid gap-density-sm"
+      >
+        <div className="grid gap-density-sm pt-density-sm">
+          {argsText ? (
+            <section aria-label="Argumentos" className="grid gap-1">
+              <h4 className="text-meta font-semibold text-ink-2">Argumentos</h4>
+              <CodeBlock code={argsText} language="json" />
+            </section>
+          ) : null}
+          {status === "error" && error ? (
+            <p
+              role="alert"
+              className="rounded-badge bg-danger-soft px-2 py-1 text-meta text-danger"
+            >
+              {error}
+            </p>
+          ) : null}
+          {resultText ? (
+            <section aria-label="Resultado" className="grid gap-1">
+              <h4 className="text-meta font-semibold text-ink-2">Resultado</h4>
+              <CodeBlock code={resultText} language="json" />
+            </section>
+          ) : null}
+        </div>
+      </Disclosure>
+    </div>
+  );
+}

package/src/atoms/avatar/avatar.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../../utils/cn.js";
+
+function initials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 1) {
+    return (words[0]?.slice(0, 2) ?? "").toUpperCase();
+  }
+  const first = words[0]?.at(0) ?? "";
+  const last = words.at(-1)?.at(0) ?? "";
+  return `${first}${last}`.toUpperCase();
+}
+
+export type AvatarSize = "md" | "lg";
+
+const sizeClasses: Record<AvatarSize, string> = {
+  md: "size-[26px] text-[10px]",
+  lg: "size-8 text-[11px]",
+};
+
+export interface AvatarProps {
+  /** Full name: used for the initials fallback and as the accessible name. */
+  name: string;
+  src?: string;
+  size?: AvatarSize;
+  /** Fills the avatar with the accent color (e.g. the current user). */
+  highlighted?: boolean;
+  className?: string;
+}
+
+export function Avatar({ name, src, size = "md", highlighted, className }: AvatarProps) {
+  return (
+    <AvatarPrimitive.Root
+      role="img"
+      aria-label={name}
+      className={cn(
+        "inline-grid shrink-0 place-items-center overflow-hidden rounded-avatar font-bold tracking-[.02em]",
+        highlighted ? "bg-accent text-on-accent" : "bg-sunken text-ink-2",
+        sizeClasses[size],
+        className,
+      )}
+    >
+      {src ? <AvatarPrimitive.Image src={src} alt="" /> : null}
+      <AvatarPrimitive.Fallback aria-hidden="true" delayMs={src ? 400 : undefined}>
+        {initials(name)}
+      </AvatarPrimitive.Fallback>
+    </AvatarPrimitive.Root>
+  );
+}

package/src/atoms/avatar/index.ts

@@ -0,0 +1 @@
+export { Avatar, type AvatarProps, type AvatarSize } from "./avatar.js";

package/src/atoms/avatar-group/avatar-group.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { cn } from "../../utils/cn.js";
+
+export interface AvatarGroupProps {
+  children?: ReactNode;
+  className?: string;
+}
+
+/** Stacked, overlapping avatars separated by a surface-colored ring. */
+export function AvatarGroup({ children, className }: AvatarGroupProps) {
+  return (
+    <div className={cn("flex [&>*+*]:-ml-1.5 [&>*]:shadow-[0_0_0_2px_var(--surface)]", className)}>
+      {children}
+    </div>
+  );
+}

package/src/atoms/avatar-group/index.ts

@@ -0,0 +1 @@
+export { AvatarGroup, type AvatarGroupProps } from "./avatar-group.js";

package/src/atoms/big-date/big-date.tsx

@@ -0,0 +1,23 @@
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../utils/cn.js";
+
+export type BigDateSize = "normal" | "compact";
+
+const sizeClasses: Record<BigDateSize, string> = {
+  normal: "text-[30px]",
+  compact: "text-[22px]",
+};
+
+export interface BigDateProps extends ComponentPropsWithoutRef<"div"> {
+  size?: BigDateSize;
+}
+
+/** Prominent date or number, typically at the top of a card. */
+export function BigDate({ size = "normal", className, ...props }: BigDateProps) {
+  return (
+    <div
+      className={cn("font-[720] leading-[1.1] tracking-[-0.025em]", sizeClasses[size], className)}
+      {...props}
+    />
+  );
+}

package/src/atoms/big-date/index.ts

@@ -0,0 +1 @@
+export { BigDate, type BigDateProps, type BigDateSize } from "./big-date.js";

package/src/atoms/button/button.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Children,
+  type ComponentPropsWithoutRef,
+  Fragment,
+  isValidElement,
+  type ReactNode,
+} from "react";
+import { cn } from "../../utils/cn.js";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
+export type ButtonSize = "sm" | "md";
+
+const variantClasses: Record<ButtonVariant, string> = {
+  primary: "bg-accent text-on-accent font-bold hover:bg-accent-ink",
+  secondary: "bg-surface-control text-ink shadow-control hover:bg-surface-2",
+  ghost: "bg-transparent text-ink-2 hover:bg-surface-2 hover:text-ink",
+  danger: "bg-danger-soft text-danger hover:bg-danger-soft/70",
+};
+
+const sizeClasses: Record<ButtonSize, string> = {
+  sm: "h-control-sm px-3 text-[12.5px] [&_svg]:size-3.5",
+  md: "h-control px-control-x text-[13px]",
+};
+
+export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  loading?: boolean;
+  /** Render the child element (via Radix Slot) instead of a `<button>`, e.g. a link. */
+  asChild?: boolean;
+}
+
+export function Button({
+  variant = "secondary",
+  size = "md",
+  loading,
+  disabled,
+  asChild,
+  className,
+  children,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot : "button";
+  // Text runs get their own truncating span so a long label ends in "…" inside a narrow
+  // container instead of overflowing; icons keep their size. Slot needs its single child as is.
+  const content = asChild ? children : Children.map(children, labelRun);
+  return (
+    <Comp
+      {...(asChild ? {} : { type: "button" })}
+      aria-busy={loading ? "true" : undefined}
+      disabled={disabled || loading}
+      className={cn(
+        "inline-flex min-w-0 max-w-full cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-button pressable focus-visible:focus-ring font-[650] no-underline disabled:cursor-not-allowed disabled:opacity-45 [&_svg]:shrink-0",
+        variantClasses[variant],
+        sizeClasses[size],
+        className,
+      )}
+      {...props}
+    >
+      {content}
+    </Comp>
+  );
+}
+
+function labelRun(child: ReactNode): ReactNode {
+  if (typeof child === "string" || typeof child === "number") {
+    return <span className="min-w-0 truncate">{child}</span>;
+  }
+  if (isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment) {
+    return Children.map(child.props.children, labelRun);
+  }
+  return child;
+}

package/src/atoms/button/index.ts

@@ -0,0 +1,6 @@
+export {
+  Button,
+  type ButtonProps,
+  type ButtonSize,
+  type ButtonVariant,
+} from "./button.js";

package/src/atoms/checkbox/checkbox.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+import type { ComponentPropsWithoutRef } from "react";
+import { cn } from "../../utils/cn.js";
+
+export interface CheckboxProps extends ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {}
+
+export function Checkbox({ className, ...props }: CheckboxProps) {
+  return (
+    <CheckboxPrimitive.Root
+      className={cn("inline-flex size-10 shrink-0 items-center justify-center", className)}
+      {...props}
+    >
+      <span className="grid size-[18px] place-items-center rounded-pill border-[1.5px] border-line-strong data-[state=checked]:border-success data-[state=checked]:bg-success">
+        <CheckboxPrimitive.Indicator>
+          <Check aria-hidden="true" className="size-[11px] stroke-[3] text-on-accent" />
+        </CheckboxPrimitive.Indicator>
+      </span>
+    </CheckboxPrimitive.Root>
+  );
+}

package/src/atoms/checkbox/index.ts

@@ -0,0 +1 @@
+export { Checkbox, type CheckboxProps } from "./checkbox.js";