@shipfox/react-ui 0.21.0 → 0.23.0

package/dist/components/dashboard/toolbar/filter-button.js

@@ -1,73 +1,66 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from '../../../components/button/index.js';
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
-import { Icon } from '../../../components/icon/index.js';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
 import { Kbd } from '../../../components/kbd/index.js';
 import { useEffect, useState } from 'react';
 import { cn } from '../../../utils/cn.js';
-const defaultFilters = [
-    {
-        id: 'success',
-        label: 'Success',
-        checked: false
-    },
-    {
-        id: 'failed',
-        label: 'Failed',
-        checked: false
-    },
-    {
-        id: 'neutral',
-        label: 'Neutral',
-        checked: false
-    },
-    {
-        id: 'flaked',
-        label: 'Flaked',
-        checked: false
-    },
-    {
-        id: 'running',
-        label: 'Running',
-        checked: false
-    }
-];
-export function FilterButton({ filters: controlledFilters, onFiltersChange, className }) {
-    const [internalFilters, setInternalFilters] = useState(defaultFilters);
+import { RESOURCE_TYPE_LABELS, RESOURCE_TYPE_OPTIONS } from '../context/index.js';
+export function FilterButton({ value, onValueChange, className, ...props }) {
     const [open, setOpen] = useState(false);
-    const filters = controlledFilters ?? internalFilters;
-    const handleFilterChange = (filterId, checked)=>{
-        const updatedFilters = filters.map((f)=>f.id === filterId ? {
-                ...f,
-                checked
-            } : f);
-        if (onFiltersChange) {
-            onFiltersChange(updatedFilters);
-        } else {
-            setInternalFilters(updatedFilters);
+    const filterOptions = RESOURCE_TYPE_OPTIONS.filter((opt)=>!opt.disabled);
+    const normalizedValue = filterOptions.some((opt)=>opt.id === value) ? value : filterOptions[0]?.id ?? value;
+    const selectedLabel = RESOURCE_TYPE_LABELS[normalizedValue] ?? normalizedValue;
+    const selectedIndex = filterOptions.findIndex((opt)=>opt.id === normalizedValue);
+    const handleFilterChange = (filterId)=>{
+        onValueChange(filterId);
+        setOpen(false);
+    };
+    const indicator = (index)=>{
+        if (index === 0) {
+            return /*#__PURE__*/ _jsx("span", {
+                className: "size-[8.3px] rotate-45 border border-tag-purple-icon"
+            });
+        }
+        return /*#__PURE__*/ _jsx("span", {
+            className: "size-10 rounded-full border border-tag-neutral-icon"
+        });
+    };
+    const calculatePaddingLeft = (index)=>{
+        switch(index){
+            case 0:
+                return 10;
+            case 1:
+                return 28;
+            case 2:
+                return 48;
+            default:
+                return 0;
+        }
+    };
+    const calculateLeftPosition = (index)=>{
+        switch(index){
+            case 0:
+                return 0;
+            case 1:
+                return 16;
+            case 2:
+                return 34;
+            default:
+                return 0;
         }
     };
-    const activeCount = filters.filter((f)=>f.checked).length;
-    // Keyboard shortcut handler for "F" key
     useEffect(()=>{
         const handleKeyDown = (event)=>{
-            // Check if key is 'f' or 'F'
-            if (event.key !== 'f' && event.key !== 'F') {
-                return;
-            }
-            // Ignore if event is from input, textarea, or contentEditable
-            const target = event.target;
-            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
-                return;
+            if (event.key === 'ArrowDown' && (event.metaKey || event.ctrlKey) && event.target instanceof HTMLElement && ![
+                'INPUT',
+                'TEXTAREA'
+            ].includes(event.target.tagName) && !event.target.isContentEditable) {
+                event.preventDefault();
+                setOpen(true);
             }
-            // Open the dropdown
-            event.preventDefault();
-            setOpen(true);
         };
         window.addEventListener('keydown', handleKeyDown);
-        return ()=>{
-            window.removeEventListener('keydown', handleKeyDown);
-        };
+        return ()=>window.removeEventListener('keydown', handleKeyDown);
     }, []);
     return /*#__PURE__*/ _jsxs(DropdownMenu, {
         open: open,
@@ -78,25 +71,35 @@ export function FilterButton({ filters: controlledFilters, onFiltersChange, clas
                 children: /*#__PURE__*/ _jsxs(Button, {
                     variant: "secondary",
                     size: "sm",
-                    className: cn(className),
+                    className: cn('px-10', className),
+                    ...props,
                     children: [
-                        /*#__PURE__*/ _jsx(Icon, {
-                            name: "filterLine",
-                            className: "size-16 text-foreground-neutral-subtle block md:hidden"
-                        }),
                         /*#__PURE__*/ _jsxs("span", {
                             className: "hidden md:inline-flex items-center gap-6",
                             children: [
-                                "Filter ",
+                                /*#__PURE__*/ _jsxs("span", {
+                                    className: "inline-flex items-center gap-8",
+                                    children: [
+                                        selectedIndex >= 0 && indicator(selectedIndex),
+                                        /*#__PURE__*/ _jsx("span", {
+                                            children: selectedLabel
+                                        })
+                                    ]
+                                }),
                                 /*#__PURE__*/ _jsx(Kbd, {
                                     className: "h-16 min-w-16 px-4 text-[10px]",
-                                    children: "F"
+                                    children: "⌘↓"
                                 })
                             ]
                         }),
-                        activeCount > 0 && /*#__PURE__*/ _jsx("span", {
-                            className: "size-16 rounded-full bg-foreground-highlight-interactive text-[10px] font-medium text-foreground-neutral-on-color flex items-center justify-center",
-                            children: activeCount
+                        /*#__PURE__*/ _jsxs("span", {
+                            className: "flex md:hidden items-center gap-8",
+                            children: [
+                                selectedIndex >= 0 && indicator(selectedIndex),
+                                /*#__PURE__*/ _jsx("span", {
+                                    children: selectedLabel
+                                })
+                            ]
                         })
                     ]
                 })
@@ -106,15 +109,45 @@ export function FilterButton({ filters: controlledFilters, onFiltersChange, clas
                 className: "w-200",
                 children: [
                     /*#__PURE__*/ _jsx(DropdownMenuLabel, {
-                        children: "Status"
+                        className: "text-foreground-neutral-muted text-xs",
+                        children: "CI Structure"
                     }),
-                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
-                    filters.map((filter)=>/*#__PURE__*/ _jsx(DropdownMenuCheckboxItem, {
-                            checked: filter.checked,
-                            onCheckedChange: (checked)=>handleFilterChange(filter.id, checked),
-                            closeOnSelect: false,
-                            children: filter.label
-                        }, filter.id))
+                    /*#__PURE__*/ _jsx(DropdownMenuGroup, {
+                        children: filterOptions.map((option, index)=>{
+                            return /*#__PURE__*/ _jsxs(DropdownMenuItem, {
+                                onClick: ()=>handleFilterChange(option.id),
+                                style: {
+                                    paddingLeft: calculatePaddingLeft(index)
+                                },
+                                className: cn('relative hover:text-foreground-neutral-base', selectedIndex === index && 'text-foreground-neutral-base'),
+                                children: [
+                                    index !== 0 && /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "absolute top-0 bottom-0 w-px bg-border-neutral-strong h-16",
+                                                style: {
+                                                    left: calculateLeftPosition(index)
+                                                }
+                                            }),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                className: "absolute top-16 bottom-0 w-6 bg-border-neutral-strong h-px",
+                                                style: {
+                                                    left: calculateLeftPosition(index)
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        className: "inline-flex items-center gap-8 ml-2",
+                                        children: [
+                                            indicator(index),
+                                            option.label
+                                        ]
+                                    })
+                                ]
+                            }, option.id);
+                        })
+                    })
                 ]
             })
         ]

package/dist/components/dashboard/toolbar/page-toolbar.d.ts

@@ -5,26 +5,11 @@
  * time period selector, and playback controls.
  */
 import type { ComponentProps, ReactNode } from 'react';
-import type { TimePeriod } from '../context';
 export interface PageToolbarProps extends Omit<ComponentProps<'div'>, 'title' | 'children'> {
     /**
      * The title to display in the toolbar header
      */
     title: ReactNode;
-    /**
-     * Last updated timestamp text
-     * @default '13s ago'
-     */
-    lastUpdated?: string;
-    /**
-     * Current time period value
-     * @default '2days'
-     */
-    timePeriod?: TimePeriod;
-    /**
-     * Callback when time period changes
-     */
-    onTimePeriodChange?: (value: TimePeriod) => void;
     /**
      * Callback when refresh button is clicked
      */
@@ -54,22 +39,25 @@ export interface PageToolbarProps extends Omit<ComponentProps<'div'>, 'title' |
      * Children to render (e.g., mobile menu button)
      */
     children?: ReactNode;
+    /**
+     * Custom container for the interval selector popover
+     */
+    intervalSelectorContainer?: HTMLElement | null;
 }
 /**
  * Generic Page Toolbar
  *
  * A flexible toolbar component that can be used across different dashboard pages.
- * Supports title customization, time period selection, refresh indicator, and playback controls.
+ * Supports title customization, time interval selection, refresh indicator, and playback controls.
+ * Uses DashboardContext for interval state management.
  *
  * @example
  * ```tsx
  * <PageToolbar
  *   title="Analytics"
- *   timePeriod="2days"
- *   onTimePeriodChange={setTimePeriod}
  *   onRefresh={handleRefresh}
  * />
  * ```
  */
-export declare function PageToolbar({ title, lastUpdated, timePeriod, onTimePeriodChange, onRefresh, showPlaybackControls, onRewind, onPlay, onSpeed, actions, children, className, ...props }: PageToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function PageToolbar({ title, onRefresh, showPlaybackControls, onRewind, onPlay, onSpeed, actions, children, intervalSelectorContainer, className, ...props }: PageToolbarProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=page-toolbar.d.ts.map

package/dist/components/dashboard/toolbar/page-toolbar.js

@@ -7,26 +7,26 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */ import { Button } from '../../../components/button/index.js';
 import { ButtonGroup, ButtonGroupSeparator } from '../../../components/button-group/index.js';
 import { Icon } from '../../../components/icon/index.js';
-import { Kbd } from '../../../components/kbd/index.js';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../components/select/index.js';
+import { IntervalSelector } from '../../../components/interval-selector/index.js';
 import { Header, Text } from '../../../components/typography/index.js';
 import { cn } from '../../../utils/cn.js';
+import { useDashboardContext } from '../context/index.js';
 /**
  * Generic Page Toolbar
  *
  * A flexible toolbar component that can be used across different dashboard pages.
- * Supports title customization, time period selection, refresh indicator, and playback controls.
+ * Supports title customization, time interval selection, refresh indicator, and playback controls.
+ * Uses DashboardContext for interval state management.
  *
  * @example
  * ```tsx
  * <PageToolbar
  *   title="Analytics"
- *   timePeriod="2days"
- *   onTimePeriodChange={setTimePeriod}
  *   onRefresh={handleRefresh}
  * />
  * ```
- */ export function PageToolbar({ title, lastUpdated = '13s ago', timePeriod = '2days', onTimePeriodChange, onRefresh, showPlaybackControls = true, onRewind, onPlay, onSpeed, actions, children, className, ...props }) {
+ */ export function PageToolbar({ title, onRefresh, showPlaybackControls = true, onRewind, onPlay, onSpeed, actions, children, intervalSelectorContainer, className, ...props }) {
+    const { selection, setSelection, lastUpdated } = useDashboardContext();
     return /*#__PURE__*/ _jsxs("div", {
         className: cn('flex flex-wrap gap-12 items-center justify-between px-12 py-20 md:px-24 md:py-40', className),
         ...props,
@@ -66,99 +66,11 @@ import { cn } from '../../../utils/cn.js';
                             ]
                         })
                     }),
-                    /*#__PURE__*/ _jsxs(Select, {
-                        value: timePeriod,
-                        onValueChange: onTimePeriodChange,
-                        children: [
-                            /*#__PURE__*/ _jsx(SelectTrigger, {
-                                className: "w-full md:w-280",
-                                children: /*#__PURE__*/ _jsx("div", {
-                                    className: "flex items-center gap-8 flex-1 min-w-0",
-                                    children: /*#__PURE__*/ _jsx(SelectValue, {
-                                        placeholder: "Select time range"
-                                    })
-                                })
-                            }),
-                            /*#__PURE__*/ _jsxs(SelectContent, {
-                                children: [
-                                    /*#__PURE__*/ _jsx(SelectItem, {
-                                        value: "1hour",
-                                        children: /*#__PURE__*/ _jsxs("div", {
-                                            className: "flex items-center gap-8",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Kbd, {
-                                                    className: "h-16",
-                                                    children: "1h"
-                                                }),
-                                                /*#__PURE__*/ _jsx("span", {
-                                                    children: "Past 1 Hour"
-                                                })
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx(SelectItem, {
-                                        value: "1day",
-                                        children: /*#__PURE__*/ _jsxs("div", {
-                                            className: "flex items-center gap-8",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Kbd, {
-                                                    className: "h-16",
-                                                    children: "1d"
-                                                }),
-                                                /*#__PURE__*/ _jsx("span", {
-                                                    children: "Past 1 Day"
-                                                })
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx(SelectItem, {
-                                        value: "2days",
-                                        children: /*#__PURE__*/ _jsxs("div", {
-                                            className: "flex items-center gap-8",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Kbd, {
-                                                    className: "h-16",
-                                                    children: "2d"
-                                                }),
-                                                /*#__PURE__*/ _jsx("span", {
-                                                    children: "Past 2 Days"
-                                                })
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx(SelectItem, {
-                                        value: "7days",
-                                        children: /*#__PURE__*/ _jsxs("div", {
-                                            className: "flex items-center gap-8",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Kbd, {
-                                                    className: "h-16",
-                                                    children: "7d"
-                                                }),
-                                                /*#__PURE__*/ _jsx("span", {
-                                                    children: "Past 7 Days"
-                                                })
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx(SelectItem, {
-                                        value: "30days",
-                                        children: /*#__PURE__*/ _jsxs("div", {
-                                            className: "flex items-center gap-8",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(Kbd, {
-                                                    className: "h-16",
-                                                    children: "30d"
-                                                }),
-                                                /*#__PURE__*/ _jsx("span", {
-                                                    children: "Past 30 Days"
-                                                })
-                                            ]
-                                        })
-                                    })
-                                ]
-                            })
-                        ]
+                    /*#__PURE__*/ _jsx(IntervalSelector, {
+                        selection: selection,
+                        onSelectionChange: setSelection,
+                        container: intervalSelectorContainer,
+                        className: "w-[75vw] md:w-350"
                     }),
                     showPlaybackControls && /*#__PURE__*/ _jsxs(ButtonGroup, {
                         "aria-label": "Playback controls",

package/dist/components/dashboard/toolbar/toolbar-actions.js

@@ -26,14 +26,14 @@ import { ViewDropdown } from './view-dropdown.js';
  * </ToolbarActions>
  * ```
  */ export function ToolbarActions({ showFilter = true, showSearch = true, showView = true, searchPlaceholder = 'Try: job name, status, pipeline...', className, children, ...props }) {
-    const { setSearchQuery, filters, setFilters, columns, setColumns } = useDashboardContext();
+    const { setSearchQuery, resourceType, setResourceType, columns, setColumns } = useDashboardContext();
     return /*#__PURE__*/ _jsxs("div", {
         className: cn('flex items-start md:items-center gap-8 md:gap-12', className),
         ...props,
         children: [
             showFilter && /*#__PURE__*/ _jsx(FilterButton, {
-                filters: filters,
-                onFiltersChange: setFilters
+                value: resourceType,
+                onValueChange: setResourceType
             }),
             showSearch && /*#__PURE__*/ _jsx(ToolbarSearch, {
                 placeholder: searchPlaceholder,

package/dist/components/index.d.ts

@@ -23,6 +23,7 @@ export * from './form';
 export * from './icon';
 export * from './inline-tips';
 export * from './input';
+export * from './interval-selector';
 export * from './item';
 export * from './kbd';
 export * from './label';

package/dist/components/index.js

@@ -23,6 +23,7 @@ export * from './form/index.js';
 export * from './icon/index.js';
 export * from './inline-tips/index.js';
 export * from './input/index.js';
+export * from './interval-selector/index.js';
 export * from './item/index.js';
 export * from './kbd/index.js';
 export * from './label/index.js';

package/dist/components/interval-selector/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './use-interval-selector';
+export * from './use-interval-selector-input';
+export * from './use-interval-selector-navigation';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/interval-selector/hooks/index.js

@@ -0,0 +1,5 @@
+export * from './use-interval-selector.js';
+export * from './use-interval-selector-input.js';
+export * from './use-interval-selector-navigation.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/interval-selector/hooks/use-interval-selector-input.d.ts

@@ -0,0 +1,30 @@
+import type { IntervalSelection } from '../types';
+export interface UseNewIntervalSelectorInputProps {
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onFocus?: () => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onSelect: (selection: IntervalSelection) => void;
+    selection: IntervalSelection;
+    isNavigating: boolean;
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    isFocused: boolean;
+    setIsFocused: (isFocused: boolean) => void;
+}
+export declare function useIntervalSelectorInput({ onChange: onChangeProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, onBlur: onBlurProp, onSelect, selection, isNavigating, inputRef, isFocused, setIsFocused, }: UseNewIntervalSelectorInputProps): {
+    value: string;
+    shouldShake: boolean;
+    isFocused: boolean;
+    isInvalid: boolean;
+    displayValue: string;
+    shortcutValue: string;
+    setValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onFocus: () => void;
+    onMouseDown: () => void;
+    onMouseUp: () => void;
+    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+};
+//# sourceMappingURL=use-interval-selector-input.d.ts.map

package/dist/components/interval-selector/hooks/use-interval-selector-input.js

@@ -0,0 +1,125 @@
+import { useCallback, useRef, useState } from 'react';
+import { parseTextDurationShortcut, parseTextInterval } from '../../../utils/date.js';
+import { formatSelection, formatSelectionForInput, formatShortcut } from '../utils/format.js';
+export function useIntervalSelectorInput({ onChange: onChangeProp, onKeyDown: onKeyDownProp, onFocus: onFocusProp, onBlur: onBlurProp, onSelect, selection, isNavigating, inputRef, isFocused, setIsFocused }) {
+    const [value, setValue] = useState('');
+    const [isInvalid, setIsInvalid] = useState(false);
+    const [shouldShake, setShouldShake] = useState(false);
+    const shakeTimeoutRef = useRef(null);
+    const isMouseDownOnInputRef = useRef(false);
+    const onChange = useCallback((e)=>{
+        const newValue = e.target.value;
+        setValue(newValue);
+        const shortcut = parseTextDurationShortcut(newValue);
+        const interval = parseTextInterval(newValue);
+        const isValid = shortcut || interval || newValue.trim() === '';
+        setIsInvalid(!isValid);
+        onChangeProp?.(e);
+    }, [
+        onChangeProp
+    ]);
+    const triggerShakeAnimation = useCallback(()=>{
+        if (shakeTimeoutRef.current) clearTimeout(shakeTimeoutRef.current);
+        setIsInvalid(true);
+        setShouldShake(true);
+        shakeTimeoutRef.current = setTimeout(()=>{
+            setShouldShake(false);
+            shakeTimeoutRef.current = null;
+        }, 500);
+    }, []);
+    const handleConfirmInput = useCallback(()=>{
+        const shortcut = parseTextDurationShortcut(value);
+        if (shortcut) return onSelect({
+            type: 'relative',
+            duration: shortcut
+        });
+        const interval = parseTextInterval(value);
+        if (interval) return onSelect({
+            type: 'interval',
+            interval
+        });
+        triggerShakeAnimation();
+    }, [
+        value,
+        onSelect,
+        triggerShakeAnimation
+    ]);
+    const onKeyDown = useCallback((e)=>{
+        if (!isNavigating && e.key === 'Enter') {
+            e.preventDefault();
+            handleConfirmInput();
+        }
+        onKeyDownProp?.(e);
+    }, [
+        isNavigating,
+        handleConfirmInput,
+        onKeyDownProp
+    ]);
+    const onFocus = useCallback(()=>{
+        setIsFocused(true);
+        setValue(formatSelectionForInput(selection));
+        setIsInvalid(false);
+        requestAnimationFrame(()=>{
+            inputRef.current?.select();
+        });
+        onFocusProp?.();
+    }, [
+        selection,
+        onFocusProp,
+        inputRef,
+        setIsFocused
+    ]);
+    const onMouseDown = useCallback(()=>{
+        isMouseDownOnInputRef.current = true;
+    }, []);
+    const onMouseUp = useCallback(()=>{
+        setTimeout(()=>{
+            isMouseDownOnInputRef.current = false;
+        });
+    }, []);
+    const onBlur = useCallback((e)=>{
+        const relatedTarget = e.relatedTarget;
+        if (relatedTarget?.closest('[role="dialog"]')) {
+            return;
+        }
+        if (isMouseDownOnInputRef.current) {
+            requestAnimationFrame(()=>{
+                inputRef.current?.focus();
+            });
+        }
+        setIsFocused(false);
+        onBlurProp?.(e);
+    }, [
+        onBlurProp,
+        inputRef,
+        setIsFocused
+    ]);
+    const displayValue = formatSelection({
+        selection,
+        isFocused: isFocused,
+        inputValue: value
+    });
+    const shortcutValue = formatShortcut({
+        selection,
+        inputValue: value,
+        isFocused: isFocused
+    });
+    return {
+        value,
+        shouldShake,
+        isFocused,
+        isInvalid,
+        displayValue,
+        shortcutValue,
+        setValue,
+        onChange,
+        onKeyDown,
+        onFocus,
+        onMouseDown,
+        onMouseUp,
+        onBlur,
+        inputRef
+    };
+}
+
+//# sourceMappingURL=use-interval-selector-input.js.map

package/dist/components/interval-selector/hooks/use-interval-selector-navigation.d.ts

@@ -0,0 +1,21 @@
+import type { IntervalSelection, IntervalSuggestion, RelativeSuggestion } from '../types';
+interface UseIntervalSelectorNavigationProps {
+    relativeSuggestions: RelativeSuggestion[];
+    intervalSuggestions: IntervalSuggestion[];
+    highlightedIndex: number;
+    setHighlightedIndex: (index: number) => void;
+    popoverOpen: boolean;
+    calendarOpen: boolean;
+    onOpenCalendar: () => void;
+    onSelect: (selection: IntervalSelection) => void;
+}
+export declare function useIntervalSelectorNavigation({ relativeSuggestions, intervalSuggestions, highlightedIndex, setHighlightedIndex, popoverOpen, calendarOpen, onOpenCalendar, onSelect, }: UseIntervalSelectorNavigationProps): {
+    allNavigableItems: (RelativeSuggestion | IntervalSuggestion | {
+        type: "calendar";
+        label: string;
+    })[];
+    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    isNavigating: boolean;
+};
+export {};
+//# sourceMappingURL=use-interval-selector-navigation.d.ts.map