@liorian/sdk 0.28.0-alpha.56010ca

package/src/presentation/ui/media-player/players/voice-note-player.tsx

@@ -0,0 +1,108 @@
+"use client"
+
+import * as React from "react";
+import {MicIcon, PauseIcon, PlayIcon} from "lucide-react";
+
+import {cn} from "../../../../infrastructure/utilities/utils";
+import {usePlayer} from "../media-player.context";
+import {formatMediaTime} from "../player-controls";
+import {ButtonGhost} from "../player-controls";
+
+/**
+ Apparence « note vocale » inspirée de WhatsApp : bulle arrondie avec bouton
+ de lecture, forme d'onde cliquable pour naviguer, temps restant décompté et
+ cycle de vitesse 1× → 1,5× → 2×.
+ */
+export function VoiceNotePlayer() {
+    const {controller, accentClassName} = usePlayer();
+    const {isPlaying, currentTime, duration, rate, seekMin, seekMax} = controller.state;
+    const {togglePlay, seekTo, cycleRate} = controller.actions;
+    const barsRef = React.useRef<HTMLDivElement | null>(null);
+
+    // En lecture on affiche le restant (décompte WhatsApp), sinon la durée totale.
+    const total = Number.isFinite(duration) && duration > 0 ? duration : seekMax;
+    const remaining = Math.max(total - currentTime, 0);
+    const fraction = total > 0 ? Math.min(currentTime / total, 1) : 0;
+
+    const seekFromPointer = (clientX: number) => {
+        const bars = barsRef.current;
+        if (!bars) return;
+        const rect = bars.getBoundingClientRect();
+        const ratio = rect.width > 0 ? Math.min(Math.max((clientX - rect.left) / rect.width, 0), 1) : 0;
+        seekTo(ratio * total);
+    };
+
+    return (
+        <div
+            data-slot="voice-note"
+            className="flex w-full max-w-xs items-center gap-2.5 rounded-full bg-secondary/80 py-2 pr-3 pl-2"
+        >
+            {/* Pastille micro à la place de l'avatar d'expéditeur */}
+            <span
+                aria-hidden
+                className="flex size-9 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground"
+            >
+                <MicIcon className="size-4"/>
+            </span>
+
+            <ButtonGhost
+                label={isPlaying ? "Pause (Espace)" : "Lire la note vocale (Espace)"}
+                onClick={togglePlay}
+                className={cn("size-8 bg-primary/10 hover:bg-primary/20", accentClassName)}
+            >
+                {isPlaying ? <PauseIcon className="size-4 fill-current"/> : <PlayIcon className="size-4 fill-current"/>}
+            </ButtonGhost>
+
+            {/* Forme d'onde : hauteur pseudo-aléatoire déterministe (SSR-safe), remplie selon l'avancement */}
+            <div
+                ref={barsRef}
+                role="slider"
+                tabIndex={0}
+                aria-label="Position dans la note vocale"
+                aria-valuemin={0}
+                aria-valuemax={Math.round(total)}
+                aria-valuenow={Math.round(currentTime)}
+                aria-valuetext={`${formatMediaTime(currentTime)} sur ${formatMediaTime(total)}`}
+                className="group/wave relative flex h-8 min-w-0 flex-1 cursor-pointer touch-none items-center gap-[2px]"
+                onPointerDown={(event) => {
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    seekFromPointer(event.clientX);
+                }}
+                onPointerMove={(event) => {
+                    if (event.buttons === 1) seekFromPointer(event.clientX);
+                }}
+            >
+                {Array.from({length: 30}, (_, index) => {
+                    const seedFraction = Math.abs(Math.sin((index + 1) * 12.9898)) % 1;
+                    const height = 18 + seedFraction * 82; // pourcentage de h-8
+                    const active = index / 30 <= fraction;
+                    return (
+                        <span
+                            key={index}
+                            aria-hidden
+                            className={cn(
+                                "w-[3px] shrink-0 rounded-full transition-colors",
+                                active ? cn("bg-primary", accentClassName) : "bg-muted-foreground/35",
+                            )}
+                            style={{height: `${height}%`}}
+                        />
+                    );
+                })}
+            </div>
+
+            <span className="shrink-0 text-xs tabular-nums text-muted-foreground select-none">
+                {formatMediaTime(isPlaying || currentTime > 0 ? remaining : total)}
+            </span>
+
+            <button
+                type="button"
+                onClick={cycleRate}
+                title="Vitesse de lecture"
+                aria-label={`Vitesse de lecture ${rate}×`}
+                className="shrink-0 cursor-pointer rounded px-1 text-[11px] font-semibold text-muted-foreground tabular-nums outline-hidden hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
+            >
+                {String(rate).replace(".", ",")}×
+            </button>
+        </div>
+    );
+}

