@wallarm-org/design-system 0.43.0 → 0.44.1

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartZoomState.js

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useZoomDragListeners } from "./useZoomDragListeners.js";
-const useLineChartZoomState = ({ data, xKey, onZoomChange })=>{
+const useLineChartZoomState = ({ data, xKey, onZoomChangeRef })=>{
     const [zoomEnabledCount, setZoomEnabledCount] = useState(0);
     const [zoomDrag, setZoomDrag] = useState(null);
     const [zoomPending, setZoomPending] = useState(null);
@@ -8,35 +8,79 @@ const useLineChartZoomState = ({ data, xKey, onZoomChange })=>{
         setZoomEnabledCount((n)=>n + 1);
         return ()=>setZoomEnabledCount((n)=>n - 1);
     }, []);
-    const startDrag = useCallback((index, clientX, clientY)=>{
-        setZoomPending(null);
-        setZoomDrag({
-            startIndex: index,
-            endIndex: index,
-            clientX,
-            clientY
-        });
-    }, []);
-    const updateDrag = useCallback((index, clientX, clientY)=>{
+    const pendingDragRef = useRef(null);
+    const rafIdRef = useRef(null);
+    const flushPendingDrag = useCallback(()=>{
+        rafIdRef.current = null;
+        const buffered = pendingDragRef.current;
+        if (!buffered) return;
+        pendingDragRef.current = null;
         setZoomDrag((prev)=>{
             if (!prev) return null;
-            if (prev.endIndex === index && prev.clientX === clientX && prev.clientY === clientY) return prev;
+            const endIndex = buffered.index ?? prev.endIndex;
+            const clientX = buffered.clientX ?? prev.clientX;
+            const clientY = buffered.clientY ?? prev.clientY;
+            if (prev.endIndex === endIndex && prev.clientX === clientX && prev.clientY === clientY) return prev;
             return {
                 startIndex: prev.startIndex,
-                endIndex: index,
+                endIndex,
                 clientX,
                 clientY
             };
         });
     }, []);
+    const scheduleFlush = useCallback(()=>{
+        if (null !== rafIdRef.current) return;
+        rafIdRef.current = requestAnimationFrame(flushPendingDrag);
+    }, [
+        flushPendingDrag
+    ]);
+    const cancelScheduledFlush = useCallback(()=>{
+        if (null !== rafIdRef.current) {
+            cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = null;
+        }
+        pendingDragRef.current = null;
+    }, []);
+    const startDrag = useCallback((index, clientX, clientY)=>{
+        cancelScheduledFlush();
+        setZoomPending(null);
+        setZoomDrag({
+            startIndex: index,
+            endIndex: index,
+            clientX,
+            clientY
+        });
+    }, [
+        cancelScheduledFlush
+    ]);
+    const updateDrag = useCallback((index, clientX, clientY)=>{
+        pendingDragRef.current = {
+            ...pendingDragRef.current,
+            index,
+            clientX,
+            clientY
+        };
+        scheduleFlush();
+    }, [
+        scheduleFlush
+    ]);
     const cancelDrag = useCallback(()=>{
+        cancelScheduledFlush();
         setZoomDrag(null);
-    }, []);
+    }, [
+        cancelScheduledFlush
+    ]);
     const endDrag = useCallback(()=>{
+        const buffered = pendingDragRef.current;
+        cancelScheduledFlush();
         setZoomDrag((currentDrag)=>{
             if (!currentDrag) return null;
-            const lo = Math.min(currentDrag.startIndex, currentDrag.endIndex);
-            const hi = Math.max(currentDrag.startIndex, currentDrag.endIndex);
+            const endIndex = buffered?.index ?? currentDrag.endIndex;
+            const clientX = buffered?.clientX ?? currentDrag.clientX;
+            const clientY = buffered?.clientY ?? currentDrag.clientY;
+            const lo = Math.min(currentDrag.startIndex, endIndex);
+            const hi = Math.max(currentDrag.startIndex, endIndex);
             if (lo === hi) return null;
             const fromDatum = data[lo];
             const toDatum = data[hi];
@@ -49,46 +93,56 @@ const useLineChartZoomState = ({ data, xKey, onZoomChange })=>{
                     from,
                     to
                 },
-                clientX: currentDrag.clientX,
-                clientY: currentDrag.clientY
+                clientX,
+                clientY
             });
             return null;
         });
     }, [
         data,
-        xKey
+        xKey,
+        cancelScheduledFlush
     ]);
     const confirmZoom = useCallback(()=>{
         setZoomPending((currentPending)=>{
-            if (currentPending) onZoomChange?.(currentPending.range);
+            if (currentPending) onZoomChangeRef.current?.(currentPending.range);
             return null;
         });
     }, [
-        onZoomChange
+        onZoomChangeRef
     ]);
     const cancelPending = useCallback(()=>{
         setZoomPending(null);
     }, []);
     useEffect(()=>{
+        cancelScheduledFlush();
         setZoomDrag(null);
         setZoomPending(null);
     }, [
         data,
-        xKey
+        xKey,
+        cancelScheduledFlush
+    ]);
+    useEffect(()=>()=>cancelScheduledFlush(), [
+        cancelScheduledFlush
     ]);
     const isZoomDragging = null !== zoomDrag;
     const handleDragMove = useCallback((clientX, clientY)=>{
-        setZoomDrag((prev)=>{
-            if (!prev) return null;
-            if (prev.clientX === clientX && prev.clientY === clientY) return prev;
-            return {
-                ...prev,
-                clientX,
-                clientY
-            };
-        });
-    }, []);
-    const handleDragEscape = useCallback(()=>setZoomDrag(null), []);
+        pendingDragRef.current = {
+            ...pendingDragRef.current,
+            clientX,
+            clientY
+        };
+        scheduleFlush();
+    }, [
+        scheduleFlush
+    ]);
+    const handleDragEscape = useCallback(()=>{
+        cancelScheduledFlush();
+        setZoomDrag(null);
+    }, [
+        cancelScheduledFlush
+    ]);
     useZoomDragListeners({
         enabled: isZoomDragging,
         onMove: handleDragMove,

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export { useArrowNav } from './useArrowNav';
 export { useControlled } from './useControlled';
 export { useCopyToClipboard } from './useCopyToClipboard';
 export { useCopyTooltip } from './useCopyTooltip';

package/dist/hooks/index.js

@@ -1,6 +1,7 @@
+import { useArrowNav } from "./useArrowNav.js";
 import { useControlled } from "./useControlled.js";
 import { useCopyToClipboard } from "./useCopyToClipboard.js";
 import { useCopyTooltip } from "./useCopyTooltip.js";
 import { useIsKeyPressed } from "./useIsKeyPressed.js";
 import { useOverflowItems } from "./useOverflowItems.js";
-export { useControlled, useCopyToClipboard, useCopyTooltip, useIsKeyPressed, useOverflowItems };
+export { useArrowNav, useControlled, useCopyToClipboard, useCopyTooltip, useIsKeyPressed, useOverflowItems };

package/dist/hooks/useArrowNav.d.ts

@@ -0,0 +1,7 @@
+import { type RefObject } from 'react';
+export interface UseArrowNavOptions {
+    onArrowRight?: () => void;
+    onArrowLeft?: () => void;
+    onEnter?: () => void;
+}
+export declare function useArrowNav(containerRef: RefObject<HTMLElement | null>, selector: string, options?: UseArrowNavOptions): void;

package/dist/hooks/useArrowNav.js

@@ -0,0 +1,98 @@
+import { useEffect } from "react";
+function isVisible(el, container) {
+    let current = el;
+    while(current && current !== container){
+        if (0 === current.offsetWidth || 0 === current.offsetHeight) return false;
+        current = current.parentElement;
+    }
+    return true;
+}
+function useArrowNav(containerRef, selector, options) {
+    useEffect(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        function getItems() {
+            const all = container.querySelectorAll(selector);
+            return Array.from(all).filter((el)=>isVisible(el, container));
+        }
+        function syncTabIndex() {
+            const items = getItems();
+            if (0 === items.length) return;
+            const active = items.find((el)=>'page' === el.getAttribute('aria-current'));
+            const hasFocused = items.find((el)=>'0' === el.getAttribute('tabindex'));
+            if (hasFocused) {
+                for (const item of items)if (!item.hasAttribute('tabindex')) item.setAttribute('tabindex', '-1');
+            } else {
+                const target = active ?? items[0];
+                for (const item of items)item.setAttribute('tabindex', item === target ? '0' : '-1');
+            }
+        }
+        function handleKeyDown(event) {
+            const { key } = event;
+            if ('Enter' === key) {
+                const target = document.activeElement;
+                if (target && getItems().includes(target)) {
+                    event.preventDefault();
+                    target.click();
+                    options?.onEnter?.();
+                }
+                return;
+            }
+            if ('ArrowRight' === key && options?.onArrowRight) {
+                event.preventDefault();
+                options.onArrowRight();
+                return;
+            }
+            if ('ArrowLeft' === key && options?.onArrowLeft) {
+                event.preventDefault();
+                options.onArrowLeft();
+                return;
+            }
+            if ('ArrowDown' !== key && 'ArrowUp' !== key && 'Home' !== key && 'End' !== key) return;
+            const items = getItems();
+            if (0 === items.length) return;
+            const currentIndex = items.indexOf(document.activeElement);
+            if (-1 === currentIndex) return;
+            event.preventDefault();
+            let nextIndex;
+            switch(key){
+                case 'ArrowDown':
+                    nextIndex = currentIndex + 1 >= items.length ? 0 : currentIndex + 1;
+                    break;
+                case 'ArrowUp':
+                    nextIndex = currentIndex - 1 < 0 ? items.length - 1 : currentIndex - 1;
+                    break;
+                case 'Home':
+                    nextIndex = 0;
+                    break;
+                case 'End':
+                    nextIndex = items.length - 1;
+                    break;
+                default:
+                    return;
+            }
+            items[currentIndex]?.setAttribute('tabindex', '-1');
+            items[nextIndex]?.setAttribute('tabindex', '0');
+            items[nextIndex]?.focus();
+        }
+        syncTabIndex();
+        const observer = new MutationObserver(syncTabIndex);
+        observer.observe(container, {
+            childList: true,
+            subtree: true,
+            attributes: true
+        });
+        container.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            observer.disconnect();
+            container.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [
+        containerRef,
+        selector,
+        options?.onArrowRight,
+        options?.onArrowLeft,
+        options?.onEnter
+    ]);
+}
+export { useArrowNav };

package/dist/icons/ChevronUpDown.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type SvgIconProps } from './SvgIcon';
+export declare const ChevronUpDown: FC<SvgIconProps>;

package/dist/icons/ChevronUpDown.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { SvgIcon } from "./SvgIcon.js";
+const ChevronUpDown = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
+        ...props,
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M16.293 14.293C16.6835 13.9025 17.3165 13.9025 17.707 14.293C18.0976 14.6835 18.0976 15.3165 17.707 15.707L12.707 20.707C12.3165 21.0976 11.6835 21.0976 11.293 20.707L6.29297 15.707C5.90245 15.3165 5.90245 14.6835 6.29297 14.293C6.68349 13.9025 7.31651 13.9025 7.70703 14.293L12 18.5859L16.293 14.293ZM11.3691 3.22462C11.7619 2.90427 12.3409 2.92686 12.707 3.29298L17.707 8.29298C18.0976 8.6835 18.0976 9.31652 17.707 9.70704C17.3165 10.0976 16.6835 10.0976 16.293 9.70704L12 5.41407L7.70703 9.70704C7.31651 10.0976 6.68349 10.0976 6.29297 9.70704C5.90245 9.31652 5.90245 8.6835 6.29297 8.29298L11.293 3.29298L11.3691 3.22462Z",
+            fill: "currentColor"
+        })
+    });
+ChevronUpDown.displayName = 'ChevronUpDownIcon';
+export { ChevronUpDown };

