@jupytergis/base 0.12.0 → 0.12.2

package/lib/panelview/story-maps/MobileSpectaPanel.js

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from 'react';
+import { Button } from "../../shared/components/Button";
+import { Drawer, DrawerContent, DrawerTrigger, } from "../../shared/components/Drawer";
+import StoryViewerPanel from './StoryViewerPanel';
+const MAIN_ID = 'jp-main-content-panel';
+const SEGMENT_PANEL_ID = 'jgis-story-segment-panel';
+const SEGMENT_HEADER_ID = 'jgis-story-segment-header';
+const SNAP_FIRST_MIN = 0.3;
+const SNAP_FIRST_MAX = 0.95;
+const SNAP_FIRST_DEFAULT = 0.7;
+/** Offset (px) for segment header height: margins from p and h1 in story content */
+const SEGMENT_HEADER_OFFSET_PX = 16.8 * 2 + 18.76;
+/**
+ * Compute the first snap point so that vaul's --snap-point-height (the
+ * transform offset) equals #jgis-story-segment-panel height minus #jgis-story-segment-header height.
+ * For a bottom drawer, offset = mainHeight * (1 - snapPoint), so
+ * snapPoint = (mainHeight - offset) / mainHeight.
+ */
+function getFirstSnapFromSegmentHeader(mainEl, segmentPanelEl, segmentHeaderEl) {
+    const mainHeight = mainEl.getBoundingClientRect().height;
+    const segmentPanelHeight = segmentPanelEl.getBoundingClientRect().height;
+    const segmentHeaderHeight = segmentHeaderEl.getBoundingClientRect().height;
+    const offsetPx = segmentPanelHeight - segmentHeaderHeight - SEGMENT_HEADER_OFFSET_PX;
+    if (mainHeight <= 0) {
+        return SNAP_FIRST_DEFAULT;
+    }
+    const fraction = (mainHeight - offsetPx) / mainHeight;
+    const clamped = Math.max(SNAP_FIRST_MIN, Math.min(SNAP_FIRST_MAX, fraction));
+    return clamped;
+}
+/** Build inline styles for specta presentation (bg and text color from story). */
+function getSpectaPresentationStyle(model) {
+    const story = model.getSelectedStory().story;
+    const bgColor = story === null || story === void 0 ? void 0 : story.presentationBgColor;
+    const textColor = story === null || story === void 0 ? void 0 : story.presentationTextColor;
+    const style = {};
+    if (bgColor) {
+        style['--jgis-specta-bg-color'] = bgColor;
+        style.backgroundColor = bgColor;
+    }
+    if (textColor) {
+        style['--jgis-specta-text-color'] = textColor;
+        style.color = textColor;
+    }
+    return style;
+}
+export function MobileSpectaPanel({ model }) {
+    const [container, setContainer] = useState(null);
+    const [snapPoints, setSnapPoints] = useState([
+        SNAP_FIRST_DEFAULT,
+        1,
+    ]);
+    const [snap, setSnap] = useState(snapPoints[0]);
+    const presentationStyle = getSpectaPresentationStyle(model);
+    // Keep active snap in sync with snapPoints so Vaul's --snap-point-height stays defined.
+    useEffect(() => {
+        const isInSnapPoints = snapPoints.some(p => p === snap ||
+            (typeof p === 'number' &&
+                typeof snap === 'number' &&
+                Math.abs(p - snap) < 1e-9));
+        if (!isInSnapPoints && snapPoints.length > 0) {
+            setSnap(snapPoints[0]);
+        }
+    }, [snapPoints, snap]);
+    // Observe #jgis-story-segment-panel (and re-attach when drawer reopens).
+    useEffect(() => {
+        const mainEl = document.getElementById(MAIN_ID);
+        setContainer(mainEl);
+        if (!mainEl) {
+            return;
+        }
+        const updateFirstSnap = () => {
+            const segmentPanelEl = document.getElementById(SEGMENT_PANEL_ID);
+            const segmentHeaderEl = document.getElementById(SEGMENT_HEADER_ID);
+            if (segmentPanelEl && segmentHeaderEl) {
+                const firstSnap = getFirstSnapFromSegmentHeader(mainEl, segmentPanelEl, segmentHeaderEl);
+                setSnapPoints([firstSnap, 1]);
+            }
+        };
+        const resizeObserver = new ResizeObserver(() => updateFirstSnap());
+        let observedPanelEl = null;
+        const syncHeaderObserver = () => {
+            const segmentPanelEl = document.getElementById(SEGMENT_PANEL_ID);
+            const segmentHeaderEl = document.getElementById(SEGMENT_HEADER_ID);
+            if (!segmentPanelEl ||
+                !segmentHeaderEl ||
+                segmentPanelEl === observedPanelEl) {
+                return;
+            }
+            if (observedPanelEl) {
+                resizeObserver.unobserve(observedPanelEl);
+            }
+            resizeObserver.observe(segmentPanelEl);
+            observedPanelEl = segmentPanelEl;
+            updateFirstSnap();
+        };
+        syncHeaderObserver();
+        const mutationObserver = new MutationObserver(syncHeaderObserver);
+        mutationObserver.observe(mainEl, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            resizeObserver.disconnect();
+            mutationObserver.disconnect();
+        };
+    }, []);
+    return (React.createElement("div", { className: "jgis-mobile-specta-trigger-wrapper" },
+        React.createElement(Drawer, { snapPoints: snapPoints, activeSnapPoint: snap, setActiveSnapPoint: setSnap, direction: "bottom", container: container, noBodyStyles: true },
+            React.createElement(DrawerTrigger, { asChild: true },
+                React.createElement(Button, null, "Open Story Panel")),
+            React.createElement(DrawerContent, { style: presentationStyle },
+                React.createElement(StoryViewerPanel, { isSpecta: true, isMobile: true, model: model })))));
+}

