@lindaui/blocks 0.3.0 → 0.4.0

package/dist/entity-health-card.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChartCard } from './chart-card.js';
+import { Badge } from '@lindaui/ui/badge';
+import { Divider } from '@lindaui/ui/divider';
+
+/** Lista de salud de entidades genérica (ex-GymHealthCard, generalizado). */ function EntityHealthCard({ title, description, items, emptyLabel = "Sin datos" }) {
+    return /*#__PURE__*/ jsx(ChartCard, {
+        title: title,
+        description: description,
+        children: items.length === 0 ? /*#__PURE__*/ jsx("p", {
+            className: "py-4 text-center text-sm text-muted-foreground",
+            children: emptyLabel
+        }) : /*#__PURE__*/ jsx("div", {
+            className: "flex flex-col",
+            children: items.map((item, i)=>/*#__PURE__*/ jsxs("div", {
+                    children: [
+                        i > 0 && /*#__PURE__*/ jsx(Divider, {}),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flex items-center justify-between gap-2 py-2.5",
+                            children: [
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "truncate text-sm",
+                                    children: item.label
+                                }),
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: "flex shrink-0 items-center gap-2",
+                                    children: [
+                                        /*#__PURE__*/ jsx("span", {
+                                            className: "text-sm font-semibold tabular-nums",
+                                            children: item.value
+                                        }),
+                                        item.status && /*#__PURE__*/ jsx(Badge, {
+                                            variant: item.status,
+                                            children: item.statusLabel ?? item.status
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }, item.id))
+        })
+    });
+}
+
+export { EntityHealthCard };

package/dist/fetching-indicator.d.ts

@@ -0,0 +1,6 @@
+export interface FetchingIndicatorProps {
+    label?: string;
+}
+/** Pill chico de "actualizando" para superponer sobre contenido ya cargado. */
+export declare function FetchingIndicator({ label }: FetchingIndicatorProps): import("react").JSX.Element;
+//# sourceMappingURL=fetching-indicator.d.ts.map

package/dist/fetching-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fetching-indicator.d.ts","sourceRoot":"","sources":["../src/fetching-indicator.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+EAA+E;AAC/E,wBAAgB,iBAAiB,CAAC,EAAE,KAAuB,EAAE,EAAE,sBAAsB,+BAOpF"}

package/dist/fetching-indicator.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Spinner } from '@lindaui/ui/spinner';
+
+/** Pill chico de "actualizando" para superponer sobre contenido ya cargado. */ function FetchingIndicator({ label = "Actualizando…" }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "inline-flex items-center gap-1.5 rounded-full bg-secondary px-2.5 py-1 text-xs text-muted-foreground",
+        children: [
+            /*#__PURE__*/ jsx(Spinner, {
+                "aria-label": label,
+                className: "size-3"
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: label
+            })
+        ]
+    });
+}
+
+export { FetchingIndicator };

package/dist/message-bubble.d.ts

@@ -0,0 +1,7 @@
+import type { GenericMessage } from "./chat-types.js";
+export interface MessageBubbleProps {
+    message: GenericMessage;
+    onImageClick?: (url: string) => void;
+}
+export declare function MessageBubble({ message, onImageClick }: MessageBubbleProps): import("react").JSX.Element;
+//# sourceMappingURL=message-bubble.d.ts.map

package/dist/message-bubble.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-bubble.d.ts","sourceRoot":"","sources":["../src/message-bubble.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAErE,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,cAAc,CAAC;IACxB,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAUD,wBAAgB,aAAa,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,EAAE,kBAAkB,+BAkD1E"}

