@dust-tt/sparkle 0.2.201 → 0.2.203

package/dist/cjs/components/DataTable.d.ts

@@ -1,14 +1,22 @@
 import { type ColumnDef, type SortingState } from "@tanstack/react-table";
 import React, { ReactNode } from "react";
-interface DataTableProps<TData, TValue> {
+interface TBaseData {
+    onClick?: () => void;
+    onMoreClick?: () => void;
+}
+interface ColumnBreakpoint {
+    [columnId: string]: "xs" | "sm" | "md" | "lg" | "xl";
+}
+interface DataTableProps<TData extends TBaseData, TValue> {
     data: TData[];
     columns: ColumnDef<TData, TValue>[];
     className?: string;
     filter?: string;
     filterColumn?: string;
     initialColumnOrder?: SortingState;
+    columnsBreakpoints?: ColumnBreakpoint;
 }
-export declare function DataTable<TData, TValue>({ data, columns, className, filter, filterColumn, initialColumnOrder, }: DataTableProps<TData, TValue>): React.JSX.Element;
+export declare function DataTable<TData extends TBaseData, TValue>({ data, columns, className, filter, filterColumn, initialColumnOrder, columnsBreakpoints, }: DataTableProps<TData, TValue>): React.JSX.Element;
 export declare namespace DataTable {
     var Root: ({ children, className, ...props }: DataTableRootProps) => React.JSX.Element;
     var Header: ({ children, className, ...props }: HeaderProps) => React.JSX.Element;

package/dist/cjs/index.js

@@ -40652,9 +40652,14 @@ Button.List = function (_a) {
 };
 
 var variantClasses$1 = {
-    primary: "s-bg-structure-50 s-border s-border-structure-200 hover:s-bg-white hover:s-border-structure-100 active:s-bg-structure-100 active:s-border-structure-200",
-    secondary: "s-bg-structure-0 s-border s-border-structure-100 hover:s-bg-structure-50 hover:s-border-structure-200 active:s-bg-structure-100 active:s-border-structure-300",
-    tertiary: "s-border-structure-100/0 s-border s-border-structure-0 hover:s-bg-structure-50 hover:s-border-structure-100 active:s-bg-structure-100 active:s-border-structure-200",
+    primary: "s-bg-structure-50 s-border s-border-structure-200",
+    secondary: "s-bg-structure-0 s-border s-border-structure-100",
+    tertiary: "s-border-structure-100/0 s-border s-border-structure-0",
+};
+var hoverVariantClasses = {
+    primary: "hover:s-bg-white hover:s-border-structure-100 active:s-bg-structure-100 active:s-border-structure-200 s-cursor-pointer",
+    secondary: "hover:s-bg-structure-50 hover:s-border-structure-200 active:s-bg-structure-100 active:s-border-structure-300 s-cursor-pointer",
+    tertiary: "hover:s-bg-structure-50 hover:s-border-structure-100 active:s-bg-structure-100 active:s-border-structure-200 s-cursor-pointer",
 };
 var sizeClasses$3 = {
     sm: "s-p-3 s-rounded-xl",
@@ -40665,7 +40670,7 @@ function CardButton(_a) {
     var children = _a.children, _b = _a.variant, variant = _b === void 0 ? "primary" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.className, className = _d === void 0 ? "" : _d, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, href = _a.href, _e = _a.target, target = _e === void 0 ? "_blank" : _e, _f = _a.rel, rel = _f === void 0 ? "" : _f, replace = _a.replace, shallow = _a.shallow;
     var components = React.useContext(SparkleContext).components;
     var Link = href ? components.link : noHrefLink;
-    var commonClasses = classNames("s-flex s-group s-cursor-pointer s-transition s-duration-200 s-overflow-hidden", variantClasses$1[variant], sizeClasses$3[size], className);
+    var commonClasses = classNames("s-flex s-group s-transition s-duration-200 s-overflow-hidden", onClick ? hoverVariantClasses[variant] : "", variantClasses$1[variant], sizeClasses$3[size], className);
     if (href) {
         return (React.createElement(Link, { href: href, className: commonClasses, replace: replace, shallow: shallow, target: target, rel: rel }, children));
     }
@@ -75662,7 +75667,9 @@ var typeSizing = {
 function Citation(_a) {
     var avatarSrc = _a.avatarSrc, description = _a.description, href = _a.href, imgSrc = _a.imgSrc, index = _a.index, _b = _a.isBlinking, isBlinking = _b === void 0 ? false : _b, isLoading = _a.isLoading, onClose = _a.onClose, _c = _a.size, size = _c === void 0 ? "sm" : _c, _d = _a.sizing, sizing = _d === void 0 ? "fixed" : _d, title = _a.title, _e = _a.type, type = _e === void 0 ? "document" : _e;
     var cardContent = (React.createElement(React.Fragment, null,
-        type === "image" && imgSrc && (React.createElement("div", { className: "s-absolute s-left-0 s-top-0 s-brightness-90 s-filter s-transition s-duration-200 s-ease-out hover:s-brightness-110 active:s-brightness-100 group-hover:s-brightness-110 group-hover:s-filter group-active:s-brightness-100", style: {
+        type === "image" && imgSrc && (React.createElement("div", { className: classNames("s-absolute s-left-0 s-top-0 s-brightness-90 s-filter s-transition s-duration-200 s-ease-out active:s-brightness-100 group-active:s-brightness-100", href
+                ? "hover:s-brightness-110 group-hover:s-brightness-110 group-hover:s-filter"
+                : ""), style: {
                 backgroundImage: "url(".concat(imgSrc, ")"),
                 backgroundSize: "cover",
                 backgroundPosition: "center",
@@ -75680,11 +75687,11 @@ function Citation(_a) {
                 React.createElement(IconButton, { icon: SvgXCircle$1, variant: type === "image" ? "white" : "tertiary", onClick: onClose })))),
         React.createElement("div", { className: classNames("s-line-clamp-1 s-text-sm s-text-element-800", size === "sm" ? "s-font-bold" : "s-font-semibold") }, title),
         description && (React.createElement("div", { className: "s-line-clamp-2 s-text-xs s-font-normal s-text-element-700" }, description))));
-    return (React.createElement(Tooltip, { label: title, position: "above" },
-        React.createElement(CardButton, __assign({ variant: "secondary", size: "sm", className: classNames("s-relative s-flex s-w-48 s-flex-none s-flex-col s-gap-1", sizing === "fluid" ? typeSizing[sizing] : typeSizing[sizing][size], size === "sm" ? "sm:s-w-64" : "", isBlinking ? "s-animate-[bgblink_500ms_3]" : "", type === "image" ? "s-min-h-20" : "") }, (href && { href: href, target: "_blank", rel: "noopener noreferrer" })),
-            isLoading && (React.createElement("div", { className: "s-absolute s-inset-0 s-flex s-items-center s-justify-center" },
-                React.createElement(Spinner, { size: "xs", variant: "color" }))),
-            React.createElement("div", { className: isLoading ? "s-opacity-50" : "" }, cardContent))));
+    var cardButton = (React.createElement(CardButton, __assign({ variant: "secondary", size: "sm", className: classNames("s-relative s-flex s-w-48 s-flex-none s-flex-col s-gap-1", sizing === "fluid" ? typeSizing[sizing] : typeSizing[sizing][size], size === "sm" ? "sm:s-w-64" : "", isBlinking ? "s-animate-[bgblink_500ms_3]" : "", type === "image" ? "s-min-h-20" : "") }, (href && { href: href, target: "_blank", rel: "noopener noreferrer" })),
+        isLoading && (React.createElement("div", { className: "s-absolute s-inset-0 s-flex s-items-center s-justify-center" },
+            React.createElement(Spinner, { size: "xs", variant: "color" }))),
+        React.createElement("div", { className: isLoading ? "s-opacity-50" : "" }, cardContent)));
+    return href ? (React.createElement(Tooltip, { label: title, position: "above" }, cardButton)) : (cardButton);
 }
 
 function ZoomableImageCitationWrapper(_a) {
@@ -128884,9 +128891,9 @@ function useReactTable(options) {
 }
 
 function DataTable(_a) {
-    var data = _a.data, columns = _a.columns, className = _a.className, filter = _a.filter, filterColumn = _a.filterColumn, initialColumnOrder = _a.initialColumnOrder;
-    var _b = __read(React.useState(initialColumnOrder !== null && initialColumnOrder !== void 0 ? initialColumnOrder : []), 2), sorting = _b[0], setSorting = _b[1];
-    var _c = __read(React.useState([]), 2), columnFilters = _c[0], setColumnFilters = _c[1];
+    var data = _a.data, columns = _a.columns, className = _a.className, filter = _a.filter, filterColumn = _a.filterColumn, initialColumnOrder = _a.initialColumnOrder, _b = _a.columnsBreakpoints, columnsBreakpoints = _b === void 0 ? {} : _b;
+    var _c = __read(React.useState(initialColumnOrder !== null && initialColumnOrder !== void 0 ? initialColumnOrder : []), 2), sorting = _c[0], setSorting = _c[1];
+    var _d = __read(React.useState([]), 2), columnFilters = _d[0], setColumnFilters = _d[1];
     var table = useReactTable({
         data: data,
         columns: columns,
@@ -128907,7 +128914,9 @@ function DataTable(_a) {
         }
     }, [filter, filterColumn]);
     return (React.createElement(DataTable.Root, { className: className },
-        React.createElement(DataTable.Header, null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(DataTable.Row, { key: headerGroup.id }, headerGroup.headers.map(function (header) { return (React.createElement(DataTable.Head, { key: header.id, onClick: header.column.getToggleSortingHandler(), className: header.column.getCanSort() ? "s-cursor-pointer" : "" },
+        React.createElement(DataTable.Header, null, table.getHeaderGroups().map(function (headerGroup) { return (React.createElement(DataTable.Row, { key: headerGroup.id }, headerGroup.headers.map(function (header) { return (React.createElement(DataTable.Head, { key: header.id, onClick: header.column.getToggleSortingHandler(), className: classNames(header.column.getCanSort() ? "s-cursor-pointer" : "", columnsBreakpoints[header.id]
+                ? "s-hidden ".concat(columnsBreakpoints[header.id], ":s-block")
+                : "") },
             React.createElement("div", { className: "s-flex s-items-center s-space-x-1 s-whitespace-nowrap" },
                 flexRender(header.column.columnDef.header, header.getContext()),
                 header.column.getCanSort() && (React.createElement(Icon, { visual: header.column.getIsSorted() === "asc"
@@ -128917,7 +128926,9 @@ function DataTable(_a) {
                             : SvgArrowDown$1, size: "xs", className: classNames("s-ml-1", header.column.getIsSorted()
                         ? "s-opacity-100"
                         : "s-opacity-0") }))))); }))); })),
-        React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) { return (React.createElement(DataTable.Row, { key: row.id, onClick: row.original.onClick, onMoreClick: row.original.onMoreClick }, row.getVisibleCells().map(function (cell) { return (React.createElement(DataTable.Cell, { key: cell.id }, flexRender(cell.column.columnDef.cell, cell.getContext()))); }))); }))));
+        React.createElement(DataTable.Body, null, table.getRowModel().rows.map(function (row) { return (React.createElement(DataTable.Row, { key: row.id, onClick: row.original.onClick, onMoreClick: row.original.onMoreClick }, row.getVisibleCells().map(function (cell) { return (React.createElement(DataTable.Cell, { key: cell.id, className: classNames(columnsBreakpoints[cell.column.id]
+                ? "s-hidden ".concat(columnsBreakpoints[cell.column.id], ":s-block")
+                : "") }, flexRender(cell.column.columnDef.cell, cell.getContext()))); }))); }))));
 }
 DataTable.Root = function DataTableRoot(_a) {
     var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);