package/lib/panelview/story-maps/StoryNavBar.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import type { StoryNavPlacement } from './StoryViewerPanel';
 interface IStoryNavBarProps {
+    placement: StoryNavPlacement;
     onPrev: () => void;
     onNext: () => void;
     hasPrev: boolean;
     hasNext: boolean;
-    isSpecta: boolean;
 }
-declare function StoryNavBar({ onPrev, onNext, hasPrev, hasNext, isSpecta, }: IStoryNavBarProps): React.JSX.Element;
+declare function StoryNavBar({ placement, onPrev, onNext, hasPrev, hasNext, }: IStoryNavBarProps): React.JSX.Element;
 export default StoryNavBar;

package/lib/panelview/story-maps/StoryNavBar.js

@@ -1,11 +1,23 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import React from 'react';
 import { Button } from "../../shared/components/Button";
-function StoryNavBar({ onPrev, onNext, hasPrev, hasNext, isSpecta, }) {
-    return (React.createElement("div", { className: `jgis-story-navbar ${isSpecta ? 'jgis-story-navbar-specta-mod' : ''}` },
-        React.createElement(Button, { onClick: onPrev, disabled: !hasPrev, "aria-label": "Previous slide" },
-            React.createElement(ChevronLeft, null)),
-        React.createElement(Button, { onClick: onNext, disabled: !hasNext, "aria-label": "Next slide" },
-            React.createElement(ChevronRight, null))));
+function StoryNavBar({ placement, onPrev, onNext, hasPrev, hasNext, }) {
+    const containerClassName = placement === 'over-image'
+        ? 'jgis-story-viewer-nav-container'
+        : placement === 'subtitle-specta'
+            ? 'jgis-story-viewer-nav-container-specta-mod'
+            : placement === 'subtitle-specta-mobile'
+                ? 'jgis-story-viewer-nav-container-specta-mobile'
+                : undefined;
+    const navbarClassName = placement === 'subtitle-specta'
+        ? 'jgis-story-navbar jgis-story-navbar-specta-mod'
+        : 'jgis-story-navbar';
+    return (React.createElement("div", { className: containerClassName },
+        React.createElement("div", { className: navbarClassName },
+            React.createElement(React.Fragment, null,
+                React.createElement(Button, { onClick: onPrev, disabled: !hasPrev, className: "jgis-story-navbar-button", "aria-label": "Previous slide" },
+                    React.createElement(ChevronLeft, null)),
+                React.createElement(Button, { onClick: onNext, disabled: !hasNext, className: "jgis-story-navbar-button", "aria-label": "Next slide" },
+                    React.createElement(ChevronRight, null))))));
 }
 export default StoryNavBar;

package/lib/panelview/story-maps/StoryViewerPanel.d.ts

@@ -3,11 +3,21 @@ import React from 'react';
 interface IStoryViewerPanelProps {
     model: IJupyterGISModel;
     isSpecta: boolean;
+    isMobile?: boolean;
+    className?: string;
 }
 export interface IStoryViewerPanelHandle {
     handlePrev: () => void;
     handleNext: () => void;
     canNavigate: boolean;
 }
+/**
+ * Where the story nav bar should be rendered in the viewer layout.
+ * - below-title: normal mode, guided, no image (under the title)
+ * - over-image: normal mode, guided, with image (over the image)
+ * - subtitle-specta: specta mode desktop (next to subtitle, fixed centered)
+ * - subtitle-specta-mobile: specta mode mobile (in line with subtitle)
+ */
+export type StoryNavPlacement = 'below-title' | 'over-image' | 'subtitle-specta' | 'subtitle-specta-mobile';
 declare const StoryViewerPanel: React.ForwardRefExoticComponent<IStoryViewerPanelProps & React.RefAttributes<IStoryViewerPanelHandle>>;
 export default StoryViewerPanel;

package/lib/panelview/story-maps/StoryViewerPanel.js

@@ -1,14 +1,32 @@
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { cn } from "../../shared/components/utils";
+import StoryNavBar from './StoryNavBar';
 import StoryContentSection from './components/StoryContentSection';
 import StoryImageSection from './components/StoryImageSection';
 import StorySubtitleSection from './components/StorySubtitleSection';
 import StoryTitleSection from './components/StoryTitleSection';
-const StoryViewerPanel = forwardRef(({ model, isSpecta }, ref) => {
+/**
+ * Returns which section should render the nav bar, or null if nav should be hidden.
+ */
+function getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile) {
+    if (isSpecta) {
+        return isMobile ? 'subtitle-specta-mobile' : 'subtitle-specta';
+    }
+    if (storyType !== 'guided') {
+        return null;
+    }
+    return hasImage ? 'over-image' : 'below-title';
+}
+const StoryViewerPanel = forwardRef(({ model, isSpecta, isMobile = false, className }, ref) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-    const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(0);
+    const [currentIndexDisplayed, setCurrentIndexDisplayed] = useState(() => model.getCurrentSegmentIndex());
     const [storyData, setStoryData] = useState((_a = model.getSelectedStory().story) !== null && _a !== void 0 ? _a : null);
     const [imageLoaded, setImageLoaded] = useState(false);
     const panelRef = useRef(null);
+    const setIndex = useCallback((index) => {
+        model.setCurrentSegmentIndex(index);
+        setCurrentIndexDisplayed(index);
+    }, [model]);
     // Derive story segments from story data
     const storySegments = useMemo(() => {
         if (!(storyData === null || storyData === void 0 ? void 0 : storyData.storySegments)) {
@@ -53,17 +71,18 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta }, ref) => {
     }, [storyData, model]);
     useEffect(() => {
         const updateStory = () => {
+            var _a;
             const { story } = model.getSelectedStory();
             setStoryData(story !== null && story !== void 0 ? story : null);
             // Reset to first slide when story changes
-            setCurrentIndexDisplayed(0);
+            setIndex((_a = model.getCurrentSegmentIndex()) !== null && _a !== void 0 ? _a : 0);
         };
         updateStory();
         model.sharedModel.storyMapsChanged.connect(updateStory);
         return () => {
             model.sharedModel.storyMapsChanged.disconnect(updateStory);
         };
-    }, [model]);
+    }, [model, setIndex]);
     // Prefetch image when slide changes
     useEffect(() => {
         var _a;
@@ -129,25 +148,23 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta }, ref) => {
             if (index === undefined || index === -1) {
                 return;
             }
-            setCurrentIndexDisplayed(index);
+            setIndex(index);
         };
         model.sharedModel.awareness.on('change', handleSelectedStorySegmentChange);
         return () => {
             model.sharedModel.awareness.off('change', handleSelectedStorySegmentChange);
         };
-    }, [model, storyData]);
+    }, [model, storyData, setIndex]);
     const handlePrev = useCallback(() => {
         if (currentIndexDisplayed > 0) {
-            const newIndex = currentIndexDisplayed - 1;
-            setCurrentIndexDisplayed(newIndex);
+            setIndex(currentIndexDisplayed - 1);
         }
-    }, [currentIndexDisplayed]);
+    }, [currentIndexDisplayed, setIndex]);
     const handleNext = useCallback(() => {
         if (currentIndexDisplayed < storySegments.length - 1) {
-            const newIndex = currentIndexDisplayed + 1;
-            setCurrentIndexDisplayed(newIndex);
+            setIndex(currentIndexDisplayed + 1);
         }
-    }, [currentIndexDisplayed, storySegments.length]);
+    }, [currentIndexDisplayed, storySegments.length, setIndex]);
     // Expose methods via ref for parent component to use
     useImperativeHandle(ref, () => ({
         handlePrev,
@@ -164,16 +181,25 @@ const StoryViewerPanel = forwardRef(({ model, isSpecta }, ref) => {
         hasPrev: currentIndexDisplayed > 0,
         hasNext: currentIndexDisplayed < storySegments.length - 1,
     };
+    const hasImage = !!(((_d = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _d === void 0 ? void 0 : _d.image) && imageLoaded);
+    const storyType = (_e = storyData.storyType) !== null && _e !== void 0 ? _e : 'guided';
+    const navPlacement = getStoryNavPlacement(isSpecta, hasImage, storyType, isMobile);
+    const navSlot = navPlacement !== null ? (React.createElement(StoryNavBar, Object.assign({ placement: navPlacement }, navProps))) : null;
     // Get transition time from current segment, default to 0.3s
-    const transitionTime = (_e = (_d = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.transition) === null || _d === void 0 ? void 0 : _d.time) !== null && _e !== void 0 ? _e : 0.3;
-    return (React.createElement("div", { ref: panelRef, className: `jgis-story-viewer-panel ${isSpecta ? 'jgis-story-viewer-panel-specta-mod' : ''}` },
+    const transitionTime = (_g = (_f = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.transition) === null || _f === void 0 ? void 0 : _f.time) !== null && _g !== void 0 ? _g : 0.3;
+    return (React.createElement("div", { ref: panelRef, className: cn('jgis-story-viewer-panel', className), id: "jgis-story-segment-panel" },
         React.createElement("div", { key: currentIndexDisplayed, className: "jgis-story-segment-container", style: {
                 animationDuration: `${transitionTime}s`,
             } },
-            React.createElement("h1", { className: "jgis-story-viewer-title" }, layerName !== null && layerName !== void 0 ? layerName : `Slide ${currentIndexDisplayed + 1}`),
-            ((_f = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _f === void 0 ? void 0 : _f.image) && imageLoaded ? (React.createElement(StoryImageSection, Object.assign({ imageUrl: activeSlide.content.image, imageLoaded: imageLoaded, layerName: layerName !== null && layerName !== void 0 ? layerName : '', slideNumber: currentIndexDisplayed, isSpecta: isSpecta, storyType: (_g = storyData.storyType) !== null && _g !== void 0 ? _g : 'guided' }, navProps))) : (React.createElement(StoryTitleSection, Object.assign({ title: (_h = storyData.title) !== null && _h !== void 0 ? _h : '', isSpecta: isSpecta, storyType: (_j = storyData.storyType) !== null && _j !== void 0 ? _j : 'guided' }, navProps))),
-            React.createElement(StorySubtitleSection, Object.assign({ title: (_l = (_k = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '', isSpecta: isSpecta }, navProps)),
-            React.createElement(StoryContentSection, { markdown: (_o = (_m = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _m === void 0 ? void 0 : _m.markdown) !== null && _o !== void 0 ? _o : '' }))));
+            React.createElement("div", { id: "jgis-story-segment-header" },
+                React.createElement("h1", { className: "jgis-story-viewer-title" }, layerName !== null && layerName !== void 0 ? layerName : `Slide ${currentIndexDisplayed + 1}`),
+                ((_h = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _h === void 0 ? void 0 : _h.image) && imageLoaded ? (React.createElement(StoryImageSection, { imageUrl: activeSlide.content.image, imageLoaded: imageLoaded, layerName: layerName !== null && layerName !== void 0 ? layerName : '', slideNumber: currentIndexDisplayed, navSlot: navPlacement === 'over-image' ? navSlot : null })) : (React.createElement(StoryTitleSection, { title: (_j = storyData.title) !== null && _j !== void 0 ? _j : '', navSlot: navPlacement === 'below-title' ? navSlot : null })),
+                React.createElement(StorySubtitleSection, { title: (_l = (_k = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _k === void 0 ? void 0 : _k.title) !== null && _l !== void 0 ? _l : '', navSlot: navPlacement === 'subtitle-specta' ||
+                        navPlacement === 'subtitle-specta-mobile'
+                        ? navSlot
+                        : null })),
+            React.createElement("div", { id: "jgis-story-segment-content" },
+                React.createElement(StoryContentSection, { markdown: (_o = (_m = activeSlide === null || activeSlide === void 0 ? void 0 : activeSlide.content) === null || _m === void 0 ? void 0 : _m.markdown) !== null && _o !== void 0 ? _o : '' })))));
 });
 StoryViewerPanel.displayName = 'StoryViewerPanel';
 export default StoryViewerPanel;

package/lib/panelview/story-maps/components/StoryImageSection.d.ts

@@ -4,12 +4,7 @@ interface IStoryImageSectionProps {
     imageLoaded: boolean;
     layerName: string;
     slideNumber: number;
-    isSpecta: boolean;
-    storyType: string;
-    onPrev: () => void;
-    onNext: () => void;
-    hasPrev: boolean;
-    hasNext: boolean;
+    navSlot?: React.ReactNode;
 }
-declare function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }: IStoryImageSectionProps): React.JSX.Element | null;
+declare function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, navSlot, }: IStoryImageSectionProps): React.JSX.Element | null;
 export default StoryImageSection;

package/lib/panelview/story-maps/components/StoryImageSection.js

@@ -1,13 +1,11 @@
 import React from 'react';
-import StoryNavBar from '../StoryNavBar';
-function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }) {
+function StoryImageSection({ imageUrl, imageLoaded, layerName, slideNumber, navSlot, }) {
     if (!imageLoaded) {
         return null;
     }
     return (React.createElement("div", { className: "jgis-story-viewer-image-section" },
         React.createElement("div", { className: "jgis-story-viewer-image-container" },
             React.createElement("img", { src: imageUrl, alt: "Story map image", className: "jgis-story-viewer-image" }),
-            !isSpecta && storyType === 'guided' && (React.createElement("div", { className: "jgis-story-viewer-nav-container" },
-                React.createElement(StoryNavBar, { onPrev: onPrev, onNext: onNext, hasPrev: hasPrev, hasNext: hasNext, isSpecta: isSpecta }))))));
+            navSlot)));
 }
 export default StoryImageSection;

