@shipfox/react-ui 0.18.0 → 0.19.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/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')
+                    }
                 })
             })
         ]

package/dist/components/dropdown-input/dropdown-input.d.ts

@@ -0,0 +1,25 @@
+import { Input } from '../../components/input';
+import type { ComponentProps } from 'react';
+import { type ReactNode } from 'react';
+export type DropdownInputItem<T = unknown> = {
+    id: string | number;
+    label: string;
+    value: T;
+};
+type InputBaseProps = Omit<ComponentProps<typeof Input>, 'value' | 'onChange' | 'onSelect'>;
+export type DropdownInputProps<T = unknown> = InputBaseProps & {
+    value: string;
+    onValueChange: (value: string) => void;
+    onSelect?: (item: DropdownInputItem<T>) => void;
+    items: DropdownInputItem<T>[];
+    emptyPlaceholder?: string | ReactNode;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    focusedIndex: number;
+    onFocusedIndexChange: (index: number) => void;
+    selectedItem?: DropdownInputItem<T> | null;
+    dropdownClassName?: string;
+};
+export declare function DropdownInput<T = unknown>({ value, onValueChange, onSelect, items, emptyPlaceholder, open, onOpenChange, focusedIndex, onFocusedIndexChange, selectedItem, dropdownClassName, className, ...inputProps }: DropdownInputProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=dropdown-input.d.ts.map

package/dist/components/dropdown-input/dropdown-input.js

@@ -0,0 +1,188 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../components/button/index.js';
+import { Input } from '../../components/input/index.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover/index.js';
+import { useCallback, useEffect, useRef } from 'react';
+import { cn } from '../../utils/cn.js';
+export function DropdownInput({ value, onValueChange, onSelect, items = [], emptyPlaceholder, open, onOpenChange, focusedIndex, onFocusedIndexChange, selectedItem, dropdownClassName, className, ...inputProps }) {
+    const inputRef = useRef(null);
+    const blurTimeoutRef = useRef(null);
+    const popoverContentRef = useRef(null);
+    const itemRefs = useRef([]);
+    const isDisabled = Boolean(inputProps.disabled);
+    const hasResults = items.length > 0;
+    const shouldShowDropdown = open && !isDisabled;
+    const handleOpenChange = useCallback((nextOpen)=>{
+        if (isDisabled) {
+            if (!nextOpen) onOpenChange(false);
+            return;
+        }
+        onOpenChange(nextOpen);
+    }, [
+        isDisabled,
+        onOpenChange
+    ]);
+    const handleSelect = useCallback((item)=>{
+        onValueChange(item.label);
+        onSelect?.(item);
+        onOpenChange(false);
+        inputRef.current?.blur();
+    }, [
+        onValueChange,
+        onOpenChange,
+        onSelect
+    ]);
+    const handleInputChange = useCallback((e)=>{
+        onValueChange(e.target.value);
+        onFocusedIndexChange(-1);
+        if (!open && !isDisabled) {
+            onOpenChange(true);
+        }
+    }, [
+        onValueChange,
+        onFocusedIndexChange,
+        open,
+        isDisabled,
+        onOpenChange
+    ]);
+    const handleInputKeyDown = useCallback((e)=>{
+        if (!shouldShowDropdown || items.length === 0) return;
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            onFocusedIndexChange(focusedIndex < items.length - 1 ? focusedIndex + 1 : 0);
+        } else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            onFocusedIndexChange(focusedIndex > 0 ? focusedIndex - 1 : items.length - 1);
+        } else if (e.key === 'Enter' && focusedIndex >= 0) {
+            e.preventDefault();
+            const item = items[focusedIndex];
+            if (item) {
+                handleSelect(item);
+            }
+        } else if (e.key === 'Escape') {
+            e.preventDefault();
+            onOpenChange(false);
+        }
+    }, [
+        shouldShowDropdown,
+        items,
+        focusedIndex,
+        onFocusedIndexChange,
+        handleSelect,
+        onOpenChange
+    ]);
+    const handleInputBlur = useCallback(()=>{
+        if (blurTimeoutRef.current) {
+            clearTimeout(blurTimeoutRef.current);
+        }
+        blurTimeoutRef.current = setTimeout(()=>{
+            const activeElement = document.activeElement;
+            const popoverContent = activeElement?.closest('[data-radix-popper-content-wrapper]');
+            if (!popoverContent) {
+                onOpenChange(false);
+            }
+        }, 200);
+    }, [
+        onOpenChange
+    ]);
+    useEffect(()=>{
+        return ()=>{
+            if (blurTimeoutRef.current) {
+                clearTimeout(blurTimeoutRef.current);
+            }
+        };
+    }, []);
+    useEffect(()=>{
+        if (focusedIndex >= 0 && itemRefs.current[focusedIndex]) {
+            itemRefs.current[focusedIndex]?.scrollIntoView({
+                block: 'nearest'
+            });
+        }
+    }, [
+        focusedIndex
+    ]);
+    const handlePointerDownOutside = useCallback((e)=>{
+        const target = e.target;
+        if (target && popoverContentRef.current?.contains(target)) {
+            e.preventDefault();
+        }
+    }, []);
+    return /*#__PURE__*/ _jsxs(Popover, {
+        open: shouldShowDropdown,
+        onOpenChange: handleOpenChange,
+        children: [
+            /*#__PURE__*/ _jsx(PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "w-full",
+                    children: /*#__PURE__*/ _jsx(Input, {
+                        ref: inputRef,
+                        value: value,
+                        onChange: handleInputChange,
+                        onKeyDown: handleInputKeyDown,
+                        onBlur: handleInputBlur,
+                        onFocus: ()=>{
+                            if (blurTimeoutRef.current) {
+                                clearTimeout(blurTimeoutRef.current);
+                                blurTimeoutRef.current = null;
+                            }
+                            if (!open && !isDisabled && value.length > 0 && hasResults) {
+                                onOpenChange(true);
+                            }
+                        },
+                        className: className,
+                        ...inputProps
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(PopoverContent, {
+                align: "start",
+                sideOffset: 8,
+                className: cn('w-(--radix-popover-trigger-width) rounded-8 bg-background-components-base p-4 shadow-tooltip', dropdownClassName),
+                onOpenAutoFocus: (e)=>e.preventDefault(),
+                onPointerDownOutside: handlePointerDownOutside,
+                onInteractOutside: handlePointerDownOutside,
+                children: /*#__PURE__*/ _jsx("div", {
+                    ref: popoverContentRef,
+                    className: "max-h-200 overflow-y-auto overscroll-contain scrollbar",
+                    onWheel: (e)=>e.stopPropagation(),
+                    onTouchStart: (e)=>e.stopPropagation(),
+                    onTouchMove: (e)=>e.stopPropagation(),
+                    children: hasResults ? /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col gap-4 p-4",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "p-4 text-xs leading-20 text-foreground-neutral-muted",
+                                children: "Select a repository"
+                            }),
+                            items.map((item, index)=>{
+                                const isSelected = selectedItem?.id === item.id;
+                                const isFocused = focusedIndex === index;
+                                return /*#__PURE__*/ _jsx(Button, {
+                                    type: "button",
+                                    variant: "transparent",
+                                    ref: (el)=>{
+                                        itemRefs.current[index] = el;
+                                    },
+                                    onClick: ()=>handleSelect(item),
+                                    onMouseDown: (e)=>e.preventDefault(),
+                                    onMouseEnter: ()=>onFocusedIndexChange(index),
+                                    className: cn('!px-8 w-full text-left text-foreground-neutral-subtle', (isSelected || isFocused) && 'bg-background-components-hover text-foreground-neutral-base'),
+                                    children: /*#__PURE__*/ _jsx("span", {
+                                        className: "flex-1 truncate",
+                                        children: item.label
+                                    })
+                                }, item.id);
+                            })
+                        ]
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        className: "p-4 text-xs leading-20 text-foreground-neutral-muted",
+                        children: emptyPlaceholder ? emptyPlaceholder : null
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=dropdown-input.js.map