package/dist/message-bubble.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { formatShortTime } from '@lindaui/ui/date';
+import { AlertCircle, CheckCheck, Check, Clock } from 'lucide-react';
+import { AudioPlayer } from './audio-player.js';
+
+const statusIcon = {
+    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"
+    }
+};
+function MessageBubble({ message, onImageClick }) {
+    const isOutgoing = message.side === "outgoing";
+    const status = message.status ? statusIcon[message.status] : null;
+    const StatusIcon = status?.icon;
+    return /*#__PURE__*/ jsx("div", {
+        className: `flex ${isOutgoing ? "justify-end" : "justify-start"}`,
+        children: /*#__PURE__*/ jsxs("div", {
+            className: `max-w-[75%] rounded-2xl px-3 py-2 text-sm ${isOutgoing ? "bg-primary text-primary-foreground" : "bg-secondary text-secondary-foreground"}`,
+            children: [
+                message.media?.kind === "image" && /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    onClick: ()=>onImageClick?.(message.media.url),
+                    className: "-mx-1 -mt-1 mb-1 block overflow-hidden rounded-xl",
+                    children: /*#__PURE__*/ jsx("img", {
+                        src: message.media.url,
+                        alt: message.media.alt ?? "",
+                        className: "max-h-64 w-full object-cover"
+                    })
+                }),
+                message.media?.kind === "audio" && /*#__PURE__*/ jsx("div", {
+                    className: "mb-1",
+                    children: /*#__PURE__*/ jsx(AudioPlayer, {
+                        src: message.media.url,
+                        durationSeconds: message.media.durationSeconds
+                    })
+                }),
+                message.media?.kind === "pdf" && /*#__PURE__*/ jsx("a", {
+                    href: message.media.url,
+                    target: "_blank",
+                    rel: "noreferrer",
+                    className: "mb-1 block underline",
+                    children: message.media.name ?? "Documento"
+                }),
+                message.text != null && /*#__PURE__*/ jsx("p", {
+                    className: "whitespace-pre-wrap break-words",
+                    children: message.text
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "mt-1 flex items-center justify-end gap-1 text-[10px] opacity-70",
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            children: formatShortTime(message.sentAt)
+                        }),
+                        isOutgoing && StatusIcon && /*#__PURE__*/ jsx(StatusIcon, {
+                            className: "size-3",
+                            "aria-label": status.label
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+export { MessageBubble };

package/dist/message-composer.d.ts

@@ -0,0 +1,11 @@
+export interface MessageComposerProps {
+    value: string;
+    onValueChange: (value: string) => void;
+    onSend: () => void;
+    placeholder?: string;
+    isSending?: boolean;
+    isDisabled?: boolean;
+    sendLabel?: string;
+}
+export declare function MessageComposer({ value, onValueChange, onSend, placeholder, isSending, isDisabled, sendLabel, }: MessageComposerProps): import("react").JSX.Element;
+//# sourceMappingURL=message-composer.d.ts.map

package/dist/message-composer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-composer.d.ts","sourceRoot":"","sources":["../src/message-composer.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,aAAa,EACb,MAAM,EACN,WAAmC,EACnC,SAAiB,EACjB,UAAkB,EAClB,SAAoB,GACrB,EAAE,oBAAoB,+BA2BtB"}

package/dist/message-composer.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Send } from 'lucide-react';
+import { Textarea } from '@lindaui/ui/textarea';
+import { IconButton } from '@lindaui/ui/icon-button';
+
+function MessageComposer({ value, onValueChange, onSend, placeholder = "Escribí un mensaje…", isSending = false, isDisabled = false, sendLabel = "Enviar" }) {
+    const canSend = value.trim().length > 0 && !isSending && !isDisabled;
+    const handleKeyDown = (e)=>{
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            if (canSend) onSend();
+        }
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex items-end gap-2 border-t border-border bg-card p-3",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex-1",
+                children: /*#__PURE__*/ jsx(Textarea, {
+                    "aria-label": placeholder,
+                    placeholder: placeholder,
+                    value: value,
+                    onChange: onValueChange,
+                    onKeyDown: handleKeyDown,
+                    isDisabled: isDisabled
+                })
+            }),
+            /*#__PURE__*/ jsx(IconButton, {
+                "aria-label": sendLabel,
+                onPress: onSend,
+                isDisabled: !canSend,
+                children: /*#__PURE__*/ jsx(Send, {
+                    className: "size-4"
+                })
+            })
+        ]
+    });
+}
+
+export { MessageComposer };

package/dist/stat-card.d.ts

@@ -22,6 +22,8 @@ export interface StatCardProps {
     /** Tinte del icon box (y del valor en featured). Solo aplica a featured. */
     tone?: StatCardTone;
     className?: string;
+    /** Reemplaza value/delta/description por skeletons; label e icon quedan visibles. */
+    loading?: boolean;
 }
-export declare function StatCard({ label, value, delta, description, icon, sparkline, variant, tone, className, }: StatCardProps): import("react").JSX.Element;
+export declare function StatCard({ label, value, delta, description, icon, sparkline, variant, tone, className, loading, }: StatCardProps): import("react").JSX.Element;
 //# sourceMappingURL=stat-card.d.ts.map