package/lib/panelview/story-maps/components/StorySubtitleSection.d.ts

@@ -1,11 +1,7 @@
 import React from 'react';
 interface IStorySubtitleSectionProps {
     title: string;
-    isSpecta: boolean;
-    onPrev: () => void;
-    onNext: () => void;
-    hasPrev: boolean;
-    hasNext: boolean;
+    navSlot?: React.ReactNode;
 }
-declare function StorySubtitleSection({ title, isSpecta, onPrev, onNext, hasPrev, hasNext, }: IStorySubtitleSectionProps): React.JSX.Element;
+declare function StorySubtitleSection({ title, navSlot }: IStorySubtitleSectionProps): React.JSX.Element;
 export default StorySubtitleSection;

package/lib/panelview/story-maps/components/StorySubtitleSection.js

@@ -1,9 +1,7 @@
 import React from 'react';
-import StoryNavBar from '../StoryNavBar';
-function StorySubtitleSection({ title, isSpecta, onPrev, onNext, hasPrev, hasNext, }) {
+function StorySubtitleSection({ title, navSlot }) {
     return (React.createElement("div", { className: "jgis-story-viewer-subtitle-container" },
         React.createElement("h2", { className: "jgis-story-viewer-subtitle" }, title || 'Slide Title'),
-        isSpecta && (React.createElement("div", { className: "jgis-story-viewer-nav-container-specta-mod" },
-            React.createElement(StoryNavBar, { onPrev: onPrev, onNext: onNext, hasPrev: hasPrev, hasNext: hasNext, isSpecta: isSpecta })))));
+        navSlot));
 }
 export default StorySubtitleSection;

