@shipfox/react-ui 0.22.0 → 0.24.0

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

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

@@ -0,0 +1,58 @@
+import { useCallback, useMemo } from 'react';
+export function useIntervalSelectorNavigation({ relativeSuggestions, intervalSuggestions, highlightedIndex, setHighlightedIndex, popoverOpen, calendarOpen, onOpenCalendar, onSelect }) {
+    const allNavigableItems = useMemo(()=>[
+            ...relativeSuggestions,
+            ...intervalSuggestions,
+            {
+                type: 'calendar',
+                label: 'Select from calendar'
+            }
+        ], [
+        relativeSuggestions,
+        intervalSuggestions
+    ]);
+    const canNavigate = popoverOpen && !calendarOpen;
+    const currentIndex = highlightedIndex;
+    const isNavigating = canNavigate && currentIndex >= 0 && currentIndex < allNavigableItems.length;
+    const onKeyDown = useCallback((e)=>{
+        if (!canNavigate) return;
+        const items = allNavigableItems;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+            setHighlightedIndex(nextIndex);
+            return;
+        }
+        if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            const nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+            setHighlightedIndex(nextIndex);
+            return;
+        }
+        if (e.key === 'Enter' && isNavigating) {
+            e.preventDefault();
+            const item = items[currentIndex];
+            if (item.type === 'calendar') {
+                onOpenCalendar();
+            } else {
+                onSelect(item);
+            }
+            return;
+        }
+    }, [
+        canNavigate,
+        isNavigating,
+        currentIndex,
+        allNavigableItems,
+        setHighlightedIndex,
+        onOpenCalendar,
+        onSelect
+    ]);
+    return {
+        allNavigableItems,
+        onKeyDown,
+        isNavigating
+    };
+}
+
+//# sourceMappingURL=use-interval-selector-navigation.js.map

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

@@ -0,0 +1,25 @@
+import type { DismissableLayerProps } from '@radix-ui/react-dismissable-layer';
+import type { IntervalSelectorProps } from '../interval-selector';
+import type { IntervalSelection, IntervalSuggestion, RelativeSuggestion } from '../types';
+export interface UseIntervalSelectorProps extends Pick<IntervalSelectorProps, 'onSelectionChange'> {
+    relativeSuggestions: RelativeSuggestion[];
+    intervalSuggestions: IntervalSuggestion[];
+}
+export declare function useIntervalSelector({ onSelectionChange, relativeSuggestions, intervalSuggestions, }: UseIntervalSelectorProps): {
+    onSelect: (selection: IntervalSelection) => void;
+    popoverOpen: boolean;
+    calendarOpen: boolean;
+    highlightedIndex: number;
+    inputRef: import("react").RefObject<HTMLInputElement | null>;
+    onFocus: () => void;
+    onBlur: () => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onOpenCalendar: () => void;
+    onChange: () => void;
+    onInteractOutside: (e: Parameters<Required<DismissableLayerProps>["onInteractOutside"]>[0]) => void;
+    closeAll: () => void;
+    isNavigating: boolean;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+};
+//# sourceMappingURL=use-interval-selector.d.ts.map

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

@@ -0,0 +1,75 @@
+import { useCallback, useRef, useState } from 'react';
+import { useIntervalSelectorNavigation } from './use-interval-selector-navigation.js';
+export function useIntervalSelector({ onSelectionChange, relativeSuggestions, intervalSuggestions }) {
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [calendarOpen, setCalendarOpen] = useState(false);
+    const [highlightedIndex, setHighlightedIndex] = useState(-1);
+    const [isFocused, setIsFocused] = useState(false);
+    const isSelectingRef = useRef(false);
+    const inputRef = useRef(null);
+    const closeAll = useCallback(()=>{
+        setPopoverOpen(false);
+        inputRef.current?.blur();
+        setCalendarOpen(false);
+        setHighlightedIndex(-1);
+        setIsFocused(false);
+    }, []);
+    const onSelect = useCallback((selection)=>{
+        isSelectingRef.current = true;
+        onSelectionChange(selection);
+        closeAll();
+    }, [
+        closeAll,
+        onSelectionChange
+    ]);
+    const onFocus = useCallback(()=>{
+        setPopoverOpen(true);
+        setHighlightedIndex(-1);
+    }, []);
+    const onBlur = useCallback(()=>{
+        if (!calendarOpen) setPopoverOpen(false);
+    }, [
+        calendarOpen
+    ]);
+    const onOpenCalendar = useCallback(()=>{
+        setCalendarOpen(true);
+    }, []);
+    const { onKeyDown, isNavigating } = useIntervalSelectorNavigation({
+        relativeSuggestions,
+        intervalSuggestions,
+        highlightedIndex,
+        setHighlightedIndex,
+        popoverOpen,
+        calendarOpen,
+        onOpenCalendar,
+        onSelect
+    });
+    const onInteractOutside = useCallback((e)=>{
+        e.preventDefault();
+        const target = e.target;
+        const isClickOnPopover = inputRef.current && (inputRef.current.contains(target) || target.closest('[data-radix-popover-trigger]'));
+        if (isClickOnPopover) return;
+        closeAll();
+    }, [
+        closeAll
+    ]);
+    return {
+        onSelect,
+        popoverOpen,
+        calendarOpen,
+        highlightedIndex,
+        inputRef,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        onOpenCalendar,
+        onChange: ()=>setHighlightedIndex(-1),
+        onInteractOutside,
+        closeAll,
+        isNavigating,
+        isFocused,
+        setIsFocused
+    };
+}
+
+//# sourceMappingURL=use-interval-selector.js.map

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