package/dist/stat-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../src/stat-card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEpF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;iFAC6E;IAC7E,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,4EAA4E;IAC5E,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAsDD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,SAAc,GACf,EAAE,aAAa,+BA6Cf"}
+{"version":3,"file":"stat-card.d.ts","sourceRoot":"","sources":["../src/stat-card.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvC,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEpF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B;iFAC6E;IAC7E,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,4EAA4E;IAC5E,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qFAAqF;IACrF,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAsDD,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,SAAS,EACT,OAAmB,EACnB,IAAgB,EAChB,SAAc,EACd,OAAe,GAChB,EAAE,aAAa,+BA+Df"}

package/dist/stat-card.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Minus, TrendingDown, TrendingUp } from 'lucide-react';
 import { Card, CardContent, CardHeader, CardTitle } from '@lindaui/ui/card';
 import { Badge } from '@lindaui/ui/badge';
+import { Skeleton } from '@lindaui/ui/skeleton';
 import { ChartContainer } from '@lindaui/ui/chart';
 import { LineChart, Line } from 'recharts';
 
@@ -79,7 +80,7 @@ function Sparkline({ sparkline }) {
         })
     });
 }
-function StatCard({ label, value, delta, description, icon, sparkline, variant = "default", tone = "neutral", className = "" }) {
+function StatCard({ label, value, delta, description, icon, sparkline, variant = "default", tone = "neutral", className = "", loading = false }) {
     if (variant === "featured") {
         const t = toneStyles[tone];
         return /*#__PURE__*/ jsx(Card, {
@@ -94,12 +95,16 @@ function StatCard({ label, value, delta, description, icon, sparkline, variant =
                                 className: `grid size-11 shrink-0 place-items-center rounded-xl ${t.box}`,
                                 children: icon
                             }),
-                            delta && /*#__PURE__*/ jsx(DeltaBadge, {
+                            loading ? /*#__PURE__*/ jsx(Skeleton, {
+                                className: "h-5 w-14 rounded-full"
+                            }) : delta && /*#__PURE__*/ jsx(DeltaBadge, {
                                 delta: delta
                             })
                         ]
                     }),
-                    /*#__PURE__*/ jsx("div", {
+                    loading ? /*#__PURE__*/ jsx(Skeleton, {
+                        className: "mt-4 h-8 w-20"
+                    }) : /*#__PURE__*/ jsx("div", {
                         className: `mt-4 text-3xl font-semibold tabular-nums ${t.value}`,
                         children: value
                     }),
@@ -107,7 +112,9 @@ function StatCard({ label, value, delta, description, icon, sparkline, variant =
                         className: "mt-1 text-sm text-muted-foreground",
                         children: label
                     }),
-                    description && /*#__PURE__*/ jsx("p", {
+                    loading ? /*#__PURE__*/ jsx(Skeleton, {
+                        className: "mt-1.5 h-3 w-24"
+                    }) : description && /*#__PURE__*/ jsx("p", {
                         className: "mt-1.5 text-xs text-muted-foreground",
                         children: description
                     }),
@@ -140,17 +147,23 @@ function StatCard({ label, value, delta, description, icon, sparkline, variant =
             /*#__PURE__*/ jsxs(CardContent, {
                 className: "pt-0",
                 children: [
-                    /*#__PURE__*/ jsx("div", {
+                    loading ? /*#__PURE__*/ jsx(Skeleton, {
+                        className: "h-7 w-24"
+                    }) : /*#__PURE__*/ jsx("div", {
                         className: "text-2xl font-semibold tabular-nums sm:text-3xl",
                         children: value
                     }),
-                    delta && /*#__PURE__*/ jsx("div", {
+                    loading ? /*#__PURE__*/ jsx(Skeleton, {
+                        className: "mt-1.5 h-4 w-14 rounded-full"
+                    }) : delta && /*#__PURE__*/ jsx("div", {
                         className: "mt-1 flex items-center gap-1",
                         children: /*#__PURE__*/ jsx(DeltaBadge, {
                             delta: delta
                         })
                     }),
-                    description && /*#__PURE__*/ jsx("p", {
+                    loading ? /*#__PURE__*/ jsx(Skeleton, {
+                        className: "mt-1.5 h-3 w-28"
+                    }) : description && /*#__PURE__*/ jsx("p", {
                         className: "mt-1.5 text-xs text-muted-foreground",
                         children: description
                     }),

package/dist/time-range-picker.d.ts

@@ -0,0 +1,26 @@
+export interface TimeRangePreset {
+    key: string;
+    label: string;
+}
+export interface TimeRangeValue {
+    start: string;
+    end: string;
+}
+export interface TimeRangePickerProps {
+    presets?: TimeRangePreset[];
+    activePreset: string;
+    onPresetChange: (key: string) => void;
+    /** Key del preset que revela los inputs de rango custom. Default `"custom"`. */
+    customKey?: string;
+    range?: TimeRangeValue;
+    onRangeChange?: (range: TimeRangeValue) => void;
+    startLabel?: string;
+    endLabel?: string;
+}
+/**
+ * Presets + rango custom, controlado. El custom usa `<input type="date">` nativo
+ * (no el `date-range-picker` de HeroUI): evita traer `@internationalized/date` a
+ * un caso de uso simple de fecha-a-fecha.
+ */
+export declare function TimeRangePicker({ presets, activePreset, onPresetChange, customKey, range, onRangeChange, startLabel, endLabel, }: TimeRangePickerProps): import("react").JSX.Element;
+//# sourceMappingURL=time-range-picker.d.ts.map

package/dist/time-range-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-range-picker.d.ts","sourceRoot":"","sources":["../src/time-range-picker.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACb;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gFAAgF;IAChF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAYD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAyB,EACzB,YAAY,EACZ,cAAc,EACd,SAAoB,EACpB,KAAK,EACL,aAAa,EACb,UAAoB,EACpB,QAAkB,GACnB,EAAE,oBAAoB,+BAuCtB"}

package/dist/time-range-picker.js

@@ -0,0 +1,86 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '@lindaui/ui/button';
+
+const DEFAULT_PRESETS = [
+    {
+        key: "today",
+        label: "Hoy"
+    },
+    {
+        key: "7d",
+        label: "Últimos 7 días"
+    },
+    {
+        key: "30d",
+        label: "Últimos 30 días"
+    },
+    {
+        key: "custom",
+        label: "Personalizado"
+    }
+];
+const fieldInputClass = "rounded-[var(--field-radius)] border border-[var(--field-border)] bg-[var(--field-background)] px-2 py-1 text-sm text-[var(--field-foreground)]";
+/**
+ * Presets + rango custom, controlado. El custom usa `<input type="date">` nativo
+ * (no el `date-range-picker` de HeroUI): evita traer `@internationalized/date` a
+ * un caso de uso simple de fecha-a-fecha.
+ */ function TimeRangePicker({ presets = DEFAULT_PRESETS, activePreset, onPresetChange, customKey = "custom", range, onRangeChange, startLabel = "Desde", endLabel = "Hasta" }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-wrap items-center gap-2",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex flex-wrap gap-2",
+                children: presets.map((p)=>/*#__PURE__*/ jsx(Button, {
+                        variant: activePreset === p.key ? "primary" : "ghost",
+                        size: "sm",
+                        onPress: ()=>onPresetChange(p.key),
+                        children: p.label
+                    }, p.key))
+            }),
+            activePreset === customKey && /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [
+                    /*#__PURE__*/ jsxs("label", {
+                        className: "flex items-center gap-1.5 text-sm",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-muted-foreground",
+                                children: startLabel
+                            }),
+                            /*#__PURE__*/ jsx("input", {
+                                type: "date",
+                                value: range?.start ?? "",
+                                onChange: (e)=>onRangeChange?.({
+                                        start: e.target.value,
+                                        end: range?.end ?? ""
+                                    }),
+                                className: fieldInputClass
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("label", {
+                        className: "flex items-center gap-1.5 text-sm",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-muted-foreground",
+                                children: endLabel
+                            }),
+                            /*#__PURE__*/ jsx("input", {
+                                type: "date",
+                                value: range?.end ?? "",
+                                onChange: (e)=>onRangeChange?.({
+                                        start: range?.start ?? "",
+                                        end: e.target.value
+                                    }),
+                                className: fieldInputClass
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+export { TimeRangePicker };

package/llms.txt

@@ -98,6 +98,57 @@ on a fixed dark `viewer-*` surface (for use over media); `inline` drops the abso
 positioning + forced dark bg, fills its container and inherits the panel surface with
 token-driven (legible) text. Content is identical across variants.
 
+## Chat (generic — data-agnostic, WhatsApp-style presentation)
+
+Types live in `@lindaui/blocks/chat-types` (no runtime exports, just shapes):
+`GenericMessage` (`id`, `side: "incoming"|"outgoing"`, `text?`, `media?:
+{kind:"image"|"audio"|"pdf",...}`, `sentAt`, `status?`), `ConversationSummary`
+(`id`, `title`, `subtitle?`, `avatarUrl?`, `lastMessageAt?`, `unreadCount?`). Map your
+domain (WhatsApp threads, tickets, whatever) into these before passing them down.
+
+### @lindaui/blocks/chat-layout
+Responsive 3-column shell (`sidebar`/`main`/`detail?`); mobile shows one panel at a
+time via `activePanel?: "sidebar"|"main"|"detail"` (default `"sidebar"`).
+
+### @lindaui/blocks/chat-header
+Row: `avatar?`, `title`, `subtitle?`, `actions?`.
+
+### @lindaui/blocks/chat-avatar
+`<ChatAvatar name src? size? onError? />` — initials fallback (bespoke, does NOT
+compose `@lindaui/ui/avatar`: that wrapper only exposes the HeroUI Root, no
+`.Image`/`.Fallback`, so it can't do a real fallback-on-error).
+
+### @lindaui/blocks/conversation-list · conversation-list-item
+`<ConversationList conversations={ConversationSummary[]} selectedId onSelect
+searchValue onSearchChange loading emptyContent filters />` — search field + scrollable
+rows; does NOT filter for you. `ConversationListItem` is the single row, usable
+standalone.
+
+### @lindaui/blocks/conversation-thread
+`<ConversationThread messages={GenericMessage[]} loading onImageClick emptyTitle
+emptyDescription />` — auto-scrolls to the last message; groups by calendar day via
+`@lindaui/ui/time-grouping` + `chat-date-divider`.
+
+### @lindaui/blocks/message-bubble
+Renders one `GenericMessage`: text, image (click → `onImageClick(url)`), audio (via
+`audio-player`), or pdf (link). Side-aligned; outgoing messages show a status icon.
+
+### @lindaui/blocks/message-composer
+`<MessageComposer value onValueChange onSend placeholder isSending isDisabled
+sendLabel />` — Enter sends, Shift+Enter inserts a newline.
+
+### @lindaui/blocks/audio-player
+`<AudioPlayer src durationSeconds? playLabel? pauseLabel? />` — voice-note player:
+play/pause + a static (non-analyzed) waveform + duration.
+
+### @lindaui/blocks/chat-date-divider · chat-time-divider
+Centered day pill ("Hoy"/"Ayer"/short date, via `@lindaui/ui/date`) and a smaller
+sticky time-group header, respectively.
+
+### @lindaui/blocks/empty-chat-view
+Centered empty state (icon + title + description) — also the `conversation-thread`
+empty state.
+
 ## Documents
 
 ### @lindaui/blocks/document-panel
@@ -129,6 +180,16 @@ const config = { sales: { label: "Sales", color: "var(--chart-1)" } };
 - `@lindaui/blocks/pie-chart`
 - `@lindaui/blocks/radar-chart`
 - `@lindaui/blocks/radial-chart`
-- `@lindaui/blocks/stat-card` — KPI card: label/value/delta/sparkline
+- `@lindaui/blocks/stat-card` — KPI card: label/value/delta/sparkline. `loading?`
+  swaps value/delta/description for skeletons (label/icon stay visible).
 - `@lindaui/blocks/chart-card` — Card shell wrapping a chart
 - `@lindaui/blocks/stats-grid` — responsive grid of KPI stat-cards
+- `@lindaui/blocks/entity-health-card` — generic health list on the `chart-card`
+  shell: `items: {id,label,value,status?,statusLabel?}[]` (status → a `Badge`).
+- `@lindaui/blocks/time-range-picker` — presets (`{key,label}[]`, default
+  today/7d/30d/custom) + a custom range revealed when `activePreset === customKey`
+  (default `"custom"`), using native `<input type="date">` (no
+  `@internationalized/date`). Controlled: `activePreset`, `onPresetChange`, `range:
+  {start,end}` (ISO date strings), `onRangeChange`.
+- `@lindaui/blocks/fetching-indicator` — small "Actualizando…" pill with a spinner,
+  for overlaying on already-loaded content (distinct from a full loading state).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lindaui/blocks",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Composed UI sections (auth, lists, master-detail, charts) built on @lindaui/ui — importable npm package, not a copy-paste registry.",
   "author": "Franco Carballar <francocarballar@gmail.com>",
   "license": "MIT",
@@ -123,6 +123,70 @@
     "./table-pane": {
       "types": "./dist/table-pane.d.ts",
       "import": "./dist/table-pane.js"
+    },
+    "./audio-player": {
+      "types": "./dist/audio-player.d.ts",
+      "import": "./dist/audio-player.js"
+    },
+    "./chat-avatar": {
+      "types": "./dist/chat-avatar.d.ts",
+      "import": "./dist/chat-avatar.js"
+    },
+    "./chat-date-divider": {
+      "types": "./dist/chat-date-divider.d.ts",
+      "import": "./dist/chat-date-divider.js"
+    },
+    "./chat-header": {
+      "types": "./dist/chat-header.d.ts",
+      "import": "./dist/chat-header.js"
+    },
+    "./chat-layout": {
+      "types": "./dist/chat-layout.d.ts",
+      "import": "./dist/chat-layout.js"
+    },
+    "./chat-time-divider": {
+      "types": "./dist/chat-time-divider.d.ts",
+      "import": "./dist/chat-time-divider.js"
+    },
+    "./chat-types": {
+      "types": "./dist/chat-types.d.ts",
+      "import": "./dist/chat-types.js"
+    },
+    "./conversation-list": {
+      "types": "./dist/conversation-list.d.ts",
+      "import": "./dist/conversation-list.js"
+    },
+    "./conversation-list-item": {
+      "types": "./dist/conversation-list-item.d.ts",
+      "import": "./dist/conversation-list-item.js"
+    },
+    "./conversation-thread": {
+      "types": "./dist/conversation-thread.d.ts",
+      "import": "./dist/conversation-thread.js"
+    },
+    "./empty-chat-view": {
+      "types": "./dist/empty-chat-view.d.ts",
+      "import": "./dist/empty-chat-view.js"
+    },
+    "./message-bubble": {
+      "types": "./dist/message-bubble.d.ts",
+      "import": "./dist/message-bubble.js"
+    },
+    "./message-composer": {
+      "types": "./dist/message-composer.d.ts",
+      "import": "./dist/message-composer.js"
+    },
+    "./time-range-picker": {
+      "types": "./dist/time-range-picker.d.ts",
+      "import": "./dist/time-range-picker.js"
+    },
+    "./entity-health-card": {
+      "types": "./dist/entity-health-card.d.ts",
+      "import": "./dist/entity-health-card.js"
+    },
+    "./fetching-indicator": {
+      "types": "./dist/fetching-indicator.d.ts",
+      "import": "./dist/fetching-indicator.js"
     }
   },
   "files": [
@@ -142,7 +206,7 @@
   },
   "devDependencies": {
     "bunchee": "^6.0.0",
-    "vitest": "^3.2.6",
+    "vitest": "^4.1.10",
     "vite": "^6.4.3",
     "@vitejs/plugin-react": "^4.3.0",
     "@testing-library/react": "^16.0.0",
@@ -153,14 +217,14 @@
     "react-dom": "^19.0.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
-    "react-hook-form": "^7.53.0",
-    "lucide-react": "^0.460.0",
-    "recharts": "^3.9.0",
-    "zod": "^3.23.0",
-    "@hookform/resolvers": "^3.9.0",
+    "react-hook-form": "^7.81.0",
+    "lucide-react": "^1.23.0",
+    "recharts": "^3.9.2",
+    "zod": "^4.4.3",
+    "@hookform/resolvers": "^5.4.0",
     "typescript": "^6.0.3",
-    "@lindaui/ui": "0.3.0",
-    "@lindaui/tokens": "0.3.0"
+    "@lindaui/tokens": "0.3.0",
+    "@lindaui/ui": "0.4.0"
   },
   "scripts": {
     "build": "bunchee --no-dts && tsc -p tsconfig.build.json",