package/lib/panelview/story-maps/components/StoryTitleSection.d.ts

@@ -1,12 +1,7 @@
 import React from 'react';
 interface IStoryTitleSectionProps {
     title: string;
-    isSpecta: boolean;
-    storyType: string;
-    onPrev: () => void;
-    onNext: () => void;
-    hasPrev: boolean;
-    hasNext: boolean;
+    navSlot?: React.ReactNode;
 }
-declare function StoryTitleSection({ title, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }: IStoryTitleSectionProps): React.JSX.Element;
+declare function StoryTitleSection({ title, navSlot }: IStoryTitleSectionProps): React.JSX.Element;
 export default StoryTitleSection;

package/lib/panelview/story-maps/components/StoryTitleSection.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import StoryNavBar from '../StoryNavBar';
-function StoryTitleSection({ title, isSpecta, storyType, onPrev, onNext, hasPrev, hasNext, }) {
+function StoryTitleSection({ title, navSlot }) {
     return (React.createElement(React.Fragment, null,
         React.createElement("h1", { className: "jgis-story-viewer-title" }, title),
-        !isSpecta && storyType === 'guided' && (React.createElement(StoryNavBar, { onPrev: onPrev, onNext: onNext, hasPrev: hasPrev, hasNext: hasNext, isSpecta: isSpecta }))));
+        navSlot));
 }
 export default StoryTitleSection;

