delegate basic events to radix, keep modifier logic

Author: jaffrepaul

src/components/imageLightbox/index.tsx

@@ -71,22 +71,17 @@ export function ImageLightbox({
       e.preventDefault();
       e.stopPropagation();
       openInNewTab();
-      return;
     }
-    // Regular click opens lightbox - let it bubble to Dialog.Trigger
+    // Regular click is handled by Dialog.Trigger
   };
 
   const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      if (e.ctrlKey || e.metaKey) {
-        e.preventDefault();
-        e.stopPropagation();
-        openInNewTab();
-        return;
-      }
-      // Regular Enter/Space should open lightbox
+    // Ctrl/Cmd+Enter/Space opens in new tab
+    // Regular Enter/Space is handled by Dialog.Trigger
+    if ((e.key === 'Enter' || e.key === ' ') && (e.ctrlKey || e.metaKey)) {
       e.preventDefault();
-      setOpen(true);
+      e.stopPropagation();
+      openInNewTab();
     }
   };
 
@@ -133,18 +128,14 @@ export function ImageLightbox({
 
   return (
     <Lightbox.Root open={open} onOpenChange={setOpen} content={renderImage(false)}>
-      <Lightbox.Trigger asChild>
-        <div
-          onClick={handleClick}
-          onAuxClick={handleClick}
-          onKeyDown={handleKeyDown}
-          className="cursor-pointer border-none bg-transparent p-0 block w-full no-underline"
-          aria-label={`View image: ${alt}`}
-          role="button"
-          tabIndex={0}
-        >
-          {renderImage()}
-        </div>
+      <Lightbox.Trigger
+        onClick={handleClick}
+        onAuxClick={handleClick}
+        onKeyDown={handleKeyDown}
+        className="cursor-pointer border-none bg-transparent p-0 block w-full no-underline"
+        aria-label={`View image: ${alt}`}
+      >
+        {renderImage()}
       </Lightbox.Trigger>
     </Lightbox.Root>
   );

src/components/lightbox/index.tsx

@@ -39,9 +39,8 @@ interface LightboxProps {
   open?: boolean;
 }
 
-interface LightboxTriggerProps {
+interface LightboxTriggerProps extends React.ComponentProps<typeof Dialog.Trigger> {
   children: React.ReactNode;
-  asChild?: boolean;
 }
 
 interface LightboxCloseProps {
@@ -83,8 +82,8 @@ function LightboxRoot({
 }
 
 // Trigger component
-function LightboxTrigger({children, asChild = false}: LightboxTriggerProps) {
-  return <Dialog.Trigger asChild={asChild}>{children}</Dialog.Trigger>;
+function LightboxTrigger({children, ...props}: LightboxTriggerProps) {
+  return <Dialog.Trigger {...props}>{children}</Dialog.Trigger>;
 }
 
 // Close button component