package/src/presentation/ui/media-player/use-media-player.hook.ts

@@ -0,0 +1,263 @@
+"use client"
+
+import * as React from "react";
+
+/** Vitesses de lecture proposées par le menu « vitesse » (style YouTube). */
+export const DEFAULT_PLAYBACK_RATES = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+/** Vitesses de la note vocale (cycle au clic, style WhatsApp). */
+export const VOICE_NOTE_PLAYBACK_RATES = [1, 1.5, 2];
+
+export interface UseMediaPlayerOptions {
+    /** URL du média : fichier (mp3, mp4, webm…) ou flux live HLS (.m3u8). */
+    src: string;
+    /** Force l'affichage « direct » même si la durée est finie. */
+    live?: boolean;
+    /** Démarrage automatique (ignoré si le navigateur le bloque). */
+    autoPlay?: boolean;
+    /** Vitesses de lecture disponibles dans le menu. */
+    rates?: number[];
+}
+
+/**
+ Cœur logique partagé par les trois apparences du lecteur : état de lecture,
+ progression + tampon, volume, vitesse, plein écran, Picture-in-Picture et
+ gestion des flux live (durée infinie / fenêtre DVR seekable).
+
+ Le flux HLS est pris en charge nativement (Safari/iOS) ou via hls.js chargé
+ dynamiquement pour les autres navigateurs — aucun coût tant qu'on ne diffuse
+ pas de .m3u8.
+ */
+export function useMediaPlayer({src, live, autoPlay = false, rates = DEFAULT_PLAYBACK_RATES}: UseMediaPlayerOptions) {
+    const mediaRef = React.useRef<HTMLMediaElement | null>(null);
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+
+    const [isPlaying, setIsPlaying] = React.useState(false);
+    const [currentTime, setCurrentTime] = React.useState(0);
+    const [duration, setDuration] = React.useState(0);
+    const [bufferedEnd, setBufferedEnd] = React.useState(0);
+    const [volume, setVolumeState] = React.useState(1);
+    const [muted, setMutedState] = React.useState(false);
+    const [rate, setRateState] = React.useState(1);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [isFullscreen, setIsFullscreen] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    // ------------------------------------------------------------------
+    // Détection du direct
+    // ------------------------------------------------------------------
+
+    const [seekWindow, setSeekWindow] = React.useState<{start: number; end: number} | null>(null);
+
+    const isLive = React.useMemo(
+        () => Boolean(live) || duration === Infinity || (!Number.isFinite(duration) && duration > 0) || seekWindow !== null && duration === Infinity,
+        [live, duration, seekWindow],
+    );
+
+    /** Bornes de scrub : fenêtre DVR en direct, sinon [0, durée]. */
+    const seekMin = isLive ? seekWindow?.start ?? 0 : 0;
+    const seekMax = isLive ? seekWindow?.end ?? currentTime : duration || 0;
+
+    // ------------------------------------------------------------------
+    // Attachement de la source (HLS natif ou hls.js dynamique)
+    // ------------------------------------------------------------------
+
+    React.useEffect(() => {
+        const element = mediaRef.current;
+        if (!element || !src) return;
+
+        setError(null);
+        if (!/\.m3u8($|[?#])/i.test(src)) {
+            element.src = src;
+            return;
+        }
+
+        // Safari lit le HLS nativement ; les autres via hls.js importé à la demande.
+        if (element.canPlayType("application/vnd.apple.mpegurl")) {
+            element.src = src;
+            return;
+        }
+
+        let cancelled = false;
+        let destroy: (() => void) | null = null;
+
+        void import("hls.js")
+            .then(({default: Hls}) => {
+                const target = mediaRef.current;
+                if (cancelled || !target || !Hls.isSupported()) return;
+                const instance = new Hls({lowLatencyMode: true, backBufferLength: 90});
+                instance.loadSource(src);
+                instance.attachMedia(target);
+                instance.on(Hls.Events.ERROR, (_event, data) => {
+                    if (data.fatal) setError("Flux indisponible");
+                });
+                destroy = () => instance.destroy();
+            })
+            .catch(() => setError("Lecteur HLS indisponible"));
+
+        return () => {
+            cancelled = true;
+            destroy?.();
+        };
+    }, [src]);
+
+    // ------------------------------------------------------------------
+    // Écouteurs d'événements média
+    // ------------------------------------------------------------------
+
+    React.useEffect(() => {
+        const element = mediaRef.current;
+        if (!element) return;
+
+        const syncTime = () => {
+            setCurrentTime(element.currentTime);
+            if (element.seekable.length > 0) {
+                setSeekWindow({start: element.seekable.start(0), end: element.seekable.end(element.seekable.length - 1)});
+            }
+        };
+        const syncBuffer = () => {
+            for (let index = 0; index < element.buffered.length; index += 1) {
+                if (element.buffered.start(index) <= element.currentTime && element.currentTime <= element.buffered.end(index)) {
+                    setBufferedEnd(element.buffered.end(index));
+                    break;
+                }
+            }
+        };
+
+        const onLoadedMetadata = () => {
+            setDuration(element.duration);
+            if (autoPlay) void element.play().catch(() => undefined);
+        };
+        const onPlay = () => setIsPlaying(true);
+        const onPause = () => setIsPlaying(false);
+        const onWaiting = () => setIsLoading(true);
+        const onPlaying = () => setIsLoading(false);
+        const onCanPlay = () => setIsLoading(false);
+        const onVolumeChange = () => {
+            setVolumeState(element.volume);
+            setMutedState(element.muted);
+        };
+        const onRateChange = () => setRateState(element.playbackRate);
+        const onError = () => setError("Lecture impossible");
+
+        element.addEventListener("loadedmetadata", onLoadedMetadata);
+        element.addEventListener("timeupdate", syncTime);
+        element.addEventListener("progress", syncBuffer);
+        element.addEventListener("play", onPlay);
+        element.addEventListener("pause", onPause);
+        element.addEventListener("waiting", onWaiting);
+        element.addEventListener("playing", onPlaying);
+        element.addEventListener("canplay", onCanPlay);
+        element.addEventListener("volumechange", onVolumeChange);
+        element.addEventListener("ratechange", onRateChange);
+        element.addEventListener("error", onError);
+        return () => {
+            element.removeEventListener("loadedmetadata", onLoadedMetadata);
+            element.removeEventListener("timeupdate", syncTime);
+            element.removeEventListener("progress", syncBuffer);
+            element.removeEventListener("play", onPlay);
+            element.removeEventListener("pause", onPause);
+            element.removeEventListener("waiting", onWaiting);
+            element.removeEventListener("playing", onPlaying);
+            element.removeEventListener("canplay", onCanPlay);
+            element.removeEventListener("volumechange", onVolumeChange);
+            element.removeEventListener("ratechange", onRateChange);
+            element.removeEventListener("error", onError);
+        };
+    }, [autoPlay]);
+
+    // Suivi du plein écran (échappement clavier, sortie via le navigateur…)
+    React.useEffect(() => {
+        const onFullscreenChange = () => setIsFullscreen(document.fullscreenElement === containerRef.current);
+        document.addEventListener("fullscreenchange", onFullscreenChange);
+        return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+    }, []);
+
+    // ------------------------------------------------------------------
+    // Actions
+    // ------------------------------------------------------------------
+
+    const play = React.useCallback(async () => {
+        try {
+            await mediaRef.current?.play();
+        } catch { /* lecture refusée par le navigateur (autoplay policy) */ }
+    }, []);
+
+    const pause = React.useCallback(() => {
+        mediaRef.current?.pause();
+    }, []);
+
+    const togglePlay = React.useCallback(() => {
+        const element = mediaRef.current;
+        if (!element) return;
+        if (element.paused) void play();
+        else element.pause();
+    }, [play]);
+
+    const seekTo = React.useCallback((time: number) => {
+        const element = mediaRef.current;
+        if (!element) return;
+        const max = element.duration === Infinity ? (element.seekable.length ? element.seekable.end(element.seekable.length - 1) : element.currentTime) : element.duration;
+        element.currentTime = Math.max(0, Math.min(time, Number.isFinite(max) ? max : time));
+        setCurrentTime(element.currentTime);
+    }, []);
+
+    const seekBy = React.useCallback((delta: number) => {
+        const element = mediaRef.current;
+        if (!element) return;
+        seekTo(element.currentTime + delta);
+    }, [seekTo]);
+
+    const jumpToFraction = React.useCallback((fraction: number) => {
+        if (isLive) return;
+        seekTo(fraction * duration);
+    }, [duration, isLive, seekTo]);
+
+    const setVolume = React.useCallback((next: number) => {
+        const element = mediaRef.current;
+        if (!element) return;
+        element.volume = Math.max(0, Math.min(1, next));
+        if (next > 0 && element.muted) element.muted = false;
+    }, []);
+
+    const toggleMute = React.useCallback(() => {
+        const element = mediaRef.current;
+        if (!element) return;
+        element.muted = !element.muted;
+    }, []);
+
+    const setRate = React.useCallback((next: number) => {
+        if (mediaRef.current) mediaRef.current.playbackRate = next;
+    }, []);
+
+    const cycleRate = React.useCallback(() => {
+        const index = rates.indexOf(rate);
+        const next = rates[(index + 1) % rates.length] ?? rates[0] ?? 1;
+        setRate(next);
+    }, [rate, rates, setRate]);
+
+    const toggleFullscreen = React.useCallback(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        if (document.fullscreenElement === container) void document.exitFullscreen().catch(() => undefined);
+        else void container.requestFullscreen?.().catch(() => undefined);
+    }, []);
+
+    const togglePictureInPicture = React.useCallback(async () => {
+        const element = mediaRef.current;
+        if (!element || !document.pictureInPictureEnabled || !(element instanceof HTMLVideoElement)) return;
+        try {
+            if (document.pictureInPictureElement === element) await document.exitPictureInPicture();
+            else await element.requestPictureInPicture();
+        } catch { /* PiP refusé (format non supporté, permissions…) */ }
+    }, []);
+
+    return {
+        mediaRef,
+        containerRef,
+        state: {isPlaying, currentTime, duration, bufferedEnd, volume, muted, rate, isLoading, isLive, isFullscreen, error, seekMin, seekMax},
+        actions: {play, pause, togglePlay, seekTo, seekBy, jumpToFraction, setVolume, toggleMute, setRate, cycleRate, toggleFullscreen, togglePictureInPicture},
+        options: {rates},
+    };
+}
+
+export type MediaPlayerController = ReturnType<typeof useMediaPlayer>;

package/src/presentation/ui/menubar.tsx

@@ -0,0 +1,281 @@
+"use client"
+
+import * as React from "react"
+import { Menubar as MenubarPrimitive } from "radix-ui"
+import { CheckIcon, ChevronRightIcon } from "lucide-react"
+import {cn} from "../../infrastructure/utilities/utils";
+
+function Menubar({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
+  return (
+    <MenubarPrimitive.Root
+      data-slot="menubar"
+      className={cn(
+        "flex h-8 items-center gap-0.5 rounded-lg border p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarMenu({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+}
+
+function MenubarGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+}
+
+function MenubarPortal({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+}
+
+function MenubarRadioGroup({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
+  return (
+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
+  )
+}
+
+function MenubarTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
+  return (
+    <MenubarPrimitive.Trigger
+      data-slot="menubar-trigger"
+      className={cn(
+        "flex items-center rounded-sm px-1.5 py-[2px] text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarContent({
+  className,
+  align = "start",
+  alignOffset = -4,
+  sideOffset = -4,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
+  return (
+    <MenubarPortal>
+      <MenubarPrimitive.Content
+        data-slot="menubar-content"
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn("z-50 min-w-36 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95", className )}
+        {...props}
+      />
+    </MenubarPortal>
+  )
+}
+
+function MenubarItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <MenubarPrimitive.Item
+      data-slot="menubar-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarCheckboxItem({
+  className,
+  children,
+  checked,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.CheckboxItem
+      data-slot="menubar-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.CheckboxItem>
+  )
+}
+
+function MenubarRadioItem({
+  className,
+  children,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.RadioItem
+      data-slot="menubar-radio-item"
+      data-inset={inset}
+      className={cn(
+        "relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-1.5 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
+        <MenubarPrimitive.ItemIndicator>
+          <CheckIcon
+          />
+        </MenubarPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </MenubarPrimitive.RadioItem>
+  )
+}
+
+function MenubarLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.Label
+      data-slot="menubar-label"
+      data-inset={inset}
+      className={cn(
+        "px-1.5 py-1 text-sm font-medium data-inset:pl-7",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
+  return (
+    <MenubarPrimitive.Separator
+      data-slot="menubar-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function MenubarShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="menubar-shortcut"
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function MenubarSub({
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
+}
+
+function MenubarSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <MenubarPrimitive.SubTrigger
+      data-slot="menubar-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </MenubarPrimitive.SubTrigger>
+  )
+}
+
+function MenubarSubContent({
+  className,
+  sideOffset = -4,
+  ...props
+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+  return (
+    <MenubarPrimitive.SubContent
+      data-slot="menubar-sub-content"
+      sideOffset={sideOffset}
+      className={cn("z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Menubar,
+  MenubarPortal,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarGroup,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarItem,
+  MenubarShortcut,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSub,
+  MenubarSubTrigger,
+  MenubarSubContent,
+}