package/lib/shared/components/Button.js

@@ -9,12 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { Slot } from '@radix-ui/react-slot';
+import { Slot } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 const Button = React.forwardRef((_a, ref) => {
     var { variant, className, size, asChild = false } = _a, props = __rest(_a, ["variant", "className", "size", "asChild"]);
-    const Comp = asChild ? Slot : 'button';
+    const Comp = asChild ? Slot.Root : 'button';
     return (React.createElement(Comp, Object.assign({ "data-size": size, "data-variant": variant, className: cn('jgis-button', className), ref: ref }, props)));
 });
 Button.displayName = 'Button';

package/lib/shared/components/Calendar.js

@@ -1,4 +1,3 @@
-'use client';
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/lib/shared/components/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default Checkbox;

package/lib/shared/components/Checkbox.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { Check } from 'lucide-react';
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
 import * as React from 'react';
 const Checkbox = React.forwardRef((_a, ref) => {
     var props = __rest(_a, []);

package/lib/shared/components/Dialog.d.ts

@@ -1,4 +1,4 @@
-import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Dialog as DialogPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
 declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;

package/lib/shared/components/Dialog.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 function Dialog(_a) {

package/lib/shared/components/Drawer.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+declare function Drawer({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Trigger>): React.JSX.Element;
+declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): React.JSX.Element;
+declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): React.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): React.JSX.Element;
+declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Description>): React.JSX.Element;
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

