@dust-tt/sparkle 0.2.201 → 0.2.203

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.201",
+  "version": "0.2.203",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

package/src/components/CardButton.tsx

@@ -24,12 +24,18 @@ interface CardButtonProps {
 }
 
 const variantClasses = {
+  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",
+};
+
+const hoverVariantClasses = {
   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",
+    "hover:s-bg-white hover:s-border-structure-100 active:s-bg-structure-100 active:s-border-structure-200 s-cursor-pointer",
   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",
+    "hover:s-bg-structure-50 hover:s-border-structure-200 active:s-bg-structure-100 active:s-border-structure-300 s-cursor-pointer",
   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",
+    "hover:s-bg-structure-50 hover:s-border-structure-100 active:s-bg-structure-100 active:s-border-structure-200 s-cursor-pointer",
 };
 
 const sizeClasses = {
@@ -57,7 +63,8 @@ export function CardButton({
   const Link: SparkleContextLinkType = href ? components.link : noHrefLink;
 
   const commonClasses = classNames(
-    "s-flex s-group s-cursor-pointer s-transition s-duration-200 s-overflow-hidden",
+    "s-flex s-group s-transition s-duration-200 s-overflow-hidden",
+    onClick ? hoverVariantClasses[variant] : "",
     variantClasses[variant],
     sizeClasses[size],
     className

package/src/components/Citation.tsx

@@ -86,7 +86,12 @@ export function Citation({
     <>
       {type === "image" && imgSrc && (
         <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"
+          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(${imgSrc})`,
             backgroundSize: "cover",
@@ -146,27 +151,32 @@ export function Citation({
     </>
   );
 
-  return (
+  const cardButton = (
+    <CardButton
+      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, target: "_blank", rel: "noopener noreferrer" })}
+    >
+      {isLoading && (
+        <div className="s-absolute s-inset-0 s-flex s-items-center s-justify-center">
+          <Spinner size="xs" variant="color" />
+        </div>
+      )}
+      <div className={isLoading ? "s-opacity-50" : ""}>{cardContent}</div>
+    </CardButton>
+  );
+  return href ? (
     <Tooltip label={title} position="above">
-      <CardButton
-        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, target: "_blank", rel: "noopener noreferrer" })}
-      >
-        {isLoading && (
-          <div className="s-absolute s-inset-0 s-flex s-items-center s-justify-center">
-            <Spinner size="xs" variant="color" />
-          </div>
-        )}
-        <div className={isLoading ? "s-opacity-50" : ""}>{cardContent}</div>
-      </CardButton>
+      {cardButton}
     </Tooltip>
+  ) : (
+    cardButton
   );
 }

package/src/components/DataTable.tsx

@@ -16,22 +16,33 @@ import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
 
-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 function DataTable<TData, TValue>({
+export function DataTable<TData extends TBaseData, TValue>({
   data,
   columns,
   className,
   filter,
   filterColumn,
   initialColumnOrder,
+  columnsBreakpoints = {},
 }: DataTableProps<TData, TValue>) {
   const [sorting, setSorting] = useState<SortingState>(
     initialColumnOrder ?? []
@@ -67,7 +78,12 @@ export function DataTable<TData, TValue>({
               <DataTable.Head
                 key={header.id}
                 onClick={header.column.getToggleSortingHandler()}
-                className={header.column.getCanSort() ? "s-cursor-pointer" : ""}
+                className={classNames(
+                  header.column.getCanSort() ? "s-cursor-pointer" : "",
+                  columnsBreakpoints[header.id]
+                    ? `s-hidden ${columnsBreakpoints[header.id]}:s-block`
+                    : ""
+                )}
               >
                 <div className="s-flex s-items-center s-space-x-1 s-whitespace-nowrap">
                   {flexRender(
@@ -106,7 +122,14 @@ export function DataTable<TData, TValue>({
             onMoreClick={row.original.onMoreClick}
           >
             {row.getVisibleCells().map((cell) => (
-              <DataTable.Cell key={cell.id}>
+              <DataTable.Cell
+                key={cell.id}
+                className={classNames(
+                  columnsBreakpoints[cell.column.id]
+                    ? `s-hidden ${columnsBreakpoints[cell.column.id]}:s-block`
+                    : ""
+                )}
+              >
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </DataTable.Cell>
             ))}

package/src/stories/DataTable.stories.tsx

@@ -20,9 +20,7 @@ type Data = {
   size: string;
   avatarUrl?: string;
   icon?: React.ComponentType<{ className?: string }>;
-  clickable?: boolean;
   onClick?: () => void;
-  showMore?: boolean;
   onMoreClick?: () => void;
 };
 
@@ -119,6 +117,7 @@ export const DataTableExample = () => {
         data={data}
         columns={columns}
         initialColumnOrder={[{ id: "name", desc: false }]}
+        columnsBreakpoints={{ lastUpdated: "sm" }}
       />
     </div>
   );