internxt · xabg2 · Jun 23, 2026 · Jun 23, 2026 · Jun 23, 2026
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",

diff --git a/src/components/mail/cheaps/MessageCheap.tsx b/src/components/mail/cheaps/MessageCheap.tsx
@@ -1,4 +1,5 @@
 import { Avatar } from '@/components/avatar';
+import { Checkbox } from '@/components/checkbox';
 
 export interface MessageCheapProps {
   email: {
@@ -15,18 +16,39 @@ export interface MessageCheapProps {
   active?: boolean;
   selected?: boolean;
   onClick: (id: string, isRead?: boolean) => void;
+  onSelect?: (id: string) => void;
 }
 
-const MessageCheap = ({ email, active, selected, onClick }: MessageCheapProps) => {
+const MessageCheap = ({ email, active, selected, onClick, onSelect }: MessageCheapProps) => {
   const isHighlighted = active || selected;
 
+  const handleSelect: React.MouseEventHandler = (e) => {
+    e.stopPropagation();
+    onSelect?.(email.id);
+  };
+
   return (
     <button
       onClick={() => onClick(email.id, email.read)}
-      className={`flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 ${isHighlighted ? 'bg-primary/10' : ''}`}
+      className={`group flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 ${isHighlighted ? 'bg-primary/10' : ''}`}
     >
       <div className="flex flex-row w-full gap-2">
-        <Avatar fullName={email.from.name} src={email.from.avatar} size={'xxs'} />
+        <div className="relative h-7 w-7 flex-shrink-0">
+          <div
+            className={`absolute inset-0 flex items-center justify-center transition-opacity ${
+              selected ? 'opacity-0' : 'opacity-100 group-hover:opacity-0'
+            }`}
+          >
+            <Avatar fullName={email.from.name} src={email.from.avatar} size={'xxs'} />
+          </div>
+          <div
+            className={`absolute z-30 inset-0 flex items-center justify-center transition-opacity ${
+              selected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+            }`}
+          >
+            <Checkbox checked={selected} onClick={handleSelect} />
+          </div>
+        </div>
         <div className="flex flex-col w-full">
           <div className={`flex flex-row w-full justify-between ${isHighlighted ? 'text-primary' : ''}`}>
             <div className="flex flex-row gap-1 w-full max-w-[150px] items-center">

diff --git a/src/components/mail/tray/TrayList.tsx b/src/components/mail/tray/TrayList.tsx
@@ -22,6 +22,7 @@ export interface TrayListProps {
   hasMoreItems?: boolean;
   emptyState?: ReactNode;
   onMailSelected?: (id: string, isRead?: boolean) => void;
+  onMailChecked?: (id: string) => void;
   onLoadMore?: () => void;
 }
 
@@ -58,6 +59,7 @@ const TrayList = ({
   hasMoreItems = false,
   emptyState,
   onMailSelected = () => {},
+  onMailChecked,
   onLoadMore = () => {},
 }: TrayListProps) => {
   const loader = (
@@ -97,6 +99,7 @@ const TrayList = ({
                       active={activeEmail === email.id}
                       selected={checked || selectedEmails.includes(email.id)}
                       onClick={onMailSelected}
+                      onSelect={onMailChecked}
                     />
                   </div>
                 ))}

diff --git a/src/components/mail/tray/__test__/MessageCheap.test.tsx b/src/components/mail/tray/__test__/MessageCheap.test.tsx
@@ -91,4 +91,25 @@ describe('MessageCheap', () => {
     const avatarContainer = screen.getByText('John Doe').closest('.flex.flex-row');
     expect(avatarContainer).toBeInTheDocument();
   });
+
+  it('should call onSelect with email id when checkbox is clicked', () => {
+    const mockOnSelect = vi.fn();
+    const { container } = render(<MessageCheap email={mockEmail} onClick={mockOnClick} onSelect={mockOnSelect} />);
+
+    const checkboxLabel = container.querySelector('label');
+    expect(checkboxLabel).toBeInTheDocument();
+    if (checkboxLabel) fireEvent.click(checkboxLabel);
+
+    expect(mockOnSelect).toHaveBeenCalledWith('1');
+  });
+
+  it('should not call onClick when checkbox is clicked', () => {
+    const mockOnSelect = vi.fn();
+    const { container } = render(<MessageCheap email={mockEmail} onClick={mockOnClick} onSelect={mockOnSelect} />);
+
+    const checkboxLabel = container.querySelector('label');
+    if (checkboxLabel) fireEvent.click(checkboxLabel);
+
+    expect(mockOnClick).not.toHaveBeenCalled();
+  });
 });
diff --git a/src/components/mail/tray/__test__/__snapshots__/MessageCheap.test.tsx.snap b/src/components/mail/tray/__test__/__snapshots__/MessageCheap.test.tsx.snap
@@ -6,17 +6,56 @@ exports[`MessageCheap > should match snapshot 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
+        class="group flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
       >
         <div
           class="flex flex-row w-full gap-2"
         >
-          <img
-            class=" shrink-0 select-none rounded-full object-cover"
-            draggable="false"
-            src="https://example.com/avatar.jpg"
-            style="width: 28px; height: 28px;"
-          />
+          <div
+            class="relative h-7 w-7 flex-shrink-0"
+          >
+            <div
+              class="absolute inset-0 flex items-center justify-center transition-opacity opacity-100 group-hover:opacity-0"
+            >
+              <img
+                class=" shrink-0 select-none rounded-full object-cover"
+                draggable="false"
+                src="https://example.com/avatar.jpg"
+                style="width: 28px; height: 28px;"
+              />
+            </div>
+            <div
+              class="absolute z-30 inset-0 flex items-center justify-center transition-opacity opacity-0 group-hover:opacity-100"
+            >
+              <label
+                class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+              >
+                <div
+                  class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
+                >
+                  <svg
+                    class="absolute -inset-px"
+                    fill="none"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    width="20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="m8.85955 15c.38202 0 .67978-.1461.88202-.4551l5.23593-8.00557c.1461-.22472.2079-.43259.2079-.62922 0-.52809-.3933-.91011-.9326-.91011-.3708 0-.6011.13483-.8258.48876l-4.59554 7.24724-2.33146-2.8933c-.20787-.24719-.43259-.35955-.74719-.35955-.54495 0-.9382.38764-.9382.91575 0 .2359.07303.4438.27528.6741l2.89887 3.5113c.24158.2865.51124.4157.87079.4157z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <input
+                  checked=""
+                  class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                  readonly=""
+                  type="checkbox"
+                />
+              </label>
+            </div>
+          </div>
           <div
             class="flex flex-col w-full"
           >
@@ -60,17 +99,56 @@ exports[`MessageCheap > should match snapshot 1`] = `
   </body>,
   "container": <div>
     <button
-      class="flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
+      class="group flex flex-col border-b border-gray-10 text-left gap-2 w-full py-3 px-5 "
     >
       <div
         class="flex flex-row w-full gap-2"
       >
-        <img
-          class=" shrink-0 select-none rounded-full object-cover"
-          draggable="false"
-          src="https://example.com/avatar.jpg"
-          style="width: 28px; height: 28px;"
-        />
+        <div
+          class="relative h-7 w-7 flex-shrink-0"
+        >
+          <div
+            class="absolute inset-0 flex items-center justify-center transition-opacity opacity-100 group-hover:opacity-0"
+          >
+            <img
+              class=" shrink-0 select-none rounded-full object-cover"
+              draggable="false"
+              src="https://example.com/avatar.jpg"
+              style="width: 28px; height: 28px;"
+            />
+          </div>
+          <div
+            class="absolute z-30 inset-0 flex items-center justify-center transition-opacity opacity-0 group-hover:opacity-100"
+          >
+            <label
+              class="relative h-5 w-5 rounded focus-within:outline-primary undefined"
+            >
+              <div
+                class="relative flex h-5 w-5 cursor-pointer flex-col items-center justify-center rounded border text-white border-primary bg-primary"
+              >
+                <svg
+                  class="absolute -inset-px"
+                  fill="none"
+                  height="20"
+                  viewBox="0 0 20 20"
+                  width="20"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="m8.85955 15c.38202 0 .67978-.1461.88202-.4551l5.23593-8.00557c.1461-.22472.2079-.43259.2079-.62922 0-.52809-.3933-.91011-.9326-.91011-.3708 0-.6011.13483-.8258.48876l-4.59554 7.24724-2.33146-2.8933c-.20787-.24719-.43259-.35955-.74719-.35955-.54495 0-.9382.38764-.9382.91575 0 .2359.07303.4438.27528.6741l2.89887 3.5113c.24158.2865.51124.4157.87079.4157z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+              <input
+                checked=""
+                class="base-checkbox h-0 w-0 appearance-none opacity-0"
+                readonly=""
+                type="checkbox"
+              />
+            </label>
+          </div>
+        </div>
         <div
           class="flex flex-col w-full"
         >