@beydesign/storybook 0.2.25 → 0.2.27

package/dist/App.d.ts

@@ -1,3 +1,3 @@
 import './App.css';
-declare function App(): import("react/jsx-runtime").JSX.Element;
+declare function App(): import("react").JSX.Element;
 export default App;

package/dist/stories/Form/DatePicker.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DatePickerProps } from './types';
+export declare const DatePicker: React.FC<DatePickerProps>;

package/dist/stories/Form/DatePicker.js

@@ -0,0 +1,286 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { Box, ClickAwayListener, Popper } from '@mui/material';
+import { DatePickerSelectionMode } from './types';
+import { Typography, TypographySize, TypographyWeight } from '../Typography';
+import { getIconComponent } from '../../utils';
+// ---------------------------------------------------------------------------
+// Design tokens (mapped from the Figma "Date picker" + "Calendar cell" nodes)
+// ---------------------------------------------------------------------------
+const COLOR = {
+    title: 'var(--color-text-text-title)',
+    onAccent: 'var(--color-text-text-on-accent-color)',
+    inactive: 'var(--color-text-text-inactive)',
+    placeholder: 'var(--color-text-text-placeholder)',
+    clicable: 'var(--color-text-text-clicable)',
+    accent: 'var(--color-text-text-accent)',
+    brand: 'var(--color-background-bg-brand-primary)',
+    brandHover: 'var(--color-background-bg-brand-primary-hover)',
+    brandTransparent: 'var(--color-background-bg-brand-transparent)',
+    highlightHover: 'var(--color-background-bg-card-highlight-hover)',
+    componentDisabled: 'var(--color-background-bg-component-disabled)',
+    element: 'var(--color-background-bg-element)',
+    card: 'var(--color-background-bg-page-contrast)',
+    component: 'var(--color-background-bg-component)',
+    borderComponent: 'var(--color-border-border-component)',
+    borderBrand: 'var(--color-border-border-brand)',
+    fgSecondary: 'var(--color-foreground-fg-secondary)',
+};
+const RADIUS_FULL = 'var(--spacing-tokens-size-in-px-radius-radius-full)';
+const RADIUS_XS = 'var(--spacing-tokens-size-in-px-radius-radius-xs)';
+const SPACING_LG = 'var(--spacing-tokens-size-in-px-spacing-spacing-lg)';
+const SPACING_MD = 'var(--spacing-tokens-size-in-px-spacing-spacing-md)';
+const SPACING_XS = 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)';
+const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+// ---------------------------------------------------------------------------
+// Pure date helpers (day-granularity, timezone-safe local dates)
+// ---------------------------------------------------------------------------
+const stripTime = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+const dayValue = (date) => stripTime(date).getTime();
+const isSameDay = (a, b) => !!a && !!b && dayValue(a) === dayValue(b);
+const isSameMonth = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+const addMonths = (date, months) => new Date(date.getFullYear(), date.getMonth() + months, 1);
+const addYears = (date, years) => new Date(date.getFullYear() + years, date.getMonth(), 1);
+/** 42 days (6 weeks) covering `viewDate`'s month, Monday-first. */
+const buildMonthGrid = (viewDate) => {
+    const first = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
+    // getDay(): 0=Sun..6=Sat -> Monday-first offset
+    const leading = (first.getDay() + 6) % 7;
+    const gridStart = new Date(first.getFullYear(), first.getMonth(), 1 - leading);
+    return Array.from({ length: 42 }, (_, i) => new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i));
+};
+const formatDate = (date) => date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+});
+const monthShortLabel = (monthIndex) => new Date(2000, monthIndex, 1).toLocaleDateString('en-US', {
+    month: 'short',
+});
+const CalendarCell = ({ label, onClick, disabled = false, muted = false, today = false, filled = false, rangeBg = false, roundLeft = false, roundRight = false, }) => {
+    const interactive = !!onClick && !disabled;
+    let outerBg = 'transparent';
+    if (disabled && (filled || rangeBg))
+        outerBg = COLOR.componentDisabled;
+    else if (rangeBg)
+        outerBg = COLOR.brandTransparent;
+    // Range background rounding. Non-range cells are fully rounded so the hover
+    // highlight reads as a circle.
+    let outerRadius = RADIUS_FULL;
+    if (rangeBg) {
+        const l = roundLeft ? RADIUS_FULL : '0';
+        const r = roundRight ? RADIUS_FULL : '0';
+        outerRadius = `${l} ${r} ${r} ${l}`;
+    }
+    let textColor = COLOR.title;
+    if (disabled)
+        textColor = COLOR.inactive;
+    else if (filled)
+        textColor = COLOR.onAccent;
+    else if (muted)
+        textColor = COLOR.inactive;
+    else if (today)
+        textColor = COLOR.clicable;
+    const innerBg = filled
+        ? disabled
+            ? COLOR.element
+            : COLOR.brand
+        : 'transparent';
+    const hoverSx = {};
+    if (interactive && filled) {
+        hoverSx['&:hover .datepicker-cell-inner'] = {
+            backgroundColor: COLOR.brandHover,
+        };
+        if (today)
+            hoverSx['&:hover .datepicker-cell-label'] = { color: COLOR.accent };
+    }
+    else if (interactive) {
+        hoverSx['&:hover'] = {
+            backgroundColor: COLOR.highlightHover,
+            ...(rangeBg ? {} : { borderRadius: RADIUS_FULL }),
+        };
+        if (today)
+            hoverSx['&:hover .datepicker-cell-label'] = { color: COLOR.accent };
+    }
+    return (_jsx(Box, { onClick: interactive ? onClick : undefined, display: "flex", alignItems: "center", justifyContent: "center", width: "40px", height: "40px", flexShrink: 0, bgcolor: outerBg, borderRadius: outerRadius, sx: {
+            boxSizing: 'border-box',
+            cursor: interactive ? 'pointer' : 'default',
+            ...hoverSx,
+        }, children: _jsx(Box, { className: "datepicker-cell-inner", display: "flex", alignItems: "center", justifyContent: "center", width: "28px", height: "28px", borderRadius: "14px", bgcolor: innerBg, children: _jsx(Typography, { className: "datepicker-cell-label", size: TypographySize.TextS, weight: TypographyWeight.Regular, color: textColor, textStyle: { lineHeight: '20px' }, children: label }) }) }));
+};
+const CalendarHeader = ({ title, onPrev, onNext, onTitleClick, }) => {
+    const caretButton = (icon, onClick) => (_jsx(Box, { onClick: onClick, display: "flex", alignItems: "center", justifyContent: "center", padding: "10px", borderRadius: RADIUS_XS, flexShrink: 0, sx: {
+            cursor: 'pointer',
+            filter: 'drop-shadow(0px 1px 1px rgba(25, 28, 31, 0.05))',
+            '&:hover': { backgroundColor: COLOR.highlightHover },
+        }, children: getIconComponent(icon, {
+            width: '20px',
+            height: '20px',
+            color: COLOR.title,
+            'aria-hidden': 'true',
+        }) }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", width: "100%", children: [caretButton('CaretLeft', onPrev), _jsx(Box, { onClick: onTitleClick, display: "flex", alignItems: "center", justifyContent: "center", flex: "1 0 0", minWidth: 0, borderRadius: RADIUS_XS, padding: `${SPACING_XS} ${SPACING_MD}`, sx: {
+                    cursor: onTitleClick ? 'pointer' : 'default',
+                    '&:hover': onTitleClick
+                        ? { backgroundColor: COLOR.highlightHover }
+                        : undefined,
+                }, children: _jsx(Typography, { size: TypographySize.HeadingS, weight: TypographyWeight.Medium, color: COLOR.title, textStyle: { textAlign: 'center' }, children: title }) }), caretButton('CaretRight', onNext)] }));
+};
+export const DatePicker = ({ label = 'Select date', placeholder = 'Select a date', disabled = false, required = false, showClear = true, minDate, maxDate, ...props }) => {
+    const [open, setOpen] = useState(false);
+    const [view, setView] = useState('date');
+    const anchorRef = useRef(null);
+    // The selection, expressed uniformly as a range internally.
+    const selection = useMemo(() => {
+        if (props.selectionMode === DatePickerSelectionMode.Single) {
+            return { start: props.value, end: props.value };
+        }
+        return props.value;
+    }, [props.selectionMode, props.value]);
+    const anchorDate = selection.start ?? new Date();
+    const [viewDate, setViewDate] = useState(new Date(anchorDate.getFullYear(), anchorDate.getMonth(), 1));
+    // Keep the visible month in sync with the selection whenever the popup opens.
+    const handleToggleOpen = () => {
+        if (disabled)
+            return;
+        if (!open) {
+            const base = selection.start ?? new Date();
+            setViewDate(new Date(base.getFullYear(), base.getMonth(), 1));
+            setView('date');
+        }
+        setOpen((prev) => !prev);
+    };
+    const isDisabledDay = (date) => (!!minDate && dayValue(date) < dayValue(minDate)) ||
+        (!!maxDate && dayValue(date) > dayValue(maxDate));
+    const commitSingle = (date) => {
+        if (props.selectionMode !== DatePickerSelectionMode.Single)
+            return;
+        props.onChange(date);
+        setOpen(false);
+    };
+    const commitRange = (date) => {
+        if (props.selectionMode !== DatePickerSelectionMode.Range)
+            return;
+        const { start, end } = props.value;
+        if (!start || (start && end)) {
+            // Start a fresh range.
+            props.onChange({ start: date, end: null });
+            return;
+        }
+        // Complete the range, ordering the two bounds.
+        if (dayValue(date) < dayValue(start)) {
+            props.onChange({ start: date, end: start });
+        }
+        else {
+            props.onChange({ start, end: date });
+        }
+        setOpen(false);
+    };
+    const handleDayClick = (date) => {
+        if (isDisabledDay(date))
+            return;
+        if (props.selectionMode === DatePickerSelectionMode.Single) {
+            commitSingle(date);
+        }
+        else {
+            commitRange(date);
+        }
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        if (props.selectionMode === DatePickerSelectionMode.Single) {
+            props.onChange(null);
+        }
+        else {
+            props.onChange({ start: null, end: null });
+        }
+    };
+    const displayValue = useMemo(() => {
+        const { start, end } = selection;
+        if (props.selectionMode === DatePickerSelectionMode.Single) {
+            return start ? formatDate(start) : '';
+        }
+        if (start && end)
+            return `${formatDate(start)} – ${formatDate(end)}`;
+        if (start)
+            return `${formatDate(start)} – …`;
+        return '';
+    }, [selection, props.selectionMode]);
+    const hasSelection = displayValue.length > 0;
+    // -------------------------------------------------------------------------
+    // Date grid
+    // -------------------------------------------------------------------------
+    const weeks = useMemo(() => {
+        const grid = buildMonthGrid(viewDate);
+        return Array.from({ length: 6 }, (_, w) => grid.slice(w * 7, w * 7 + 7));
+    }, [viewDate]);
+    const today = new Date();
+    const { start: selStart, end: selEnd } = selection;
+    const hasSpan = !!selStart && !!selEnd && !isSameDay(selStart, selEnd);
+    const isRangeBg = (date) => hasSpan &&
+        dayValue(date) >= dayValue(selStart) &&
+        dayValue(date) <= dayValue(selEnd);
+    const isFilled = (date) => isSameDay(date, selStart) || isSameDay(date, selEnd);
+    const renderDateView = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: SPACING_LG, width: "280px", children: [_jsx(CalendarHeader, { title: viewDate.toLocaleDateString('en-US', {
+                    month: 'long',
+                    year: 'numeric',
+                }), onPrev: () => setViewDate(addMonths(viewDate, -1)), onNext: () => setViewDate(addMonths(viewDate, 1)), onTitleClick: () => setView('month') }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: SPACING_XS, children: [_jsx(Box, { display: "flex", children: WEEKDAYS.map((day) => (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", width: "40px", height: "40px", flexShrink: 0, children: _jsx(Typography, { size: TypographySize.HeadingXS, weight: TypographyWeight.Medium, color: COLOR.title, children: day }) }, day))) }), weeks.map((week, wIdx) => (_jsx(Box, { display: "flex", children: week.map((date, dIdx) => {
+                            const rangeBg = isRangeBg(date);
+                            return (_jsx(CalendarCell, { label: String(date.getDate()), onClick: () => handleDayClick(date), disabled: isDisabledDay(date), muted: !isSameMonth(date, viewDate), today: isSameDay(date, today), filled: isFilled(date), rangeBg: rangeBg, roundLeft: rangeBg && (dIdx === 0 || !isRangeBg(week[dIdx - 1])), roundRight: rangeBg && (dIdx === 6 || !isRangeBg(week[dIdx + 1])) }, dIdx));
+                        }) }, wIdx)))] })] }));
+    const renderMonthView = () => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: SPACING_LG, width: "280px", children: [_jsx(CalendarHeader, { title: String(viewDate.getFullYear()), onPrev: () => setViewDate(addYears(viewDate, -1)), onNext: () => setViewDate(addYears(viewDate, 1)), onTitleClick: () => setView('year') }), _jsx(Box, { display: "flex", flexDirection: "column", justifyContent: "space-between", height: "260px", paddingY: SPACING_MD, children: Array.from({ length: 4 }, (_, row) => (_jsx(Box, { display: "flex", justifyContent: "space-between", children: Array.from({ length: 3 }, (_, col) => {
+                        const monthIndex = row * 3 + col;
+                        const monthStart = new Date(viewDate.getFullYear(), monthIndex, 1);
+                        const monthEnd = new Date(viewDate.getFullYear(), monthIndex + 1, 0);
+                        const monthDisabled = (!!minDate && dayValue(monthEnd) < dayValue(minDate)) ||
+                            (!!maxDate && dayValue(monthStart) > dayValue(maxDate));
+                        const selected = !!selStart &&
+                            selStart.getFullYear() === viewDate.getFullYear() &&
+                            selStart.getMonth() === monthIndex;
+                        return (_jsx(CalendarCell, { label: monthShortLabel(monthIndex), onClick: () => {
+                                setViewDate(monthStart);
+                                setView('date');
+                            }, disabled: monthDisabled, filled: selected }, col));
+                    }) }, row))) })] }));
+    const renderYearView = () => {
+        const decadeStart = Math.floor(viewDate.getFullYear() / 10) * 10;
+        const years = Array.from({ length: 10 }, (_, i) => decadeStart + i);
+        return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: SPACING_LG, width: "280px", children: [_jsx(CalendarHeader, { title: `${decadeStart}-${decadeStart + 9}`, onPrev: () => setViewDate(addYears(viewDate, -10)), onNext: () => setViewDate(addYears(viewDate, 10)) }), _jsx(Box, { display: "flex", flexWrap: "wrap", justifyContent: "space-between", rowGap: SPACING_LG, height: "260px", paddingY: SPACING_MD, alignContent: "space-between", children: years.map((year) => {
+                        const yearDisabled = (!!minDate && year < minDate.getFullYear()) ||
+                            (!!maxDate && year > maxDate.getFullYear());
+                        const selected = !!selStart && selStart.getFullYear() === year;
+                        return (_jsx(Box, { width: "33.333%", display: "flex", justifyContent: "center", children: _jsx(CalendarCell, { label: String(year), onClick: () => {
+                                    setViewDate(new Date(year, viewDate.getMonth(), 1));
+                                    setView('month');
+                                }, disabled: yearDisabled, muted: yearDisabled, filled: selected }) }, year));
+                    }) })] }));
+    };
+    return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsxs(Box, { display: "flex", flexDirection: "column", justifyContent: "center", gap: SPACING_MD, position: "relative", width: "100%", minWidth: "300px", children: [label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { textAlign: 'left' }, required: required, children: label })), _jsxs(Box, { ref: anchorRef, display: "flex", flexDirection: "row", gap: SPACING_MD, height: "40px", padding: `0 ${SPACING_LG}`, alignItems: "center", justifyContent: "space-between", border: `1px solid ${open ? COLOR.borderBrand : COLOR.borderComponent}`, borderRadius: "4px", bgcolor: disabled ? COLOR.componentDisabled : COLOR.component, onClick: handleToggleOpen, tabIndex: disabled ? -1 : 0, "aria-haspopup": "dialog", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", sx: {
+                        boxSizing: 'border-box',
+                        cursor: disabled ? 'default' : 'pointer',
+                    }, children: [_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", gap: SPACING_MD, flexGrow: 1, minWidth: 0, overflow: "hidden", children: [_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: getIconComponent('CalendarBlank', {
+                                        width: '20px',
+                                        height: '20px',
+                                        color: COLOR.fgSecondary,
+                                        'aria-hidden': 'true',
+                                    }) }), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: hasSelection ? COLOR.title : COLOR.placeholder, textStyle: {
+                                        flexGrow: 1,
+                                        minWidth: 0,
+                                        textAlign: 'left',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap',
+                                        maxWidth: '100%',
+                                    }, children: hasSelection ? displayValue : placeholder })] }), !disabled && showClear && hasSelection && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: getIconComponent('X', {
+                                width: '20px',
+                                height: '20px',
+                                color: COLOR.fgSecondary,
+                                onClick: handleClear,
+                                'aria-label': 'Clear date',
+                                role: 'button',
+                                tabIndex: 0,
+                            }) }))] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { zIndex: 1300 }, children: _jsxs(Box, { bgcolor: COLOR.card, borderRadius: SPACING_MD, mt: "4px", paddingX: "24px", paddingY: "20px", width: "328px", role: "dialog", sx: {
+                            boxSizing: 'border-box',
+                            boxShadow: '0px 20px 24px -4px rgba(34, 7, 56, 0.08)',
+                        }, children: [view === 'date' && renderDateView(), view === 'month' && renderMonthView(), view === 'year' && renderYearView()] }) })] }) }));
+};