package/dist/icons/MapPin.d.ts

@@ -0,0 +1,3 @@
+import type { FC } from 'react';
+import { type SvgIconProps } from './SvgIcon';
+export declare const MapPin: FC<SvgIconProps>;

package/dist/icons/MapPin.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { SvgIcon } from "./SvgIcon.js";
+const MapPin = (props)=>/*#__PURE__*/ jsx(SvgIcon, {
+        ...props,
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/ jsx("path", {
+            d: "M18 9.20605C18 6.0948 15.3546 3.5 12 3.5C8.6454 3.5 6 6.0948 6 9.20605C6.00006 11.3244 7.02608 13.6029 8.35938 15.6416C9.64802 17.612 11.145 19.2389 12 20.1045C12.855 19.2389 14.352 17.612 15.6406 15.6416C16.9739 13.6029 17.9999 11.3244 18 9.20605ZM14 9.5C14 8.39543 13.1046 7.5 12 7.5C10.8954 7.5 10 8.39543 10 9.5C10 10.6046 10.8954 11.5 12 11.5C13.1046 11.5 14 10.6046 14 9.5ZM16 9.5C16 11.7091 14.2091 13.5 12 13.5C9.79086 13.5 8 11.7091 8 9.5C8 7.29086 9.79086 5.5 12 5.5C14.2091 5.5 16 7.29086 16 9.5ZM20 9.20605C19.9999 11.9075 18.7208 14.5859 17.3145 16.7363C15.8932 18.9095 14.2547 20.6742 13.3613 21.5732C12.6073 22.3321 11.3927 22.3321 10.6387 21.5732C9.74532 20.6742 8.10681 18.9095 6.68555 16.7363C5.27921 14.5859 4.00005 11.9075 4 9.20605C4 4.91019 7.62261 1.5 12 1.5C16.3774 1.5 20 4.91019 20 9.20605Z",
+            fill: "currentColor"
+        })
+    });
+MapPin.displayName = 'MapPinIcon';
+export { MapPin };

