@shipfox/react-ui 0.22.0 → 0.23.0

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../components/button/index.js';
+import { Icon } from '../../components/icon/index.js';
+import { Kbd } from '../../components/kbd/index.js';
+import { Label } from '../../components/label/index.js';
+import { useEffect, useRef } from 'react';
+import { cn } from '../../utils/cn.js';
+import { generateDurationShortcut, humanizeDurationToNow } from '../../utils/date.js';
+export function IntervalSelectorSuggestions({ relativeSuggestions, intervalSuggestions, onSelect, onOpenCalendar, highlightedIndex }) {
+    const pastIntervalsStartIndex = 0;
+    const calendarIntervalsStartIndex = relativeSuggestions.length;
+    const calendarButtonIndex = calendarIntervalsStartIndex + intervalSuggestions.length;
+    const itemRefs = useRef([]);
+    useEffect(()=>{
+        if (highlightedIndex >= 0 && itemRefs.current[highlightedIndex]) {
+            itemRefs.current[highlightedIndex]?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'nearest'
+            });
+        }
+    }, [
+        highlightedIndex
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex flex-col gap-8",
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex flex-col gap-4 p-4",
+                children: relativeSuggestions.map((option, index)=>{
+                    const itemIndex = pastIntervalsStartIndex + index;
+                    const isHighlighted = highlightedIndex === itemIndex;
+                    const shortcut = generateDurationShortcut(option.duration);
+                    const label = humanizeDurationToNow(option.duration);
+                    return /*#__PURE__*/ _jsxs(Button, {
+                        ref: (el)=>{
+                            itemRefs.current[itemIndex] = el;
+                        },
+                        type: "button",
+                        variant: "transparent",
+                        onClick: ()=>onSelect(option),
+                        className: cn('w-full text-foreground-neutral-subtle justify-start', isHighlighted && 'bg-background-button-transparent-hover'),
+                        children: [
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                className: "h-16 shrink-0 min-w-36",
+                                children: shortcut
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: label
+                            })
+                        ]
+                    }, shortcut);
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "border-t border-border-neutral-base-component flex flex-col gap-4 p-4",
+                children: [
+                    /*#__PURE__*/ _jsx(Label, {
+                        className: "px-8 py-4 text-xs leading-20 text-foreground-neutral-subtle select-none",
+                        children: "Calendar Time"
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "grid grid-cols-1 md:grid-cols-2 gap-4 [&>*:only-child]:md:col-span-2",
+                        children: intervalSuggestions.map((option, index)=>{
+                            const itemIndex = calendarIntervalsStartIndex + index;
+                            const isHighlighted = highlightedIndex === itemIndex;
+                            return /*#__PURE__*/ _jsx(Button, {
+                                ref: (el)=>{
+                                    itemRefs.current[itemIndex] = el;
+                                },
+                                type: "button",
+                                variant: "transparent",
+                                onClick: ()=>onSelect(option),
+                                className: cn('w-full text-foreground-neutral-subtle justify-start', isHighlighted && 'bg-background-button-transparent-hover'),
+                                children: /*#__PURE__*/ _jsx("span", {
+                                    children: option.label
+                                })
+                            }, option.label);
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "border-t border-border-neutral-base-component p-4",
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    ref: (el)=>{
+                        itemRefs.current[calendarButtonIndex] = el;
+                    },
+                    type: "button",
+                    variant: "transparent",
+                    onClick: onOpenCalendar,
+                    className: cn('w-full text-foreground-neutral-subtle justify-start', highlightedIndex === calendarButtonIndex && 'bg-background-button-transparent-hover'),
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            name: "calendar2Line",
+                            className: "size-16 shrink-0"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            children: "Select from calendar"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=interval-selector-suggestions.js.map

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

@@ -0,0 +1,12 @@
+import type { IntervalSelection, IntervalSuggestion, RelativeSuggestion } from './types';
+export interface IntervalSelectorProps {
+    selection: IntervalSelection;
+    onSelectionChange: (selection: IntervalSelection) => void;
+    container?: HTMLElement | null;
+    className?: string;
+    inputClassName?: string;
+    relativeSuggestions?: RelativeSuggestion[];
+    intervalSuggestions?: IntervalSuggestion[];
+}
+export declare function IntervalSelector({ selection, onSelectionChange, container, className, inputClassName, relativeSuggestions, intervalSuggestions, }: IntervalSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=interval-selector.d.ts.map

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Popover, PopoverContent } from '../../components/popover/index.js';
+import { useIntervalSelector } from './hooks/use-interval-selector.js';
+import { IntervalSelectorCalendar } from './interval-selector-calendar.js';
+import { IntervalSelectorInput } from './interval-selector-input.js';
+import { IntervalSelectorSuggestions } from './interval-selector-suggestions.js';
+import { defaultIntervalSuggestions, defaultRelativeSuggestions } from './utils/index.js';
+export function IntervalSelector({ selection, onSelectionChange, container, className, inputClassName, relativeSuggestions = defaultRelativeSuggestions, intervalSuggestions = defaultIntervalSuggestions }) {
+    const { onSelect, popoverOpen, calendarOpen, highlightedIndex, inputRef, isNavigating, isFocused, setIsFocused, onBlur, onFocus, onKeyDown, onChange, onOpenCalendar, closeAll, onInteractOutside } = useIntervalSelector({
+        onSelectionChange,
+        relativeSuggestions,
+        intervalSuggestions
+    });
+    return /*#__PURE__*/ _jsxs(Popover, {
+        open: popoverOpen,
+        children: [
+            /*#__PURE__*/ _jsx(IntervalSelectorInput, {
+                onSelect: onSelect,
+                selection: selection,
+                isNavigating: isNavigating,
+                className: className,
+                inputClassName: inputClassName,
+                onChange: onChange,
+                onKeyDown: onKeyDown,
+                onFocus: onFocus,
+                onBlur: onBlur,
+                inputRef: inputRef,
+                isFocused: isFocused,
+                setIsFocused: setIsFocused
+            }),
+            /*#__PURE__*/ _jsx(PopoverContent, {
+                align: "start",
+                sideOffset: 8,
+                className: "w-(--radix-popover-trigger-width) p-0",
+                onOpenAutoFocus: (e)=>e.preventDefault(),
+                onInteractOutside: onInteractOutside,
+                onEscapeKeyDown: (e)=>{
+                    e.preventDefault();
+                    closeAll();
+                },
+                container: container,
+                children: calendarOpen ? /*#__PURE__*/ _jsx(IntervalSelectorCalendar, {
+                    onSelect: onSelect
+                }) : popoverOpen ? /*#__PURE__*/ _jsx(IntervalSelectorSuggestions, {
+                    relativeSuggestions: relativeSuggestions,
+                    intervalSuggestions: intervalSuggestions,
+                    onSelect: onSelect,
+                    onOpenCalendar: onOpenCalendar,
+                    highlightedIndex: highlightedIndex
+                }) : null
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=interval-selector.js.map

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

@@ -0,0 +1,232 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { endOfDay, startOfDay } from 'date-fns';
+import { useState } from 'react';
+import { IntervalSelector } from './interval-selector.js';
+const meta = {
+    title: 'Components/IntervalSelector',
+    component: IntervalSelector,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+function RelativeIntervalSelector() {
+    const [selection, setSelection] = useState({
+        type: 'relative',
+        duration: {
+            days: 1
+        }
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "space-y-8",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "text-sm text-foreground-neutral-subtle",
+                children: [
+                    /*#__PURE__*/ _jsx("strong", {
+                        children: "Relative Mode:"
+                    }),
+                    ' Duration-based selection (e.g., "Past 1 Day"). The interval updates automatically based on the current time.'
+                ]
+            }),
+            /*#__PURE__*/ _jsx(IntervalSelector, {
+                selection: selection,
+                onSelectionChange: setSelection,
+                className: "w-[75vw] md:w-350"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "text-xs text-foreground-neutral-muted font-mono",
+                children: [
+                    "Selection: ",
+                    JSON.stringify(selection, null, 2)
+                ]
+            })
+        ]
+    });
+}
+function AbsoluteIntervalSelector() {
+    const now = new Date();
+    const [selection, setSelection] = useState({
+        type: 'interval',
+        interval: {
+            start: new Date(now.getFullYear(), 0, 1),
+            end: new Date(now.getFullYear(), 0, 15)
+        }
+    });
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "space-y-8",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "text-sm text-foreground-neutral-subtle",
+                children: [
+                    /*#__PURE__*/ _jsx("strong", {
+                        children: "Absolute Mode:"
+                    }),
+                    ' Fixed date range selection (e.g., "Jan 1 - Jan 15"). The interval stays the same regardless of when you refresh the page.'
+                ]
+            }),
+            /*#__PURE__*/ _jsx(IntervalSelector, {
+                selection: selection,
+                onSelectionChange: setSelection,
+                className: "w-[75vw] md:w-350"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "text-xs text-foreground-neutral-muted font-mono",
+                children: [
+                    "Selection: ",
+                    JSON.stringify(selection, null, 2)
+                ]
+            })
+        ]
+    });
+}
+export const Relative = {
+    args: {
+        selection: {
+            type: 'relative',
+            duration: {
+                days: 1
+            }
+        },
+        onSelectionChange: ()=>undefined
+    },
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-screen h-screen p-16",
+            children: /*#__PURE__*/ _jsx(RelativeIntervalSelector, {})
+        })
+};
+export const Absolute = {
+    args: {
+        selection: (()=>{
+            const now = new Date();
+            return {
+                type: 'interval',
+                interval: {
+                    start: new Date(now.getFullYear(), 0, 1),
+                    end: new Date(now.getFullYear(), 0, 15)
+                }
+            };
+        })(),
+        onSelectionChange: ()=>undefined
+    },
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-screen h-screen p-16",
+            children: /*#__PURE__*/ _jsx(AbsoluteIntervalSelector, {})
+        })
+};
+function CustomIntervalsSelector() {
+    const [selection, setSelection] = useState({
+        type: 'relative',
+        duration: {
+            hours: 1
+        }
+    });
+    const customRelativeSuggestions = [
+        {
+            duration: {
+                minutes: 15
+            },
+            type: 'relative'
+        },
+        {
+            duration: {
+                hours: 1
+            },
+            type: 'relative'
+        },
+        {
+            duration: {
+                hours: 6
+            },
+            type: 'relative'
+        },
+        {
+            duration: {
+                hours: 24
+            },
+            type: 'relative'
+        },
+        {
+            duration: {
+                days: 3
+            },
+            type: 'relative'
+        },
+        {
+            duration: {
+                weeks: 1
+            },
+            type: 'relative'
+        },
+        {
+            duration: {
+                weeks: 2
+            },
+            type: 'relative'
+        },
+        {
+            duration: {
+                months: 1
+            },
+            type: 'relative'
+        }
+    ];
+    const customIntervalSuggestions = [
+        {
+            type: 'interval',
+            label: "During Einstein's lifetime",
+            interval: {
+                start: startOfDay(new Date('1879-03-14')),
+                end: endOfDay(new Date('1955-04-18'))
+            }
+        }
+    ];
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "space-y-8",
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "text-sm text-foreground-neutral-subtle",
+                children: [
+                    /*#__PURE__*/ _jsx("strong", {
+                        children: "Custom Intervals:"
+                    }),
+                    " This is useful for internationalization, branding, or context-specific options."
+                ]
+            }),
+            /*#__PURE__*/ _jsx(IntervalSelector, {
+                selection: selection,
+                onSelectionChange: setSelection,
+                relativeSuggestions: customRelativeSuggestions,
+                intervalSuggestions: customIntervalSuggestions,
+                className: "w-[75vw] md:w-350"
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "text-xs text-foreground-neutral-muted font-mono",
+                children: [
+                    "Selection: ",
+                    JSON.stringify(selection, null, 2)
+                ]
+            })
+        ]
+    });
+}
+export const CustomIntervals = {
+    args: {
+        selection: {
+            type: 'relative',
+            duration: {
+                hours: 1
+            }
+        },
+        onSelectionChange: ()=>undefined
+    },
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-screen h-screen p-16",
+            children: /*#__PURE__*/ _jsx(CustomIntervalsSelector, {})
+        })
+};
+
+//# sourceMappingURL=interval-selector.stories.js.map

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