package/dist/stories/Form/DatePicker.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { DatePicker } from './DatePicker';
+declare const meta: Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+export declare const SingleSelect: Story;
+export declare const PreselectedDate: Story;
+export declare const RangeSelect: Story;
+export declare const PreselectedRange: Story;
+export declare const WithMinMax: Story;
+export declare const Disabled: Story;

package/dist/stories/Form/DatePicker.stories.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { DatePicker } from './DatePicker';
+import { DatePickerSelectionMode } from './types';
+const meta = {
+    title: 'Design System/Components/Form/DatePicker',
+    component: DatePicker,
+    parameters: {
+        layout: 'centered',
+        design: {
+            type: 'figspec',
+            url: 'https://www.figma.com/design/mIhjz2yJjcpLlIqw6oUivt/Beyond-Presence?node-id=4785-10092',
+        },
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        selectionMode: {
+            control: 'select',
+            options: Object.values(DatePickerSelectionMode),
+            description: 'Whether the picker selects a single date or a date range',
+            table: {
+                type: { summary: 'DatePickerSelectionMode' },
+                defaultValue: { summary: DatePickerSelectionMode.Single },
+            },
+        },
+        value: {
+            control: false,
+            description: 'The selected value: a Date | null (Single) or a { start, end } range (Range)',
+            table: {
+                type: { summary: 'Date | null | DateRange' },
+            },
+        },
+        onChange: {
+            description: 'Called with the updated selection',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        label: {
+            control: 'text',
+            description: 'The label rendered above the input',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder shown when no date is selected',
+            table: {
+                type: { summary: 'string' },
+            },
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the date picker is disabled',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        required: {
+            control: 'boolean',
+            description: 'Whether the field is required',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showClear: {
+            control: 'boolean',
+            description: 'Whether to show the clear button when a date is selected',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        minDate: {
+            control: false,
+            description: 'Earliest selectable date (inclusive)',
+            table: {
+                type: { summary: 'Date' },
+            },
+        },
+        maxDate: {
+            control: false,
+            description: 'Latest selectable date (inclusive)',
+            table: {
+                type: { summary: 'Date' },
+            },
+        },
+    },
+};
+export default meta;
+const InteractiveSingle = ({ initialValue, ...args }) => {
+    const [value, setValue] = useState(initialValue ?? null);
+    return (_jsx(DatePicker, { ...args, selectionMode: DatePickerSelectionMode.Single, value: value, onChange: setValue }));
+};
+const InteractiveRange = ({ initialValue, ...args }) => {
+    const [value, setValue] = useState(initialValue ?? { start: null, end: null });
+    return (_jsx(DatePicker, { ...args, selectionMode: DatePickerSelectionMode.Range, value: value, onChange: setValue }));
+};
+export const SingleSelect = {
+    render: (args) => _jsx(InteractiveSingle, { ...args }),
+    args: {
+        selectionMode: DatePickerSelectionMode.Single,
+        label: 'Date',
+        placeholder: 'Select a date',
+        showClear: true,
+        required: false,
+        disabled: false,
+    },
+};
+export const PreselectedDate = {
+    render: (args) => (_jsx(InteractiveSingle, { ...args, initialValue: new Date(2024, 7, 11) })),
+    args: {
+        selectionMode: DatePickerSelectionMode.Single,
+        label: 'Start date',
+        placeholder: 'Select a date',
+        showClear: true,
+    },
+};
+export const RangeSelect = {
+    render: (args) => _jsx(InteractiveRange, { ...args }),
+    args: {
+        selectionMode: DatePickerSelectionMode.Range,
+        label: 'Date range',
+        placeholder: 'Select a range',
+        showClear: true,
+    },
+};
+export const PreselectedRange = {
+    render: (args) => (_jsx(InteractiveRange, { ...args, initialValue: { start: new Date(2024, 7, 8), end: new Date(2024, 7, 11) } })),
+    args: {
+        selectionMode: DatePickerSelectionMode.Range,
+        label: 'Reporting period',
+        placeholder: 'Select a range',
+        showClear: true,
+    },
+};
+export const WithMinMax = {
+    render: (args) => (_jsx(InteractiveSingle, { ...args, initialValue: new Date(2024, 7, 15) })),
+    args: {
+        selectionMode: DatePickerSelectionMode.Single,
+        label: 'Bounded date',
+        placeholder: 'Select a date',
+        minDate: new Date(2024, 7, 5),
+        maxDate: new Date(2024, 7, 25),
+        showClear: true,
+    },
+};
+export const Disabled = {
+    render: (args) => (_jsx(InteractiveSingle, { ...args, initialValue: new Date(2024, 7, 11) })),
+    args: {
+        selectionMode: DatePickerSelectionMode.Single,
+        label: 'Date',
+        placeholder: 'Select a date',
+        disabled: true,
+    },
+};

package/dist/stories/Form/Dropdown.js

@@ -1,21 +1,44 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { DropdownType } from './types';
-import { Box, ClickAwayListener, Popper } from '@mui/material';
+import { Box, CircularProgress, ClickAwayListener, Popper, } from '@mui/material';
 import { Typography, TypographySize, TypographyWeight } from '../Typography';
 import { getIconComponent } from '../../utils';
 import { Checkbox } from './Checkbox';
-export const Dropdown = ({ disabled = false, placeholder = 'Select an option', label = 'Select', showLeadingIcon = false, leadingIcon = 'List', showClear = true, options, required = false, showCheckboxes = false, showTicks = true, ...props }) => {
+import { Badge, BadgeColor, BadgeSize } from '../UI';
+export const Dropdown = ({ disabled = false, placeholder = 'Select an option', label = 'Select', showLeadingIcon = false, leadingIcon = 'List', showClear = true, options, required = false, showCheckboxes = false, showTicks = true, onEndReached, isLoadingMore = false, ...props }) => {
     const [open, setOpen] = useState(false);
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const anchorRef = useRef(null);
     const optionsContainerRef = useRef(null);
-    const value = useMemo(() => {
-        if (props.type === DropdownType.SingleSelect) {
-            return props.value;
-        }
-        return Array.isArray(props.value) ? props.value.join(', ') : '';
-    }, [props.type, props.value]);
+    // Normalize the two accepted option shapes (string[] and DropdownOption[])
+    // into a single canonical form so the rest of the component only deals with
+    // objects. A bare string maps to an option whose value equals its label.
+    const normalizedOptions = useMemo(() => options.map((option) => typeof option === 'string' ? { value: option, label: option } : option), [options]);
+    // The currently selected options, resolved from the selected value(s). When a
+    // selected value isn't present in the loaded options (e.g. an infinite list
+    // hasn't fetched it yet), fall back to an option whose label is the raw value
+    // so the trigger never goes blank.
+    const selectedOptions = useMemo(() => {
+        const selectedValues = props.type === DropdownType.SingleSelect
+            ? props.value
+                ? [props.value]
+                : []
+            : Array.isArray(props.value)
+                ? props.value
+                : [];
+        return selectedValues.map((val) => normalizedOptions.find((option) => option.value === val) ?? {
+            value: val,
+            label: val,
+        });
+    }, [props.type, props.value, normalizedOptions]);
+    // Whether any selected option carries an avatar or badge. When it does, the
+    // trigger renders the rich "Avatar leading" layout; otherwise it falls back to
+    // the plain joined-label text (preserving the original behavior).
+    const hasRichSelection = selectedOptions.some((option) => option.avatar || option.badge);
+    const hasSelection = selectedOptions.length > 0;
+    // Plain-text representation of the selection, used for the non-rich trigger.
+    const displayValue = useMemo(() => selectedOptions.map((option) => option.label).join(', '), [selectedOptions]);
     const handleOptionSelect = useCallback((option) => {
         if (props.type === DropdownType.SingleSelect) {
             props.onChange(option);
@@ -43,8 +66,8 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
         switch (e.key) {
             case 'Enter':
                 e.preventDefault();
-                if (open) {
-                    handleOptionSelect(options[highlightedIndex]);
+                if (open && normalizedOptions[highlightedIndex]) {
+                    handleOptionSelect(normalizedOptions[highlightedIndex].value);
                 }
                 break;
             case ' ':
@@ -61,7 +84,7 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                     setOpen(true);
                 }
                 else {
-                    setHighlightedIndex((prev) => prev < options.length - 1 ? prev + 1 : 0);
+                    setHighlightedIndex((prev) => prev < normalizedOptions.length - 1 ? prev + 1 : 0);
                 }
                 break;
             case 'ArrowUp':
@@ -70,7 +93,7 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                     setOpen(true);
                 }
                 else {
-                    setHighlightedIndex((prev) => prev > 0 ? prev - 1 : options.length - 1);
+                    setHighlightedIndex((prev) => prev > 0 ? prev - 1 : normalizedOptions.length - 1);
                 }
                 break;
             case 'Tab':
@@ -86,16 +109,16 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
             if (open &&
                 e.key === 'Enter' &&
                 highlightedIndex >= 0 &&
-                highlightedIndex < options.length &&
+                highlightedIndex < normalizedOptions.length &&
                 !disabled) {
-                handleOptionSelect(options[highlightedIndex]);
+                handleOptionSelect(normalizedOptions[highlightedIndex].value);
             }
         };
         window.addEventListener('keydown', handleKeyPress);
         return () => {
             window.removeEventListener('keydown', handleKeyPress);
         };
-    }, [open, highlightedIndex, options, handleOptionSelect, disabled]);
+    }, [open, highlightedIndex, normalizedOptions, handleOptionSelect, disabled]);
     // Scroll to highlighted option
     useEffect(() => {
         if (open && highlightedIndex >= 0 && optionsContainerRef.current) {
@@ -105,34 +128,56 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
             }
         }
     }, [highlightedIndex, open]);
-    const isOptionSelected = (option) => {
+    const isOptionSelected = (optionValue) => {
         if (props.type === DropdownType.SingleSelect) {
-            return props.value === option;
+            return props.value === optionValue;
         }
-        return Array.isArray(props.value) && props.value.includes(option);
+        return Array.isArray(props.value) && props.value.includes(optionValue);
     };
+    // Fire onEndReached once the user scrolls within `endReachedThreshold` pixels
+    // of the bottom. Suppressed while a load is already in flight so it doesn't
+    // spam the caller between the scroll and the parent setting isLoadingMore.
+    const handleOptionsScroll = useCallback(() => {
+        const container = optionsContainerRef.current;
+        if (!container || !onEndReached || isLoadingMore)
+            return;
+        const endReachedThreshold = 40;
+        const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
+        if (distanceFromBottom <= endReachedThreshold) {
+            onEndReached();
+        }
+    }, [onEndReached, isLoadingMore]);
     return (_jsx(ClickAwayListener, { onClickAway: () => setOpen(false), children: _jsxs(Box, { display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', position: 'relative', width: "100%", minWidth: '300px', children: [label && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: { textAlign: 'left' }, required: required, children: label })), _jsxs(Box, { ref: anchorRef, display: 'flex', flexDirection: 'row', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', height: '40px', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', alignItems: 'center', justifyContent: 'space-between', border: `1px solid ${open
-                        ? 'var(--color-border-border-component-active)'
+                        ? 'var(--color-border-border-brand)'
                         : 'var(--color-border-border-component)'}`, borderRadius: '4px', bgcolor: disabled
                         ? 'var(--color-background-bg-component-disabled)'
-                        : 'var(--color-background-bg-component)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", sx: { boxSizing: 'border-box' }, children: [showLeadingIcon && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: getIconComponent(leadingIcon, {
-                                width: '24px',
-                                height: '24px',
-                                color: 'var(--color-foreground-fg-secondary)',
-                                'aria-hidden': 'true',
-                            }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: {
-                                flexGrow: 1,
-                                minWidth: 0,
-                                textAlign: 'left',
-                                overflow: 'hidden',
-                                textOverflow: 'ellipsis',
-                                whiteSpace: 'nowrap',
-                                maxWidth: '100%',
-                            }, color: value
-                                ? 'var(--color-text-text-title)'
-                                : 'var(--color-text-text-placeholder)', children: value || placeholder }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexShrink: 0, children: [!disabled &&
+                        : 'var(--color-background-bg-component)', position: 'relative', onClick: () => !disabled && setOpen((prev) => !prev), onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, "aria-haspopup": "listbox", "aria-expanded": open, "aria-disabled": disabled, role: "combobox", sx: { boxSizing: 'border-box' }, children: [_jsx(Box, { display: "flex", flexDirection: "row", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexGrow: 1, minWidth: 0, overflow: "hidden", children: hasSelection && hasRichSelection ? (_jsxs(_Fragment, { children: [selectedOptions[0].avatar && (_jsx(Box, { component: "img", src: selectedOptions[0].avatar, alt: "", width: "24px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-full)", flexShrink: 0, sx: {
+                                            objectFit: 'cover',
+                                            border: '0.5px solid var(--color-border-border-divider)',
+                                        } })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
+                                            minWidth: 0,
+                                            textAlign: 'left',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+                                        }, children: selectedOptions[0].label }), selectedOptions[0].badge && (_jsx(Box, { flexShrink: 0, children: _jsx(Badge, { size: BadgeSize.xs, color: BadgeColor.Default, text: selectedOptions[0].badge }) })), selectedOptions.length > 1 && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: { whiteSpace: 'nowrap', flexShrink: 0 }, children: `+${selectedOptions.length - 1} more` }))] })) : (_jsxs(_Fragment, { children: [showLeadingIcon && (_jsx(Box, { display: "flex", alignItems: "center", flexShrink: 0, children: getIconComponent(leadingIcon, {
+                                            width: '24px',
+                                            height: '24px',
+                                            color: 'var(--color-foreground-fg-secondary)',
+                                            'aria-hidden': 'true',
+                                        }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, textStyle: {
+                                            flexGrow: 1,
+                                            minWidth: 0,
+                                            textAlign: 'left',
+                                            overflow: 'hidden',
+                                            textOverflow: 'ellipsis',
+                                            whiteSpace: 'nowrap',
+                                            maxWidth: '100%',
+                                        }, color: hasSelection
+                                            ? 'var(--color-text-text-title)'
+                                            : 'var(--color-text-text-placeholder)', children: hasSelection ? displayValue : placeholder })] })) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "var(--spacing-tokens-size-in-px-spacing-spacing-sm)", flexShrink: 0, children: [!disabled &&
                                     showClear &&
-                                    value &&
+                                    hasSelection &&
                                     getIconComponent('X', {
                                         width: '24px',
                                         height: '24px',
@@ -153,28 +198,31 @@ export const Dropdown = ({ disabled = false, placeholder = 'Select an option', l
                                         height: '24px',
                                         color: 'var(--color-foreground-fg-secondary)',
                                         'aria-hidden': 'true',
-                                    })] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsx(Box, { ref: optionsContainerRef, bgcolor: 'var(--color-background-bg-component)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
+                                    })] })] }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, placement: "bottom-start", style: { width: anchorRef.current?.offsetWidth, zIndex: 1300 }, children: _jsxs(Box, { ref: optionsContainerRef, onScroll: handleOptionsScroll, bgcolor: 'var(--color-background-bg-component)', borderRadius: '4px', width: '100%', maxHeight: '200px', overflow: 'auto', boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1)', mt: '4px', role: "listbox", sx: {
                             border: '1px solid var(--color-border-border-component)',
-                        }, children: options.length === 0 ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (options.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', height: '40px', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-lg)', onClick: () => handleOptionSelect(option), onMouseEnter: () => setHighlightedIndex(index), sx: {
-                                cursor: 'pointer',
-                                backgroundColor: highlightedIndex === index
-                                    ? 'var(--color-background-bg-secondary-action-hover)'
-                                    : 'transparent',
-                                '&:hover': {
-                                    backgroundColor: 'var(--color-background-bg-secondary-action-hover)',
-                                },
-                                width: '100%',
-                                boxSizing: 'border-box',
-                            }, role: "option", "aria-selected": isOptionSelected(option), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-xs)', width: "calc(100% - 28px)", overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option), onChange: () => handleOptionSelect(option), style: { margin: 0, padding: 0 } }) })), _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
-                                                overflow: 'hidden',
-                                                textOverflow: 'ellipsis',
-                                                whiteSpace: 'nowrap',
-                                                width: '100%',
-                                            }, children: option })] }), _jsx(Box, { flexShrink: 0, display: "flex", alignItems: "center", children: showTicks &&
-                                        isOptionSelected(option) &&
-                                        getIconComponent('Check', {
-                                            width: '20px',
-                                            height: '20px',
-                                            color: 'var(--color-foreground-fg-brand-primary)',
-                                        }) })] }, option)))) }) })] }) }));
+                        }, children: [normalizedOptions.length === 0 && !isLoadingMore ? (_jsx(Box, { display: 'flex', flexDirection: 'row', paddingX: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', paddingY: 'var(--spacing-tokens-size-in-px-spacing-spacing-sm)', children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, children: "No options found" }) })) : (normalizedOptions.map((option, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', height: '36px', padding: '0 var(--spacing-tokens-size-in-px-spacing-spacing-md)', onClick: () => handleOptionSelect(option.value), onMouseEnter: () => setHighlightedIndex(index), sx: {
+                                    cursor: 'pointer',
+                                    backgroundColor: highlightedIndex === index
+                                        ? 'var(--color-background-bg-secondary-action-hover)'
+                                        : 'transparent',
+                                    '&:hover': {
+                                        backgroundColor: 'var(--color-background-bg-secondary-action-hover)',
+                                    },
+                                    width: '100%',
+                                    boxSizing: 'border-box',
+                                }, role: "option", "aria-selected": isOptionSelected(option.value), children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', flexGrow: 1, minWidth: 0, overflow: "hidden", children: [showCheckboxes && (_jsx(Box, { flexShrink: 0, children: _jsx(Checkbox, { checked: isOptionSelected(option.value), onChange: () => handleOptionSelect(option.value), style: { margin: 0, padding: 0 } }) })), option.avatar && (_jsx(Box, { component: "img", src: option.avatar, alt: "", width: "24px", height: "24px", borderRadius: "var(--spacing-tokens-size-in-px-radius-radius-full)", flexShrink: 0, sx: {
+                                                    objectFit: 'cover',
+                                                    border: '0.5px solid var(--color-border-border-divider)',
+                                                } })), _jsx(Box, { flexGrow: 1, minWidth: 0, overflow: "hidden", children: _jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: "var(--color-text-text-title)", textStyle: {
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                        width: '100%',
+                                                    }, children: option.label }) }), option.badge && (_jsx(Box, { flexShrink: 0, children: _jsx(Badge, { size: BadgeSize.xs, color: BadgeColor.Default, text: option.badge }) }))] }), _jsx(Box, { flexShrink: 0, display: "flex", alignItems: "center", children: showTicks &&
+                                            isOptionSelected(option.value) &&
+                                            getIconComponent('Check', {
+                                                width: '20px',
+                                                height: '20px',
+                                                color: 'var(--color-foreground-fg-brand-primary)',
+                                            }) })] }, option.value)))), isLoadingMore && (_jsx(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: '36px', width: '100%', role: "status", "aria-label": "Loading more options", children: _jsx(CircularProgress, { size: 20, sx: { color: 'var(--color-foreground-fg-brand-primary)' } }) }))] }) })] }) }));
 };

package/dist/stories/Form/Dropdown.stories.d.ts

@@ -4,3 +4,7 @@ declare const meta: Meta<typeof Dropdown>;
 export default meta;
 type Story = StoryObj<typeof Dropdown>;
 export declare const Default: Story;
+export declare const ObjectOptions: Story;
+export declare const AvatarAndBadge: Story;
+export declare const MultiSelect: Story;
+export declare const InfiniteLoading: Story;

package/dist/stories/Form/Dropdown.stories.js

@@ -1,3 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Dropdown } from './Dropdown';
 import { DropdownType } from './types';
 const meta = {
@@ -13,10 +15,10 @@ const meta = {
     tags: ['autodocs'],
     argTypes: {
         options: {
-            control: 'select',
-            description: 'The options to display in the dropdown',
+            control: 'object',
+            description: 'The options to display. Accepts a plain string[] (each string is both value and label) or a DropdownOption[] for id-based selection with optional avatar/badge.',
             table: {
-                type: { summary: 'string[]' },
+                type: { summary: 'string[] | DropdownOption[]' },
             },
         },
         value: {
@@ -91,10 +93,46 @@ const meta = {
                 type: { summary: 'boolean' },
             },
         },
+        showCheckboxes: {
+            control: 'boolean',
+            description: 'Whether to show checkboxes on each option (multi-select)',
+            table: {
+                type: { summary: 'boolean' },
+            },
+        },
+        showTicks: {
+            control: 'boolean',
+            description: 'Whether to show a trailing tick on the selected option',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' },
+            },
+        },
+        onEndReached: {
+            description: 'Called when the user scrolls near the bottom of the list. Wire to fetchNextPage from an infinite query. Suppressed while isLoadingMore is true.',
+            table: {
+                type: { summary: 'function' },
+            },
+        },
+        isLoadingMore: {
+            control: 'boolean',
+            description: 'Whether more options are being loaded. Shows a spinner row at the bottom and suppresses onEndReached.',
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false' },
+            },
+        },
     },
 };
 export default meta;
+// Single-select stories are interactive so the selection round-trips through
+// the same value/onChange the app uses.
+const InteractiveSingleSelect = (args) => {
+    const [value, setValue] = useState(typeof args.value === 'string' ? args.value : '');
+    return (_jsx(Dropdown, { ...args, type: DropdownType.SingleSelect, value: value, onChange: (next) => setValue(next) }));
+};
 export const Default = {
+    render: (args) => _jsx(InteractiveSingleSelect, { ...args }),
     args: {
         options: [
             'Option 1',
@@ -120,3 +158,125 @@ export const Default = {
         required: false,
     },
 };
+// Object options with a deliberately duplicate label. Because selection now
+// round-trips through `value` (the id) instead of the label, "Alex Morgan"
+// appears twice but each entry stays independently selectable.
+export const ObjectOptions = {
+    render: (args) => _jsx(InteractiveSingleSelect, { ...args }),
+    args: {
+        options: [
+            { value: 'user-1', label: 'Alex Morgan' },
+            { value: 'user-2', label: 'Alex Morgan' },
+            { value: 'user-3', label: 'Jordan Lee' },
+            { value: 'user-4', label: 'Sam Rivera' },
+        ],
+        value: 'user-2',
+        onChange: () => { },
+        type: DropdownType.SingleSelect,
+        placeholder: 'Select a person',
+        label: 'Assignee',
+        showLeadingIcon: false,
+        showClear: true,
+        required: false,
+    },
+};
+// Rich options: leading avatar + trailing badge pill, matching the Figma
+// "Avatar leading" variant. The trigger mirrors the selected option's avatar
+// and badge.
+const AVATAR_OPTIONS = [
+    {
+        value: 'agent-1',
+        label: 'Emma Wilson',
+        avatar: 'https://i.pravatar.cc/48?img=1',
+        badge: 'Screening Interview',
+    },
+    {
+        value: 'agent-2',
+        label: 'Liam Chen',
+        avatar: 'https://i.pravatar.cc/48?img=2',
+        badge: 'Technical Round',
+    },
+    {
+        value: 'agent-3',
+        label: 'Olivia Brown',
+        avatar: 'https://i.pravatar.cc/48?img=3',
+        badge: 'Culture Fit',
+    },
+    {
+        value: 'agent-4',
+        label: 'Noah Davis',
+        avatar: 'https://i.pravatar.cc/48?img=4',
+        badge: 'Final Round',
+    },
+];
+export const AvatarAndBadge = {
+    render: (args) => _jsx(InteractiveSingleSelect, { ...args }),
+    args: {
+        options: AVATAR_OPTIONS,
+        value: 'agent-1',
+        onChange: () => { },
+        type: DropdownType.SingleSelect,
+        placeholder: 'Select an agent',
+        label: 'Interview agent',
+        showLeadingIcon: false,
+        showClear: true,
+        required: false,
+    },
+};
+const InteractiveMultiSelect = (args) => {
+    const [value, setValue] = useState(Array.isArray(args.value) ? args.value : []);
+    return (_jsx(Dropdown, { ...args, type: DropdownType.MultiSelect, value: value, onChange: (next) => setValue(next) }));
+};
+export const MultiSelect = {
+    render: (args) => _jsx(InteractiveMultiSelect, { ...args }),
+    args: {
+        options: AVATAR_OPTIONS,
+        value: ['agent-1', 'agent-2'],
+        onChange: () => { },
+        type: DropdownType.MultiSelect,
+        placeholder: 'Select agents',
+        label: 'Interview agents',
+        showLeadingIcon: false,
+        showCheckboxes: true,
+        showClear: true,
+        required: false,
+    },
+};
+// Simulates an infinite query: each time the list nears the bottom,
+// onEndReached appends another page after a short delay while isLoadingMore
+// shows the spinner row.
+const InfiniteLoadingDropdown = (args) => {
+    const PAGE_SIZE = 20;
+    const TOTAL = 80;
+    const [value, setValue] = useState('');
+    const [count, setCount] = useState(PAGE_SIZE);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const options = Array.from({ length: count }, (_, i) => ({
+        value: `item-${i + 1}`,
+        label: `Item ${i + 1}`,
+    }));
+    const handleEndReached = () => {
+        if (isLoadingMore || count >= TOTAL)
+            return;
+        setIsLoadingMore(true);
+        setTimeout(() => {
+            setCount((prev) => Math.min(prev + PAGE_SIZE, TOTAL));
+            setIsLoadingMore(false);
+        }, 800);
+    };
+    return (_jsx(Dropdown, { ...args, type: DropdownType.SingleSelect, options: options, value: value, onChange: (next) => setValue(next), onEndReached: handleEndReached, isLoadingMore: isLoadingMore }));
+};
+export const InfiniteLoading = {
+    render: (args) => _jsx(InfiniteLoadingDropdown, { ...args }),
+    args: {
+        options: [],
+        value: '',
+        onChange: () => { },
+        type: DropdownType.SingleSelect,
+        placeholder: 'Scroll to load more',
+        label: 'Paginated options',
+        showLeadingIcon: false,
+        showClear: true,
+        required: false,
+    },
+};

package/dist/stories/Form/index.d.ts

@@ -5,4 +5,5 @@ export * from './TextArea';
 export * from './TextInput';
 export * from './FileUpload';
 export * from './Dropdown';
+export * from './DatePicker';
 export * from './types';

package/dist/stories/Form/index.js

@@ -5,4 +5,5 @@ export * from './TextArea';
 export * from './TextInput';
 export * from './FileUpload';
 export * from './Dropdown';
+export * from './DatePicker';
 export * from './types';

package/dist/stories/Form/types.d.ts

@@ -239,6 +239,25 @@ export declare enum DropdownType {
     SingleSelect = "SingleSelect",
     MultiSelect = "MultiSelect"
 }
+/**
+ * A single dropdown option.
+ *
+ * `value` is the stable identifier that `value`/`onChange` round-trip through,
+ * while `label` is what the user sees. Keeping them separate means duplicate or
+ * blank labels are no longer ambiguous. `avatar` and `badge` are optional and,
+ * when present, render a leading avatar and a trailing badge pill (matching the
+ * "Avatar leading" variant in Figma).
+ */
+export type DropdownOption = {
+    /** Stable identifier used for selection and returned by onChange */
+    value: string;
+    /** Human-readable text shown for the option */
+    label: string;
+    /** Optional leading avatar image URL (rendered as a 24px rounded avatar) */
+    avatar?: string;
+    /** Optional trailing badge pill text (e.g. "Screening Interview") */
+    badge?: string;
+};
 type SingleSelectDropdownProps = {
     /** The value of the selected option */
     value: string;
@@ -259,8 +278,13 @@ type DropdownBaseProps = SingleSelectDropdownProps | MultiSelectDropdownProps;
 export type DropdownProps = DropdownBaseProps & {
     /** The label of the dropdown */
     label?: string | null;
-    /** The options to display in the dropdown */
-    options: string[];
+    /**
+     * The options to display in the dropdown. Accepts either a plain array of
+     * strings (each string is used as both value and label) or an array of
+     * {@link DropdownOption} objects for id-based selection and avatar/badge
+     * support.
+     */
+    options: string[] | DropdownOption[];
     /** The placeholder of the dropdown */
     placeholder?: string;
     /** Whether the dropdown is disabled */
@@ -277,5 +301,67 @@ export type DropdownProps = DropdownBaseProps & {
     showCheckboxes?: boolean;
     /** Whether to show the ticks */
     showTicks?: boolean;
+    /**
+     * Called when the user scrolls near the bottom of the options list. Wire this
+     * to `fetchNextPage` from an infinite query to lazily load more options. It is
+     * not fired while `isLoadingMore` is true.
+     */
+    onEndReached?: () => void;
+    /**
+     * Whether more options are currently being loaded. When true, a spinner row is
+     * shown at the bottom of the list and `onEndReached` is suppressed.
+     */
+    isLoadingMore?: boolean;
+};
+/**
+ * Date picker selection mode.
+ *
+ * `Single` selects one date; `Range` selects a start/end pair (the design's
+ * "Leading"/"Middle"/"Trailing" cell states).
+ */
+export declare enum DatePickerSelectionMode {
+    Single = "Single",
+    Range = "Range"
+}
+/**
+ * A start/end date range. Either bound may be `null` while the user is
+ * mid-selection (a start picked but no end yet).
+ */
+export type DateRange = {
+    start: Date | null;
+    end: Date | null;
+};
+type SingleDatePickerProps = {
+    /** Selects a single date. */
+    selectionMode: DatePickerSelectionMode.Single;
+    /** The currently selected date, or null when nothing is selected. */
+    value: Date | null;
+    /** Called with the newly selected date (or null when cleared). */
+    onChange: (value: Date | null) => void;
+};
+type RangeDatePickerProps = {
+    /** Selects a start/end date range. */
+    selectionMode: DatePickerSelectionMode.Range;
+    /** The currently selected range. */
+    value: DateRange;
+    /** Called with the updated range as the user picks start then end. */
+    onChange: (value: DateRange) => void;
+};
+type DatePickerBaseProps = SingleDatePickerProps | RangeDatePickerProps;
+export type DatePickerProps = DatePickerBaseProps & {
+    /** The label rendered above the input. */
+    label?: string | null;
+    /** Placeholder shown in the input when no date is selected. */
+    placeholder?: string;
+    /** Whether the date picker is disabled. */
+    disabled?: boolean;
+    /** Whether the field is required (renders the required asterisk on the label). */
+    required?: boolean;
+    /** Whether to show the clear button when a date is selected. */
+    showClear?: boolean;
+    /** Earliest selectable date (inclusive). Earlier dates are disabled. */
+    minDate?: Date;
+    /** Latest selectable date (inclusive). Later dates are disabled. */
+    maxDate?: Date;
 };
 export {};

package/dist/stories/Form/types.js

@@ -44,3 +44,14 @@ export var DropdownType;
     DropdownType["SingleSelect"] = "SingleSelect";
     DropdownType["MultiSelect"] = "MultiSelect";
 })(DropdownType || (DropdownType = {}));
+/**
+ * Date picker selection mode.
+ *
+ * `Single` selects one date; `Range` selects a start/end pair (the design's
+ * "Leading"/"Middle"/"Trailing" cell states).
+ */
+export var DatePickerSelectionMode;
+(function (DatePickerSelectionMode) {
+    DatePickerSelectionMode["Single"] = "Single";
+    DatePickerSelectionMode["Range"] = "Range";
+})(DatePickerSelectionMode || (DatePickerSelectionMode = {}));

package/dist/stories/PlanCard/PlanCard.js

@@ -9,5 +9,10 @@ export const PlanCard = ({ title, description, price, priceSuffix = '/month', ba
             ? 'var(--color-background-bg-card-highlight)'
             : 'var(--color-background-bg-component)', border: `1px solid ${highlighted
             ? 'var(--color-border-border-brand)'
-            : 'var(--color-border-border-subtle)'}`, boxSizing: 'border-box', style: style, "data-testid": testId ?? `${planKey}-plan-card`, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', minHeight: '24px', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: title }), badgeText && (_jsx(Badge, { text: badgeText, color: badgeColor, size: BadgeSize.xs, fill: true }))] }), description && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description })), price && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: '2px', children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: price }), priceSuffix && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: priceSuffix }))] }))] }), buttonText && (_jsx(MainButton, { text: buttonText, hierarchy: buttonHierarchy, size: ButtonSize.md, disabled: buttonDisabled, loading: buttonLoading, onClick: onButtonClick, style: { width: '100%' }, testId: `${planKey}-plan-button` })), features.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--color-text-text-paragraph)', children: featuresTitle }), features.map((feature, index) => (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [_jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone }), _jsx(Typography, { size: TypographySize.TextM, weight: TypographyWeight.Regular, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: feature })] }, `${index}-${feature}`)))] }))] }));
+            : 'var(--color-border-border-subtle)'}`, boxSizing: 'border-box', style: style, "data-testid": testId ?? `${planKey}-plan-card`, children: [_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsxs(Box, { display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', minHeight: '24px', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', children: [_jsx(Typography, { size: TypographySize.HeadingM, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: title }), badgeText && (_jsx(Badge, { text: badgeText, color: badgeColor, size: BadgeSize.xs, fill: true }))] }), description && (_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', textStyle: { textAlign: 'left' }, children: description })), price && (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'baseline', gap: '2px', children: [_jsx(Typography, { size: TypographySize.HeadingL, weight: TypographyWeight.Bold, color: 'var(--color-text-text-title)', children: price }), priceSuffix && (_jsx(Typography, { size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: 'var(--color-text-text-paragraph)', children: priceSuffix }))] }))] }), buttonText && (_jsx(MainButton, { text: buttonText, hierarchy: buttonHierarchy, size: ButtonSize.md, disabled: buttonDisabled, loading: buttonLoading, onClick: onButtonClick, style: { width: '100%' }, testId: `${planKey}-plan-button` })), features.length > 0 && (_jsxs(Box, { display: 'flex', flexDirection: 'column', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', alignItems: 'flex-start', children: [_jsx(Typography, { size: TypographySize.TextS, weight: TypographyWeight.Medium, color: 'var(--color-text-text-paragraph)', children: featuresTitle }), features.map((feature, index) => {
+                        const isHeading = feature?.startsWith('-');
+                        return (_jsxs(Box, { display: 'flex', flexDirection: 'row', alignItems: 'flex-start', gap: 'var(--spacing-tokens-size-in-px-spacing-spacing-md)', width: '100%', children: [!isHeading && (_jsx(CheckIcon, { color: CheckIconColor.Violet, size: CheckIconSize.xs, type: CheckIconType.Duotone })), _jsx(Typography, { size: TypographySize.TextM, weight: isHeading
+                                        ? TypographyWeight.Medium
+                                        : TypographyWeight.Regular, color: 'var(--color-text-text-title)', textStyle: { textAlign: 'left' }, children: isHeading ? feature?.slice(1)?.trim() : feature })] }, `${index}-${feature}`));
+                    })] }))] }));
 };

package/dist/stories/PlanCard/PlanCard.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Pro: Story;
 export declare const Free: Story;
 export declare const Personal: Story;
 export declare const Custom: Story;
+export declare const WithSubheadings: Story;

package/dist/stories/PlanCard/PlanCard.stories.js

@@ -123,3 +123,29 @@ export const Custom = {
         },
     },
 };