package/dist/icons/index.d.ts

@@ -41,6 +41,7 @@ export { ChevronsLeft } from './ChevronsLeft';
 export { ChevronsRight } from './ChevronsRight';
 export { ChevronsUp } from './ChevronsUp';
 export { ChevronUp } from './ChevronUp';
+export { ChevronUpDown } from './ChevronUpDown';
 export { Circle } from './Circle';
 export { CircleArrowDown } from './CircleArrowDown';
 export { CircleArrowLeft } from './CircleArrowLeft';
@@ -113,6 +114,7 @@ export { Loader } from './Loader';
 export { LoaderCircle } from './LoaderCircle';
 export { Lock } from './Lock';
 export { LockOpen } from './LockOpen';
+export { MapPin } from './MapPin';
 export { Maximize } from './Maximize';
 export { Maximize2 } from './Maximize2';
 export { Megaphone } from './Megaphone';

package/dist/icons/index.js

@@ -41,6 +41,7 @@ import { ChevronsLeft } from "./ChevronsLeft.js";
 import { ChevronsRight } from "./ChevronsRight.js";
 import { ChevronsUp } from "./ChevronsUp.js";
 import { ChevronUp } from "./ChevronUp.js";
+import { ChevronUpDown } from "./ChevronUpDown.js";
 import { Circle } from "./Circle.js";
 import { CircleArrowDown } from "./CircleArrowDown.js";
 import { CircleArrowLeft } from "./CircleArrowLeft.js";