@@ -0,0 +1,19 @@
+import type { Duration, NormalizedInterval } from 'date-fns';
+export type IntervalSelection = {
+    type: 'relative';
+    duration: Duration;
+} | {
+    type: 'interval';
+    interval: NormalizedInterval;
+};
+export interface RelativeSuggestion {
+    type: 'relative';
+    duration: Duration;
+}
+export interface IntervalSuggestion {
+    label: string;
+    type: 'interval';
+    interval: NormalizedInterval;
+}
+export type Suggestion = RelativeSuggestion | IntervalSuggestion;
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

package/dist/components/interval-selector/utils/constants.d.ts

@@ -0,0 +1,24 @@
+import { type Duration, type NormalizedInterval } from 'date-fns';
+export interface RelativeSuggestion {
+    type: 'relative';
+    duration: Duration;
+}
+export interface IntervalSuggestion {
+    label: string;
+    type: 'interval';
+    interval: NormalizedInterval;
+}
+export type Suggestion = RelativeSuggestion | IntervalSuggestion;
+export interface ParsedShortcut {
+    shortcut: string;
+    duration: Duration;
+    label: string;
+}
+export interface CalendarShortcutResult {
+    shortcut: string | undefined;
+    label: string;
+    value: string | undefined;
+}
+export declare const defaultRelativeSuggestions: RelativeSuggestion[];
+export declare const defaultIntervalSuggestions: IntervalSuggestion[];
+//# sourceMappingURL=constants.d.ts.map

