@curvenote/theme-ui 1.0.1 → 2.0.1

package/dist/components/ui/lightbox.js

@@ -4,20 +4,149 @@ import { Dialog, DialogContent, DialogTitle, DialogDescription } from '@radix-ui
 import { X, ChevronLeft, ChevronRight, ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';
 import { cn } from '../../lib/utils';
 import { Button } from './button';
+import { useAnalytics } from '../providers/analytics-boundary';
 import { MyST } from 'myst-to-react';
 import { Picture } from './image';
-export function Lightbox({ isOpen, onClose, image, onNavigate, hasNext = false, hasPrev = false, showNavigation = true, showZoom = true, className, minZoom = 0.5, maxZoom = 7, }) {
+function getLightboxImageProperties(image) {
+    const isVideo = image.src.endsWith('.mp4') || image.urlSource?.endsWith('.mp4');
+    return {
+        imageUrl: image.src,
+        imageAlt: image.alt,
+        hasCaption: Boolean(image.caption),
+        mediaType: isVideo ? 'video' : 'image',
+    };
+}
+export function Lightbox({ isOpen, onClose, image, onNavigate, hasNext = false, hasPrev = false, showNavigation = true, showZoom = true, className, minZoom = 0.5, maxZoom = 7, currentIndex, imageCount, }) {
+    const capture = useAnalytics();
     const [zoomLevel, setZoomLevel] = React.useState(1);
+    const zoomLevelRef = React.useRef(zoomLevel);
+    zoomLevelRef.current = zoomLevel;
     const [isDragging, setIsDragging] = React.useState(false);
     const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
     const [imageLoaded, setImageLoaded] = React.useState(false);
     const imageRef = React.useRef(null);
     const containerRef = React.useRef(null);
+    const captionExpandedRef = React.useRef(false);
+    const mediaLoadedRef = React.useRef(null);
+    /** At most one zoom-related analytics event per image; intent is session signal, not per gesture. */
+    const zoomAnalyticsSentForImageRef = React.useRef(false);
+    /** At most one pan-related analytics event per image; intent is session signal, not per gesture. */
+    const panAnalyticsSentForImageRef = React.useRef(false);
+    const lightboxContext = React.useMemo(() => ({
+        currentIndex,
+        imageCount,
+        ...getLightboxImageProperties(image),
+        /** Full-screen lightbox is one layer above the opener's depth. */
+        overlayDepth: (image.openingOverlayDepth ?? 0) + 1,
+    }), [currentIndex, image, imageCount]);
+    const captureClose = React.useCallback((closeMethod) => {
+        capture('content_lightbox_closed', {
+            surface: 'content',
+            closeMethod,
+            ...lightboxContext,
+        });
+    }, [capture, lightboxContext]);
+    const handleClose = React.useCallback((closeMethod) => {
+        captureClose(closeMethod);
+        onClose();
+    }, [captureClose, onClose]);
+    const handleNavigate = React.useCallback((direction, navigationMethod) => {
+        capture('content_lightbox_navigated', {
+            surface: 'content',
+            direction,
+            navigationMethod,
+            ...lightboxContext,
+        });
+        onNavigate?.(direction);
+    }, [capture, lightboxContext, onNavigate]);
+    const captureZoom = React.useCallback((zoomMethod, nextZoom) => {
+        capture('content_lightbox_zoom_changed', {
+            surface: 'content',
+            zoomMethod,
+            zoomLevel: nextZoom,
+            ...lightboxContext,
+        });
+    }, [capture, lightboxContext]);
+    const captureZoomReset = React.useCallback((zoomMethod) => {
+        capture('content_lightbox_zoom_reset', {
+            surface: 'content',
+            zoomMethod,
+            ...lightboxContext,
+        });
+    }, [capture, lightboxContext]);
+    const capturePan = React.useCallback((panMethod, offset) => {
+        capture('content_lightbox_pan_changed', {
+            surface: 'content',
+            panMethod,
+            panOffsetX: offset.x,
+            panOffsetY: offset.y,
+            zoomLevel: zoomLevelRef.current,
+            ...lightboxContext,
+        });
+    }, [capture, lightboxContext]);
+    const emitZoomAnalyticsOncePerImage = React.useCallback((emit) => {
+        if (zoomAnalyticsSentForImageRef.current)
+            return;
+        zoomAnalyticsSentForImageRef.current = true;
+        emit();
+    }, []);
+    const emitPanAnalyticsOncePerImage = React.useCallback((emit) => {
+        if (panAnalyticsSentForImageRef.current)
+            return;
+        panAnalyticsSentForImageRef.current = true;
+        emit();
+    }, []);
+    const updateZoom = React.useCallback((zoomMethod, updater) => {
+        const prev = zoomLevelRef.current;
+        const next = updater(prev);
+        zoomLevelRef.current = next;
+        const isReset = zoomMethod === 'keyboard_reset' || zoomMethod === 'reset_button';
+        if (isReset) {
+            if (prev !== 1 || next !== 1) {
+                emitZoomAnalyticsOncePerImage(() => captureZoomReset(zoomMethod));
+            }
+        }
+        else if (next !== prev) {
+            emitZoomAnalyticsOncePerImage(() => captureZoom(zoomMethod, next));
+        }
+        setZoomLevel(next);
+    }, [captureZoom, captureZoomReset, emitZoomAnalyticsOncePerImage]);
+    const handleCaptionExpand = React.useCallback(() => {
+        if (captionExpandedRef.current)
+            return;
+        captionExpandedRef.current = true;
+        capture('content_lightbox_caption_expanded', {
+            surface: 'content',
+            ...lightboxContext,
+        });
+    }, [capture, lightboxContext]);
+    const handleMediaLoaded = React.useCallback(() => {
+        if (mediaLoadedRef.current === image.src)
+            return;
+        mediaLoadedRef.current = image.src;
+        setImageLoaded(true);
+        capture('content_lightbox_media_loaded', {
+            surface: 'content',
+            ...lightboxContext,
+        });
+    }, [capture, image.src, lightboxContext]);
+    // New lightbox open: allow one zoom/pan sample again (same image may be revisited after close).
+    React.useEffect(() => {
+        if (isOpen) {
+            zoomAnalyticsSentForImageRef.current = false;
+            panAnalyticsSentForImageRef.current = false;
+        }
+    }, [isOpen]);
     // Reset zoom and position when image changes
     React.useEffect(() => {
+        zoomLevelRef.current = 1;
+        zoomAnalyticsSentForImageRef.current = false;
+        panAnalyticsSentForImageRef.current = false;
         setZoomLevel(1);
         setDragOffset({ x: 0, y: 0 });
         setImageLoaded(false);
+        captionExpandedRef.current = false;
+        mediaLoadedRef.current = null;
     }, [image.src]);
     // Handle wheel events with passive listener handling
     React.useEffect(() => {
@@ -26,64 +155,61 @@ export function Lightbox({ isOpen, onClose, image, onNavigate, hasNext = false,
         const handleWheelEvent = (e) => {
             e.preventDefault();
             e.stopPropagation();
-            // Immediate zoom without timeout
             const delta = e.deltaY > 0 ? 0.98 : 1.02;
-            setZoomLevel((prev) => {
-                const newZoom = prev * delta;
-                return Math.max(minZoom, Math.min(newZoom, maxZoom));
-            });
+            const prev = zoomLevelRef.current;
+            const newZoom = Math.max(minZoom, Math.min(prev * delta, maxZoom));
+            zoomLevelRef.current = newZoom;
+            if (newZoom !== prev) {
+                emitZoomAnalyticsOncePerImage(() => captureZoom('wheel', newZoom));
+            }
+            setZoomLevel(newZoom);
         };
-        // Add wheel event listener with passive: false
         document.addEventListener('wheel', handleWheelEvent, { passive: false });
         return () => {
             document.removeEventListener('wheel', handleWheelEvent);
         };
-    }, [isOpen, showZoom]);
+    }, [captureZoom, emitZoomAnalyticsOncePerImage, isOpen, maxZoom, minZoom, showZoom]);
     // Handle keyboard navigation
     React.useEffect(() => {
         const handleKeyDown = (e) => {
             if (!isOpen)
                 return;
             switch (e.key) {
-                case 'Escape':
-                    onClose();
-                    break;
                 case 'ArrowLeft':
                     if (hasPrev && onNavigate) {
-                        onNavigate('prev');
+                        handleNavigate('prev', 'keyboard');
                     }
                     break;
                 case 'ArrowRight':
                     if (hasNext && onNavigate) {
-                        onNavigate('next');
+                        handleNavigate('next', 'keyboard');
                     }
                     break;
                 case 'PageUp':
                 case 'PageDown':
                 case 'ArrowUp':
                 case 'ArrowDown':
-                    // Stops scrolling the page
                     e.preventDefault();
                     break;
                 case '=':
                 case '+':
                     e.preventDefault();
-                    setZoomLevel((prev) => Math.min(prev * 1.2, maxZoom));
+                    updateZoom('keyboard_zoom_in', (prev) => Math.min(prev * 1.2, maxZoom));
                     break;
                 case '-':
                     e.preventDefault();
-                    setZoomLevel((prev) => Math.max(prev / 1.2, minZoom));
+                    updateZoom('keyboard_zoom_out', (prev) => Math.max(prev / 1.2, minZoom));
                     break;
                 case '0':
                     e.preventDefault();
-                    setZoomLevel(1);
                     setDragOffset({ x: 0, y: 0 });
+                    updateZoom('keyboard_reset', () => 1);
                     break;
             }
         };
         document.addEventListener('keydown', handleKeyDown);
         return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [isOpen, hasPrev, hasNext, onNavigate, onClose]);
+    }, [handleNavigate, isOpen, hasPrev, hasNext, maxZoom, minZoom, onNavigate, updateZoom]);
     // Handle mouse drag for panning
     const [dragStart, setDragStart] = React.useState({ x: 0, y: 0 });
     const handleMouseDown = (e) => {
@@ -98,21 +224,25 @@ export function Lightbox({ isOpen, onClose, image, onNavigate, hasNext = false,
         // if (!isDragging || zoomLevel <= 1) return;
         if (!isDragging)
             return;
-        setDragOffset({
+        const offset = {
             x: e.clientX - dragStart.x,
             y: e.clientY - dragStart.y,
-        });
+        };
+        setDragOffset(offset);
+        emitPanAnalyticsOncePerImage(() => capturePan('drag', offset));
     };
     const handleMouseUp = () => {
         setIsDragging(false);
     };
     const resetZoom = () => {
-        setZoomLevel(1);
         setDragOffset({ x: 0, y: 0 });
+        updateZoom('reset_button', () => 1);
     };
-    // Check if this is a video
-    const isVideo = image.src.endsWith('.mp4') || image.urlSource?.endsWith('.mp4');
-    return (_jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: _jsxs(DialogContent, { className: cn('flex fixed inset-0 z-50 justify-center items-center p-4 bg-black/90', className), onPointerDownOutside: onClose, onEscapeKeyDown: onClose, onTouchStart: (e) => e.preventDefault(), onTouchMove: (e) => e.preventDefault(), children: [_jsx(DialogTitle, { className: "sr-only", children: image.alt || 'Image viewer' }), _jsx(DialogDescription, { className: "sr-only", children: image.alt ? `Viewing ${image.alt}` : 'Image viewer with zoom and navigation controls' }), _jsx(Button, { variant: "ghost", size: "icon", className: "absolute top-4 right-4 z-10 text-white cursor-pointer hover:bg-white/10 hover:text-white", onClick: onClose, children: _jsx(X, { className: "w-6 h-6" }) }), showNavigation && (hasPrev || hasNext) && (_jsxs(_Fragment, { children: [hasPrev && (_jsx(Button, { variant: "ghost", size: "icon", className: "absolute left-4 top-1/2 z-10 text-white -translate-y-1/2 cursor-pointer hover:bg-white/10 hover:text-white", onClick: () => onNavigate?.('prev'), children: _jsx(ChevronLeft, { className: "w-8 h-8" }) })), hasNext && (_jsx(Button, { variant: "ghost", size: "icon", className: "absolute right-4 top-1/2 z-10 text-white -translate-y-1/2 cursor-pointer hover:bg-white/10 hover:text-white", onClick: () => onNavigate?.('next'), children: _jsx(ChevronRight, { className: "w-8 h-8" }) }))] })), showZoom && !isVideo && (_jsxs("div", { className: "flex absolute top-4 left-4 z-10 gap-2", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "text-white cursor-pointer hover:bg-white/10 hover:text-white", onClick: () => setZoomLevel((prev) => Math.min(prev * 1.2, 5)), children: _jsx(ZoomIn, { className: "w-5 h-5" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-white cursor-pointer hover:bg-white/10 hover:text-white", onClick: () => setZoomLevel((prev) => Math.max(prev / 1.2, 0.1)), children: _jsx(ZoomOut, { className: "w-5 h-5" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-white cursor-pointer hover:bg-white/10 hover:text-white", onClick: resetZoom, children: _jsx(RotateCcw, { className: "w-5 h-5" }) })] })), _jsxs("div", { ref: containerRef, className: "flex overflow-hidden relative justify-center items-center w-full h-full max-h-screen", onMouseDown: !isVideo ? handleMouseDown : undefined, onMouseMove: !isVideo ? handleMouseMove : undefined, onMouseUp: !isVideo ? handleMouseUp : undefined, onMouseLeave: !isVideo ? handleMouseUp : undefined, onTouchStart: (e) => e.preventDefault(), onTouchMove: (e) => e.preventDefault(), children: [_jsx(Picture, { ref: imageRef, src: image.src, srcOptimized: image.srcOptimized, urlSource: image.urlSource, alt: image.alt, className: cn('object-contain max-w-full max-h-full select-none', {
+    const isVideo = getLightboxImageProperties(image).mediaType === 'video';
+    return (_jsx(Dialog, { open: isOpen, onOpenChange: (open) => {
+            if (!open)
+                onClose();
+        }, children: _jsxs(DialogContent, { className: cn('flex fixed inset-0 z-50 justify-center items-center p-4 bg-black/90', className), onPointerDownOutside: () => handleClose('backdrop'), onEscapeKeyDown: () => handleClose('escape'), onTouchStart: (e) => e.preventDefault(), onTouchMove: (e) => e.preventDefault(), children: [_jsx(DialogTitle, { className: "sr-only", children: image.alt || 'Image viewer' }), _jsx(DialogDescription, { className: "sr-only", children: image.alt ? `Viewing ${image.alt}` : 'Image viewer with zoom and navigation controls' }), _jsx(Button, { variant: "ghost", size: "icon", className: "absolute top-4 right-4 z-10 text-white cursor-pointer hover:bg-white/10 hover:text-white", onClick: () => handleClose('close_button'), children: _jsx(X, { className: "w-6 h-6" }) }), showNavigation && (hasPrev || hasNext) && (_jsxs(_Fragment, { children: [hasPrev && (_jsx(Button, { variant: "ghost", size: "icon", className: "absolute left-4 top-1/2 z-10 text-white -translate-y-1/2 cursor-pointer hover:bg-white/10 hover:text-white", onClick: () => handleNavigate('prev', 'button'), children: _jsx(ChevronLeft, { className: "w-8 h-8" }) })), hasNext && (_jsx(Button, { variant: "ghost", size: "icon", className: "absolute right-4 top-1/2 z-10 text-white -translate-y-1/2 cursor-pointer hover:bg-white/10 hover:text-white", onClick: () => handleNavigate('next', 'button'), children: _jsx(ChevronRight, { className: "w-8 h-8" }) }))] })), showZoom && !isVideo && (_jsxs("div", { className: "flex absolute top-4 left-4 z-10 gap-2", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "text-white cursor-pointer hover:bg-white/10 hover:text-white", onClick: () => updateZoom('zoom_in_button', (prev) => Math.min(prev * 1.2, maxZoom)), children: _jsx(ZoomIn, { className: "w-5 h-5" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-white cursor-pointer hover:bg-white/10 hover:text-white", onClick: () => updateZoom('zoom_out_button', (prev) => Math.max(prev / 1.2, minZoom)), children: _jsx(ZoomOut, { className: "w-5 h-5" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "text-white cursor-pointer hover:bg-white/10 hover:text-white", onClick: resetZoom, children: _jsx(RotateCcw, { className: "w-5 h-5" }) })] })), _jsxs("div", { ref: containerRef, className: "flex overflow-hidden relative justify-center items-center w-full h-full max-h-screen", onMouseDown: !isVideo ? handleMouseDown : undefined, onMouseMove: !isVideo ? handleMouseMove : undefined, onMouseUp: !isVideo ? handleMouseUp : undefined, onMouseLeave: !isVideo ? handleMouseUp : undefined, onTouchStart: (e) => e.preventDefault(), onTouchMove: (e) => e.preventDefault(), children: [_jsx(Picture, { ref: imageRef, src: image.src, srcOptimized: image.srcOptimized, urlSource: image.urlSource, alt: image.alt, className: cn('object-contain max-w-full max-h-full select-none', {
                                 'cursor-grab active:cursor-grabbing': !isVideo,
                                 'opacity-0': !imageLoaded,
                                 'opacity-100': imageLoaded,
@@ -125,5 +255,5 @@ export function Lightbox({ isOpen, onClose, image, onNavigate, hasNext = false,
                                 : {
                                     maxHeight: 'calc(100vh - 8rem)', // Account for padding and controls
                                     maxWidth: 'calc(100vw - 2rem)', // Account for padding
-                                }, onLoad: () => setImageLoaded(true), onLoadedData: () => setImageLoaded(true) }), !imageLoaded && (_jsx("div", { className: "flex absolute inset-0 justify-center items-center", children: _jsx("div", { className: "w-8 h-8 rounded-full border-2 animate-spin border-white/20 border-t-white" }) }))] }), image.caption && (_jsx("div", { className: "absolute right-4 bottom-4 left-4 z-10", children: _jsx("div", { className: "px-4 py-2 mx-auto max-w-6xl text-sm text-white rounded-lg backdrop-blur-sm group bg-black/80 prose prose-invert", children: _jsx("div", { className: "overflow-hidden transition-all duration-750 max-h-[3rem] group-hover:max-h-[50rem]", children: typeof image.caption === 'string' ? image.caption : _jsx(MyST, { ast: image.caption }) }) }) })), showZoom && !isVideo && zoomLevel !== 1 && (_jsxs("div", { className: "absolute right-4 bottom-4 z-10 px-3 py-1 text-sm text-white rounded-sm backdrop-blur-sm bg-black/50", children: [Math.round(zoomLevel * 100), "%"] }))] }) }));
+                                }, onLoad: handleMediaLoaded, onLoadedData: handleMediaLoaded }), !imageLoaded && (_jsx("div", { className: "flex absolute inset-0 justify-center items-center", children: _jsx("div", { className: "w-8 h-8 rounded-full border-2 animate-spin border-white/20 border-t-white" }) }))] }), image.caption && (_jsx("div", { className: "absolute right-4 bottom-4 left-4 z-10", children: _jsx("div", { className: "px-4 py-2 mx-auto max-w-6xl text-sm text-white rounded-lg backdrop-blur-sm group bg-black/80 prose prose-invert", onMouseEnter: handleCaptionExpand, children: _jsx("div", { className: "overflow-hidden transition-all duration-750 max-h-[3rem] group-hover:max-h-[50rem]", children: typeof image.caption === 'string' ? image.caption : _jsx(MyST, { ast: image.caption }) }) }) })), showZoom && !isVideo && zoomLevel !== 1 && (_jsxs("div", { className: "absolute right-4 bottom-4 z-10 px-3 py-1 text-sm text-white rounded-sm backdrop-blur-sm bg-black/50", children: [Math.round(zoomLevel * 100), "%"] }))] }) }));
 }

package/dist/components/ui/link-card.d.ts

@@ -3,13 +3,14 @@ declare const linkCardVariants: (props?: ({
     variant?: "default" | null | undefined;
     size?: "default" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare function LinkCard({ url, title, internal, loading, description, thumbnail, variant, size, }: {
+export declare function LinkCard({ url, title, internal, loading, description, thumbnail, variant, size, onLinkClick, }: {
     url: string;
     internal?: boolean;
     loading?: boolean;
     title: React.ReactNode;
     description?: React.ReactNode;
     thumbnail?: string | null;
+    onLinkClick?: () => void;
 } & VariantProps<typeof linkCardVariants>): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=link-card.d.ts.map

package/dist/components/ui/link-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/link-card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,QAAA,MAAM,gBAAgB;;;8EAcpB,CAAC;AAEH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,KAAK,EACL,QAAgB,EAChB,OAAe,EACf,WAAW,EACX,SAAS,EACT,OAAO,EACP,IAAI,GACL,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,2CAmDxC"}
+{"version":3,"file":"link-card.d.ts","sourceRoot":"","sources":["../../../src/components/ui/link-card.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,QAAA,MAAM,gBAAgB;;;8EAcpB,CAAC;AAEH,wBAAgB,QAAQ,CAAC,EACvB,GAAG,EACH,KAAK,EACL,QAAgB,EAChB,OAAe,EACf,WAAW,EACX,SAAS,EACT,OAAO,EACP,IAAI,EACJ,WAAW,GACZ,EAAE;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,2CAsDxC"}

package/dist/components/ui/link-card.js

@@ -18,11 +18,11 @@ const linkCardVariants = cva('overflow-hidden rounded hover-card-content', {
         size: 'default',
     },
 });
-export function LinkCard({ url, title, internal = false, loading = false, description, thumbnail, variant, size, }) {
+export function LinkCard({ url, title, internal = false, loading = false, description, thumbnail, variant, size, onLinkClick, }) {
     const Link = useLinkProvider();
     const baseurl = useBaseurl();
     const to = internal ? withBaseurl(url, baseurl) : url;
     return (_jsxs("div", { className: cn(linkCardVariants({ variant, size }), {
             'animate-pulse': loading,
-        }), children: [_jsxs("div", { className: "group", children: [!loading && thumbnail && (_jsx(Link, { to: to, prefetch: internal ? 'intent' : 'none', target: internal ? '_self' : '_blank', className: "block overflow-hidden h-[150px] border-b border-gray-200", children: _jsx("img", { src: thumbnail, className: "w-full h-[150px] object-cover object-center object-middle m-0 border-b border-gray-200 transition-transform duration-500 ease-in-out group-hover:scale-125" }) })), loading && (_jsx("div", { className: "animate-pulse bg-slate-100 dark:bg-slate-800 w-full h-[150px]" })), internal && (_jsx(Link, { to: to, className: "block px-3 mt-3 text-sm font-bold text-black hover:underline", prefetch: "intent", children: title })), !internal && (_jsxs("a", { href: to, className: "block px-3 py-2 text-sm font-bold text-black bg-gray-100 border-b border-gray-200 hover:underline", target: "_blank", rel: "noreferrer", children: [_jsx(ExternalLinkIcon, { width: "1rem", height: "1rem", className: "float-right" }), title] }))] }), !loading && description && _jsx("div", { className: "p-3 max-w-none text-sm prose", children: description })] }));
+        }), children: [_jsxs("div", { className: "group", children: [!loading && thumbnail && (_jsx(Link, { to: to, prefetch: internal ? 'intent' : 'none', target: internal ? '_self' : '_blank', className: "block overflow-hidden h-[150px] border-b border-gray-200", onClick: () => onLinkClick?.(), children: _jsx("img", { src: thumbnail, className: "w-full h-[150px] object-cover object-center object-middle m-0 border-b border-gray-200 transition-transform duration-500 ease-in-out group-hover:scale-125" }) })), loading && (_jsx("div", { className: "animate-pulse bg-slate-100 dark:bg-slate-800 w-full h-[150px]" })), internal && (_jsx(Link, { to: to, className: "block px-3 mt-3 text-sm font-bold text-black hover:underline", prefetch: "intent", onClick: () => onLinkClick?.(), children: title })), !internal && (_jsxs("a", { href: to, className: "block px-3 py-2 text-sm font-bold text-black bg-gray-100 border-b border-gray-200 hover:underline", target: "_blank", rel: "noreferrer", onClick: () => onLinkClick?.(), children: [_jsx(ExternalLinkIcon, { width: "1rem", height: "1rem", className: "float-right" }), title] }))] }), !loading && description && _jsx("div", { className: "p-3 max-w-none text-sm prose", children: description })] }));
 }

package/dist/components/ui/pagination.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+declare function Pagination({ className, ...props }: React.ComponentProps<'nav'>): import("react/jsx-runtime").JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
+declare function PaginationItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+    asChild?: boolean;
+    size?: 'default' | 'icon';
+} & React.ComponentProps<'a'>;
+declare function PaginationLink({ className, isActive, size, asChild, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/ui/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAUvE;AAED,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ7E;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAE1E;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CAC3B,GAAG,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAE9B,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,IAAgB,EAChB,OAAe,EACf,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAoBrB;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,2CAY/F;AAED,iBAAS,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,2CAY3F;AAED,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAYhF;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,cAAc,EACd,kBAAkB,EAClB,cAAc,EACd,kBAAkB,GACnB,CAAC"}

package/dist/components/ui/pagination.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { cn } from '../../lib/utils';
+const paginationLinkBase = 'inline-flex items-center justify-center gap-0.5 whitespace-nowrap rounded-md text-xs font-medium tabular-nums transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-3.5 [&_svg]:shrink-0';
+function Pagination({ className, ...props }) {
+    return (_jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: cn('flex justify-center mx-auto w-full', className), ...props }));
+}
+function PaginationContent({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "pagination-content", className: cn('flex flex-row items-center gap-1', className), ...props }));
+}
+function PaginationItem({ className, ...props }) {
+    return _jsx("li", { "data-slot": "pagination-item", className: cn('', className), ...props });
+}
+function PaginationLink({ className, isActive, size = 'default', asChild = false, ...props }) {
+    const Comp = asChild ? Slot : 'a';
+    return (_jsx(Comp, { "aria-current": isActive ? 'page' : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(paginationLinkBase, size === 'icon' && 'size-8 shrink-0', size === 'default' && 'h-8 min-w-8 px-2', isActive
+            ? 'border border-input bg-background text-foreground'
+            : 'border border-transparent text-foreground hover:bg-accent hover:text-accent-foreground', className), ...props }));
+}
+function PaginationPrevious({ className, ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn('pl-2', className), ...props, children: [_jsx(ChevronLeft, {}), _jsx("span", { children: "Prev" })] }));
+}
+function PaginationNext({ className, ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn('pr-2', className), ...props, children: [_jsx("span", { children: "Next" }), _jsx(ChevronRight, {})] }));
+}
+function PaginationEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn('flex justify-center items-center size-8', className), ...props, children: [_jsx(MoreHorizontal, { className: "size-3.5" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+}
+export { Pagination, PaginationContent, PaginationLink, PaginationItem, PaginationPrevious, PaginationNext, PaginationEllipsis, };

package/dist/components/ui/popover.js

@@ -9,7 +9,7 @@ function PopoverTrigger({ ...props }) {
     return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
 }
 function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }) {
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden', className), ...props }) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-sm border p-4 shadow-md outline-hidden', className), ...props }) }));
 }
 function PopoverAnchor({ ...props }) {
     return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });

package/dist/components/ui/search.d.ts

@@ -1,9 +1,10 @@
 /**
  * Component that implements a basic search interface
  */
-export declare function SearchDialog({ debounceTime, charLimit, children, }: {
+export declare function SearchDialog({ debounceTime, charLimit, children, onOpenChange, }: {
     debounceTime?: number;
     charLimit?: number;
     children: React.ReactNode;
+    onOpenChange?: (open: boolean) => void;
 }): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=search.d.ts.map

package/dist/components/ui/search.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/ui/search.tsx"],"names":[],"mappings":"AAieA;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,YAAkB,EAClB,SAAc,EACd,QAAQ,GACT,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAqFA"}
+{"version":3,"file":"search.d.ts","sourceRoot":"","sources":["../../../src/components/ui/search.tsx"],"names":[],"mappings":"AA8eA;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAC3B,YAAkB,EAClB,SAAc,EACd,QAAQ,EACR,YAAY,GACb,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,2CA0FA"}

package/dist/components/ui/search.js

@@ -6,6 +6,7 @@ import { SPACE_OR_PUNCTUATION, rankResults } from '@myst-theme/search';
 import { useSearchFactory, useLinkProvider, withBaseurl, useBaseurl, useNavigateProvider, } from '@myst-theme/providers';
 import useSWR from 'swr';
 import { Search as SearchIcon } from 'lucide-react';
+import { useAnalytics } from '../providers';
 /**
  * Loading bar component that shows at the top of the dialog
  */
@@ -199,20 +200,28 @@ function useSearch(shouldLoad = true) {
 function SearchForm({ debounceTime, searchResults, setSearchResults, searchInputID, searchListID, searchLabelID, selectedIndex, setSelectedIndex, closeSearch, loading, shouldLoad, }) {
     const [query, setQuery] = useState('');
     const { search: doSearch, enabled } = useSearch(shouldLoad);
+    const capture = useAnalytics();
     // Debounce user input
     useEffect(() => {
         const timeoutId = setTimeout(() => {
             if (query != undefined && !!doSearch) {
                 doSearch(query).then((rawResults) => {
-                    setSearchResults(rawResults &&
+                    const ranked = rawResults &&
                         rankResults(rawResults)
                             // Filter duplicates by URL
-                            .filter((result, index, array) => result.url !== array[index - 1]?.url));
+                            .filter((result, index, array) => result.url !== array[index - 1]?.url);
+                    setSearchResults(ranked);
+                    if (query.length > 0) {
+                        capture('search_performed', {
+                            queryLength: query.length,
+                            resultCount: ranked?.length ?? 0,
+                        });
+                    }
                 });
             }
         }, debounceTime);
         return () => clearTimeout(timeoutId);
-    }, [doSearch, query, debounceTime]);
+    }, [doSearch, query, debounceTime, capture]);
     // Handle user input
     const handleSearchChange = useCallback((event) => {
         setQuery(event.target.value);
@@ -234,6 +243,11 @@ function SearchForm({ debounceTime, searchResults, setSearchResults, searchInput
             event.preventDefault();
             const url = searchResults[selectedIndex]?.url;
             if (url) {
+                capture('search_result_selected', {
+                    queryLength: query.length,
+                    selectedIndex,
+                    resultUrl: url,
+                });
                 navigate(withBaseurl(url, baseurl));
                 closeSearch?.();
             }
@@ -252,16 +266,20 @@ function SearchForm({ debounceTime, searchResults, setSearchResults, searchInput
     const onSubmit = useCallback((event) => {
         event.preventDefault();
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx("form", { onSubmit: onSubmit, children: _jsxs("div", { className: "flex relative w-full h-10 flow-row", children: [_jsx("label", { id: searchListID, htmlFor: searchInputID, children: _jsx(SearchIcon, { className: "absolute text-gray-400 inset-y-0 start-0 h-10 w-10 p-2.5 aspect-square flex items-center pointer-events-none" }) }), _jsx("input", { autoComplete: "off", spellCheck: "false", disabled: !enabled, autoCapitalize: "false", className: cn('block flex-grow p-2 placeholder-gray-400 ps-10', 'border border-gray-300 dark:border-gray-600', 'bg-gray-50 rounded-sm dark:bg-gray-700', 'focus:ring-blue-500 dark:focus:ring-blue-500', 'focus:border-blue-500 dark:focus:border-blue-500', 'dark:placeholder-gray-400', { 'border-red-500': !enabled && !loading }), id: searchInputID, "aria-labelledby": searchLabelID, "aria-controls": searchListID, placeholder: "Search", type: "search", required: true, onChange: handleSearchChange, onKeyDown: handleSearchKeyPress })] }) }), !enabled && !loading && (_jsx("div", { className: "mx-2 mt-4 text-sm text-gray-500", children: "Search is not enabled for this site." }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("form", { onSubmit: onSubmit, children: _jsxs("div", { className: "flex relative w-full h-10 flow-row", children: [_jsx("label", { id: searchListID, htmlFor: searchInputID, children: _jsx(SearchIcon, { className: "absolute text-gray-400 inset-y-0 start-0 h-10 w-10 p-2.5 aspect-square flex items-center pointer-events-none" }) }), _jsx("input", { autoComplete: "off", spellCheck: "false", disabled: !enabled, autoCapitalize: "false", className: cn('block grow p-2 placeholder-gray-400 ps-10', 'border border-gray-300 dark:border-gray-600', 'bg-gray-50 rounded-sm dark:bg-gray-700', 'focus:ring-blue-500 dark:focus:ring-blue-500', 'focus:border-blue-500 dark:focus:border-blue-500', 'dark:placeholder-gray-400', { 'border-red-500': !enabled && !loading }), id: searchInputID, "aria-labelledby": searchLabelID, "aria-controls": searchListID, placeholder: "Search", type: "search", required: true, onChange: handleSearchChange, onKeyDown: handleSearchKeyPress })] }) }), !enabled && !loading && (_jsx("div", { className: "mx-2 mt-4 text-sm text-gray-500", children: "Search is not enabled for this site." }))] }));
 }
 /**
  * Component that implements a basic search interface
  */
-export function SearchDialog({ debounceTime = 500, charLimit = 64, children, }) {
+export function SearchDialog({ debounceTime = 500, charLimit = 64, children, onOpenChange, }) {
     const [open, setOpen] = useState(false);
     const [searchResults, setSearchResults] = useState();
     const [selectedIndex, setSelectedIndex] = useState(0);
     const { loading } = useSearch(open);
+    const handleOpenChange = useCallback((next) => {
+        setOpen(next);
+        onOpenChange?.(next);
+    }, [onOpenChange]);
     // Clear search state on close
     useEffect(() => {
         if (!open) {
@@ -278,13 +296,11 @@ export function SearchDialog({ debounceTime = 500, charLimit = 64, children, })
     }, []);
     // Mount the document event handlers
     useEffect(() => {
-        // attach the event listener
         document.addEventListener('keydown', handleDocumentKeyPress);
-        // remove the event listener
         return () => {
             document.removeEventListener('keydown', handleDocumentKeyPress);
         };
     }, [handleDocumentKeyPress]);
     const triggerClose = useCallback(() => setOpen(false), [setOpen]);
-    return (_jsxs(Dialog.Dialog, { open: open, onOpenChange: setOpen, children: [_jsx(Dialog.DialogTrigger, { asChild: true, children: _jsx("div", { className: "cursor-pointer", children: children }) }), _jsxs(Dialog.DialogPortal, { children: [_jsx(Dialog.DialogOverlay, {}), _jsx(Dialog.DialogContent, { className: "fixed top-4 sm:top-[10vh] left-1/2 -translate-x-1/2 w-[90vw] max-w-screen-sm max-h-[calc(100vh-2rem)] sm:max-h-[70vh] overflow-hidden translate-y-0 p-0", showCloseButton: false, children: _jsxs("div", { className: "flex overflow-hidden relative flex-col gap-0 p-4", children: [_jsx(Dialog.DialogTitle, { className: "sr-only", children: "Search Website" }), _jsx(Dialog.DialogDescription, { className: "sr-only", children: "Search articles and their contents using fuzzy-search and prefix-matching" }), _jsx("div", { className: "flex-shrink-0", children: _jsx(SearchForm, { searchListID: "search-list", searchLabelID: "search-label", searchInputID: "search-input", debounceTime: debounceTime, searchResults: searchResults, setSearchResults: setSearchResults, selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, closeSearch: triggerClose, loading: loading, shouldLoad: open }) }), searchResults && (_jsx("div", { className: "overflow-hidden flex-1", children: _jsx(SearchResults, { searchListID: "search-list", searchLabelID: "search-label", className: "overflow-y-auto h-full", searchResults: searchResults, selectedIndex: selectedIndex, onHoverSelect: setSelectedIndex, closeSearch: triggerClose, charLimit: charLimit }) }))] }) })] })] }));
+    return (_jsxs(Dialog.Dialog, { open: open, onOpenChange: handleOpenChange, children: [_jsx(Dialog.DialogTrigger, { asChild: true, children: _jsx("div", { className: "cursor-pointer", children: children }) }), _jsxs(Dialog.DialogPortal, { children: [_jsx(Dialog.DialogOverlay, {}), _jsx(Dialog.DialogContent, { className: "fixed top-4 sm:top-[10vh] left-1/2 -translate-x-1/2 w-[90vw] max-w-screen-sm max-h-[calc(100vh-2rem)] sm:max-h-[70vh] overflow-hidden translate-y-0 p-0", showCloseButton: false, children: _jsxs("div", { className: "flex overflow-hidden relative flex-col gap-0 p-4", children: [_jsx(Dialog.DialogTitle, { className: "sr-only", children: "Search Website" }), _jsx(Dialog.DialogDescription, { className: "sr-only", children: "Search articles and their contents using fuzzy-search and prefix-matching" }), _jsx("div", { className: "shrink-0", children: _jsx(SearchForm, { searchListID: "search-list", searchLabelID: "search-label", searchInputID: "search-input", debounceTime: debounceTime, searchResults: searchResults, setSearchResults: setSearchResults, selectedIndex: selectedIndex, setSelectedIndex: setSelectedIndex, closeSearch: triggerClose, loading: loading, shouldLoad: open }) }), searchResults && (_jsx("div", { className: "overflow-hidden flex-1", children: _jsx(SearchResults, { searchListID: "search-list", searchLabelID: "search-label", className: "overflow-y-auto h-full", searchResults: searchResults, selectedIndex: selectedIndex, onHoverSelect: setSelectedIndex, closeSearch: triggerClose, charLimit: charLimit }) }))] }) })] })] }));
 }

package/dist/components/ui/select.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): import("react/jsx-runtime").JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+    size?: 'sm' | 'default';
+}): import("react/jsx-runtime").JSX.Element;
+declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): import("react/jsx-runtime").JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): import("react/jsx-runtime").JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
+//# sourceMappingURL=select.d.ts.map

package/dist/components/ui/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAK1D,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAE9E;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpF;AAED,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAEpF;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,GAAG;IACxD,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,2CAiBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,QAAmB,EACnB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,OAAO,CAAC,2CA4BtD;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,2CAQ/F;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,2CAkBnD;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,SAAS,CAAC,2CAQxD;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,cAAc,CAAC,2CAU7D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,gBAAgB,CAAC,2CAU/D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}

package/dist/components/ui/select.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+import { cn } from '../../lib/utils';
+function Select({ ...props }) {
+    return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+    return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+    return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, size = 'default', children, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-stone-950 dark:hover:bg-stone-900 flex w-fit items-center justify-between gap-2 rounded-md border bg-white px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "opacity-50 size-4" }) })] }));
+}
+function SelectContent({ className, children, position = 'popper', ...props }) {
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn('bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                        'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1'), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn('text-muted-foreground px-2 py-1.5 text-xs', className), ...props }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('bg-border pointer-events-none -mx-1 my-1 h-px', className), ...props }));
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUpIcon, { className: "size-4" }) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDownIcon, { className: "size-4" }) }));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/components/ui/separator.js

@@ -3,6 +3,6 @@ import * as React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { cn } from '../../lib/utils';
 function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
-    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className), ...props }));
+    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px dark:bg-white/60', className), ...props }));
 }
 export { Separator };

package/dist/components/ui/sidebar.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { type VariantProps } from 'class-variance-authority';
-import { Button, Input, Separator, TooltipContent } from '.';
+import { Button, Input, Separator } from '.';
 type SidebarContextProps = {
     state: 'expanded' | 'collapsed';
     open: boolean;
@@ -39,15 +38,6 @@ declare function SidebarGroupAction({ className, asChild, ...props }: React.Comp
 declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): import("react/jsx-runtime").JSX.Element;
 declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): import("react/jsx-runtime").JSX.Element;
-declare const sidebarMenuButtonVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<'button'> & {
-    asChild?: boolean;
-    isActive?: boolean;
-    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
-} & VariantProps<typeof sidebarMenuButtonVariants>): import("react/jsx-runtime").JSX.Element;
 declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<'button'> & {
     asChild?: boolean;
     showOnHover?: boolean;
@@ -63,5 +53,5 @@ declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...p
     size?: 'sm' | 'md';
     isActive?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar, };
 //# sourceMappingURL=sidebar.d.ts.map