@lindaui/blocks 0.1.0 → 0.2.0

package/dist/table-pane.d.ts

@@ -0,0 +1,44 @@
+import type { ReactNode } from "react";
+import { type TableColumnDef } from "@lindaui/ui/table";
+export interface TablePaneFilter {
+    key: string;
+    label: string;
+    count?: number;
+}
+/**
+ * Tabular sibling of `list-pane`: the same controlled chrome (filter tabs +
+ * search + loading/error/empty states) wrapped around `@lindaui/ui/table`,
+ * plus a `toolbarExtra` slot and an optional footer. Zero data-fetching — the
+ * app passes already-filtered `rows` (each cell is a `ReactNode`, so domain
+ * chips/avatars live in the consumer) and owns all state.
+ */
+export interface TablePaneProps {
+    columns: TableColumnDef[];
+    rows: Record<string, ReactNode>[];
+    ariaLabel?: string;
+    filters?: TablePaneFilter[];
+    activeFilter?: string;
+    onFilterChange?: (key: string) => void;
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    toolbarExtra?: ReactNode;
+    loading?: boolean;
+    error?: string | null;
+    onRetry?: () => void;
+    errorTitle?: string;
+    retryLabel?: string;
+    isEmpty?: boolean;
+    emptyTitle?: string;
+    emptyDescription?: ReactNode;
+    emptyIcon?: ReactNode;
+    footer?: ReactNode;
+    footerCount?: {
+        shown: number;
+        total: number;
+        label?: string;
+    };
+}
+export declare function TablePane({ columns, rows, ariaLabel, filters, activeFilter, onFilterChange, searchValue, onSearchChange, searchPlaceholder, searchLabel, toolbarExtra, loading, error, onRetry, errorTitle, retryLabel, isEmpty, emptyTitle, emptyDescription, emptyIcon, footer, footerCount, }: TablePaneProps): import("react").JSX.Element;
+//# sourceMappingURL=table-pane.d.ts.map

package/dist/table-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-pane.d.ts","sourceRoot":"","sources":["../src/table-pane.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKvC,OAAO,EAAS,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;GAMG;AACH,MAAM,WAAW,cAAc;IAE7B,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAGvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,YAAY,CAAC,EAAE,SAAS,CAAC;IAGzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,SAAS,CAAC;IAGtB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,WAAW,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAChE;AAED,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,IAAI,EACJ,SAAmB,EACnB,OAAO,EACP,YAAY,EACZ,cAAc,EACd,WAAgB,EAChB,cAAc,EACd,iBAA4B,EAC5B,WAAsB,EACtB,YAAY,EACZ,OAAe,EACf,KAAY,EACZ,OAAO,EACP,UAAgC,EAChC,UAAyB,EACzB,OAAO,EACP,UAA6B,EAC7B,gBAAgB,EAChB,SAAS,EACT,MAAM,EACN,WAAW,GACZ,EAAE,cAAc,+BAiHhB"}

package/dist/table-pane.js

