@jupytergis/base 0.12.1 → 0.12.2

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, };

package/lib/shared/components/Sheet.js

@@ -0,0 +1,64 @@
+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 { XIcon } from 'lucide-react';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { Button } from './Button';
+import { cn } from './utils';
+function Sheet(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Root, Object.assign({ "data-slot": "sheet" }, props));
+}
+function SheetTrigger(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Trigger, Object.assign({ "data-slot": "sheet-trigger" }, props));
+}
+function SheetClose(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Close, Object.assign({ "data-slot": "sheet-close" }, props));
+}
+function SheetPortal(_a) {
+    var props = __rest(_a, []);
+    return React.createElement(SheetPrimitive.Portal, Object.assign({ "data-slot": "sheet-portal" }, props));
+}
+function SheetOverlay(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SheetPrimitive.Overlay, Object.assign({ "data-slot": "sheet-overlay", className: cn('jgis-sheet-overlay', className) }, props)));
+}
+function SheetContent(_a) {
+    var { className, children, side = 'right', showCloseButton = true, container } = _a, props = __rest(_a, ["className", "children", "side", "showCloseButton", "container"]);
+    return (React.createElement(SheetPortal, null,
+        React.createElement(SheetOverlay, null),
+        React.createElement(SheetPrimitive.Content, Object.assign({ "data-slot": "sheet-content", "data-side": side, className: cn('jgis-sheet-content', className) }, props),
+            children,
+            showCloseButton && (React.createElement(SheetPrimitive.Close, { "data-slot": "sheet-close", asChild: true },
+                React.createElement(Button, { variant: "ghost", className: "jgis-sheet-close", size: "icon-sm" },
+                    React.createElement(XIcon, null),
+                    React.createElement("span", { className: "jgis-sr-only" }, "Close")))))));
+}
+function SheetHeader(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "sheet-header", className: cn('jgis-sheet-header', className) }, props)));
+}
+function SheetFooter(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement("div", Object.assign({ "data-slot": "sheet-footer", className: cn('jgis-sheet-footer', className) }, props)));
+}
+function SheetTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SheetPrimitive.Title, Object.assign({ "data-slot": "sheet-title", className: cn('jgis-sheet-title', className) }, props)));
+}
+function SheetDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (React.createElement(SheetPrimitive.Description, Object.assign({ "data-slot": "sheet-description", className: cn('jgis-sheet-description', className) }, props)));
+}
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

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

@@ -1,4 +1,4 @@
-import * as SwitchPrimitive from '@radix-ui/react-switch';
+import { Switch as SwitchPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): React.JSX.Element;
 export { Switch };

package/lib/shared/components/Switch.js

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

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

@@ -1,4 +1,4 @@
-import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { Tabs as TabsPrimitive } from 'radix-ui';
 import * as React from 'react';
 interface IPanelTabProps {
     className: string;

package/lib/shared/components/Tabs.js

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

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

@@ -1,5 +1,5 @@
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { type VariantProps } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
 import * as React from 'react';
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
     variant?: "default" | "outline" | null | undefined;

package/lib/shared/components/ToggleGroup.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
 import { cva } from 'class-variance-authority';
+import { ToggleGroup as ToggleGroupPrimitive } from 'radix-ui';
 import * as React from 'react';
 import { cn } from './utils';
 const toggleVariants = cva('jgis-toggle', {

package/lib/shared/hooks/useMediaQuery.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Subscribes to a media query and returns whether it currently matches.
+ * Updates when the viewport changes (resize, orientation).
+ *
+ * @param query - Media query string (e.g. '(max-width: 768px)').
+ * @returns True if the query matches, false otherwise (and when window is unavailable).
+ */
+declare function useMediaQuery(query: string): boolean;
+export default useMediaQuery;