+export const WithSubheadings = {
+    args: {
+        title: 'Starter',
+        description: 'Tailored for personal projects and independent creators.',
+        price: '€100',
+        priceSuffix: '/month',
+        buttonText: 'Upgrade',
+        features: [
+            '-E2E Agent API',
+            'Included mins: 90',
+            'Bundle €/min: €0.54',
+            'Overage €/min: €0.33',
+            '-A2V API',
+            'Included mins: 180',
+            'Bundle €/min: €0.27',
+            'Overage €/min: €0.18',
+        ],
+    },
+    parameters: {
+        docs: {
+            description: {
+                story: 'Prefix a feature with "-" to render it as a subheading (bold, no check icon) that groups the items below it.',
+            },
+        },
+    },
+};

package/dist/stories/PlanCard/types.d.ts

@@ -21,7 +21,7 @@ export interface PlanCardProps {
     highlighted?: boolean;
     /** Heading above the feature list */
     featuresTitle?: string;
-    /** Feature list */
+    /** Feature list. Prefix an item with "-" to render it as a subheading (no check icon). */
     features?: string[];
     /** Action button label (defaults to "Upgrade"); hidden when omitted */
     buttonText?: string;

package/dist/stories/Settings/SettingsPage.stories.d.ts

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
  * they compose on a real settings page, with a placeholder content pane. Both
  * navs are interactive.
  */
-declare const SettingsPageExample: () => import("react/jsx-runtime").JSX.Element;
+declare const SettingsPageExample: () => import("react").JSX.Element;
 declare const meta: Meta<typeof SettingsPageExample>;
 export default meta;
 type Story = StoryObj<typeof SettingsPageExample>;

package/dist/utils/icon.d.ts

@@ -3,4 +3,4 @@ import type { IconProps } from '@phosphor-icons/react';
 export type IconName = keyof typeof PhosphorIcons;
 export declare const getIconComponent: (iconName: IconName, props: IconProps & {
     "data-testid"?: string;
-}) => import("react/jsx-runtime").JSX.Element | null;
+}) => import("react").JSX.Element | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@beydesign/storybook",
   "private": false,
