@djangocfg/widget-media 0.1.35 → 0.1.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/package.json +6 -6
  2. package/src/image-viewer/components/ImageToolbar.tsx +11 -16
  3. package/src/image-viewer/components/ImageViewer.tsx +21 -27
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@djangocfg/widget-media",
3
- "version": "0.1.35",
3
+ "version": "0.1.37",
4
4
  "description": "Media viewers for a conversation or a file preview: zoom/pan image lightbox, mermaid diagrams, markdown and code listings",
5
5
  "keywords": [
6
6
  "image-viewer",
@@ -57,16 +57,16 @@
57
57
  "zustand": "^5.0.16"
58
58
  },
59
59
  "peerDependencies": {
60
- "@djangocfg/i18n": "^2.1.613",
61
- "@djangocfg/ui-core": "^2.1.613",
60
+ "@djangocfg/i18n": "^2.1.636",
61
+ "@djangocfg/ui-core": "^2.1.636",
62
62
  "lucide-react": "^1.68.0",
63
63
  "react": "^19.0.0",
64
64
  "streamdown": "^2.6.0"
65
65
  },
66
66
  "devDependencies": {
67
- "@djangocfg/i18n": "^2.1.613",
68
- "@djangocfg/typescript-config": "^2.1.613",
69
- "@djangocfg/ui-core": "^2.1.613",
67
+ "@djangocfg/i18n": "^2.1.636",
68
+ "@djangocfg/typescript-config": "^2.1.636",
69
+ "@djangocfg/ui-core": "^2.1.636",
70
70
  "@storybook/react-vite": "^10.6.5",
71
71
  "@types/node": "^25.9.5",
72
72
  "@types/react": "19.3.0",
package/src/image-viewer/components/ImageToolbar.tsx CHANGED
@@ -12,9 +12,7 @@ import {
12
12
  DropdownMenuContent,
13
13
  DropdownMenuItem,
14
14
  DropdownMenuTrigger,
15
- Tooltip,
16
- TooltipContent,
17
- TooltipTrigger,
15
+ TooltipHint,
18
16
  } from '@djangocfg/ui-core/components';
19
17
  import { useMediaCopy } from '../../i18n';
20
18
  import { cn } from '@djangocfg/ui-core/lib';
@@ -51,19 +49,16 @@ function TbIconButton({
51
49
  children: ReactNode;
52
50
  }) {
53
51
  return (
54
- <Tooltip>
55
- <TooltipTrigger asChild>
56
- <button
57
- type="button"
58
- aria-label={label}
59
- onClick={onClick}
60
- className={cn(TB_BUTTON, 'h-7 w-7', className)}
61
- >
62
- {children}
63
- </button>
64
- </TooltipTrigger>
65
- <TooltipContent side="top">{label}</TooltipContent>
66
- </Tooltip>
52
+ <TooltipHint tooltip={{ content: label, side: 'top' }}>
53
+ <button
54
+ type="button"
55
+ aria-label={label}
56
+ onClick={onClick}
57
+ className={cn(TB_BUTTON, 'h-7 w-7', className)}
58
+ >
59
+ {children}
60
+ </button>
61
+ </TooltipHint>
67
62
  );
68
63
  }
69
64
 
package/src/image-viewer/components/ImageViewer.tsx CHANGED
@@ -27,7 +27,7 @@ import {
27
27
  TransformComponent,
28
28
  type ReactZoomPanPinchRef,
29
29
  } from 'react-zoom-pan-pinch';
30
- import { cn, Dialog, DialogContent, DialogTitle, Alert, AlertDescription, Tooltip, TooltipContent, TooltipTrigger } from '@djangocfg/ui-core';
30
+ import { cn, Dialog, DialogContent, DialogTitle, Alert, AlertDescription, TooltipHint } from '@djangocfg/ui-core';
31
31
  import { useMediaCopy } from '../../i18n';
32
32
  import { useHotkey } from '@djangocfg/ui-core/hooks';
33
33
 
@@ -476,32 +476,26 @@ export function ImageViewer({
476
476
  hasMultiple && (
477
477
  // Embedded gallery nav (checkerboard canvas).
478
478
  <>
479
- <Tooltip>
480
- <TooltipTrigger asChild>
481
- <button
482
- type="button"
483
- onClick={prev}
484
- aria-label={labels.previous}
485
- className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
486
- >
487
- <ChevronLeft className="h-5 w-5" />
488
- </button>
489
- </TooltipTrigger>
490
- <TooltipContent side="right">{labels.previous}</TooltipContent>
491
- </Tooltip>
492
- <Tooltip>
493
- <TooltipTrigger asChild>
494
- <button
495
- type="button"
496
- onClick={next}
497
- aria-label={labels.next}
498
- className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
499
- >
500
- <ChevronRight className="h-5 w-5" />
501
- </button>
502
- </TooltipTrigger>
503
- <TooltipContent side="left">{labels.next}</TooltipContent>
504
- </Tooltip>
479
+ <TooltipHint tooltip={{ content: labels.previous, side: 'right' }}>
480
+ <button
481
+ type="button"
482
+ onClick={prev}
483
+ aria-label={labels.previous}
484
+ className="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
485
+ >
486
+ <ChevronLeft className="h-5 w-5" />
487
+ </button>
488
+ </TooltipHint>
489
+ <TooltipHint tooltip={{ content: labels.next, side: 'left' }}>
490
+ <button
491
+ type="button"
492
+ onClick={next}
493
+ aria-label={labels.next}
494
+ className="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white"
495
+ >
496
+ <ChevronRight className="h-5 w-5" />
497
+ </button>
498
+ </TooltipHint>
505
499
  <div className="absolute top-3 left-1/2 -translate-x-1/2 z-10 bg-black/60 backdrop-blur-sm border border-white/10 text-white/80 text-xs font-mono px-2 py-0.5 rounded-full pointer-events-none">
506
500
  {currentIndex + 1} / {images.length}
507
501
  </div>