@@ -113,6 +114,7 @@ import { Loader } from "./Loader.js";
 import { LoaderCircle } from "./LoaderCircle.js";
 import { Lock } from "./Lock.js";
 import { LockOpen } from "./LockOpen.js";
+import { MapPin } from "./MapPin.js";
 import { Maximize } from "./Maximize.js";
 import { Maximize2 } from "./Maximize2.js";
 import { Megaphone } from "./Megaphone.js";
@@ -178,4 +180,4 @@ import { X } from "./X.js";
 import { Zap } from "./Zap.js";
 import { ZoomIn } from "./ZoomIn.js";
 import { ZoomOut } from "./ZoomOut.js";
-export { Activity, Alt, ArrowBigUp, ArrowBigUpDash, ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Bell, Calendar, CalendarCheck, CalendarCheck2, CalendarClock, CalendarCog, CalendarDays, CalendarFold, CalendarHeart, CalendarMinus, CalendarMinus2, CalendarOff, CalendarPlus, CalendarPlus2, CalendarRange, CalendarSearch, CalendarX, CalendarX2, Check, CheckCheck, CheckboxIndeterminate, ChevronDown, ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, ChevronUp, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Circle, CircleArrowDown, CircleArrowLeft, CircleArrowOutDownLeft, CircleArrowOutDownRight, CircleArrowOutUpLeft, CircleArrowOutUpRight, CircleArrowRight, CircleArrowUp, CircleCheck, CircleCheckBig, CircleChevronDown, CircleChevronLeft, CircleChevronRight, CircleChevronUp, CircleDashed, CircleDotDashed, CircleEllipsis, CircleHelp, CirclePlus, Clock, Command, Copy, CornerUpLeft, CornerUpRight, Ctrl, Dot, Earth, EarthLock, Ellipsis, EyeOff, Filter, FilterX, Folder, FunnelPlus, GitCommitHorizontal, GitCommitVertical, GitCompare, GitCompareArrows, GitFork, GitGraph, GitMerge, GitPullRequest, GitPullRequestArrow, GitPullRequestClosed, GitPullRequestCreate, GitPullRequestCreateArrow, GitPullRequestDraft, Globe, GlobeLock, GripVertical, History, Home, Info, KeyRound, KeySquare, Keyboard, Layers, Layers2, Layers3, LayoutDashboard, LayoutGrid, LayoutList, LayoutPanelLeft, LayoutPanelTop, LayoutTemplate, LibraryBig, Link, Loader, LoaderCircle, Lock, LockOpen, Maximize, Maximize2, Megaphone, MegaphoneOff, MessageSquare, MessageSquareText, MessageSquareWarning, MessageSquareX, MessagesSquare, Minus, Mouse, Move3D, MoveDown, MoveUp, MoveVertical, NotebookPen, NotepadText, OctagonAlert, PanelBottom, PanelBottomOpen, PanelRight, PanelRightAnimated, PanelRightClose, PanelRightDashed, PanelRightOpen, Paperclip, Pen, PenLine, PenOff, PenTool, Pencil, PencilLine, PencilOff, PencilRuler, Pentagon, Pin, PinOff, Plus, Quote, Redo, Redo2, RedoDot, RefreshCcw, RefreshCwOff, Search, Settings, Sheet, Shift, Skull, SlidersHorizontal, SlidersVertical, Space, SquareArrowOutUpRight, Trash, Trash2, TriangleAlert, Undo, Undo2, UndoDot, User, Wrench, X, Zap, ZoomIn, ZoomOut };
+export { Activity, Alt, ArrowBigUp, ArrowBigUpDash, ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Bell, Calendar, CalendarCheck, CalendarCheck2, CalendarClock, CalendarCog, CalendarDays, CalendarFold, CalendarHeart, CalendarMinus, CalendarMinus2, CalendarOff, CalendarPlus, CalendarPlus2, CalendarRange, CalendarSearch, CalendarX, CalendarX2, Check, CheckCheck, CheckboxIndeterminate, ChevronDown, ChevronFirst, ChevronLast, ChevronLeft, ChevronRight, ChevronUp, ChevronUpDown, ChevronsDown, ChevronsLeft, ChevronsRight, ChevronsUp, Circle, CircleArrowDown, CircleArrowLeft, CircleArrowOutDownLeft, CircleArrowOutDownRight, CircleArrowOutUpLeft, CircleArrowOutUpRight, CircleArrowRight, CircleArrowUp, CircleCheck, CircleCheckBig, CircleChevronDown, CircleChevronLeft, CircleChevronRight, CircleChevronUp, CircleDashed, CircleDotDashed, CircleEllipsis, CircleHelp, CirclePlus, Clock, Command, Copy, CornerUpLeft, CornerUpRight, Ctrl, Dot, Earth, EarthLock, Ellipsis, EyeOff, Filter, FilterX, Folder, FunnelPlus, GitCommitHorizontal, GitCommitVertical, GitCompare, GitCompareArrows, GitFork, GitGraph, GitMerge, GitPullRequest, GitPullRequestArrow, GitPullRequestClosed, GitPullRequestCreate, GitPullRequestCreateArrow, GitPullRequestDraft, Globe, GlobeLock, GripVertical, History, Home, Info, KeyRound, KeySquare, Keyboard, Layers, Layers2, Layers3, LayoutDashboard, LayoutGrid, LayoutList, LayoutPanelLeft, LayoutPanelTop, LayoutTemplate, LibraryBig, Link, Loader, LoaderCircle, Lock, LockOpen, MapPin, Maximize, Maximize2, Megaphone, MegaphoneOff, MessageSquare, MessageSquareText, MessageSquareWarning, MessageSquareX, MessagesSquare, Minus, Mouse, Move3D, MoveDown, MoveUp, MoveVertical, NotebookPen, NotepadText, OctagonAlert, PanelBottom, PanelBottomOpen, PanelRight, PanelRightAnimated, PanelRightClose, PanelRightDashed, PanelRightOpen, Paperclip, Pen, PenLine, PenOff, PenTool, Pencil, PencilLine, PencilOff, PencilRuler, Pentagon, Pin, PinOff, Plus, Quote, Redo, Redo2, RedoDot, RefreshCcw, RefreshCwOff, Search, Settings, Sheet, Shift, Skull, SlidersHorizontal, SlidersVertical, Space, SquareArrowOutUpRight, Trash, Trash2, TriangleAlert, Undo, Undo2, UndoDot, User, Wrench, X, Zap, ZoomIn, ZoomOut };