package/dist/components/interval-selector/utils/constants.js

@@ -0,0 +1,129 @@
+import { endOfDay, endOfMonth, endOfWeek, endOfYear, startOfDay, startOfMonth, startOfWeek, startOfYear, subDays, subMonths, subWeeks, subYears } from 'date-fns';
+export const defaultRelativeSuggestions = [
+    {
+        duration: {
+            minutes: 5
+        },
+        type: 'relative'
+    },
+    {
+        duration: {
+            minutes: 15
+        },
+        type: 'relative'
+    },
+    {
+        duration: {
+            minutes: 30
+        },
+        type: 'relative'
+    },
+    {
+        duration: {
+            hours: 1
+        },
+        type: 'relative'
+    },
+    {
+        duration: {
+            hours: 4
+        },
+        type: 'relative'
+    },
+    {
+        duration: {
+            days: 1
+        },
+        type: 'relative'
+    },
+    {
+        duration: {
+            days: 2
+        },
+        type: 'relative'
+    },
+    {
+        duration: {
+            weeks: 1
+        },
+        type: 'relative'
+    },
+    {
+        duration: {
+            months: 1
+        },
+        type: 'relative'
+    }
+];
+const WEEK_OPTIONS = {
+    weekStartsOn: 1
+};
+const now = new Date();
+export const defaultIntervalSuggestions = [
+    {
+        label: 'Today',
+        type: 'interval',
+        interval: {
+            start: startOfDay(now),
+            end: endOfDay(now)
+        }
+    },
+    {
+        label: 'Yesterday',
+        type: 'interval',
+        interval: {
+            start: startOfDay(subDays(now, 1)),
+            end: endOfDay(subDays(now, 1))
+        }
+    },
+    {
+        label: 'Week to Date',
+        type: 'interval',
+        interval: {
+            start: startOfWeek(now, WEEK_OPTIONS),
+            end: endOfDay(now)
+        }
+    },
+    {
+        label: 'Previous Week',
+        type: 'interval',
+        interval: {
+            start: startOfWeek(subWeeks(now, 1), WEEK_OPTIONS),
+            end: endOfWeek(subWeeks(now, 1), WEEK_OPTIONS)
+        }
+    },
+    {
+        label: 'Month to Date',
+        type: 'interval',
+        interval: {
+            start: startOfMonth(now),
+            end: endOfDay(now)
+        }
+    },
+    {
+        label: 'Previous Month',
+        type: 'interval',
+        interval: {
+            start: startOfMonth(subMonths(now, 1)),
+            end: endOfMonth(subMonths(now, 1))
+        }
+    },
+    {
+        label: 'Year to Date',
+        type: 'interval',
+        interval: {
+            start: startOfYear(now),
+            end: endOfDay(now)
+        }
+    },
+    {
+        label: 'Previous Year',
+        type: 'interval',
+        interval: {
+            start: startOfYear(subYears(now, 1)),
+            end: endOfYear(subYears(now, 1))
+        }
+    }
+];
+
+//# sourceMappingURL=constants.js.map