package/lib/shared/components/Drawer.js

@@ -0,0 +1,59 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { Drawer as DrawerPrimitive } from 'vaul';
+import { cn } from './utils';
+function Drawer(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DrawerPrimitive.Root, Object.assign({ "data-slot": "drawer" }, props));
+}
+function DrawerTrigger(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DrawerPrimitive.Trigger, Object.assign({ "data-slot": "drawer-trigger" }, props));
+}
+function DrawerPortal(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DrawerPrimitive.Portal, Object.assign({ "data-slot": "drawer-portal" }, props));
+}
+function DrawerClose(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(DrawerPrimitive.Close, Object.assign({ "data-slot": "drawer-close" }, props));
+}
+function DrawerOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DrawerPrimitive.Overlay, Object.assign({ "data-slot": "drawer-overlay", className: cn('jgis-drawer-overlay', className) }, props)));
+}
+function DrawerContent(_a) {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (React.createElement(DrawerPortal, { "data-slot": "drawer-portal" },
+        React.createElement(DrawerOverlay, null),
+        React.createElement(DrawerPrimitive.Content, Object.assign({ "data-slot": "drawer-content", className: cn('jgis-drawer-content', className) }, props),
+            React.createElement("div", { className: "jgis-drawer-handle" }),
+            children)));
+}
+function DrawerHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "drawer-header", className: cn('jgis-drawer-header', className) }, props)));
+}
+function DrawerFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "drawer-footer", className: cn('jgis-drawer-footer', className) }, props)));
+}
+function DrawerTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DrawerPrimitive.Title, Object.assign({ "data-slot": "drawer-title", className: cn('jgis-drawer-title', className) }, props)));
+}
+function DrawerDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(DrawerPrimitive.Description, Object.assign({ "data-slot": "drawer-description", className: cn('jgis-drawer-description', className) }, props)));
+}
+export { Drawer, DrawerPortal, DrawerOverlay, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, };

package/lib/shared/components/DropdownMenu.d.ts

@@ -1,4 +1,4 @@
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/lib/shared/components/DropdownMenu.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
+import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
 import * as React from 'react';
 const DropdownMenu = DropdownMenuPrimitive.Root;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

package/lib/shared/components/Popover.d.ts

@@ -1,4 +1,4 @@
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Popover as PopoverPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare const Popover: React.FC<React.ComponentProps<typeof PopoverPrimitive.Root>>;
 declare const PopoverTrigger: React.FC<React.ComponentProps<typeof PopoverPrimitive.Trigger>>;

package/lib/shared/components/Popover.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { Popover as PopoverPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 const Popover = (_a) => {

package/lib/shared/components/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
 declare function RadioGroupItem({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element;

package/lib/shared/components/RadioGroup.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { CircleIcon } from 'lucide-react';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 function RadioGroup(_a) {

package/lib/shared/components/Sheet.d.ts

@@ -0,0 +1,15 @@
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): React.JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): React.JSX.Element;
+declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, container, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    showCloseButton?: boolean;
+    container: HTMLElement;
+}): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): React.JSX.Element;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };