@lindaui/blocks 0.4.2 → 0.5.0

package/src/list-pane.tsx

@@ -0,0 +1,143 @@
+"use client";
+import React, { type ReactNode } from "react";
+import { AlertCircle, FileText, RotateCcw } from "lucide-react";
+import { Button } from "@lindaui/ui/button";
+import { SearchField } from "@lindaui/ui/search-field";
+import { Skeleton } from "@lindaui/ui/skeleton";
+
+export interface ListPaneFilter {
+  key: string;
+  label: string;
+  count?: number;
+}
+
+export interface ListPaneProps {
+  filters?: ListPaneFilter[];
+  activeFilter?: string;
+  onFilterChange?: (key: string) => void;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+  searchLabel?: string;
+  loading?: boolean;
+  error?: string | null;
+  onRetry?: () => void;
+  errorTitle?: string;
+  retryLabel?: string;
+  isEmpty?: boolean;
+  emptyTitle?: string;
+  emptyDescription?: ReactNode;
+  emptyIcon?: ReactNode;
+  children?: ReactNode;
+}
+
+export function ListPane({
+  filters,
+  activeFilter,
+  onFilterChange,
+  searchValue = "",
+  onSearchChange,
+  searchPlaceholder = "Buscar",
+  searchLabel = "Buscar",
+  loading = false,
+  error = null,
+  onRetry,
+  errorTitle = "No se pudieron cargar los datos",
+  retryLabel = "Reintentar",
+  isEmpty,
+  emptyTitle = "Sin resultados",
+  emptyDescription,
+  emptyIcon,
+  children,
+}: ListPaneProps) {
+  const showEmpty =
+    !loading &&
+    !error &&
+    (isEmpty !== undefined ? isEmpty : React.Children.count(children) === 0);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col bg-background">
+      {/* Top controls */}
+      <div className="flex-none space-y-3 px-3 pb-3 pt-3 sm:px-4">
+        {filters && filters.length > 0 && (
+          <div className="flex flex-wrap gap-2 overflow-x-auto">
+            {filters.map((f) => (
+              <Button
+                key={f.key}
+                variant={activeFilter === f.key ? "primary" : "ghost"}
+                onPress={() => onFilterChange?.(f.key)}
+                size="sm"
+              >
+                {f.label}
+                {f.count != null && (
+                  <span
+                    aria-hidden
+                    className="ml-1.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full bg-muted-foreground/15 px-1 text-[11px] font-semibold tabular-nums text-muted-foreground"
+                  >
+                    {f.count}
+                  </span>
+                )}
+              </Button>
+            ))}
+          </div>
+        )}
+
+        <SearchField
+          value={searchValue}
+          onChange={onSearchChange ?? (() => {})}
+          placeholder={searchPlaceholder}
+          aria-label={searchLabel}
+        />
+      </div>
+
+      {/* Scroll area */}
+      <div className="min-h-0 flex-1 overflow-y-auto border-t border-border">
+        {loading && (
+          <div role="status" aria-label="Cargando">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div
+                key={i}
+                className="flex items-center gap-3 border-b border-border px-3 py-3.5 sm:px-4"
+              >
+                <Skeleton className="h-[42px] w-[42px] rounded-[11px]" />
+                <div className="flex flex-1 flex-col gap-2">
+                  <Skeleton className="h-3 w-36" />
+                  <Skeleton className="h-2.5 w-28" />
+                  <Skeleton className="h-2.5 w-20" />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {!loading && error && (
+          <div className="m-3 rounded-xl border border-destructive/35 bg-destructive/5 p-6 text-center">
+            <AlertCircle className="mx-auto h-6 w-6 text-destructive" />
+            <p className="mt-2 text-sm font-semibold">{errorTitle}</p>
+            <p className="mt-1 text-xs text-muted-foreground">{error}</p>
+            {onRetry && (
+              <Button variant="secondary" size="sm" onPress={onRetry} className="mt-3">
+                <RotateCcw className="h-3.5 w-3.5" />
+                {retryLabel}
+              </Button>
+            )}
+          </div>
+        )}
+
+        {showEmpty && (
+          <div className="py-16 text-center">
+            <div className="mx-auto grid h-11 w-11 place-items-center rounded-xl bg-secondary">
+              {emptyIcon ?? <FileText className="h-5 w-5 text-muted-foreground" />}
+            </div>
+            <p className="mt-3 text-sm font-semibold">{emptyTitle}</p>
+            {emptyDescription && (
+              <div className="mt-1 text-xs text-muted-foreground">{emptyDescription}</div>
+            )}
+          </div>
+        )}
+
+        {!loading && !error && !showEmpty && children}
+      </div>
+    </div>
+  );
+}

package/src/login-form.tsx

@@ -0,0 +1,128 @@
+"use client";
+import { useForm } from "react-hook-form";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+} from "@lindaui/ui/card";
+import { Input } from "@lindaui/ui/input";
+import { Button } from "@lindaui/ui/button";
+import { Field } from "@lindaui/ui/field";
+import { Text } from "@lindaui/ui/text";
+
+// Block: login compuesto de primitivos @lindaui/ui (field + input + button). Maneja
+// el form con react-hook-form internamente; el consumidor solo recibe los
+// valores en onSubmit. API propia, no filtra tipos de HeroUI.
+//
+// `bare`: sin Card ni título — campos apilados + botón full-width. Para usar
+// dentro de un shell que ya aporta el heading/contenedor (ej. <AuthLayout/>).
+export interface LoginValues {
+  email: string;
+  password: string;
+}
+
+export interface LoginFormProps {
+  onSubmit: (values: LoginValues) => void | Promise<void>;
+  title?: string;
+  emailLabel?: string;
+  passwordLabel?: string;
+  submitLabel?: string;
+  loading?: boolean;
+  error?: string;
+  className?: string;
+  /** Sin Card ni título (para componer dentro de AuthLayout u otro shell). */
+  bare?: boolean;
+}
+
+export function LoginForm({
+  onSubmit,
+  title = "Iniciar sesión",
+  emailLabel = "Email",
+  passwordLabel = "Contraseña",
+  submitLabel = "Ingresar",
+  loading = false,
+  error,
+  className,
+  bare = false,
+}: LoginFormProps) {
+  const { control, handleSubmit } = useForm<LoginValues>({
+    defaultValues: { email: "", password: "" },
+  });
+
+  const fields = (
+    <>
+      <Field control={control} name="email">
+        {({ field, invalid }) => (
+          <Input
+            label={emailLabel}
+            type="email"
+            autoComplete="username"
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+            onBlur={field.onBlur}
+            name={field.name}
+            isInvalid={invalid}
+          />
+        )}
+      </Field>
+      <Field control={control} name="password">
+        {({ field, invalid }) => (
+          <Input
+            label={passwordLabel}
+            type="password"
+            autoComplete="current-password"
+            value={field.value}
+            onChange={(value) => field.onChange(value)}
+            onBlur={field.onBlur}
+            name={field.name}
+            isInvalid={invalid}
+          />
+        )}
+      </Field>
+      {error && (
+        <Text role="alert" className="text-sm text-[var(--danger,#dc2626)]">
+          {error}
+        </Text>
+      )}
+    </>
+  );
+
+  if (bare) {
+    return (
+      <form
+        onSubmit={handleSubmit((values) => onSubmit(values))}
+        noValidate
+        className={`space-y-5 ${className ?? ""}`.trim()}
+      >
+        <div className="flex flex-col gap-5">{fields}</div>
+        <Button
+          type="submit"
+          variant="primary"
+          size="lg"
+          isDisabled={loading}
+          className="w-full"
+        >
+          {submitLabel}
+        </Button>
+      </form>
+    );
+  }
+
+  return (
+    <Card className={`w-full max-w-sm ${className ?? ""}`.trim()}>
+      <CardHeader className="px-4 py-4 sm:px-6 sm:py-5">
+        <CardTitle className="text-xl sm:text-2xl">{title}</CardTitle>
+      </CardHeader>
+      <form onSubmit={handleSubmit((values) => onSubmit(values))} noValidate>
+        <CardContent className="flex flex-col gap-4 px-4 sm:px-6">{fields}</CardContent>
+        <CardFooter className="px-4 pb-4 sm:px-6 sm:pb-5">
+          <Button type="submit" variant="primary" isDisabled={loading} className="w-full">
+            {submitLabel}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  );
+}

package/src/message-bubble.tsx

@@ -0,0 +1,70 @@
+"use client";
+import { formatShortTime } from "@lindaui/ui/date";
+import { Check, CheckCheck, Clock, AlertCircle } from "lucide-react";
+import { AudioPlayer } from "./audio-player";
+import type { GenericMessage, MessageStatus } from "./chat-types.js";
+
+export interface MessageBubbleProps {
+  message: GenericMessage;
+  onImageClick?: (url: string) => void;
+}
+
+const statusIcon: Record<MessageStatus, { icon: typeof Check; label: string }> = {
+  sending: { icon: Clock, label: "Enviando" },
+  sent: { icon: Check, label: "Enviado" },
+  delivered: { icon: CheckCheck, label: "Entregado" },
+  read: { icon: CheckCheck, label: "Leído" },
+  failed: { icon: AlertCircle, label: "Error al enviar" },
+};
+
+export function MessageBubble({ message, onImageClick }: MessageBubbleProps) {
+  const isOutgoing = message.side === "outgoing";
+  const status = message.status ? statusIcon[message.status] : null;
+  const StatusIcon = status?.icon;
+
+  return (
+    <div className={`flex ${isOutgoing ? "justify-end" : "justify-start"}`}>
+      <div
+        className={`max-w-[75%] rounded-2xl px-3 py-2 text-sm ${
+          isOutgoing ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground"
+        }`}
+      >
+        {message.media?.kind === "image" && (
+          <button
+            type="button"
+            onClick={() => onImageClick?.(message.media!.url)}
+            className="-mx-1 -mt-1 mb-1 block overflow-hidden rounded-xl"
+          >
+            <img
+              src={message.media.url}
+              alt={message.media.alt ?? ""}
+              className="max-h-64 w-full object-cover"
+            />
+          </button>
+        )}
+        {message.media?.kind === "audio" && (
+          <div className="mb-1">
+            <AudioPlayer src={message.media.url} durationSeconds={message.media.durationSeconds} />
+          </div>
+        )}
+        {message.media?.kind === "pdf" && (
+          <a
+            href={message.media.url}
+            target="_blank"
+            rel="noreferrer"
+            className="mb-1 block underline"
+          >
+            {message.media.name ?? "Documento"}
+          </a>
+        )}
+        {message.text != null && (
+          <p className="whitespace-pre-wrap break-words">{message.text}</p>
+        )}
+        <div className="mt-1 flex items-center justify-end gap-1 text-[10px] opacity-70">
+          <span>{formatShortTime(message.sentAt)}</span>
+          {isOutgoing && StatusIcon && <StatusIcon className="size-3" aria-label={status!.label} />}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/message-composer.tsx

@@ -0,0 +1,52 @@
+"use client";
+import type { KeyboardEvent } from "react";
+import { Send } from "lucide-react";
+import { Textarea } from "@lindaui/ui/textarea";
+import { IconButton } from "@lindaui/ui/icon-button";
+
+export interface MessageComposerProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  onSend: () => void;
+  placeholder?: string;
+  isSending?: boolean;
+  isDisabled?: boolean;
+  sendLabel?: string;
+}
+
+export function MessageComposer({
+  value,
+  onValueChange,
+  onSend,
+  placeholder = "Escribí un mensaje…",
+  isSending = false,
+  isDisabled = false,
+  sendLabel = "Enviar",
+}: MessageComposerProps) {
+  const canSend = value.trim().length > 0 && !isSending && !isDisabled;
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (canSend) onSend();
+    }
+  };
+
+  return (
+    <div className="flex items-end gap-2 border-t border-border bg-card p-3">
+      <div className="flex-1">
+        <Textarea
+          aria-label={placeholder}
+          placeholder={placeholder}
+          value={value}
+          onChange={onValueChange}
+          onKeyDown={handleKeyDown}
+          isDisabled={isDisabled}
+        />
+      </div>
+      <IconButton aria-label={sendLabel} onPress={onSend} isDisabled={!canSend}>
+        <Send className="size-4" />
+      </IconButton>
+    </div>
+  );
+}

package/src/pie-chart.tsx

@@ -0,0 +1,70 @@
+"use client";
+import * as React from "react";
+import {
+  PieChart as RPieChart,
+  Pie,
+  Cell,
+  LabelList,
+} from "recharts";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from "@lindaui/ui/chart";
+
+export interface PieChartProps {
+  data: Array<Record<string, string | number>>;
+  config: ChartConfig;
+  categoryKey: string;
+  valueKey: string;
+  variant?: "pie" | "donut" | "label";
+  className?: string;
+}
+
+export function PieChart({
+  data,
+  config,
+  categoryKey,
+  valueKey,
+  variant = "pie",
+  className,
+}: PieChartProps) {
+  const innerRadius = variant === "donut" ? "55%" : variant === "label" ? "45%" : 0;
+
+  return (
+    <ChartContainer config={config} className={className}>
+      <RPieChart>
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <Pie
+          data={data}
+          dataKey={valueKey}
+          nameKey={categoryKey}
+          innerRadius={innerRadius}
+          outerRadius="80%"
+          paddingAngle={2}
+        >
+          {data.map((entry, index) => {
+            const key = String(entry[categoryKey]);
+            return (
+              <Cell
+                key={`cell-${index}`}
+                fill={`var(--color-${key})`}
+              />
+            );
+          })}
+          {variant === "label" && (
+            <LabelList
+              dataKey={categoryKey}
+              position="outside"
+              style={{ fontSize: 12, fill: "var(--foreground)" }}
+            />
+          )}
+        </Pie>
+      </RPieChart>
+    </ChartContainer>
+  );
+}