package/dist/index.d.ts

@@ -15,6 +15,7 @@ export { Alert, AlertClose, type AlertCloseProps, type AlertColor, AlertContent,
 export { AppShell, AppShellHeader, type AppShellHeaderProps, type AppShellProps, AppShellRail, type AppShellRailProps, AppShellRemote, type AppShellRemoteProps, } from './components/AppShell';
 export { Attribute, AttributeActions, AttributeActionsContent, type AttributeActionsContentProps, AttributeActionsItem, type AttributeActionsItemProps, type AttributeActionsProps, AttributeActionsTarget, type AttributeActionsTargetProps, AttributeLabel, AttributeLabelDescription, type AttributeLabelDescriptionProps, AttributeLabelInfo, type AttributeLabelInfoProps, type AttributeLabelProps, type AttributeProps, AttributeValue, type AttributeValueProps, } from './components/Attribute';
 export { Badge, type BadgeProps } from './components/Badge';
+export { Breadcrumbs, BreadcrumbsEllipsis, type BreadcrumbsEllipsisProps, BreadcrumbsItem, type BreadcrumbsItemProps, type BreadcrumbsProps, BreadcrumbsScopeSwitcher, type BreadcrumbsScopeSwitcherProps, BreadcrumbsSeparator, type BreadcrumbsSeparatorProps, type ScopeSwitcherItem, } from './components/Breadcrumbs';
 export { Button, type ButtonProps } from './components/Button';
 export { Calendar, CalendarApplyButton, type CalendarApplyButtonProps, CalendarBody, type CalendarBodyProps, CalendarContent, type CalendarContentProps, type CalendarContextValue, CalendarDayName, CalendarFooter, CalendarFooterControls, type CalendarFooterControlsProps, type CalendarFooterProps, CalendarGrid, CalendarGrids, type CalendarGridsProps, CalendarHeader, CalendarInputHeader, type CalendarInputHeaderProps, CalendarKeyboardHints, type CalendarKeyboardHintsProps, CalendarPresetItem, CalendarPresets, type CalendarPresetsProps, type CalendarProps, CalendarProvider, CalendarResetButton, type CalendarResetButtonProps, CalendarTrigger, type CalendarTriggerProps, type CalendarType, DAY_NAMES, type DateRangePreset, type DateValue, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, type PresetConfig, type PresetValue, useCalendarContext, } from './components/Calendar';
 export { Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, cardVariants, } from './components/Card';
@@ -45,7 +46,9 @@ export { NumericBadge, type NumericBadgeProps, } from './components/NumericBadge
 export { OverflowTooltip, OverflowTooltipContent, type OverflowTooltipContentProps, type OverflowTooltipProps, } from './components/OverflowTooltip';
 export { type CopyFormatData, formatAsFilter, ParameterPath, type ParameterPathProps, } from './components/ParameterPath';
 export { Popover, PopoverContent, PopoverTrigger } from './components/Popover';
+export { type BreadcrumbSegment, findDrillNode, findFirstLinkPath, type MatchNavResult, matchNav, type NavConfig, type NavConfigDrill, type NavConfigGroup, type NavConfigLink, type NavConfigNode, type NavStackEntry, ProductNav, ProductNavBreadcrumbs, type ProductNavContextValue, ProductNavPanel, type ProductNavProps, type UseProductNavResult, useProductNav, useProductNavContext, } from './components/ProductNav';
 export { Radio, RadioDescription, type RadioDescriptionProps, RadioGroup, type RadioGroupProps, RadioIndicator, RadioLabel, type RadioLabelProps, type RadioProps, } from './components/Radio';
+export { RemoteShell, RemoteShellBreadcrumb, type RemoteShellBreadcrumbProps, RemoteShellContent, type RemoteShellContentProps, RemoteShellPanel, type RemoteShellPanelProps, type RemoteShellProps, } from './components/RemoteShell';
 export { getResponseCodeCategory, RESPONSE_CODE_COLOR, ResponseCode, type ResponseCodeCategory, type ResponseCodeProps, } from './components/ResponseCode';
 export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
 export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';

package/dist/index.js

@@ -4,6 +4,7 @@ import { Alert, AlertClose, AlertContent, AlertControls, AlertDescription, Alert
 import { AppShell, AppShellHeader, AppShellRail, AppShellRemote } from "./components/AppShell/index.js";
 import { Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue } from "./components/Attribute/index.js";
 import { Badge } from "./components/Badge/index.js";
+import { Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator } from "./components/Breadcrumbs/index.js";
 import { Button } from "./components/Button/index.js";
 import { Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, MONTH_NAMES, useCalendarContext } from "./components/Calendar/index.js";
 import { Card, CardContent, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/Card/index.js";
@@ -34,7 +35,9 @@ import { NumericBadge } from "./components/NumericBadge/index.js";
 import { OverflowTooltip, OverflowTooltipContent } from "./components/OverflowTooltip/index.js";
 import { ParameterPath, formatAsFilter } from "./components/ParameterPath/index.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./components/Popover/index.js";
+import { ProductNav, ProductNavBreadcrumbs, ProductNavPanel, findDrillNode, findFirstLinkPath, matchNav, useProductNav, useProductNavContext } from "./components/ProductNav/index.js";
 import { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from "./components/Radio/index.js";
+import { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel } from "./components/RemoteShell/index.js";
 import { RESPONSE_CODE_COLOR, ResponseCode, getResponseCodeCategory } from "./components/ResponseCode/index.js";
 import { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "./components/ScrollArea/index.js";
 import { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator } from "./components/SegmentedControl/index.js";
@@ -59,4 +62,4 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/in
 import { TopHeader, TopHeaderActions, TopHeaderLogo } from "./components/TopHeader/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, ParameterPath, Popover, PopoverContent, PopoverTrigger, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useTestId, useTheme, useTour, waitForStepEvent };
+export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, ParameterPath, Popover, PopoverContent, PopoverTrigger, ProductNav, ProductNavBreadcrumbs, ProductNavPanel, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findDrillNode, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, matchNav, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useProductNav, useProductNavContext, useTestId, useTheme, useTour, waitForStepEvent };