@@ -0,0 +1,137 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AlertCircle, RotateCcw, FileText } from 'lucide-react';
+import { Button } from '@lindaui/ui/button';
+import { SearchField } from '@lindaui/ui/search-field';
+import { Skeleton } from '@lindaui/ui/skeleton';
+import { Table } from '@lindaui/ui/table';
+
+function TablePane({ columns, rows, ariaLabel = "Tabla", filters, activeFilter, onFilterChange, searchValue = "", onSearchChange, searchPlaceholder = "Buscar", searchLabel = "Buscar", toolbarExtra, loading = false, error = null, onRetry, errorTitle = "No se pudo cargar", retryLabel = "Reintentar", isEmpty, emptyTitle = "Sin resultados", emptyDescription, emptyIcon, footer, footerCount }) {
+    const showEmpty = !loading && !error && (isEmpty !== undefined ? isEmpty : rows.length === 0);
+    const showFooter = !loading && !error && (footer != null || footerCount != null);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col overflow-hidden rounded-xl border border-border bg-card",
+        children: [
+            filters && filters.length > 0 && /*#__PURE__*/ jsx("div", {
+                className: "flex flex-wrap gap-2 overflow-x-auto border-b border-border p-3",
+                children: filters.map((f)=>/*#__PURE__*/ jsxs(Button, {
+                        variant: activeFilter === f.key ? "primary" : "ghost",
+                        onPress: ()=>onFilterChange?.(f.key),
+                        size: "sm",
+                        children: [
+                            f.label,
+                            f.count != null && /*#__PURE__*/ jsx("span", {
+                                "aria-hidden": true,
+                                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",
+                                children: f.count
+                            })
+                        ]
+                    }, f.key))
+            }),
+            (onSearchChange || toolbarExtra) && /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-wrap items-center gap-3 border-b border-border p-4",
+                children: [
+                    onSearchChange && /*#__PURE__*/ jsx("div", {
+                        className: "min-w-[240px] flex-1",
+                        children: /*#__PURE__*/ jsx(SearchField, {
+                            value: searchValue,
+                            onChange: onSearchChange,
+                            placeholder: searchPlaceholder,
+                            "aria-label": searchLabel
+                        })
+                    }),
+                    toolbarExtra
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "min-h-0 flex-1 overflow-x-auto",
+                children: [
+                    loading && /*#__PURE__*/ jsx("div", {
+                        role: "status",
+                        "aria-label": "Cargando",
+                        className: "space-y-2 p-3",
+                        children: Array.from({
+                            length: 6
+                        }).map((_, i)=>/*#__PURE__*/ jsx(Skeleton, {
+                                className: "h-12 w-full"
+                            }, i))
+                    }),
+                    !loading && error && /*#__PURE__*/ jsxs("div", {
+                        className: "m-3 rounded-xl border border-destructive/35 bg-destructive/5 p-6 text-center",
+                        children: [
+                            /*#__PURE__*/ jsx(AlertCircle, {
+                                className: "mx-auto h-6 w-6 text-destructive"
+                            }),
+                            /*#__PURE__*/ jsx("p", {
+                                className: "mt-2 text-sm font-semibold",
+                                children: errorTitle
+                            }),
+                            /*#__PURE__*/ jsx("p", {
+                                className: "mt-1 text-xs text-muted-foreground",
+                                children: error
+                            }),
+                            onRetry && /*#__PURE__*/ jsxs(Button, {
+                                variant: "secondary",
+                                size: "sm",
+                                onPress: onRetry,
+                                className: "mt-3",
+                                children: [
+                                    /*#__PURE__*/ jsx(RotateCcw, {
+                                        className: "h-3.5 w-3.5"
+                                    }),
+                                    retryLabel
+                                ]
+                            })
+                        ]
+                    }),
+                    showEmpty && /*#__PURE__*/ jsxs("div", {
+                        className: "py-16 text-center",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "mx-auto grid h-11 w-11 place-items-center rounded-xl bg-secondary",
+                                children: emptyIcon ?? /*#__PURE__*/ jsx(FileText, {
+                                    className: "h-5 w-5 text-muted-foreground"
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("p", {
+                                className: "mt-3 text-sm font-semibold",
+                                children: emptyTitle
+                            }),
+                            emptyDescription && /*#__PURE__*/ jsx("div", {
+                                className: "mt-1 text-xs text-muted-foreground",
+                                children: emptyDescription
+                            })
+                        ]
+                    }),
+                    !loading && !error && !showEmpty && /*#__PURE__*/ jsx(Table, {
+                        "aria-label": ariaLabel,
+                        columns: columns,
+                        rows: rows
+                    })
+                ]
+            }),
+            showFooter && (footer ?? /*#__PURE__*/ jsx("div", {
+                className: "flex items-center justify-between border-t border-border px-5 py-3 text-xs text-muted-foreground",
+                children: /*#__PURE__*/ jsxs("span", {
+                    children: [
+                        footerCount.label ?? "Mostrando",
+                        " ",
+                        /*#__PURE__*/ jsx("span", {
+                            className: "font-medium text-foreground",
+                            children: footerCount.shown
+                        }),
+                        " ",
+                        "de",
+                        " ",
+                        /*#__PURE__*/ jsx("span", {
+                            className: "font-medium text-foreground",
+                            children: footerCount.total
+                        })
+                    ]
+                })
+            }))
+        ]
+    });
+}
+
+export { TablePane };

package/llms.txt

@@ -55,6 +55,17 @@ Filterable/searchable list shell with loading/empty/error states. Controlled:
 `onSearchChange`, `loading`, `error`, `onRetry`, `isEmpty`, empty/error slots. Items go
 in via `children`. Does NOT filter for you — filter your data (use `@lindaui/ui/search`).
 
+### @lindaui/blocks/table-pane
+Tabular sibling of `list-pane`: same controlled chrome (filter tabs + search +
+loading/error/empty) around `@lindaui/ui/table`. Props: `columns: {key,label}[]`,
+`rows: Record<string,ReactNode>[]` (each cell a ReactNode → domain chips/avatars live
+in your app), `ariaLabel?`, the same `filters`/`activeFilter`/`onFilterChange` +
+`searchValue`/`onSearchChange`/`searchLabel` + `loading`/`error`/`onRetry`/`isEmpty` +
+empty slots as list-pane, plus `toolbarExtra?` (extra filter controls right of the
+search, e.g. a `<Select>`), `footer?` (escape hatch) and `footerCount?: {shown,total,
+label?}` (default "Mostrando X de Y"). Does NOT filter/fetch — pass already-filtered
+`rows` and own the state.
+
 ### @lindaui/blocks/detail-panel
 Master-detail right side: empty state + header + meta card + CTA. Controlled.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lindaui/blocks",
-  "version": "0.1.0",
+  "version": "0.2.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",
@@ -106,6 +106,10 @@
     "./workspace-back-button": {
       "types": "./dist/workspace-back-button.d.ts",
       "import": "./dist/workspace-back-button.js"
+    },
+    "./table-pane": {
+      "types": "./dist/table-pane.d.ts",
+      "import": "./dist/table-pane.js"
     }
   },
   "files": [
@@ -142,8 +146,8 @@
     "zod": "^3.23.0",
     "@hookform/resolvers": "^3.9.0",
     "typescript": "^6.0.3",
-    "@lindaui/ui": "0.1.0",
-    "@lindaui/tokens": "0.2.1"
+    "@lindaui/tokens": "0.2.2",
+    "@lindaui/ui": "0.2.0"
   },
   "scripts": {
     "build": "bunchee --no-dts && tsc -p tsconfig.build.json",