package/dist/components/interval-selector/utils/format.d.ts

@@ -0,0 +1,16 @@
+import type { IntervalSelection } from '../types';
+export declare function formatSelectionForInput(selection: IntervalSelection): string;
+interface FormatSelectionParams {
+    selection: IntervalSelection;
+    inputValue: string;
+    isFocused: boolean;
+}
+export declare function formatSelection({ selection, isFocused, inputValue }: FormatSelectionParams): string;
+interface FormatShortcutParams {
+    selection: IntervalSelection;
+    inputValue: string;
+    isFocused: boolean;
+}
+export declare function formatShortcut({ selection, inputValue, isFocused }: FormatShortcutParams): string;
+export {};
+//# sourceMappingURL=format.d.ts.map

package/dist/components/interval-selector/utils/format.js

@@ -0,0 +1,23 @@
+import { intervalToDuration } from 'date-fns';
+import { generateDurationShortcut, humanizeDurationToNow, intervalToNowFromDuration, parseTextDurationShortcut, parseTextInterval } from '../../../utils/date.js';
+import { formatDateTime, formatDateTimeRange } from '../../../utils/format/date.js';
+export function formatSelectionForInput(selection) {
+    const interval = selection.type === 'relative' ? intervalToNowFromDuration(selection.duration) : selection.interval;
+    return `${formatDateTime(interval.start)}\u2009\u2013\u2009${formatDateTime(interval.end)}`;
+}
+export function formatSelection({ selection, isFocused, inputValue }) {
+    if (isFocused) return inputValue;
+    if (selection.type === 'relative') return humanizeDurationToNow(selection.duration);
+    return formatDateTimeRange(selection.interval);
+}
+export function formatShortcut({ selection, inputValue, isFocused }) {
+    const inputShortcut = parseTextDurationShortcut(inputValue);
+    const inputInterval = parseTextInterval(inputValue);
+    if (isFocused && inputShortcut) return generateDurationShortcut(inputShortcut);
+    if (isFocused && inputInterval) return generateDurationShortcut(intervalToDuration(inputInterval));
+    if (isFocused) return '-';
+    if (selection.type === 'relative') return generateDurationShortcut(selection.duration);
+    return generateDurationShortcut(intervalToDuration(selection.interval));
+}
+
+//# sourceMappingURL=format.js.map

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

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

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

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

package/dist/components/popover/popover.d.ts

@@ -3,7 +3,9 @@ import type { ComponentProps } from 'react';
 declare function Popover({ ...props }: ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverTrigger({ ...props }: ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverAnchor({ ...props }: ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, ...props }: ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, container, ...props }: ComponentProps<typeof PopoverPrimitive.Content> & {
+    container?: HTMLElement | null;
+}): import("react/jsx-runtime").JSX.Element;
 declare function PopoverArrow({ className, ...props }: ComponentProps<typeof PopoverPrimitive.Arrow>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverClose({ ...props }: ComponentProps<typeof PopoverPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
 export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent, PopoverArrow, PopoverClose };

package/dist/components/popover/popover.js

@@ -21,8 +21,9 @@ function PopoverPortal({ ...props }) {
         ...props
     });
 }
-function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }) {
+function PopoverContent({ className, align = 'center', sideOffset = 4, container, ...props }) {
     return /*#__PURE__*/ _jsx(PopoverPortal, {
+        container: container,
         children: /*#__PURE__*/ _jsx(PopoverPrimitive.Content, {
             align: align,
             sideOffset: sideOffset,