package/src/radar-chart.tsx

@@ -0,0 +1,55 @@
+"use client";
+import * as React from "react";
+import {
+  RadarChart as RRadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+} from "recharts";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  type ChartConfig,
+} from "@lindaui/ui/chart";
+
+export interface RadarChartProps {
+  data: Array<Record<string, string | number>>;
+  config: ChartConfig;
+  categoryKey: string;
+  series: string[];
+  className?: string;
+}
+
+export function RadarChart({
+  data,
+  config,
+  categoryKey,
+  series,
+  className,
+}: RadarChartProps) {
+  return (
+    <ChartContainer config={config} className={className}>
+      <RRadarChart data={data}>
+        <ChartTooltip content={<ChartTooltipContent />} />
+        <ChartLegend content={<ChartLegendContent />} />
+        <PolarGrid />
+        <PolarAngleAxis dataKey={categoryKey} />
+        <PolarRadiusAxis />
+        {series.map((key) => (
+          <Radar
+            key={key}
+            dataKey={key}
+            name={key}
+            fill={`var(--color-${key})`}
+            stroke={`var(--color-${key})`}
+            fillOpacity={0.5}
+          />
+        ))}
+      </RRadarChart>
+    </ChartContainer>
+  );
+}

package/src/radial-chart.tsx

@@ -0,0 +1,103 @@
+"use client";
+import * as React from "react";
+import {
+  RadialBarChart as RRadialBarChart,
+  RadialBar,
+  PolarGrid,
+  PolarRadiusAxis,
+  Label,
+} from "recharts";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@lindaui/ui/chart";
+
+export interface RadialChartProps {
+  data: Array<Record<string, string | number>>;
+  config: ChartConfig;
+  categoryKey: string;
+  series: string[];
+  variant?: "default" | "stacked" | "label";
+  className?: string;
+}
+
+export function RadialChart({
+  data,
+  config,
+  categoryKey,
+  series,
+  variant = "default",
+  className,
+}: RadialChartProps) {
+  const isStacked = variant === "stacked";
+  const showLabel = variant === "label";
+
+  const total = React.useMemo(() => {
+    if (!showLabel) return null;
+    return data.reduce((acc, row) => {
+      series.forEach((key) => {
+        const v = row[key];
+        if (typeof v === "number") acc += v;
+      });
+      return acc;
+    }, 0);
+  }, [data, series, showLabel]);
+
+  return (
+    <ChartContainer config={config} className={className}>
+      <RRadialBarChart
+        data={data}
+        innerRadius="30%"
+        outerRadius="90%"
+        startAngle={90}
+        endAngle={-270}
+      >
+        <PolarGrid gridType="circle" radialLines={false} />
+        <ChartTooltip content={<ChartTooltipContent />} />
+        {showLabel && (
+          <PolarRadiusAxis tick={false} axisLine={false}>
+            <Label
+              content={({ viewBox }) => {
+                if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox)) return null;
+                const { cx, cy } = viewBox as { cx: number; cy: number };
+                return (
+                  <text x={cx} y={cy} textAnchor="middle" dominantBaseline="middle">
+                    <tspan
+                      x={cx}
+                      y={cy}
+                      className="fill-foreground text-2xl font-bold"
+                      style={{ fontSize: 24, fontWeight: 700 }}
+                    >
+                      {total}
+                    </tspan>
+                    <tspan
+                      x={cx}
+                      y={(cy ?? 0) + 20}
+                      className="fill-muted-foreground"
+                      style={{ fontSize: 12 }}
+                    >
+                      Total
+                    </tspan>
+                  </text>
+                );
+              }}
+            />
+          </PolarRadiusAxis>
+        )}
+        {series.map((key) => (
+          <RadialBar
+            key={key}
+            dataKey={key}
+            name={key}
+            fill={`var(--color-${key})`}
+            stackId={isStacked ? "stack" : undefined}
+            background={!isStacked}
+            cornerRadius={4}
+          />
+        ))}
+      </RRadialBarChart>
+    </ChartContainer>
+  );
+}