@dust-tt/sparkle 0.2.222 → 0.2.224

package/dist/sparkle.css

@@ -4474,27 +4474,56 @@ select {
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
-.s-group:hover .group-hover\:s-text-action-400 {
+.s-group\/col:hover .group-hover\/col\:s-text-action-400 {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
-.s-group:hover .group-hover\:s-text-action-500 {
+.s-group\/col:hover .group-hover\/col\:s-text-action-500 {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.s-group:hover .group-hover\:s-text-warning-300 {
+.s-group\/dm:hover .group-hover\/dm\:s-text-action-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+.s-group\/dm:hover .group-hover\/dm\:s-text-action-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
+.s-group\/item:hover .group-hover\/item\:s-text-action-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+.s-group\/item:hover .group-hover\/item\:s-text-action-500 {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
+.s-group\/item:hover .group-hover\/item\:s-text-warning-300 {
   --tw-text-opacity: 1;
   color: rgb(252 165 165 / var(--tw-text-opacity));
 }
 
-.s-group:hover .group-hover\:s-text-warning-400 {
+.s-group\/item:hover .group-hover\/item\:s-text-warning-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-.s-group:hover .group-hover\:s-opacity-100 {
+.s-group\/tab:hover .group-hover\/tab\:s-text-action-400 {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+.s-group\/item:hover .group-hover\/item\:s-opacity-100 {
+  opacity: 1;
+}
+
+.s-group\/tree:hover .group-hover\/tree\:s-opacity-100 {
   opacity: 1;
 }
 
@@ -4507,12 +4536,12 @@ select {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-.s-group:active .group-active\:s-text-action-700 {
+.s-group\/item:active .group-active\/item\:s-text-action-700 {
   --tw-text-opacity: 1;
   color: rgb(29 78 216 / var(--tw-text-opacity));
 }
 
-.s-group:active .group-active\:s-text-warning-700 {
+.s-group\/item:active .group-active\/item\:s-text-warning-700 {
   --tw-text-opacity: 1;
   color: rgb(185 28 28 / var(--tw-text-opacity));
 }
@@ -4894,37 +4923,47 @@ select {
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .s-group:hover .dark\:group-hover\:s-text-action-400) {
+:is(.s-dark .s-group\/col:hover .dark\:group-hover\/col\:s-text-action-400-dark) {
   --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
+  color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .s-group:hover .dark\:group-hover\:s-text-action-400-dark) {
+:is(.s-dark .s-group\/col:hover .dark\:group-hover\/col\:s-text-action-500-dark) {
   --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
+  color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .s-group:hover .dark\:group-hover\:s-text-action-500-dark) {
+:is(.s-dark .s-group\/dm:hover .dark\:group-hover\/dm\:s-text-action-400) {
+  --tw-text-opacity: 1;
+  color: rgb(96 165 250 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .s-group\/dm:hover .dark\:group-hover\/dm\:s-text-action-500-dark) {
   --tw-text-opacity: 1;
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .s-group:hover .dark\:group-hover\:s-text-action-600-dark) {
+:is(.s-dark .s-group\/item:hover .dark\:group-hover\/item\:s-text-action-600-dark) {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .s-group:hover .dark\:group-hover\:s-text-warning-600-dark) {
+:is(.s-dark .s-group\/item:hover .dark\:group-hover\/item\:s-text-warning-600-dark) {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .s-group:active .dark\:group-active\:s-text-action-400-dark) {
+:is(.s-dark .s-group\/tab:hover .dark\:group-hover\/tab\:s-text-action-500-dark) {
+  --tw-text-opacity: 1;
+  color: rgb(59 130 246 / var(--tw-text-opacity));
+}
+
+:is(.s-dark .s-group\/item:active .dark\:group-active\/item\:s-text-action-400-dark) {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity));
 }
 
-:is(.s-dark .s-group:active .dark\:group-active\:s-text-warning-400-dark) {
+:is(.s-dark .s-group\/item:active .dark\:group-active\/item\:s-text-warning-400-dark) {
   --tw-text-opacity: 1;
   color: rgb(220 38 38 / var(--tw-text-opacity));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.222",
+  "version": "0.2.224",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/Collapsible.tsx

@@ -53,11 +53,11 @@ Collapsible.Button = function ({
   const labelClasses = {
     primary: {
       base: "s-text-action-500 s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
-      hover: "group-hover:s-text-action-400",
+      hover: "group-hover/col:s-text-action-400",
       active: "active:s-text-action-600",
       dark: {
         base: "dark:s-text-action-500-dark",
-        hover: "dark:group-hover:s-text-action-400-dark",
+        hover: "dark:group-hover/col:s-text-action-400-dark",
         active: "dark:active:s-text-action-600-dark",
         disabled: "dark:s-element-500-dark",
       },
@@ -66,11 +66,11 @@ Collapsible.Button = function ({
 
     secondary: {
       base: "s-text-element-900 s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
-      hover: "group-hover:s-text-action-500",
+      hover: "group-hover/col:s-text-action-500",
       active: "active:s-text-action-600",
       dark: {
         base: "dark:s-text-element-900-dark",
-        hover: "dark:group-hover:s-text-action-400-dark",
+        hover: "dark:group-hover/col:s-text-action-400-dark",
         active: "dark:active:s-text-action-600-dark",
         disabled: "dark:s-element-500-dark",
       },
@@ -81,24 +81,24 @@ Collapsible.Button = function ({
   const chevronClasses = {
     primary: {
       base: "s-text-element-600",
-      hover: "group-hover:s-text-action-400",
+      hover: "group-hover/col:s-text-action-400",
       active: "active:s-text-action-700",
       disabled: "s-element-500",
       dark: {
         base: "dark:s-text-element-600-dark",
-        hover: "dark:group-hover:s-text-action-500-dark",
+        hover: "dark:group-hover/col:s-text-action-500-dark",
         active: "dark:active:s-text-action-700-dark",
         disabled: "dark:s-element-500-dark",
       },
     },
     secondary: {
       base: "s-text-element-600",
-      hover: "group-hover:s-text-action-400",
+      hover: "group-hover/col:s-text-action-400",
       active: "active:s-text-action-700",
       disabled: "s-element-500",
       dark: {
         base: "dark:s-text-element-600-dark",
-        hover: "dark:group-hover:s-text-action-500-dark",
+        hover: "dark:group-hover/col:s-text-action-500-dark",
         active: "dark:active:s-text-action-700-dark",
         disabled: "dark:s-element-500-dark",
       },
@@ -131,7 +131,7 @@ Collapsible.Button = function ({
       className={classNames(
         disabled ? "s-cursor-default" : "s-cursor-pointer",
         className,
-        "s-group s-flex s-items-center s-justify-items-center s-gap-1 s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0"
+        "s-group/col s-flex s-items-center s-justify-items-center s-gap-1 s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0"
       )}
     >
       <Icon

package/src/components/DataTable.tsx

@@ -18,6 +18,7 @@ import {
 } from "@sparkle/components/DropdownMenu";
 import { IconButton } from "@sparkle/components/IconButton";
 import { ArrowDownIcon, ArrowUpIcon, MoreIcon } from "@sparkle/icons";
+import { Tooltip } from "@sparkle/index_with_tw_base";
 import { classNames } from "@sparkle/lib/utils";
 
 import { Icon } from "./Icon";
@@ -251,7 +252,7 @@ DataTable.Row = function Row({
   return (
     <tr
       className={classNames(
-        "s-group s-border-b s-border-structure-200 s-text-sm s-transition-colors s-duration-300 s-ease-out",
+        "s-group/dt s-border-b s-border-structure-200 s-text-sm s-transition-colors s-duration-300 s-ease-out",
         onClick ? "s-cursor-pointer hover:s-bg-structure-50" : "",
         className || ""
       )}
@@ -260,7 +261,7 @@ DataTable.Row = function Row({
     >
       {children}
       <td className="s-w-1 s-cursor-pointer s-pl-1 s-text-element-600">
-        {moreMenuItems && (
+        {moreMenuItems && moreMenuItems.length > 0 && (
           <DropdownMenu className="s-mr-1.5 s-flex">
             <DropdownMenu.Button
               onClick={(e) => {
@@ -301,6 +302,7 @@ DataTable.Cell = function Cell({ children, className, ...props }: CellProps) {
 
 interface CellContentProps extends React.TdHTMLAttributes<HTMLDivElement> {
   avatarUrl?: string;
+  avatarTooltipLabel?: string;
   icon?: React.ComponentType<{ className?: string }>;
   iconClassName?: string;
   roundedAvatar?: boolean;
@@ -312,6 +314,7 @@ DataTable.CellContent = function CellContent({
   children,
   className,
   avatarUrl,
+  avatarTooltipLabel,
   roundedAvatar,
   icon,
   iconClassName,
@@ -323,7 +326,17 @@ DataTable.CellContent = function CellContent({
       className={classNames("s-flex s-items-center s-py-2", className || "")}
       {...props}
     >
-      {avatarUrl && (
+      {avatarUrl && avatarTooltipLabel && (
+        <Tooltip label={avatarTooltipLabel} position="above">
+          <Avatar
+            visual={avatarUrl}
+            size="xs"
+            className="s-mr-2"
+            isRounded={roundedAvatar ?? false}
+          />
+        </Tooltip>
+      )}
+      {avatarUrl && !avatarTooltipLabel && (
         <Avatar
           visual={avatarUrl}
           size="xs"

package/src/components/DropdownMenu.tsx

@@ -3,6 +3,7 @@ import React, {
   ComponentType,
   Fragment,
   JSXElementConstructor,
+  MouseEvent,
   MouseEventHandler,
   MutableRefObject,
   ReactElement,
@@ -28,11 +29,11 @@ const ButtonRefContext =
 
 const labelClasses = {
   base: "s-text-element-900 s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none",
-  hover: "group-hover:s-text-action-500",
+  hover: "group-hover/dm:s-text-action-500",
   active: "active:s-text-action-700",
   dark: {
     base: "dark:s-text-element-900-dark",
-    hover: "dark:group-hover:s-text-action-400",
+    hover: "dark:group-hover/dm:s-text-action-400",
     active: "dark:active:s-text-action-600",
     disabled: "dark:s-element-500-dark",
   },
@@ -46,23 +47,23 @@ const labelSizeClasses = {
 
 const iconClasses = {
   base: "s-text-element-700 s-transition-colors s-ease-out s-duration-400",
-  hover: "group-hover:s-text-action-500",
+  hover: "group-hover/dm:s-text-action-500",
   active: "active:s-text-action-700",
   disabled: "s-opacity-50",
   dark: {
     base: "dark:s-text-element-700-dark",
-    hover: "dark:group-hover:s-text-action-500-dark",
+    hover: "dark:group-hover/dm:s-text-action-500-dark",
     active: "dark:active:s-text-action-600",
   },
 };
 
 const chevronClasses = {
   base: "s-text-element-600 s-mt-0.5",
-  hover: "group-hover:s-text-action-400",
+  hover: "group-hover/dm:s-text-action-400",
   disabled: "s-element-500",
   dark: {
     base: "dark:s-text-element-600-dark",
-    hover: "dark:group-hover:s-text-action-500-dark",
+    hover: "dark:group-hover/dm:s-text-action-500-dark",
     disabled: "dark:s-element-500-dark",
   },
 };
@@ -155,7 +156,7 @@ DropdownMenu.Button = function ({
         className={classNames(
           disabled ? "s-cursor-default" : "s-cursor-pointer",
           className,
-          "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
+          "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
           label ? "s-gap-1.5" : "s-gap-0"
         )}
         onClick={onClick}
@@ -188,7 +189,7 @@ DropdownMenu.Button = function ({
             className={classNames(
               disabled ? "s-cursor-default" : "s-cursor-pointer",
               className,
-              "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
+              "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
               label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5"
             )}
           >
@@ -207,7 +208,7 @@ DropdownMenu.Button = function ({
           className={classNames(
             disabled ? "s-cursor-default" : "s-cursor-pointer",
             className,
-            "s-group s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
+            "s-group/dm s-flex s-justify-items-center s-text-sm s-font-medium focus:s-outline-none focus:s-ring-0",
             label ? (size === "md" ? "s-gap-2" : "s-gap-1.5") : "s-gap-0.5",
             type === "submenu" ? "s-opacity-50" : ""
           )}
@@ -240,7 +241,7 @@ export interface DropdownItemProps {
   disabled?: boolean;
   visual?: string | React.ReactNode;
   icon?: ComponentType;
-  onClick?: () => void;
+  onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
   selected?: boolean;
   hasChildren?: boolean;
   children?: React.ReactNode;
@@ -265,23 +266,25 @@ DropdownMenu.Item = function ({
       {hasChildren ? (
         <DropdownMenu className="s-w-full s-gap-x-2 s-py-2">
           <DropdownMenu.Button
+            className="s-w-full"
+            disabled={disabled}
             label={label}
             type="submenu"
-            className="s-w-full"
           />
           {children}
         </DropdownMenu>
       ) : (
         <StandardItem.Dropdown
-          style={variant}
           className="s-w-full"
+          description={description}
+          disabled={disabled}
           href={href}
-          onClick={onClick}
-          label={label}
-          visual={visual}
           icon={icon}
-          description={description}
+          label={label}
+          onClick={onClick}
           selected={selected}
+          style={variant}
+          visual={visual}
         />
       )}
     </Menu.Item>

package/src/components/Item.tsx

@@ -19,12 +19,12 @@ const labelStyleClasses = {
 };
 
 const labelColorClasses = {
-  item: "s-text-element-600 dark:s-text-element-500-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+  item: "s-text-element-600 dark:s-text-element-500-dark group-hover/item:s-text-action-500 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
   action:
-    "s-text-element-800 dark:s-text-element-800-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
-  link: "s-text-element-800 dark:s-text-element-800-dark group-hover:s-text-action-500 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+    "s-text-element-800 dark:s-text-element-800-dark group-hover/item:s-text-action-500 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
+  link: "s-text-element-800 dark:s-text-element-800-dark group-hover/item:s-text-action-500 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
   warning:
-    "s-text-warning-500 dark:s-text-warning-400-dark group-hover:s-text-warning-400 group-active:s-text-warning-700 dark:group-hover:s-text-warning-600-dark dark:group-active:s-text-warning-400-dark",
+    "s-text-warning-500 dark:s-text-warning-400-dark group-hover/item:s-text-warning-400 group-active/item:s-text-warning-700 dark:group-hover/item:s-text-warning-600-dark dark:group-active/item:s-text-warning-400-dark",
 };
 
 const spacingClasses = {
@@ -34,12 +34,12 @@ const spacingClasses = {
 };
 
 const iconClasses = {
-  item: "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+  item: "s-text-element-600 group-hover/item:s-text-action-400 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
   action:
-    "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
-  link: "s-text-brand group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
+    "s-text-element-600 group-hover/item:s-text-action-400 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
+  link: "s-text-brand group-hover/item:s-text-action-400 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
   warning:
-    "s-text-warning-400 group-hover:s-text-warning-300 group-active:s-text-warning-700 dark:group-hover:s-text-warning-600-dark dark:group-active:s-text-warning-400-dark",
+    "s-text-warning-400 group-hover/item:s-text-warning-300 group-active/item:s-text-warning-700 dark:group-hover/item:s-text-warning-600-dark dark:group-active/item:s-text-warning-400-dark",
 };
 
 type ItemProps = {
@@ -112,9 +112,9 @@ export function Item({
   return (
     <Link
       className={classNames(
-        "s-duration-400 s-group s-box-border s-flex s-select-none s-text-sm s-transition-colors s-ease-out",
+        "s-duration-400 s-group/item s-box-border s-flex s-select-none s-text-sm s-transition-colors s-ease-out",
         spacingClasses[spacing],
-        disabled ? "" : "s-cursor-pointer",
+        disabled ? "s-cursor-default" : "s-cursor-pointer",
         className
       )}
       onClick={selected || disabled ? undefined : onClick}
@@ -161,15 +161,15 @@ export function Item({
             ? classNames(
                 "s-shrink-0 s-transition-all s-duration-200 s-ease-out",
                 hasAction === "hover"
-                  ? "s-opacity-0 group-hover:s-opacity-100"
+                  ? "s-opacity-0 group-hover/item:s-opacity-100"
                   : "",
                 disabled
                   ? "s-text-element-500 dark:s-text-element-500-dark"
                   : selected
                     ? "s-text-action-400 s-opacity-100 dark:s-text-action-600-dark"
                     : classNames(
-                        "s-text-element-600 group-hover:s-text-action-400 group-active:s-text-action-700 dark:group-hover:s-text-action-600-dark dark:group-active:s-text-action-400-dark",
-                        hasAction ? "group-hover:s-opacity-100" : ""
+                        "s-text-element-600 group-hover/item:s-text-action-400 group-active/item:s-text-action-700 dark:group-hover/item:s-text-action-600-dark dark:group-active/item:s-text-action-400-dark",
+                        hasAction ? "group-hover/item:s-opacity-100" : ""
                       )
               )
             : "s-hidden"

package/src/components/Tab.tsx

@@ -71,10 +71,10 @@ const tabClasses = {
 const iconClasses = {
   default: {
     base: "s-text-element-600",
-    hover: "group-hover:s-text-action-400",
+    hover: "group-hover/tab:s-text-action-400",
     dark: {
       base: "dark:s-text-element-600-dark",
-      hover: "dark:group-hover:s-text-action-500-dark",
+      hover: "dark:group-hover/tab:s-text-action-500-dark",
     },
   },
   selected: {
@@ -125,7 +125,7 @@ export function Tab<E>({
         : iconClasses.default;
 
       const finalTabClasses = classNames(
-        "s-group s-justify-center s-flex s-text-sm s-font-semibold s-py-2.5 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none",
+        "s-group/tab s-justify-center s-flex s-text-sm s-font-semibold s-py-2.5 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none",
         variant === "default"
           ? tab.icon
             ? tab.hideLabel

package/src/components/Tree.tsx

@@ -130,7 +130,7 @@ Tree.Item = function ({
   const childrenToRender = getChildren();
 
   const treeItemStyleClasses = {
-    base: "s-group s-flex s-cursor-default s-flex-row s-items-center",
+    base: "s-group/tree s-flex s-cursor-default s-flex-row s-items-center",
     isNavigatableBase:
       "s-border s-transition-colors s-duration-300 s-ease-out s-cursor-pointer",
     isNavigatableUnselected:
@@ -200,7 +200,7 @@ Tree.Item = function ({
             className={classNames(
               "s-flex s-gap-2 s-pl-4",
               areActionsFading
-                ? "s-transform s-opacity-0 s-duration-300 group-hover:s-opacity-100"
+                ? "s-transform s-opacity-0 s-duration-300 group-hover/tree:s-opacity-100"
                 : ""
             )}
           >

package/src/stories/DataTable.stories.tsx

@@ -21,6 +21,7 @@ type Data = {
   lastUpdated: string;
   size: string;
   avatarUrl?: string;
+  avatarTooltipLabel?: string;
   icon?: React.ComponentType<{ className?: string }>;
   onClick?: () => void;
   moreMenuItems?: DropdownItemProps[];
@@ -29,6 +30,17 @@ type Data = {
 
 export const DataTableExample = () => {
   const data: Data[] = [
+    {
+      name: "Soupinou with tooltip on avatar",
+      usedBy: 100,
+      addedBy: "User1",
+      lastUpdated: "July 8, 2023",
+      size: "32kb",
+      avatarUrl: "https://avatars.githubusercontent.com/u/138893015?s=200&v=4",
+      avatarTooltipLabel: "Meow",
+      roundedAvatar: true,
+      onClick: () => console.log("hehe"),
+    },
     {
       name: "Marketing",
       description: "(23 items)",
@@ -49,8 +61,9 @@ export const DataTableExample = () => {
       icon: FolderIcon,
       moreMenuItems: [
         {
-          label: "Edit",
+          label: "Edit (disabled)",
           onClick: () => console.log("Edit"),
+          disabled: true,
         },
       ],
     },
@@ -99,6 +112,7 @@ export const DataTableExample = () => {
       cell: (info) => (
         <DataTable.CellContent
           avatarUrl={info.row.original.avatarUrl}
+          avatarTooltipLabel={info.row.original.avatarTooltipLabel}
           icon={info.row.original.icon}
           description={info.row.original.description}
           roundedAvatar={info.row.original.roundedAvatar}