-  "version": "0.2.25",
+  "version": "0.2.27",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -44,14 +44,14 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.7",
     "@storybook/addon-designs": "^8.2.1",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.14",
-    "@storybook/addon-onboarding": "^8.6.17",
-    "@storybook/addon-themes": "^8.6.17",
-    "@storybook/blocks": "^8.6.14",
-    "@storybook/react": "^8.6.17",
-    "@storybook/react-vite": "^8.6.17",
-    "@storybook/test": "^8.6.15",
+    "@storybook/addon-essentials": "^8.6.18",
+    "@storybook/addon-interactions": "^8.6.18",
+    "@storybook/addon-onboarding": "^8.6.18",
+    "@storybook/addon-themes": "^8.6.18",
+    "@storybook/blocks": "^8.6.18",
+    "@storybook/react": "^8.6.18",
+    "@storybook/react-vite": "^8.6.18",
+    "@storybook/test": "^8.6.18",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
@@ -70,9 +70,13 @@
     "prettier": "^3.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "^8.6.17",
+    "storybook": "^8.6.18",
     "typescript-eslint": "^7.18.0",
-    "vite": "^5.4.21"
+    "vite": "^6.4.3"
+  },
+  "overrides": {
+    "esbuild": "^0.25.0",
+    "uuid": "^11.1.1"
   },
   "eslintConfig": {
     "extends": [