@@ -0,0 +1,3 @@
+export * from './interval-selector';
+export * from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,4 @@
+export * from './interval-selector.js';
+export * from './types.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/interval-selector/interval-selector-calendar.d.ts

@@ -0,0 +1,7 @@
+import type { IntervalSelection } from './types';
+interface IntervalSelectorCalendarProps {
+    onSelect: (selection: IntervalSelection) => void;
+}
+export declare function IntervalSelectorCalendar({ onSelect }: IntervalSelectorCalendarProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=interval-selector-calendar.d.ts.map

package/dist/components/interval-selector/interval-selector-calendar.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Calendar } from '../../components/calendar/index.js';
+import { endOfDay, format, startOfDay } from 'date-fns';
+import { useCallback, useState } from 'react';
+export function IntervalSelectorCalendar({ onSelect }) {
+    const [selectedRange, setSelectedRange] = useState(undefined);
+    const handleSelect = useCallback((_, selectedDay)=>{
+        if (!selectedDay) return setSelectedRange(undefined);
+        if (!selectedRange?.from) return setSelectedRange({
+            from: selectedDay,
+            to: undefined
+        });
+        const start = selectedDay < selectedRange.from ? startOfDay(selectedDay) : startOfDay(selectedRange.from);
+        const end = selectedDay < selectedRange.from ? endOfDay(selectedRange.from) : endOfDay(selectedDay);
+        onSelect({
+            type: 'interval',
+            interval: {
+                start,
+                end
+            }
+        });
+        return setSelectedRange(undefined);
+    }, [
+        onSelect,
+        selectedRange
+    ]);
+    return /*#__PURE__*/ _jsx(Calendar, {
+        mode: "range",
+        selected: selectedRange,
+        onSelect: handleSelect,
+        numberOfMonths: 1,
+        formatters: {
+            formatWeekdayName: (date)=>format(date, 'EEEEE')
+        },
+        disabled: {
+            after: new Date()
+        },
+        classNames: {
+            root: 'relative w-full flex justify-center items-center',
+            months: 'w-full',
+            month_grid: 'flex flex-col justify-center items-center',
+            nav: 'flex items-center gap-4 absolute top-16 left-0 w-full z-10'
+        }
+    });
+}
+
+//# sourceMappingURL=interval-selector-calendar.js.map

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

@@ -0,0 +1,8 @@
+import { type UseNewIntervalSelectorInputProps } from './hooks/use-interval-selector-input';
+type IntervalSelectorInputProps = {
+    className?: string;
+    inputClassName?: string;
+} & UseNewIntervalSelectorInputProps;
+export declare function IntervalSelectorInput({ className, inputClassName, ...props }: IntervalSelectorInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=interval-selector-input.d.ts.map

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from '../../components/input/index.js';
+import { Kbd } from '../../components/kbd/index.js';
+import { PopoverTrigger } from '../../components/popover/index.js';
+import { cn } from '../../utils/cn.js';
+import { useIntervalSelectorInput } from './hooks/use-interval-selector-input.js';
+export function IntervalSelectorInput({ className, inputClassName, ...props }) {
+    const { displayValue, shortcutValue, isFocused, isInvalid, shouldShake, onChange, onKeyDown, onFocus, onBlur, onMouseDown, onMouseUp, inputRef } = useIntervalSelectorInput(props);
+    return /*#__PURE__*/ _jsx(PopoverTrigger, {
+        asChild: true,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: cn('relative', className, shouldShake && 'animate-shake'),
+            children: /*#__PURE__*/ _jsx(Input, {
+                ref: inputRef,
+                value: displayValue,
+                onChange: isFocused ? onChange : undefined,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                onMouseDown: onMouseDown,
+                onMouseUp: onMouseUp,
+                onKeyDown: onKeyDown,
+                readOnly: !isFocused,
+                "aria-invalid": isInvalid && isFocused,
+                iconLeft: /*#__PURE__*/ _jsx(Kbd, {
+                    className: "h-16 shrink-0 min-w-36",
+                    children: shortcutValue
+                }),
+                className: cn('w-full pl-50', inputClassName)
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=interval-selector-input.js.map

package/dist/components/interval-selector/interval-selector-suggestions.d.ts

@@ -0,0 +1,11 @@
+import type { IntervalSelection, IntervalSuggestion, RelativeSuggestion } from './types';
+interface IntervalSelectorSuggestionsProps {
+    relativeSuggestions: RelativeSuggestion[];
+    intervalSuggestions: IntervalSuggestion[];
+    onSelect: (selection: IntervalSelection) => void;
+    onOpenCalendar: () => void;
+    highlightedIndex: number;
+}
+export declare function IntervalSelectorSuggestions({ relativeSuggestions, intervalSuggestions, onSelect, onOpenCalendar, highlightedIndex, }: IntervalSelectorSuggestionsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=interval-selector-suggestions.d.ts.map