@shipfox/react-ui 0.18.0 → 0.20.0

package/dist/components/calendar/calendar.js

@@ -5,34 +5,34 @@ import { cn } from '../../utils/cn.js';
 export function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
     return /*#__PURE__*/ _jsx(DayPicker, {
         showOutsideDays: showOutsideDays,
-        className: cn('p-16 transition-colors', className),
+        className: cn('transition-colors', className),
         classNames: {
-            months: 'flex flex-col sm:flex-row gap-24',
-            month: 'space-y-16 relative',
-            month_caption: 'flex items-center justify-center mb-8 px-4 relative h-32',
+            months: 'flex flex-col sm:flex-row gap-0',
+            month: 'space-y-16 relative p-16 border-r border-border-neutral-base-component last:border-r-0',
+            month_caption: 'flex items-center justify-center mb-8 px-4 relative h-32 bg-background-field-base rounded-8 shadow-tooltip',
             caption_label: 'text-sm font-medium text-foreground-neutral-base',
             nav: 'flex items-center gap-4 fixed left-0 top-16 w-full z-10',
-            button_previous: cn('size-32 bg-transparent p-0 absolute left-16 top-0', 'inline-flex items-center justify-center rounded-6', 'text-foreground-neutral-base', 'hover:bg-background-button-transparent-hover', 'active:bg-background-button-transparent-pressed', 'transition-colors outline-none', 'focus-visible:shadow-border-interactive-with-active', 'disabled:pointer-events-none disabled:opacity-50'),
-            button_next: cn('size-32 bg-transparent p-0 absolute right-16 top-0', 'inline-flex items-center justify-center rounded-6', 'text-foreground-neutral-base', 'hover:bg-background-button-transparent-hover', 'active:bg-background-button-transparent-pressed', 'transition-colors outline-none', 'focus-visible:shadow-border-interactive-with-active', 'disabled:pointer-events-none disabled:opacity-50'),
+            button_previous: cn('size-32 bg-transparent p-0 absolute left-16 top-0 cursor-pointer', 'inline-flex items-center justify-center rounded-6', 'text-foreground-neutral-muted', 'hover:bg-transparent hover:text-foreground-neutral-subtle', 'active:bg-transparent', 'transition-colors outline-none', 'focus-visible:shadow-border-interactive-with-active', 'disabled:pointer-events-none disabled:opacity-50'),
+            button_next: cn('size-32 bg-transparent p-0 absolute right-16 top-0 cursor-pointer', 'inline-flex items-center justify-center rounded-6', 'text-foreground-neutral-muted', 'hover:bg-transparent hover:text-foreground-neutral-subtle', 'active:bg-transparent', 'transition-colors outline-none', 'focus-visible:shadow-border-interactive-with-active', 'disabled:pointer-events-none disabled:opacity-50'),
             month_grid: 'w-full border-collapse mt-8',
-            weekdays: 'flex mb-8',
+            weekdays: 'flex gap-8',
             weekday: 'text-foreground-neutral-subtle text-xs font-medium w-36 h-32 flex items-center justify-center',
-            week: 'flex mt-4',
+            week: 'flex mt-8 gap-8',
             day: cn('relative text-center size-36 p-0 text-sm font-normal [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', '[&:last-child[data-selected=true]_button]:rounded-r-6', props.showWeekNumber ? '[&:nth-child(2)[data-selected=true]_button]:rounded-l-6' : '[&:first-child[data-selected=true]_button]:rounded-l-6'),
             day_button: cn('size-36 p-0 text-sm font-normal rounded-6', 'inline-flex items-center justify-center', 'hover:bg-background-button-transparent-hover', 'focus-visible:shadow-border-interactive-with-active', 'transition-colors outline-none', 'aria-selected:opacity-100'),
             range_start: 'day-range-start rounded-6',
             range_end: 'day-range-end rounded-6',
-            selected: cn('bg-foreground-highlight-interactive/80 !text-foreground-neutral-base font-medium rounded-6', 'hover:bg-foreground-highlight-interactive-hover/80', 'focus:bg-foreground-highlight-interactive/80'),
-            today: cn('bg-background-field-base text-foreground-neutral-base font-medium rounded-6', 'border border-border-neutral-base'),
+            selected: cn('bg-foreground-highlight-interactive/80 !text-foreground-neutral-on-inverted font-medium rounded-6', 'hover:bg-foreground-highlight-interactive-hover/80', 'focus:bg-foreground-highlight-interactive/80'),
+            today: cn('relative font-medium rounded-6', 'after:absolute after:bottom-[6px] after:left-1/2 after:-translate-x-1/2', 'after:size-[3px] after:rounded-full after:bg-[var(--color-primary-400)]'),
             outside: 'day-outside text-foreground-neutral-muted',
             disabled: 'text-foreground-neutral-disabled opacity-30 cursor-not-allowed',
-            range_middle: cn('aria-selected:bg-foreground-highlight-interactive/10 aria-selected:text-foreground-neutral-base', 'rounded-none', 'first:rounded-l-6 first:rounded-r-none', 'last:rounded-r-6 last:rounded-l-none'),
+            range_middle: cn('aria-selected:bg-background-highlight-base aria-selected:!text-foreground-highlight-interactive'),
             hidden: 'invisible',
             ...classNames
         },
         components: {
             Chevron: ({ orientation })=>{
-                const iconName = orientation === 'left' ? 'arrowLeftSLine' : 'arrowRightSLine';
+                const iconName = orientation === 'left' ? 'arrowLeftSFill' : 'arrowRightSFill';
                 return /*#__PURE__*/ _jsx(Icon, {
                     name: iconName,
                     className: "size-20"

package/dist/components/combobox/combobox.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { type CommandTriggerProps } from '../command';
+export type ComboboxOption = {
+    value: string;
+    label: string;
+};
+export type ComboboxProps = Omit<CommandTriggerProps, 'children' | 'placeholder'> & {
+    options: ComboboxOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    emptyState?: string | React.ReactNode;
+    searchPlaceholder?: string;
+    className?: string;
+    popoverClassName?: string;
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    isLoading?: boolean;
+};
+export declare function Combobox({ options, value, onValueChange, placeholder, emptyState, searchPlaceholder, className, popoverClassName, align, sideOffset, variant, size, isLoading, ...triggerProps }: ComboboxProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=combobox.d.ts.map

package/dist/components/combobox/combobox.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ScrollArea } from '../../components/scroll-area/index.js';
+import * as React from 'react';
+import { cn } from '../../utils/cn.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandTrigger } from '../command/index.js';
+import { Icon } from '../icon/index.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover/index.js';
+export function Combobox({ options, value, onValueChange, placeholder = 'Select option...', emptyState = 'No option found.', searchPlaceholder = 'Search...', className, popoverClassName, align = 'start', sideOffset = 4, variant, size, isLoading, ...triggerProps }) {
+    const [open, setOpen] = React.useState(false);
+    const [internalValue, setInternalValue] = React.useState('');
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : internalValue;
+    const handleValueChange = React.useCallback((newValue)=>{
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onValueChange?.(newValue);
+    }, [
+        isControlled,
+        onValueChange
+    ]);
+    const selectedOption = options.find((option)=>option.value === currentValue);
+    return /*#__PURE__*/ _jsxs(Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ _jsx(PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsx(CommandTrigger, {
+                    variant: variant,
+                    size: size,
+                    placeholder: placeholder,
+                    className: className,
+                    isLoading: isLoading,
+                    ...triggerProps,
+                    children: selectedOption?.label
+                })
+            }),
+            /*#__PURE__*/ _jsx(PopoverContent, {
+                className: cn('w-(--radix-popover-trigger-width) p-0', popoverClassName),
+                align: align,
+                sideOffset: sideOffset,
+                onWheel: (e)=>e.stopPropagation(),
+                onTouchStart: (e)=>e.stopPropagation(),
+                onTouchMove: (e)=>e.stopPropagation(),
+                children: /*#__PURE__*/ _jsxs(Command, {
+                    children: [
+                        /*#__PURE__*/ _jsx(CommandInput, {
+                            placeholder: searchPlaceholder
+                        }),
+                        /*#__PURE__*/ _jsx(ScrollArea, {
+                            children: /*#__PURE__*/ _jsxs(CommandList, {
+                                className: "max-h-300",
+                                children: [
+                                    /*#__PURE__*/ _jsx(CommandEmpty, {
+                                        children: emptyState
+                                    }),
+                                    /*#__PURE__*/ _jsx(CommandGroup, {
+                                        children: options.map((option)=>/*#__PURE__*/ _jsxs(CommandItem, {
+                                                value: option.value,
+                                                onSelect: (selectedValue)=>{
+                                                    handleValueChange(currentValue === selectedValue ? '' : selectedValue);
+                                                    setOpen(false);
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Icon, {
+                                                        name: "check",
+                                                        className: cn('size-16 mr-8', currentValue === option.value ? 'opacity-100' : 'opacity-0')
+                                                    }),
+                                                    option.label
+                                                ]
+                                            }, option.value))
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=combobox.js.map

package/dist/components/combobox/combobox.stories.js

@@ -0,0 +1,191 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label } from '../../components/label/index.js';
+import { useState } from 'react';
+import { Combobox } from './combobox.js';
+const sampleItems = [
+    {
+        value: 'apache',
+        label: 'apache'
+    },
+    {
+        value: 'apache-superset',
+        label: 'apache-superset'
+    },
+    {
+        value: 'apaleo',
+        label: 'apaleo'
+    },
+    {
+        value: 'apollo',
+        label: 'apollo'
+    },
+    {
+        value: 'apple',
+        label: 'apple'
+    },
+    {
+        value: 'apache-kafka',
+        label: 'apache-kafka'
+    },
+    {
+        value: 'apex',
+        label: 'apex'
+    },
+    {
+        value: 'appsmith',
+        label: 'appsmith'
+    },
+    {
+        value: 'applitools',
+        label: 'applitools'
+    },
+    {
+        value: 'approzium',
+        label: 'approzium'
+    },
+    {
+        value: 'apify',
+        label: 'apify'
+    },
+    {
+        value: 'apicurio',
+        label: 'apicurio'
+    },
+    {
+        value: 'apitable',
+        label: 'apitable'
+    },
+    {
+        value: 'apollographql',
+        label: 'apollographql'
+    },
+    {
+        value: 'aptos',
+        label: 'aptos'
+    }
+];
+const meta = {
+    title: 'Components/Combobox',
+    component: Combobox,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const Default = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('');
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "w-[80vw] md:w-500",
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    htmlFor: "combobox-default",
+                    children: "Search repositories"
+                }),
+                /*#__PURE__*/ _jsx(Combobox, {
+                    id: "combobox-default",
+                    options: sampleItems,
+                    value: value,
+                    onValueChange: setValue,
+                    placeholder: "Type to search...",
+                    searchPlaceholder: "Search repositories...",
+                    emptyState: "No repository found."
+                })
+            ]
+        });
+    }
+};
+export const EmptyState = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('abcxyz');
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "w-[80vw] md:w-500",
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    htmlFor: "combobox-empty",
+                    children: "No results"
+                }),
+                /*#__PURE__*/ _jsx(Combobox, {
+                    id: "combobox-empty",
+                    options: [],
+                    value: value,
+                    onValueChange: setValue,
+                    placeholder: "Type to search...",
+                    searchPlaceholder: "Search repositories...",
+                    emptyState: /*#__PURE__*/ _jsxs("p", {
+                        className: "px-4 whitespace-pre-wrap",
+                        children: [
+                            "Repository list is limited to 100.",
+                            ' ',
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "https://support.example.com",
+                                target: "_blank",
+                                rel: "noopener noreferrer",
+                                className: "underline text-foreground-neutral-base",
+                                children: "Contact us"
+                            }),
+                            ' ',
+                            "for support."
+                        ]
+                    })
+                })
+            ]
+        });
+    }
+};
+export const LoadingState = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('');
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "w-[80vw] md:w-500",
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    htmlFor: "combobox-loading",
+                    children: "Loading"
+                }),
+                /*#__PURE__*/ _jsx(Combobox, {
+                    id: "combobox-loading",
+                    options: sampleItems,
+                    value: value,
+                    onValueChange: setValue,
+                    placeholder: "Type to search...",
+                    searchPlaceholder: "Search repositories...",
+                    isLoading: true
+                })
+            ]
+        });
+    }
+};
+export const DisabledState = {
+    args: {},
+    render: ()=>{
+        const [value, setValue] = useState('apache');
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "w-[80vw] md:w-500",
+            children: [
+                /*#__PURE__*/ _jsx(Label, {
+                    htmlFor: "combobox-disabled",
+                    children: "Disabled"
+                }),
+                /*#__PURE__*/ _jsx(Combobox, {
+                    id: "combobox-disabled",
+                    options: sampleItems,
+                    value: value,
+                    onValueChange: setValue,
+                    disabled: true,
+                    placeholder: "Disabled input",
+                    searchPlaceholder: "Search repositories...",
+                    emptyState: "No results found"
+                })
+            ]
+        });
+    }
+};
+
+//# sourceMappingURL=combobox.stories.js.map

package/dist/components/combobox/index.d.ts

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

package/dist/components/combobox/index.js

@@ -0,0 +1,3 @@
+export * from './combobox.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/command/command.d.ts

@@ -8,6 +8,7 @@ declare const commandTriggerVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type CommandTriggerProps = ComponentProps<'button'> & VariantProps<typeof commandTriggerVariants> & {
     placeholder?: string;
+    isLoading?: boolean;
 };
 declare const CommandTrigger: import("react").ForwardRefExoticComponent<Omit<CommandTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 declare function Command({ className, ...props }: ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
@@ -18,7 +19,7 @@ type CommandInputProps = ComponentProps<typeof CommandPrimitive.Input> & {
 };
 declare function CommandInput({ className, value, onValueChange, onClear, showClearButton, ...props }: CommandInputProps): import("react/jsx-runtime").JSX.Element;
 declare function CommandList({ className, ...props }: ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;
-declare function CommandEmpty({ className, ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
+declare function CommandEmpty({ className, children, ...props }: ComponentProps<typeof CommandPrimitive.Empty>): import("react/jsx-runtime").JSX.Element;
 declare function CommandGroup({ className, ...props }: ComponentProps<typeof CommandPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
 declare function CommandSeparator({ className, ...props }: ComponentProps<typeof CommandPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
 declare function CommandItem({ className, ...props }: ComponentProps<typeof CommandPrimitive.Item>): import("react/jsx-runtime").JSX.Element;

package/dist/components/command/command.js

@@ -29,7 +29,7 @@ const commandTriggerVariants = cva([
         size: 'base'
     }
 });
-const CommandTrigger = /*#__PURE__*/ forwardRef(({ className, variant, size, placeholder, children, ...props }, ref)=>{
+const CommandTrigger = /*#__PURE__*/ forwardRef(({ className, variant, size, placeholder, children, isLoading, ...props }, ref)=>{
     const hasValue = Boolean(children);
     return /*#__PURE__*/ _jsxs("button", {
         ref: ref,
@@ -46,8 +46,11 @@ const CommandTrigger = /*#__PURE__*/ forwardRef(({ className, variant, size, pla
                 className: "flex-1 text-left truncate",
                 children: hasValue ? children : placeholder
             }),
-            /*#__PURE__*/ _jsx(Icon, {
-                name: "arrowDownSLine",
+            isLoading ? /*#__PURE__*/ _jsx(Icon, {
+                name: "spinner",
+                className: "size-16 text-foreground-neutral-base shrink-0"
+            }) : /*#__PURE__*/ _jsx(Icon, {
+                name: "expandUpDownLine",
                 className: "size-16 text-foreground-neutral-muted shrink-0"
             })
         ]
@@ -149,11 +152,12 @@ function CommandList({ className, ...props }) {
         ...props
     });
 }
-function CommandEmpty({ className, ...props }) {
+function CommandEmpty({ className, children, ...props }) {
     return /*#__PURE__*/ _jsx(CommandPrimitive.Empty, {
         "data-slot": "command-empty",
         className: cn('py-24 text-center text-sm text-foreground-neutral-muted', className),
-        ...props
+        ...props,
+        children: children
     });
 }
 function CommandGroup({ className, ...props }) {

package/dist/components/dashboard/components/kpi-card.js

@@ -29,10 +29,13 @@ export function KpiCard({ label, value, variant = 'neutral', isLoading, classNam
                     }),
                     isLoading ? /*#__PURE__*/ _jsx(Skeleton, {
                         className: "w-48 h-20 rounded-4"
-                    }) : /*#__PURE__*/ _jsx(Text, {
+                    }) : typeof value === 'string' || typeof value === 'number' ? /*#__PURE__*/ _jsx(Text, {
                         size: "sm",
                         className: "font-medium text-foreground-neutral-base",
                         children: value
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        className: "text-sm font-medium text-foreground-neutral-base",
+                        children: value
                     })
                 ]
             })

package/dist/components/date-picker/date-picker.d.ts

@@ -14,6 +14,7 @@ export type DatePickerProps = Omit<ComponentProps<'input'>, 'size' | 'type'> & V
     rightIcon?: ReactNode;
     onClear?: () => void;
     closeOnSelect?: boolean;
+    maxDisabledOffsetDays?: number;
 };
 export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=date-picker.d.ts.map

package/dist/components/date-picker/date-picker.js

@@ -3,8 +3,8 @@ import { cva } from 'class-variance-authority';
 import { Calendar } from '../../components/calendar/index.js';
 import { Icon } from '../../components/icon/index.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover/index.js';
-import { format } from 'date-fns';
-import { forwardRef, useState } from 'react';
+import { addDays, format, subDays } from 'date-fns';
+import { forwardRef, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 export const datePickerVariants = cva('relative flex items-center rounded-6 shadow-button-neutral transition-[background-color,box-shadow] outline-none', {
     variants: {
@@ -28,10 +28,22 @@ export const datePickerVariants = cva('relative flex items-center rounded-6 shad
         state: 'default'
     }
 });
-export const DatePicker = /*#__PURE__*/ forwardRef(({ className, variant, size, state, date, onDateSelect, placeholder = 'DD/MM/YYYY', dateFormat = 'dd/MM/yyyy', leftIcon, rightIcon, onClear, disabled, closeOnSelect = false, ...props }, ref)=>{
+export const DatePicker = /*#__PURE__*/ forwardRef(({ className, variant, size, state, date, onDateSelect, placeholder = 'DD/MM/YYYY', dateFormat = 'dd/MM/yyyy', leftIcon, rightIcon, onClear, disabled, closeOnSelect = false, maxDisabledOffsetDays, ...props }, ref)=>{
     const [open, setOpen] = useState(false);
     const isDisabled = disabled || state === 'disabled';
     const displayValue = date ? format(date, dateFormat) : '';
+    // Disable dates beyond maxDisabledDays before and after today
+    const disabledDates = useMemo(()=>{
+        if (!maxDisabledOffsetDays) return undefined;
+        const today = new Date();
+        const minDate = subDays(today, maxDisabledOffsetDays);
+        const maxDate = addDays(today, maxDisabledOffsetDays);
+        return (date)=>{
+            return date < minDate || date > maxDate;
+        };
+    }, [
+        maxDisabledOffsetDays
+    ]);
     const handleSelect = (selectedDate)=>{
         onDateSelect?.(selectedDate);
         if (closeOnSelect) {
@@ -103,7 +115,11 @@ export const DatePicker = /*#__PURE__*/ forwardRef(({ className, variant, size,
                 children: /*#__PURE__*/ _jsx(Calendar, {
                     mode: "single",
                     selected: date,
-                    onSelect: handleSelect
+                    onSelect: handleSelect,
+                    disabled: disabledDates,
+                    formatters: {
+                        formatWeekdayName: (date)=>format(date, 'EEEEE')
+                    }
                 })
             })
         ]

package/dist/components/date-picker/date-picker.stories.js

@@ -51,6 +51,22 @@ export const DatePickerStory = {
         });
     }
 };
+export const DatePickerWithThresholdStory = {
+    play: (ctx)=>openCalendarAndScreenshot(ctx, 'DatePicker With Threshold Calendar Open'),
+    render: ()=>{
+        const [date, setDate] = useState(new Date());
+        return /*#__PURE__*/ _jsx("div", {
+            className: "relative flex h-600 w-500 items-center justify-center rounded-16 bg-background-subtle-base shadow-tooltip overflow-visible",
+            children: /*#__PURE__*/ _jsx(DatePicker, {
+                date: date,
+                onDateSelect: setDate,
+                onClear: ()=>setDate(undefined),
+                placeholder: "DD/MM/YYYY",
+                maxDisabledOffsetDays: 30
+            })
+        });
+    }
+};
 export const DateRangePickerStory = {
     play: (ctx)=>openCalendarAndScreenshot(ctx, 'DateRangePicker Calendar Open'),
     render: ()=>{

package/dist/components/date-time-range-picker/date-time-range-picker.d.ts

@@ -19,6 +19,7 @@ export type DateTimeRangePickerProps = Omit<ComponentProps<'input'>, 'size' | 't
     onClear?: () => void;
     numberOfMonths?: number;
     closeOnSelect?: boolean;
+    maxRangeDays?: number;
 };
 export declare const DateTimeRangePicker: import("react").ForwardRefExoticComponent<Omit<DateTimeRangePickerProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=date-time-range-picker.d.ts.map

package/dist/components/date-time-range-picker/date-time-range-picker.js

@@ -3,8 +3,8 @@ import { cva } from 'class-variance-authority';
 import { Calendar } from '../../components/calendar/index.js';
 import { Icon } from '../../components/icon/index.js';
 import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover/index.js';
-import { format } from 'date-fns';
-import { forwardRef, useState } from 'react';
+import { addDays, differenceInDays, format } from 'date-fns';
+import { forwardRef, useMemo, useState } from 'react';
 import { cn } from '../../utils/cn.js';
 export const dateTimeRangePickerVariants = cva('min-w-240 relative flex items-center rounded-6 shadow-button-neutral transition-[background-color,box-shadow] outline-none', {
     variants: {
@@ -28,28 +28,52 @@ export const dateTimeRangePickerVariants = cva('min-w-240 relative flex items-ce
         state: 'default'
     }
 });
-export const DateTimeRangePicker = /*#__PURE__*/ forwardRef(({ className, variant, size, state, dateRange, onDateRangeSelect, placeholder = 'DD/MM/YYYY - DD/MM/YYYY', dateFormat = 'dd/MM/yyyy', leftIcon, rightIcon, onClear, disabled, numberOfMonths = 2, closeOnSelect = false, ...props }, ref)=>{
+export const DateTimeRangePicker = /*#__PURE__*/ forwardRef(({ className, variant, size, state, dateRange, onDateRangeSelect, placeholder = 'DD/MM/YYYY - DD/MM/YYYY', dateFormat = 'dd/MM/yyyy', leftIcon, rightIcon, onClear, disabled, numberOfMonths = 2, closeOnSelect = false, maxRangeDays, ...props }, ref)=>{
     const [open, setOpen] = useState(false);
     const isDisabled = disabled || state === 'disabled';
-    const hasRange = dateRange?.start && dateRange?.end;
-    const displayValue = hasRange && dateRange.start && dateRange.end ? `${format(dateRange.start, dateFormat)} - ${format(dateRange.end, dateFormat)}` : '';
-    // Convert our DateRange to react-day-picker's DateRange format
-    const dayPickerRange = dateRange?.start || dateRange?.end ? {
-        from: dateRange?.start,
-        to: dateRange?.end
+    const startDate = dateRange?.start;
+    const endDate = dateRange?.end;
+    const hasRange = Boolean(startDate && endDate);
+    // Format display value
+    const displayValue = hasRange && startDate && endDate ? `${format(startDate, dateFormat)} - ${format(endDate, dateFormat)}` : '';
+    // Convert to react-day-picker format
+    const dayPickerRange = startDate || endDate ? {
+        from: startDate,
+        to: endDate
     } : undefined;
+    // Get default month for calendar (prioritize selected start date, then today)
+    const defaultMonth = startDate ?? new Date();
+    // Disable dates beyond maxRangeDays (only if maxRangeDays is provided)
+    const disabledDates = useMemo(()=>{
+        if (!startDate || maxRangeDays === undefined) return undefined;
+        return (date)=>{
+            const daysFromStart = differenceInDays(date, startDate);
+            return daysFromStart > maxRangeDays;
+        };
+    }, [
+        startDate,
+        maxRangeDays
+    ]);
     const handleSelect = (selectedRange)=>{
-        if (selectedRange) {
-            onDateRangeSelect?.({
-                start: selectedRange.from,
-                end: selectedRange.to
-            });
-            // Only close if both dates are selected and closeOnSelect is true
-            if (closeOnSelect && selectedRange.from && selectedRange.to) {
-                setOpen(false);
-            }
-        } else {
+        if (!selectedRange) {
             onDateRangeSelect?.(undefined);
+            return;
+        }
+        const { from, to } = selectedRange;
+        let finalEndDate = to;
+        // Cap end date to maxRangeDays if both dates are selected and maxRangeDays is provided
+        if (from && to && maxRangeDays !== undefined) {
+            const daysFromStart = differenceInDays(to, from);
+            if (daysFromStart > maxRangeDays) {
+                finalEndDate = addDays(from, maxRangeDays);
+            }
+        }
+        onDateRangeSelect?.({
+            start: from,
+            end: finalEndDate
+        });
+        if (closeOnSelect && from && finalEndDate) {
+            setOpen(false);
         }
     };
     const handleClear = (e)=>{
@@ -98,11 +122,11 @@ export const DateTimeRangePicker = /*#__PURE__*/ forwardRef(({ className, varian
                     /*#__PURE__*/ _jsx("button", {
                         type: "button",
                         onClick: handleClear,
-                        className: cn('flex items-center justify-center shrink-0 transition-colors hover:text-foreground-neutral-base', size === 'small' ? 'size-28' : 'size-32', hasRange && onClear && !isDisabled ? 'visible' : 'invisible'),
+                        className: cn('flex items-center justify-center shrink-0 transition-colors hover:text-foreground-neutral-base cursor-pointer', size === 'small' ? 'size-28' : 'size-32', hasRange && onClear && !isDisabled ? 'visible' : 'invisible'),
                         "aria-label": "Clear date range",
                         children: /*#__PURE__*/ _jsx(Icon, {
                             name: "closeLine",
-                            className: "size-16 text-foreground-neutral-muted"
+                            className: "size-16 text-foreground-neutral-muted hover:text-foreground-neutral-subtle transition-colors"
                         })
                     }),
                     rightIcon && !hasRange && /*#__PURE__*/ _jsx("div", {
@@ -116,10 +140,14 @@ export const DateTimeRangePicker = /*#__PURE__*/ forwardRef(({ className, varian
                 align: "start",
                 children: /*#__PURE__*/ _jsx(Calendar, {
                     mode: "range",
-                    defaultMonth: dayPickerRange?.from,
+                    defaultMonth: defaultMonth,
                     selected: dayPickerRange,
                     onSelect: handleSelect,
-                    numberOfMonths: numberOfMonths
+                    numberOfMonths: numberOfMonths,
+                    disabled: disabledDates,
+                    formatters: {
+                        formatWeekdayName: (date)=>format(date, 'EEEEE')
+                    }
                 })
             })
         ]