@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.10

package/time-slot-week-view/time-slot-week-days.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-days.js","sources":["../../src/time-slot-week-view/time-slot-week-days.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport { useMemo, useState } from \"react\";\n\nimport type { InternalCalendarProps } from \"../shared/internal-calendar\";\nimport type { CellStyleProps } from \"../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../shared/internal-calendar/day-cell\";\nimport { TimeSlot as TimeSlotComponent } from \"../time-slot-bar/time-slot-bar.styles\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    ColumnWeekCell,\n    DayLabel,\n    HeaderCellWeek,\n    TimeSlotText,\n    TimeSlotWrapper,\n    Wrapper,\n} from \"./time-slot-week-days.style\";\n\ndayjs.extend(isBetween);\n\nexport type DayVariant = \"default\" | \"other-month\" | \"today\";\n\ninterface TimeSlotWeekDaysProps\n    extends Pick<\n        InternalCalendarProps,\n        \"disabledDates\" | \"minDate\" | \"maxDate\"\n    > {\n    selectedDate: string | undefined;\n    calendarDate: Dayjs;\n    onSelect: (value: Dayjs) => void;\n    slots?: { [date: string]: TimeSlot[] } | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\nconst dateFormat = \"YYYY-MM-DD\";\n\nconst fallbackSlot: TimeSlot = {\n    id: \"1\",\n    startTime: \"\",\n    endTime: \"\",\n    clickable: false,\n    styleAttributes: {\n        color: \"\",\n        styleType: \"stripes\",\n        backgroundColor: V3_Colour[\"bg-stronger\"],\n        backgroundColor2: V3_Colour[\"bg-strongest\"],\n    },\n};\n\nexport const TimeSlotWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    slots: daySlots,\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled || !enableSelection) return;\n\n        onSelect(value);\n    };\n\n    const handleSlotClick = (date: string, slot: TimeSlot) => {\n        onSlotClick?.(date, slot);\n    };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayMouseout = () => {\n        setHoverDay(undefined);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isDisabled = (day: Dayjs): boolean => {\n        const isWithinRange = CalendarHelper.isWithinRange(\n            day,\n            minDate ? dayjs(minDate) : undefined,\n            maxDate ? dayjs(maxDate) : undefined\n        );\n\n        const isDisabledDate =\n            !!disabledDates && disabledDates.includes(day.format(dateFormat));\n\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const isHoverEnabled = enableSelection && !disabled;\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: \"available\",\n            interactive: !enableSelection ? null : isHoverEnabled,\n        };\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n            dayCellStyleProps.labelType = \"unavailable\";\n        }\n\n        if (isSelected && isHover) {\n            dayCellStyleProps.labelType = \"selected-hover\";\n            dayCellStyleProps.circleLeft = \"selected-hover-outline\";\n            dayCellStyleProps.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            dayCellStyleProps.labelType = \"selected\";\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            dayCellStyleProps.labelType = \"hover\";\n            dayCellStyleProps.circleLeft = \"hover-subtle\";\n            dayCellStyleProps.circleRight = \"hover-subtle\";\n        }\n\n        return dayCellStyleProps;\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return currentCalendarWeek.map((day, index) => {\n            const dayCellStyleProps = generateStyleProps(day);\n\n            return (\n                <HeaderCellWeek key={`week-day-${index}`}>\n                    <DayCell\n                        key={`day-${index}`}\n                        date={day}\n                        calendarDate={dayjs(selectedDate)}\n                        onSelect={() => {\n                            handleDayClick(day, !dayCellStyleProps.interactive);\n                        }}\n                        onHover={handleDayHover}\n                        onHoverEnd={handleDayMouseout}\n                        {...dayCellStyleProps}\n                    />\n                    <DayLabel $disabled={dayCellStyleProps.disabled}>\n                        {dayjs(day).format(\"ddd\")}\n                    </DayLabel>\n                </HeaderCellWeek>\n            );\n        });\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <ColumnWeekCell\n                key={`week-cell-${calendarDate.format(dateFormat)}`}\n            >\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const formattedDate = day.format(dateFormat);\n                    const slots =\n                        daySlots &&\n                        (daySlots[formattedDate]\n                            ? daySlots[formattedDate]\n                            : [fallbackSlot]);\n\n                    return (\n                        <TimeSlotWrapper key={`wrapper-${dayIndex}`}>\n                            {slots &&\n                                slots.map((slot) => {\n                                    const {\n                                        id,\n                                        startTime: slotStartTime,\n                                        endTime: slotEndTime,\n                                        clickable = true,\n                                        styleAttributes,\n                                    } = slot;\n                                    const {\n                                        color,\n                                        styleType = \"default\",\n                                        backgroundColor,\n                                        backgroundColor2,\n                                    } = styleAttributes;\n                                    return (\n                                        <TimeSlotComponent\n                                            $type=\"vertical\"\n                                            $variant=\"default\"\n                                            key={id}\n                                            $styleType={styleType}\n                                            $bgColor={backgroundColor}\n                                            $bgColor2={backgroundColor2}\n                                            $clickable={clickable}\n                                            onClick={() =>\n                                                clickable &&\n                                                handleSlotClick(\n                                                    formattedDate,\n                                                    slot\n                                                )\n                                            }\n                                        >\n                                            <TimeSlotText\n                                                style={{ color: color }}\n                                            >\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotStartTime\n                                                    )}\n                                                </span>\n                                                {slotEndTime &&\n                                                    slotStartTime && (\n                                                        <span>-</span>\n                                                    )}\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotEndTime\n                                                    )}\n                                                </span>\n                                            </TimeSlotText>\n                                        </TimeSlotComponent>\n                                    );\n                                })}\n                        </TimeSlotWrapper>\n                    );\n                })}\n            </ColumnWeekCell>\n        );\n    };\n\n    return (\n        <Wrapper>\n            {renderHeader()}\n            {renderTimeSlotBarCells()}\n        </Wrapper>\n    );\n};\n"],"names":["dayjs","extend","isBetween","dateFormat","fallbackSlot","id","startTime","endTime","clickable","styleAttributes","color","styleType","backgroundColor","V3_Colour","backgroundColor2","TimeSlotWeekDays","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","slots","daySlots","enableSelection","onSlotClick","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","hoverDay","setHoverDay","useState","handleDayHover","value","handleDayMouseout","undefined","generateStyleProps","day","dateStartWithYear","format","disabled","isWithinRange","isDisabledDate","includes","isDisabled","isHoverEnabled","isHover","isSame","isSelected","dayCellStyleProps","labelType","interactive","circleLeft","circleRight","_jsxs","Wrapper","children","map","index","HeaderCellWeek","_jsx","DayCell","Object","assign","date","handleDayClick","onHover","onHoverEnd","DayLabel","$disabled","ColumnWeekCell","dayIndex","formattedDate","TimeSlotWrapper","slot","slotStartTime","slotEndTime","TimeSlotComponent","$type","$variant","$bgColor","$bgColor2","onClick","handleSlotClick","TimeSlotText","style","convertTo12HourFormat"],"mappings":"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"}
+{"version":3,"file":"time-slot-week-days.js","sources":["../../src/time-slot-week-view/time-slot-week-days.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isBetween from \"dayjs/plugin/isBetween\";\nimport type React from \"react\";\nimport { useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { InternalCalendarProps } from \"../shared/internal-calendar\";\nimport type { CellStyleProps } from \"../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../shared/internal-calendar/day-cell\";\nimport { TimeSlot as TimeSlotComponent } from \"../shared/time-slot\";\nimport { Colour, useApplyStyle } from \"../theme\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./time-slot-week-days.styles\";\n\ndayjs.extend(isBetween);\n\ninterface FocusableSlotMeta {\n    key: string;\n    date: string;\n    rowIndex: number;\n}\n\ninterface TimeSlotWeekDaysProps\n    extends Pick<\n        InternalCalendarProps,\n        \"disabledDates\" | \"minDate\" | \"maxDate\"\n    > {\n    selectedDate: string | undefined;\n    calendarDate: Dayjs;\n    onSelect: (value: Dayjs) => void;\n    slots?: { [date: string]: TimeSlot[] } | undefined;\n    enableSelection?: boolean | undefined;\n    onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;\n}\n\nconst dateFormat = \"YYYY-MM-DD\";\n\nconst fallbackSlot: TimeSlot = {\n    id: \"1\",\n    startTime: \"\",\n    endTime: \"\",\n    clickable: false,\n    styleAttributes: {\n        color: \"\",\n        styleType: \"stripes\",\n        backgroundColor: Colour[\"bg-stronger\"],\n        backgroundColor2: Colour[\"bg-strongest\"],\n    },\n};\n\nconst TimeSlotTextWithColor = ({\n    color,\n    children,\n}: {\n    color: string | undefined;\n    children: React.ReactNode;\n}) => {\n    const ref = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(ref, {\n        [styles.tokens.timeSlotText.color]: color,\n    });\n\n    return (\n        <div ref={ref} className={styles.timeSlotText}>\n            {children}\n        </div>\n    );\n};\n\nexport const TimeSlotWeekDays = ({\n    calendarDate,\n    disabledDates,\n    selectedDate,\n    onSelect,\n    minDate,\n    maxDate,\n    slots: daySlots,\n    enableSelection = true,\n    onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const currentCalendarWeek = useMemo((): Dayjs[] => {\n        return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n    }, [calendarDate]);\n    const [hoverDay, setHoverDay] = useState<Dayjs>();\n    const slotButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n        if (isDisabled || !enableSelection) return;\n        onSelect(value);\n    };\n\n    const handleSlotClick = (date: string, slot: TimeSlot) => {\n        onSlotClick?.(date, slot);\n    };\n\n    const handleSlotButtonClick =\n        (date: string, slot: TimeSlot) =>\n        (event: React.MouseEvent<HTMLButtonElement>) => {\n            event.stopPropagation();\n\n            if (slot.clickable ?? true) {\n                handleSlotClick(date, slot);\n            }\n        };\n\n    const handleDayHover = (value: Dayjs) => {\n        setHoverDay(value);\n    };\n\n    const handleDayHoverClear = () => {\n        setHoverDay(undefined);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const isDisabled = (day: Dayjs): boolean => {\n        const isWithinRange = CalendarHelper.isWithinRange(\n            day,\n            minDate ? dayjs(minDate) : undefined,\n            maxDate ? dayjs(maxDate) : undefined\n        );\n\n        const isDisabledDate =\n            !!disabledDates && disabledDates.includes(day.format(dateFormat));\n\n        return !isWithinRange || isDisabledDate;\n    };\n\n    const generateStyleProps = (day: Dayjs) => {\n        const dateStartWithYear = day.format(dateFormat);\n        const disabled = isDisabled(day);\n        const isHoverEnabled = enableSelection && !disabled;\n        const isHover =\n            isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n        const isSelected = [selectedDate].includes(dateStartWithYear);\n\n        const dayCellStyleProps: CellStyleProps = {\n            labelType: \"available\",\n            interactive: enableSelection ? isHoverEnabled : false,\n        };\n\n        if (disabled) {\n            dayCellStyleProps.disabled = true;\n            dayCellStyleProps.labelType = \"unavailable\";\n        }\n\n        if (isSelected && isHover) {\n            dayCellStyleProps.labelType = \"selected-hover\";\n            dayCellStyleProps.circleLeft = \"selected-hover-outline\";\n            dayCellStyleProps.circleRight = \"selected-hover-outline\";\n        } else if (isSelected) {\n            dayCellStyleProps.labelType = \"selected\";\n            dayCellStyleProps.circleLeft = \"selected-outline\";\n            dayCellStyleProps.circleRight = \"selected-outline\";\n        } else if (isHover) {\n            dayCellStyleProps.labelType = \"hover\";\n            dayCellStyleProps.circleLeft = \"hover-subtle\";\n            dayCellStyleProps.circleRight = \"hover-subtle\";\n        }\n\n        return dayCellStyleProps;\n    };\n\n    const getFocusableSlotsForDate = (\n        formattedDate: string\n    ): FocusableSlotMeta[] => {\n        return (daySlots?.[formattedDate] ?? []).map((slot, index) => ({\n            key: `${formattedDate}-${slot.id}`,\n            date: formattedDate,\n            rowIndex: index,\n        }));\n    };\n\n    const handleSlotKeyDown = (\n        event: React.KeyboardEvent<HTMLButtonElement>,\n        currentSlot: FocusableSlotMeta\n    ) => {\n        const sameColumnSlots = getFocusableSlotsForDate(currentSlot.date);\n\n        const focusSlot = (slot?: FocusableSlotMeta) => {\n            if (!slot) return;\n            slotButtonRefs.current[slot.key]?.focus();\n        };\n\n        switch (event.key) {\n            case \"ArrowRight\":\n            case \"ArrowDown\": {\n                event.preventDefault();\n                const currentIndex = sameColumnSlots.findIndex(\n                    (slot) => slot.key === currentSlot.key\n                );\n                focusSlot(sameColumnSlots[currentIndex + 1]);\n                break;\n            }\n            case \"ArrowLeft\":\n            case \"ArrowUp\": {\n                event.preventDefault();\n                const currentIndex = sameColumnSlots.findIndex(\n                    (slot) => slot.key === currentSlot.key\n                );\n                focusSlot(sameColumnSlots[currentIndex - 1]);\n                break;\n            }\n            case \"Home\":\n            case \"PageUp\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[0]);\n                break;\n            case \"End\":\n            case \"PageDown\":\n                event.preventDefault();\n                focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n                break;\n            default:\n                break;\n        }\n    };\n\n    const getSlotAriaLabel = (date: string, slot: TimeSlot) => {\n        const { startTime: slotStartTime, endTime: slotEndTime } = slot;\n\n        return concatIds(\n            dayjs(date).format(\"D MMMM YYYY dddd\"),\n            slotStartTime && slotEndTime\n                ? TimeHelper.formatTimeRange(slotStartTime, slotEndTime)\n                : undefined,\n            slot.label,\n            slot.clickable ?? true ? \"Available\" : \"Unavailable\"\n        );\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderHeader = () => {\n        return (\n            <div\n                className={styles.headerRow}\n                role=\"row\"\n                onBlur={handleDayHoverClear}\n            >\n                {currentCalendarWeek.map((day, index) => {\n                    const dayCellStyleProps = generateStyleProps(day);\n\n                    return (\n                        <div\n                            className={styles.headerCellWeek}\n                            key={`week-day-${index}`}\n                            role=\"presentation\"\n                        >\n                            <DayCell\n                                key={`day-${index}`}\n                                date={day}\n                                calendarDate={dayjs(selectedDate)}\n                                onSelect={() => {\n                                    handleDayClick(\n                                        day,\n                                        !dayCellStyleProps.interactive\n                                    );\n                                }}\n                                onHover={handleDayHover}\n                                onHoverEnd={handleDayHoverClear}\n                                onFocus={handleDayHover}\n                                role=\"columnheader\"\n                                tabIndex={\n                                    dayCellStyleProps.interactive ? 0 : -1\n                                }\n                                {...dayCellStyleProps}\n                            />\n                            <div\n                                aria-hidden\n                                className={clsx(\n                                    styles.dayLabel,\n                                    dayCellStyleProps.disabled &&\n                                        styles.dayLabelDisabled\n                                )}\n                            >\n                                {dayjs(day).format(\"ddd\")}\n                            </div>\n                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    const renderTimeSlotBarCells = () => {\n        return (\n            <div\n                className={styles.columnWeekCell}\n                key={`week-cell-${calendarDate.format(dateFormat)}`}\n                role=\"row\"\n            >\n                {currentCalendarWeek.map((day, dayIndex) => {\n                    const formattedDate = day.format(dateFormat);\n                    const slots = daySlots?.[formattedDate] ?? [fallbackSlot];\n\n                    return (\n                        <div\n                            className={styles.timeSlotWrapper}\n                            key={`wrapper-${dayIndex}`}\n                            role=\"gridcell\"\n                        >\n                            {slots &&\n                                slots.map((slot, rowIndex) => {\n                                    const {\n                                        id,\n                                        startTime: slotStartTime,\n                                        endTime: slotEndTime,\n                                        clickable = true,\n                                        styleAttributes,\n                                    } = slot;\n                                    const {\n                                        color,\n                                        styleType = \"default\",\n                                        backgroundColor,\n                                        backgroundColor2,\n                                    } = styleAttributes;\n                                    const slotKey = `${formattedDate}-${id}`;\n                                    const isActualSlot = slot !== fallbackSlot;\n\n                                    return (\n                                        <TimeSlotComponent\n                                            key={id}\n                                            className={styles.timeSlotComponent}\n                                            styleType={styleType}\n                                            bgColor={backgroundColor}\n                                            bgColor2={backgroundColor2}\n                                            clickable={clickable}\n                                            onClick={() =>\n                                                clickable &&\n                                                handleSlotClick(\n                                                    formattedDate,\n                                                    slot\n                                                )\n                                            }\n                                        >\n                                            <TimeSlotTextWithColor\n                                                color={color}\n                                            >\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotStartTime\n                                                    )}\n                                                </span>\n                                                {slotEndTime &&\n                                                    slotStartTime && (\n                                                        <span>-</span>\n                                                    )}\n                                                <span>\n                                                    {CalendarHelper.convertTo12HourFormat(\n                                                        slotEndTime\n                                                    )}\n                                                </span>\n                                            </TimeSlotTextWithColor>\n                                            {isActualSlot && (\n                                                <VisuallyHidden>\n                                                    <button\n                                                        type=\"button\"\n                                                        ref={(element) => {\n                                                            slotButtonRefs.current[\n                                                                slotKey\n                                                            ] = element;\n                                                        }}\n                                                        aria-disabled={\n                                                            !clickable\n                                                        }\n                                                        aria-label={getSlotAriaLabel(\n                                                            formattedDate,\n                                                            slot\n                                                        )}\n                                                        onKeyDown={(event) =>\n                                                            handleSlotKeyDown(\n                                                                event,\n                                                                {\n                                                                    key: slotKey,\n                                                                    date: formattedDate,\n                                                                    rowIndex,\n                                                                }\n                                                            )\n                                                        }\n                                                        onClick={handleSlotButtonClick(\n                                                            formattedDate,\n                                                            slot\n                                                        )}\n                                                    />\n                                                </VisuallyHidden>\n                                            )}\n                                        </TimeSlotComponent>\n                                    );\n                                })}\n                        </div>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.wrapper} role=\"grid\">\n            {renderHeader()}\n            {renderTimeSlotBarCells()}\n        </div>\n    );\n};\n"],"names":["dayjs","extend","isBetween","dateFormat","fallbackSlot","id","startTime","endTime","clickable","styleAttributes","color","styleType","backgroundColor","Colour","backgroundColor2","TimeSlotTextWithColor","children","ref","useRef","useApplyStyle","styles.tokens","timeSlotText","_jsx","className","styles.timeSlotText","TimeSlotWeekDays","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","slots","daySlots","enableSelection","onSlotClick","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","hoverDay","setHoverDay","useState","slotButtonRefs","handleSlotClick","date","slot","handleSlotButtonClick","event","stopPropagation","_a","handleDayHover","value","handleDayHoverClear","undefined","generateStyleProps","day","dateStartWithYear","format","disabled","isWithinRange","isDisabledDate","includes","isDisabled","isHoverEnabled","isHover","isSame","isSelected","dayCellStyleProps","labelType","interactive","circleLeft","circleRight","handleSlotKeyDown","currentSlot","sameColumnSlots","formattedDate","map","index","key","rowIndex","focusSlot","current","focus","preventDefault","currentIndex","findIndex","length","getSlotAriaLabel","slotStartTime","slotEndTime","concatIds","TimeHelper","formatTimeRange","label","_jsxs","styles.wrapper","role","styles.headerRow","onBlur","styles.headerCellWeek","DayCell","Object","assign","handleDayClick","onHover","onHoverEnd","onFocus","tabIndex","clsx","styles.dayLabel","styles.dayLabelDisabled","styles.columnWeekCell","dayIndex","styles.timeSlotWrapper","slotKey","isActualSlot","TimeSlotComponent","styles.timeSlotComponent","bgColor","bgColor2","onClick","convertTo12HourFormat","VisuallyHidden","type","element","onKeyDown"],"mappings":"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"}

package/time-slot-week-view/time-slot-week-days.styles.d.ts

@@ -0,0 +1,14 @@
+export declare const tokens: {
+    timeSlotText: {
+        color: string;
+    };
+};
+export declare const headerCellWeek: import("@linaria/core").LinariaClassName;
+export declare const headerRow: import("@linaria/core").LinariaClassName;
+export declare const dayLabel: import("@linaria/core").LinariaClassName;
+export declare const dayLabelDisabled: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const columnWeekCell: import("@linaria/core").LinariaClassName;
+export declare const timeSlotText: import("@linaria/core").LinariaClassName;
+export declare const timeSlotComponent: import("@linaria/core").LinariaClassName;
+export declare const timeSlotWrapper: import("@linaria/core").LinariaClassName;

package/time-slot-week-view/time-slot-week-days.styles.js

@@ -0,0 +1,2 @@
+import"./time-slot-week-days.styles_1h21vyw.css";const e={timeSlotText:{color:"--fds-internal-timeSlotWeekDays-timeSlotText-color"}},t="h1u5a4vg",o="hi684jn",i="d4p8eye",l="dl9xaeu",s="w1jgoij2",y="c1fvren",c="tiecbfv",m="t1nixg7y",n="t17yohj6";export{y as columnWeekCell,i as dayLabel,l as dayLabelDisabled,t as headerCellWeek,o as headerRow,m as timeSlotComponent,c as timeSlotText,n as timeSlotWrapper,e as tokens,s as wrapper};
+//# sourceMappingURL=time-slot-week-days.styles.js.map

package/time-slot-week-view/time-slot-week-days.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-week-days.styles.js","sources":["../../src/time-slot-week-view/time-slot-week-days.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\nexport const tokens = {\n    timeSlotText: {\n        color: \"--fds-internal-timeSlotWeekDays-timeSlotText-color\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const headerCellWeek = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    user-select: none;\n    margin-bottom: 0.188rem;\n`;\n\nexport const headerRow = css`\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const dayLabel = css`\n    ${Font[\"body-xs-semibold\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const dayLabelDisabled = css`\n    color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const wrapper = css`\n    width: 100%;\n    display: grid;\n    grid-template-columns: repeat(7, 1fr);\n`;\n\nexport const columnWeekCell = css`\n    grid-column: 1 / -1;\n    display: flex;\n    min-height: 7.625rem;\n`;\n\nexport const timeSlotText = css`\n    ${tokens.timeSlotText.color}: initial;\n\n    ${Font[\"body-xs-semibold\"]}\n    margin: 1rem 0rem;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    max-width: 2.5rem;\n    color: var(${tokens.timeSlotText.color}, ${Colour[\"text\"]});\n`;\n\nexport const timeSlotComponent = css`\n    display: flex;\n    flex-grow: 1;\n    align-items: center;\n    justify-content: center;\n    margin: 1px 0px;\n    position: relative;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 2px;\n        z-index: 1;\n    }\n`;\n\nexport const timeSlotWrapper = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin: 1px;\n`;\n"],"names":["tokens","timeSlotText","color","headerCellWeek","headerRow","dayLabel","dayLabelDisabled","wrapper","columnWeekCell","timeSlotComponent","timeSlotWrapper"],"mappings":"oFAOO,MAAMA,EAAS,CAClBC,aAAc,CACVC,MAAO,uDAOFC,EAAc,WASdC,EAAS,UAMTC,EAAQ,UAKRC,EAAgB,UAIhBC,EAAO,WAMPC,EAAc,UAMdP,EAAY,UAaZQ,EAAiB,WAejBC,EAAe"}

package/time-slot-week-view/time-slot-week-days.styles_1h21vyw.css

@@ -0,0 +1,9 @@
+@layer fds{.h1u5a4vg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-bottom:0.188rem;}
+.hi684jn{-ms-grid-column:1/-1;grid-column:1/-1;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);}
+.d4p8eye{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);color:var(--fds-colour-text);}
+.dl9xaeu{color:var(--fds-colour-text-disabled-subtlest);}
+.w1jgoij2{width:100%;display:-ms-grid;display:grid;-ms-grid-columns:repeat(7, 1fr);grid-template-columns:repeat(7, 1fr);}
+.c1fvren{-ms-grid-column:1/-1;grid-column:1/-1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-height:7.625rem;}
+.tiecbfv{--fds-internal-timeSlotWeekDays-timeSlotText-color:initial;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);margin:1rem 0rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;max-width:2.5rem;color:var(--fds-internal-timeSlotWeekDays-timeSlotText-color, var(--fds-colour-text));}
+.t1nixg7y{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;margin:1px 0px;position:relative;}.t1nixg7y:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:2px;z-index:1;}
+.t17yohj6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;margin:1px;}}

package/time-slot-week-view/time-slot-week-view.d.ts

@@ -1,2 +1,10 @@
 import type { TimeSlotWeekViewProps } from "./types";
+/**
+ * A week calendar grid that displays slot availability within each day column.
+ *
+ * Use `TimeSlotWeekView` for a day-level overview of slot availability across
+ * a week. For detailed time-of-day scheduling with a time axis, use
+ * `TimeSlotBarWeek` instead.
+ * @keywords availability, calendar, scheduling, weekly
+ */
 export declare const TimeSlotWeekView: ({ disabledDates, onWeekDisplayChange, onChange, value, minDate, maxDate, slots, showNavigationHeader, enableSelection, onSlotClick, currentCalendarDate, ...otherProps }: TimeSlotWeekViewProps) => import("react/jsx-runtime").JSX.Element;

package/time-slot-week-view/time-slot-week-view.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import t from"../external/dayjs/dayjs.min.js";import{useState as r,useRef as n,useEffect as o}from"react";import{CalendarManager as i}from"../shared/internal-calendar/calendar-manager.js";import"../util/calendar-helper.js";import{DateHelper as l}from"../util/date-helper.js";import"../util/string-helper.js";import{TimeSlotWeekDays as s}from"./time-slot-week-days.js";import{Wrapper as d}from"./time-slot-week-view.styles.js";const m="YYYY-MM-DD",c=c=>{var{disabledDates:D,onWeekDisplayChange:f,onChange:w,value:k,minDate:h,maxDate:g,slots:u,showNavigationHeader:p=!0,enableSelection:b,onSlotClick:j,currentCalendarDate:y}=c,C=e(c,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[v,S]=r(k),Y=n(null),O=n(void 0);o((()=>{S(k)}),[k]);const x=e=>{const a=e.format(m);S(a),null==w||w(a)},H=(e,a)=>{j&&j(e,a)},M=e=>{if(f){const a={week:{firstDayOfWeek:e.startOf("week").format(m),lastDayOfWeek:e.endOf("week").format(m)},month:e.month()+1,year:e.year()};f(a)}};return a(d,Object.assign({},C,{children:a(i,{ref:Y,dynamicHeight:!0,initialCalendarDate:l.toDayjs(v||y).endOf("week").format(m),selectedStartDate:v,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!h&&t(e).subtract(1,"week").isBefore(h,"week"),isRightArrowDisabled:e=>!!g&&t(e).add(1,"week").isAfter(g,"week"),onCalendarDateChange:e=>{O.current&&O.current.isSame(e,"week")||M(e),O.current=e},showNavigationHeader:p,minDate:h,maxDate:g,getMonthHeaderLabel:e=>t(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t(e).endOf("week").format("YYYY"),children:({calendarDate:e})=>a(s,{calendarDate:e,disabledDates:D,selectedDate:v,minDate:h,maxDate:g,onSelect:x,slots:u,enableSelection:b,onSlotClick:H})})}))};export{c as TimeSlotWeekView};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a}from"react/jsx-runtime";import t from"../external/dayjs/dayjs.min.js";import{useState as r,useRef as i,useEffect as n}from"react";import{CalendarManager as o}from"../shared/internal-calendar/calendar-manager.js";import"../util/calendar-helper.js";import{DateHelper as l}from"../util/date-helper.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{TimeSlotWeekDays as s}from"./time-slot-week-days.js";import{wrapper as m}from"./time-slot-week-view.styles.js";const d="YYYY-MM-DD",c=c=>{var{disabledDates:D,onWeekDisplayChange:f,onChange:w,value:k,minDate:h,maxDate:u,slots:g,showNavigationHeader:p=!0,enableSelection:b,onSlotClick:j,currentCalendarDate:y}=c,C=e(c,["disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate"]);const[v,S]=r(k),Y=i(null),O=i(void 0);n((()=>{S(k)}),[k]);const x=e=>{const a=e.format(d);S(a),null==w||w(a)},H=(e,a)=>{j&&j(e,a)},M=e=>{if(f){const a={week:{firstDayOfWeek:e.startOf("week").format(d),lastDayOfWeek:e.endOf("week").format(d)},month:e.month()+1,year:e.year()};f(a)}};return a("div",Object.assign({className:m},C,{children:a(o,{ref:Y,dynamicHeight:!0,initialCalendarDate:l.toDayjs(v||y).endOf("week").format(d),selectedStartDate:v,getLeftArrowDate:e=>e.subtract(1,"week"),getRightArrowDate:e=>e.add(1,"week"),isLeftArrowDisabled:e=>!!h&&t(e).subtract(1,"week").isBefore(h,"week"),isRightArrowDisabled:e=>!!u&&t(e).add(1,"week").isAfter(u,"week"),onCalendarDateChange:e=>{O.current&&O.current.isSame(e,"week")||M(e),O.current=e},showNavigationHeader:p,minDate:h,maxDate:u,getMonthHeaderLabel:e=>t(e).endOf("week").format("MMM"),getYearHeaderLabel:e=>t(e).endOf("week").format("YYYY"),isFocusable:!0,children:({calendarDate:e})=>a(s,{calendarDate:e,disabledDates:D,selectedDate:v,minDate:h,maxDate:u,onSelect:x,slots:g,enableSelection:b,onSlotClick:H})})}))};export{c as TimeSlotWeekView};
 //# sourceMappingURL=time-slot-week-view.js.map

package/time-slot-week-view/time-slot-week-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-view.js","sources":["../../src/time-slot-week-view/time-slot-week-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { TimeSlotWeekDays } from \"./time-slot-week-days\";\nimport { Wrapper } from \"./time-slot-week-view.styles\";\nimport type { TimeSlotWeekViewProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotWeekView = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    slots,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <Wrapper {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n            >\n                {({ calendarDate }) => {\n                    return (\n                        <TimeSlotWeekDays\n                            calendarDate={calendarDate}\n                            disabledDates={disabledDates}\n                            selectedDate={selectedDate}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            onSelect={handleDateSelect}\n                            slots={slots}\n                            enableSelection={enableSelection}\n                            onSlotClick={handleOnSlotClick}\n                        />\n                    );\n                }}\n            </CalendarManager>\n        </Wrapper>\n    );\n};\n"],"names":["DATE_FORMAT","TimeSlotWeekView","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Wrapper","Object","assign","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","TimeSlotWeekDays","onSelect"],"mappings":"igBAYA,MAAMA,EAAc,aAEPC,EAAoBC,IAAA,IAAAC,cAC7BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,MACPA,EAAKC,qBACLA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBX,EAChBY,EAAUC,EAAAb,EAZgB,CAAA,gBAAA,sBAAA,WAAA,QAAA,UAAA,UAAA,QAAA,uBAAA,kBAAA,cAAA,wBAiB7B,MAAOc,EAAcC,GAAmBC,EAA6BZ,GAC/Da,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBX,EAAM,GACvB,CAACA,IAMJ,MAAMkB,EAAoBlB,IACtB,MAAMmB,EAAcnB,EAAMoB,OAAO1B,GACjCiB,EAAgBQ,GAChBpB,SAAAA,EAAWoB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+BxB,IACjC,GAAIF,EAAqB,CACrB,MAAM2B,EAAc,CAChBC,KAAM,CACFC,eAAgB3B,EAAM4B,QAAQ,QAAQR,OAAO1B,GAC7CmC,cAAe7B,EAAM8B,MAAM,QAAQV,OAAO1B,IAE9CqC,MAAO/B,EAAM+B,QAAU,EACvBC,KAAMhC,EAAMgC,QAGhBlC,EAAoB2B,EACxB,GAaJ,OACIQ,EAACC,EAAOC,OAAAC,OAAA,GAAK5B,EAAU,CAAA6B,SACnBJ,EAACK,EAAe,CACZC,IAAK1B,EACL2B,eAAa,EACbC,oBAdDC,EAAWC,QAAQjC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO1B,GAaJkD,kBAAmBlC,EACnBmC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBlD,GACFmD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAASpD,EAAS,QAE3BqD,qBAAuBH,KACjBjD,GACFkD,EAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQrD,EAAS,QAExDsD,qBA1DwBxD,IAE3Be,EAAqB0C,SACrB1C,EAAqB0C,QAAQC,OAAO1D,EAAO,SAE5CwB,EAA4BxB,GAEhCe,EAAqB0C,QAAUzD,CAAK,EAoD5BI,qBAAsBA,EACtBH,QAASA,EACTC,QAASA,EACTyD,oBAAsBR,GAClBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,OAE7CwC,mBAAqBT,GACjBC,EAAMD,GAAcrB,MAAM,QAAQV,OAAO,QAAOiB,SAGnD,EAAGc,kBAEIlB,EAAC4B,GACGV,aAAcA,EACdtD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT4D,SAAU5C,EACVf,MAAOA,EACPE,gBAAiBA,EACjBC,YAAae,QAKvB"}
+{"version":3,"file":"time-slot-week-view.js","sources":["../../src/time-slot-week-view/time-slot-week-view.tsx"],"sourcesContent":["import type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { CalendarManagerRef } from \"../shared/internal-calendar\";\nimport { CalendarManager } from \"../shared/internal-calendar/calendar-manager\";\nimport type { TimeSlot } from \"../time-slot-bar\";\nimport { DateHelper } from \"../util\";\nimport { TimeSlotWeekDays } from \"./time-slot-week-days\";\nimport * as styles from \"./time-slot-week-view.styles\";\nimport type { TimeSlotWeekViewProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\n// @catalog\n/**\n * A week calendar grid that displays slot availability within each day column.\n *\n * Use `TimeSlotWeekView` for a day-level overview of slot availability across\n * a week. For detailed time-of-day scheduling with a time axis, use\n * `TimeSlotBarWeek` instead.\n * @keywords availability, calendar, scheduling, weekly\n */\nexport const TimeSlotWeekView = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    slots,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotWeekViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedDate, setSelectedDate] = useState<string | undefined>(value); // YYYY-MM-DD\n    const calendarManagerRef = useRef<CalendarManagerRef>(null);\n    const previousCalendarDate = useRef<Dayjs | undefined>(undefined);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedDate(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleDateSelect = (value: Dayjs) => {\n        const stringValue = value.format(DATE_FORMAT);\n        setSelectedDate(stringValue);\n        onChange?.(stringValue);\n    };\n\n    const handleOnSlotClick = (date: string, slot: TimeSlot) => {\n        if (onSlotClick) {\n            onSlotClick(date, slot);\n        }\n    };\n\n    const handleOnCalendarDateChange = (value: Dayjs) => {\n        if (\n            !previousCalendarDate.current ||\n            !previousCalendarDate.current.isSame(value, \"week\")\n        ) {\n            performDisplayChangeHandler(value);\n        }\n        previousCalendarDate.current = value;\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n\n    const performDisplayChangeHandler = (value: Dayjs) => {\n        if (onWeekDisplayChange) {\n            const returnValue = {\n                week: {\n                    firstDayOfWeek: value.startOf(\"week\").format(DATE_FORMAT),\n                    lastDayOfWeek: value.endOf(\"week\").format(DATE_FORMAT),\n                },\n                month: value.month() + 1,\n                year: value.year(),\n            };\n\n            onWeekDisplayChange(returnValue);\n        }\n    };\n\n    const getInitialCalendarDate = () => {\n        return DateHelper.toDayjs(selectedDate || currentCalendarDate)\n            .endOf(\"week\")\n            .format(DATE_FORMAT);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <div className={styles.wrapper} {...otherProps}>\n            <CalendarManager\n                ref={calendarManagerRef}\n                dynamicHeight\n                initialCalendarDate={getInitialCalendarDate()}\n                selectedStartDate={selectedDate}\n                getLeftArrowDate={(day) => day.subtract(1, \"week\")}\n                getRightArrowDate={(day) => day.add(1, \"week\")}\n                isLeftArrowDisabled={(calendarDate) =>\n                    !!minDate &&\n                    dayjs(calendarDate)\n                        .subtract(1, \"week\")\n                        .isBefore(minDate, \"week\")\n                }\n                isRightArrowDisabled={(calendarDate) =>\n                    !!maxDate &&\n                    dayjs(calendarDate).add(1, \"week\").isAfter(maxDate, \"week\")\n                }\n                onCalendarDateChange={handleOnCalendarDateChange}\n                showNavigationHeader={showNavigationHeader}\n                minDate={minDate}\n                maxDate={maxDate}\n                getMonthHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"MMM\")\n                }\n                getYearHeaderLabel={(calendarDate) =>\n                    dayjs(calendarDate).endOf(\"week\").format(\"YYYY\")\n                }\n                isFocusable={true}\n            >\n                {({ calendarDate }) => {\n                    return (\n                        <TimeSlotWeekDays\n                            calendarDate={calendarDate}\n                            disabledDates={disabledDates}\n                            selectedDate={selectedDate}\n                            minDate={minDate}\n                            maxDate={maxDate}\n                            onSelect={handleDateSelect}\n                            slots={slots}\n                            enableSelection={enableSelection}\n                            onSlotClick={handleOnSlotClick}\n                        />\n                    );\n                }}\n            </CalendarManager>\n        </div>\n    );\n};\n"],"names":["DATE_FORMAT","TimeSlotWeekView","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","slots","showNavigationHeader","enableSelection","onSlotClick","currentCalendarDate","otherProps","__rest","selectedDate","setSelectedDate","useState","calendarManagerRef","useRef","previousCalendarDate","undefined","useEffect","handleDateSelect","stringValue","format","handleOnSlotClick","date","slot","performDisplayChangeHandler","returnValue","week","firstDayOfWeek","startOf","lastDayOfWeek","endOf","month","year","_jsx","Object","assign","className","styles.wrapper","children","CalendarManager","ref","dynamicHeight","initialCalendarDate","DateHelper","toDayjs","selectedStartDate","getLeftArrowDate","day","subtract","getRightArrowDate","add","isLeftArrowDisabled","calendarDate","dayjs","isBefore","isRightArrowDisabled","isAfter","onCalendarDateChange","current","isSame","getMonthHeaderLabel","getYearHeaderLabel","isFocusable","TimeSlotWeekDays","onSelect"],"mappings":"2kBAYA,MAAMA,EAAc,aAWPC,EAAoBC,IAAA,IAAAC,cAC7BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,MACPA,EAAKC,qBACLA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBX,EAChBY,EAAUC,EAAAb,EAZgB,CAAA,gBAAA,sBAAA,WAAA,QAAA,UAAA,UAAA,QAAA,uBAAA,kBAAA,cAAA,wBAiB7B,MAAOc,EAAcC,GAAmBC,EAA6BZ,GAC/Da,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBX,EAAM,GACvB,CAACA,IAMJ,MAAMkB,EAAoBlB,IACtB,MAAMmB,EAAcnB,EAAMoB,OAAO1B,GACjCiB,EAAgBQ,GAChBpB,SAAAA,EAAWoB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+BxB,IACjC,GAAIF,EAAqB,CACrB,MAAM2B,EAAc,CAChBC,KAAM,CACFC,eAAgB3B,EAAM4B,QAAQ,QAAQR,OAAO1B,GAC7CmC,cAAe7B,EAAM8B,MAAM,QAAQV,OAAO1B,IAE9CqC,MAAO/B,EAAM+B,QAAU,EACvBC,KAAMhC,EAAMgC,QAGhBlC,EAAoB2B,EACxB,GAaJ,OACIQ,EAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,GAAoB7B,EAAU,CAAA8B,SAC1CL,EAACM,EAAe,CACZC,IAAK3B,EACL4B,eAAa,EACbC,oBAdDC,EAAWC,QAAQlC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO1B,GAaJmD,kBAAmBnC,EACnBoC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBnD,GACFoD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAASrD,EAAS,QAE3BsD,qBAAuBH,KACjBlD,GACFmD,EAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQtD,EAAS,QAExDuD,qBA1DwBzD,IAE3Be,EAAqB2C,SACrB3C,EAAqB2C,QAAQC,OAAO3D,EAAO,SAE5CwB,EAA4BxB,GAEhCe,EAAqB2C,QAAU1D,CAAK,EAoD5BI,qBAAsBA,EACtBH,QAASA,EACTC,QAASA,EACT0D,oBAAsBR,GAClBC,EAAMD,GAActB,MAAM,QAAQV,OAAO,OAE7CyC,mBAAqBT,GACjBC,EAAMD,GAActB,MAAM,QAAQV,OAAO,QAE7C0C,aAAa,EAAIxB,SAEhB,EAAGc,kBAEInB,EAAC8B,GACGX,aAAcA,EACdvD,cAAeA,EACfa,aAAcA,EACdT,QAASA,EACTC,QAASA,EACT8D,SAAU9C,EACVf,MAAOA,EACPE,gBAAiBA,EACjBC,YAAae,QAK3B"}

package/time-slot-week-view/time-slot-week-view.styles.d.ts

@@ -1 +1 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const wrapper: import("@linaria/core").LinariaClassName;

package/time-slot-week-view/time-slot-week-view.styles.js

@@ -1,10 +1,2 @@
-import e from"styled-components";import{V3_MediaQuery as t}from"../v3_theme/index.js";const m=e.div`
-    --header-bottom-spacing: 0.5rem;
-
-    ${t.MaxWidth.sm} {
-        --header-horizontal-inset: 1.25rem;
-    }
-
-    min-width: 18.5rem;
-`;export{m as Wrapper};
+import"./time-slot-week-view.styles_gqgsw2.css";const e="wgz4q8s";export{e as wrapper};
 //# sourceMappingURL=time-slot-week-view.styles.js.map

package/time-slot-week-view/time-slot-week-view.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slot-week-view.styles.js","sources":["../../src/time-slot-week-view/time-slot-week-view.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_MediaQuery } from \"../v3_theme\";\n\nexport const Wrapper = styled.div`\n    --header-bottom-spacing: 0.5rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        --header-horizontal-inset: 1.25rem;\n    }\n\n    min-width: 18.5rem;\n`;\n"],"names":["Wrapper","styled","div","V3_MediaQuery","MaxWidth","sm"],"mappings":"sFAIO,MAAMA,EAAUC,EAAOC,GAAG;;;MAG3BC,EAAcC,SAASC;;;;;"}
+{"version":3,"file":"time-slot-week-view.styles.js","sources":["../../src/time-slot-week-view/time-slot-week-view.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport * as calendarDropdownStyles from \"../shared/internal-calendar/calendar-dropdown.styles\";\nimport { Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    ${calendarDropdownStyles.tokens.headerBottomSpacing}: ${Spacing[\n        \"spacing-8\"\n    ]};\n    min-width: 18.5rem;\n`;\n"],"names":["wrapper"],"mappings":"mFAKO,MAAMA,EAAO"}

package/time-slot-week-view/time-slot-week-view.styles_gqgsw2.css

@@ -0,0 +1 @@
+@layer fds{.wgz4q8s{--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-8);min-width:18.5rem;}}

package/time-slot-week-view/types.d.ts

@@ -1,34 +1,79 @@
 import type { CommonCalendarProps } from "../shared/internal-calendar/types";
 import type { TimeSlot } from "../time-slot-bar/types";
+/**
+ * Props for the `TimeSlotWeekView` component.
+ */
 export interface TimeSlotWeekViewProps extends CommonCalendarProps {
     className?: string | undefined;
     "data-testid"?: string | undefined;
     id?: string | undefined;
-    /** The value of the selected date in YYYY-MM-DD format */
+    /**
+     * The currently selected date in `YYYY-MM-DD` format.
+     * Controls the highlighted day in the week view.
+     */
     value?: string | undefined;
-    /** Time slots to render */
+    /**
+     * Map of date strings (YYYY-MM-DD) to an array of `TimeSlot`
+     * entries displayed in that day's column.
+     */
     slots?: {
         [date: string]: TimeSlot[];
     } | undefined;
-    /**  Specifies if the month/year dropdown and navigation arrows should be displayed. */
+    /**
+     * Whether to show the month/year picker and the prev/next week navigation
+     * arrows above the week grid.
+     *
+     * @default true
+     */
     showNavigationHeader?: boolean | undefined;
-    /** Specifies if date can be selected */
+    /**
+     * When `true`, the user can click a day column to select that date,
+     * triggering `onChange`
+     *
+     * @default true
+     */
     enableSelection?: boolean | undefined;
-    /** The initial date to be visible in the week view in YYYY-DD-MM format */
+    /**
+     * The date used to determine which week is shown on first render, in
+     * YYYY-MM-DD format.
+     *
+     * @remarks Ignored when `value` is set.
+     */
     currentCalendarDate?: string | undefined;
-    /** Called when user clicks on a time slot */
+    /**
+     * Called when the user clicks a time slot cell.
+     *
+     * @param date The date of the clicked slot, in YYYY-MM-DD format.
+     * @param timeSlot The slot that was clicked.
+     */
     onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) | undefined;
-    /** Called when user clicks on a date */
+    /**
+     * Called when the user selects a date. Requires `enableSelection` to be
+     * `true`.
+     *
+     * @param value The selected date in YYYY-MM-DD format.
+     */
     onChange?: ((value: string) => void) | undefined;
-    /** Called when the current visible week changes */
+    /**
+     * Called when the visible week changes due to navigation.
+     *
+     * @param value An object describing the newly displayed week
+     */
     onWeekDisplayChange?: ((value: YearMonthWeekDisplay) => void) | undefined;
 }
-interface YearMonthWeekDisplay {
+/**
+ * Payload passed to `onWeekDisplayChange` describing the newly visible week.
+ *
+ */
+export interface YearMonthWeekDisplay {
+    /**
+     * The first and last days of the newly displayed week in YYYY-MM-DD format.
+     */
     week: {
         firstDayOfWeek: string;
         lastDayOfWeek: string;
     };
     year: number;
+    /** `month` is 1-indexed */
     month: number;
 }
-export {};

package/timeline/timeline.d.ts

@@ -1,2 +1,9 @@
 import type { TimelineProps } from "./types";
+/**
+ * A vertically ordered list of steps with visual state indicators.
+ *
+ * Use `Timeline` to communicate multi-step progress such as application stages
+ * or process flows.
+ * @keywords history, process, progress, stages, steps
+ */
 export declare const Timeline: ({ items, className, id, title, startCol, colSpan, "data-base-indicator-testid": baseIndicatorTestId, "data-testid": testId, headingLevel, counterOffset, }: TimelineProps) => JSX.Element;

package/timeline/timeline.js

@@ -1,2 +1,2 @@
-import{createElement as e}from"react";import{jsxs as t,jsx as i,Fragment as r}from"react/jsx-runtime";import{ExclamationCircleFillIcon as a,TickIcon as n}from"@lifesg/react-icons";import{VisuallyHidden as c}from"../shared/accessibility/index.js";import{Typography as s}from"../typography/index.js";import{TimelineWrapper as l,TimelineTitle as d,TimelineItem as o,TimelineIndicators as m,CircleIndicator as p,LineIndicator as u,TimelineItemContent as h,TimelinePills as f,TimelineItemTitle as v,TimelinePill as g}from"./timeline.style.js";const y=({items:y,className:$,id:b,title:w,startCol:N,colSpan:j,"data-base-indicator-testid":x,"data-testid":C="timeline",headingLevel:S=2,counterOffset:A=0})=>{const O=e=>"string"==typeof e?i(s.BodyMD,{className:"timeline-item-content-text",children:e}):i(r,{children:e}),U=(e,t)=>"string"==typeof e?i(v,{forwardedAs:"h3","aria-level":t,weight:"semibold",className:"timeline-item-title",children:e}):i(r,{children:e}),_=t=>t.slice(0,2).map(((t,i)=>e(g,Object.assign({},t,{type:t.type,key:`status-pill-${i}`,"data-testid":"status-pill",className:"timeline-status-pill"}),t.children))),k=(e,t)=>{switch(e){case"completed":return i(n,{"aria-hidden":!0});case"error":return i(a,{"aria-hidden":!0});case"numeric":return i("span",{"aria-hidden":!0,children:t+1+A});default:return null}},q=(e,t)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${t+1+A}`;default:return""}};return t(l,{className:$,id:b,"data-testid":C,$startCol:N,$colSpan:j,children:[i(d,{forwardedAs:"h2","aria-level":S,"data-testid":"timeline-title",weight:"bold",children:w}),i("div",{role:"list",children:y.map(((e,r)=>{const{title:a,content:n,statuses:s,variant:l}=e,d=l||(0===r?"current":"upcoming-active");return t(o,{role:"listitem",children:[t(m,{children:[t(p,{"data-testid":x?`circleindicator${r+1}_div_${x}`:"circleindicator",$variant:d,children:[i(c,{children:q(d,r)}),k(d,r)]}),i(u,{$variant:d})]}),t(h,{className:"timeline-item-content",children:[U(a,S+1),s&&i(f,{children:_(s)}),O(n)]})]},`timeline-item-${r}`)}))})]})};export{y as Timeline};
+import{useRef as e,createElement as t}from"react";import{jsxs as i,jsx as r,Fragment as s}from"react/jsx-runtime";import{ExclamationCircleFillIcon as a,TickIcon as n}from"@lifesg/react-icons";import l from"clsx";import{Pill as c}from"../pill/pill.js";import{VisuallyHidden as m}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as d}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as o}from"../typography/index.js";import{tokens as p,timelineTitle as u,timelineWrapper as h,timelineItem as v,timelineIndicators as f,circleIndicator as g,lineIndicator as j,timelinePills as y,timelineItemContent as N,timelineItemTitle as b}from"./timeline.styles.js";const x=({items:x,className:w,id:k,title:C,startCol:S,colSpan:$,"data-base-indicator-testid":q,"data-testid":H="timeline",headingLevel:M=2,counterOffset:O=0})=>{const U=e(null);d(U,{[p.wrapper.startCol]:S,[p.wrapper.colSpan]:$});const _=e=>"string"==typeof e?r(o.BodyMD,{className:"timeline-item-content-text",children:e}):r(s,{children:e}),B=(e,t)=>"string"==typeof e?r(o.HeadingXS,{as:"h3","aria-level":t,weight:"semibold",className:l(b,"timeline-item-title"),children:e}):r(s,{children:e}),D=e=>e.slice(0,2).map(((e,i)=>t(c,Object.assign({},e,{type:e.type,key:`status-pill-${i}`,"data-testid":"status-pill",className:"timeline-status-pill"}),e.children))),I=(e,t)=>{switch(e){case"completed":return r(n,{"aria-hidden":!0});case"error":return r(a,{"aria-hidden":!0});case"numeric":return r("span",{"aria-hidden":!0,children:t+1+O});default:return null}},L=(e,t)=>{switch(e){case"current":return"Current step";case"completed":return"Completed step";case"upcoming-active":return"Upcoming active step";case"upcoming-inactive":return"Upcoming inactive step";case"disabled":return"Inactive step";case"error":return"Current step, action required";case"numeric":return`Step number ${t+1+O}`;default:return""}};return i("div",{ref:U,className:l(h,w),id:k,"data-testid":H,children:[r(o.HeadingSM,{as:"h2","aria-level":M,"data-testid":"timeline-title",weight:"bold",className:u,children:C}),r("div",{role:"list",children:x.map(((e,t)=>{const{title:s,content:a,statuses:n,variant:c}=e,d=c||(0===t?"current":"upcoming-active");return i("div",{role:"listitem",className:v,children:[i("div",{className:f,children:[i("div",{"data-testid":q?`circleindicator${t+1}_div_${q}`:"circleindicator",className:g,"data-variant":d,children:[r(m,{children:L(d,t)}),I(d,t)]}),r("div",{className:j,"data-variant":d})]}),i("div",{className:l(N,"timeline-item-content"),children:[B(s,M+1),n&&r("div",{className:y,children:D(n)}),_(a)]})]},`timeline-item-${t}`)}))})]})};export{x as Timeline};
 //# sourceMappingURL=timeline.js.map

package/timeline/timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline.js","sources":["../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\n\nimport type { PillProps } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport {\n    CircleIndicator,\n    LineIndicator,\n    TimelineIndicators,\n    TimelineItem,\n    TimelineItemContent,\n    TimelineItemTitle,\n    TimelinePill,\n    TimelinePills,\n    TimelineTitle,\n    TimelineWrapper,\n} from \"./timeline.style\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\nexport const Timeline = ({\n    items,\n    className,\n    id,\n    title,\n    startCol,\n    colSpan,\n    \"data-base-indicator-testid\": baseIndicatorTestId,\n    \"data-testid\": testId = \"timeline\",\n    headingLevel = 2,\n    counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n    // ===========================================================================\n    // RENDER\n    // ===========================================================================\n    const renderContent = (content: string | JSX.Element): JSX.Element => {\n        if (typeof content === \"string\") {\n            return (\n                <Typography.BodyMD className=\"timeline-item-content-text\">\n                    {content}\n                </Typography.BodyMD>\n            );\n        }\n\n        return <>{content}</>;\n    };\n\n    const renderTitle = (\n        title: string | JSX.Element,\n        level: number\n    ): JSX.Element => {\n        if (typeof title === \"string\") {\n            return (\n                <TimelineItemTitle\n                    forwardedAs=\"h3\"\n                    aria-level={level}\n                    weight=\"semibold\"\n                    className=\"timeline-item-title\"\n                >\n                    {title}\n                </TimelineItemTitle>\n            );\n        }\n\n        return <>{title}</>;\n    };\n\n    const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n        // maximum 2 pills allowed\n        const renderableStatuses = statuses.slice(0, 2);\n        return renderableStatuses.map((status: PillProps, index) => {\n            return (\n                <TimelinePill\n                    {...status}\n                    type={status.type}\n                    key={`status-pill-${index}`}\n                    data-testid=\"status-pill\"\n                    className=\"timeline-status-pill\"\n                >\n                    {status.children}\n                </TimelinePill>\n            );\n        });\n    };\n\n    const renderIcon = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"completed\":\n                return <TickIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"numeric\":\n                return <span aria-hidden>{index + 1 + counterOffset}</span>;\n            default:\n                return null;\n        }\n    };\n\n    const getStatus = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"current\":\n                return \"Current step\";\n            case \"completed\":\n                return \"Completed step\";\n            case \"upcoming-active\":\n                return \"Upcoming active step\";\n            case \"upcoming-inactive\":\n                return \"Upcoming inactive step\";\n            case \"disabled\":\n                return \"Inactive step\";\n            case \"error\":\n                return \"Current step, action required\";\n            case \"numeric\":\n                return `Step number ${index + 1 + counterOffset}`;\n            default:\n                return \"\";\n        }\n    };\n\n    const renderItems = () =>\n        items.map((item: TimelineItemProps, index) => {\n            const { title, content, statuses, variant: _variant } = item;\n            const circleIndicatorTestId = baseIndicatorTestId\n                ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n                : \"circleindicator\";\n            const variant =\n                _variant || (index === 0 ? \"current\" : \"upcoming-active\");\n\n            return (\n                <TimelineItem key={`timeline-item-${index}`} role=\"listitem\">\n                    <TimelineIndicators>\n                        <CircleIndicator\n                            data-testid={circleIndicatorTestId}\n                            $variant={variant}\n                        >\n                            <VisuallyHidden>\n                                {getStatus(variant, index)}\n                            </VisuallyHidden>\n                            {renderIcon(variant, index)}\n                        </CircleIndicator>\n                        <LineIndicator $variant={variant} />\n                    </TimelineIndicators>\n                    <TimelineItemContent className=\"timeline-item-content\">\n                        {renderTitle(title, headingLevel + 1)}\n                        {statuses && (\n                            <TimelinePills>\n                                {renderStatusPills(statuses)}\n                            </TimelinePills>\n                        )}\n                        {renderContent(content)}\n                    </TimelineItemContent>\n                </TimelineItem>\n            );\n        });\n\n    return (\n        <TimelineWrapper\n            className={className}\n            id={id}\n            data-testid={testId}\n            $startCol={startCol}\n            $colSpan={colSpan}\n        >\n            <TimelineTitle\n                forwardedAs=\"h2\"\n                aria-level={headingLevel}\n                data-testid=\"timeline-title\"\n                weight=\"bold\"\n            >\n                {title}\n            </TimelineTitle>\n            <div role=\"list\">{renderItems()}</div>\n        </TimelineWrapper>\n    );\n};\n"],"names":["Timeline","items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","TimelineItemTitle","forwardedAs","weight","renderStatusPills","statuses","slice","map","status","index","_createElement","TimelinePill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","TimelineWrapper","$colSpan","TimelineTitle","role","item","_variant","TimelineItem","TimelineIndicators","CircleIndicator","$variant","VisuallyHidden","LineIndicator","TimelineItemContent","TimelinePills"],"mappings":"0hBAmBO,MAAMA,EAAW,EACpBC,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAKhB,MAAMC,EAAiBC,GACI,iBAAZA,EAEHC,EAACC,EAAWC,OAAM,CAACb,UAAU,6BAA4Bc,SACpDJ,IAKNC,EAAAI,EAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBd,EACAe,IAEqB,iBAAVf,EAEHS,EAACO,EAAiB,CACdC,YAAY,kBACAF,EACZG,OAAO,WACPpB,UAAU,sBAAqBc,SAE9BZ,IAKNS,EAAAI,EAAA,CAAAD,SAAGZ,IAGRmB,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAACC,EAAYC,OAAAC,OAAA,GACLL,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,cACZ1B,UAAU,yBAETyB,EAAOX,YAMlBmB,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,OAAOvB,EAACwB,EAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAOxB,EAACyB,EAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAOzB,oCAAmBe,EAAQ,EAAIlB,IAC1C,QACI,OAAO,OAIb6B,EAAY,CAACH,EAAkBR,KACjC,OAAQQ,GACJ,IAAK,UACD,MAAO,eACX,IAAK,YACD,MAAO,iBACX,IAAK,kBACD,MAAO,uBACX,IAAK,oBACD,MAAO,yBACX,IAAK,WACD,MAAO,gBACX,IAAK,QACD,MAAO,gCACX,IAAK,UACD,MAAO,eAAeR,EAAQ,EAAIlB,IACtC,QACI,MAAO,KAwCnB,OACI8B,EAACC,EAAe,CACZvC,UAAWA,EACXC,GAAIA,EAAE,cACOK,YACFH,EAAQqC,SACTpC,EAAOU,SAAA,CAEjBH,EAAC8B,EAAa,CACVtB,YAAY,KAAI,aACJZ,gBACA,iBACZa,OAAO,gBAENlB,IAELS,EAAA,MAAA,CAAK+B,KAAK,OAAM5B,SAnDpBf,EAAMyB,KAAI,CAACmB,EAAyBjB,KAChC,MAAMxB,MAAEA,EAAKQ,QAAEA,EAAOY,SAAEA,EAAUY,QAASU,GAAaD,EAIlDT,EACFU,IAAuB,IAAVlB,EAAc,UAAY,mBAE3C,OACIY,EAACO,GAA4CH,KAAK,WAAU5B,SAAA,CACxDwB,EAACQ,EAAkB,CAAAhC,SAAA,CACfwB,EAACS,EAAe,CAAA,cATE1C,EACxB,kBAAkBqB,EAAQ,SAASrB,IACnC,kBAQ4C2C,SACxBd,YAEVvB,EAACsC,EAAc,CAAAnC,SACVuB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBf,EAACuC,YAAwBhB,OAE7BI,EAACa,EAAmB,CAACnD,UAAU,kCAC1BgB,EAAYd,EAAOK,EAAe,GAClCe,GACGX,EAACyC,EAAa,CAAAtC,SACTO,EAAkBC,KAG1Bb,EAAcC,QApBJ,iBAAiBgB,IAsBrB,QAqBL"}
+{"version":3,"file":"timeline.js","sources":["../../src/timeline/timeline.tsx"],"sourcesContent":["import { ExclamationCircleFillIcon, TickIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { PillProps } from \"../pill\";\nimport { Pill } from \"../pill\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./timeline.styles\";\nimport type { TimelineItemProps, TimelineProps, Variant } from \"./types\";\n\n// @catalog\n/**\n * A vertically ordered list of steps with visual state indicators.\n *\n * Use `Timeline` to communicate multi-step progress such as application stages\n * or process flows.\n * @keywords history, process, progress, stages, steps\n */\nexport const Timeline = ({\n    items,\n    className,\n    id,\n    title,\n    startCol,\n    colSpan,\n    \"data-base-indicator-testid\": baseIndicatorTestId,\n    \"data-testid\": testId = \"timeline\",\n    headingLevel = 2,\n    counterOffset = 0,\n}: TimelineProps): JSX.Element => {\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.wrapper.startCol]: startCol,\n        [styles.tokens.wrapper.colSpan]: colSpan,\n    });\n\n    // ===========================================================================\n    // RENDER\n    // ===========================================================================\n    const renderContent = (content: string | JSX.Element): JSX.Element => {\n        if (typeof content === \"string\") {\n            return (\n                <Typography.BodyMD className=\"timeline-item-content-text\">\n                    {content}\n                </Typography.BodyMD>\n            );\n        }\n\n        return <>{content}</>;\n    };\n\n    const renderTitle = (\n        title: string | JSX.Element,\n        level: number\n    ): JSX.Element => {\n        if (typeof title === \"string\") {\n            return (\n                <Typography.HeadingXS\n                    as=\"h3\"\n                    aria-level={level}\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.timelineItemTitle,\n                        \"timeline-item-title\"\n                    )}\n                >\n                    {title}\n                </Typography.HeadingXS>\n            );\n        }\n\n        return <>{title}</>;\n    };\n\n    const renderStatusPills = (statuses: PillProps[]): JSX.Element[] => {\n        // maximum 2 pills allowed\n        const renderableStatuses = statuses.slice(0, 2);\n        return renderableStatuses.map((status: PillProps, index) => {\n            return (\n                <Pill\n                    {...status}\n                    type={status.type}\n                    key={`status-pill-${index}`}\n                    data-testid=\"status-pill\"\n                    className=\"timeline-status-pill\"\n                >\n                    {status.children}\n                </Pill>\n            );\n        });\n    };\n\n    const renderIcon = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"completed\":\n                return <TickIcon aria-hidden />;\n            case \"error\":\n                return <ExclamationCircleFillIcon aria-hidden />;\n            case \"numeric\":\n                return <span aria-hidden>{index + 1 + counterOffset}</span>;\n            default:\n                return null;\n        }\n    };\n\n    const getStatus = (variant: Variant, index: number) => {\n        switch (variant) {\n            case \"current\":\n                return \"Current step\";\n            case \"completed\":\n                return \"Completed step\";\n            case \"upcoming-active\":\n                return \"Upcoming active step\";\n            case \"upcoming-inactive\":\n                return \"Upcoming inactive step\";\n            case \"disabled\":\n                return \"Inactive step\";\n            case \"error\":\n                return \"Current step, action required\";\n            case \"numeric\":\n                return `Step number ${index + 1 + counterOffset}`;\n            default:\n                return \"\";\n        }\n    };\n\n    const renderItems = () =>\n        items.map((item: TimelineItemProps, index) => {\n            const { title, content, statuses, variant: _variant } = item;\n            const circleIndicatorTestId = baseIndicatorTestId\n                ? `circleindicator${index + 1}_div_${baseIndicatorTestId}`\n                : \"circleindicator\";\n            const variant =\n                _variant || (index === 0 ? \"current\" : \"upcoming-active\");\n\n            return (\n                <div\n                    key={`timeline-item-${index}`}\n                    role=\"listitem\"\n                    className={styles.timelineItem}\n                >\n                    <div className={styles.timelineIndicators}>\n                        <div\n                            data-testid={circleIndicatorTestId}\n                            className={styles.circleIndicator}\n                            data-variant={variant}\n                        >\n                            <VisuallyHidden>\n                                {getStatus(variant, index)}\n                            </VisuallyHidden>\n                            {renderIcon(variant, index)}\n                        </div>\n                        <div\n                            className={styles.lineIndicator}\n                            data-variant={variant}\n                        />\n                    </div>\n                    <div\n                        className={clsx(\n                            styles.timelineItemContent,\n                            \"timeline-item-content\"\n                        )}\n                    >\n                        {renderTitle(title, headingLevel + 1)}\n                        {statuses && (\n                            <div className={styles.timelinePills}>\n                                {renderStatusPills(statuses)}\n                            </div>\n                        )}\n                        {renderContent(content)}\n                    </div>\n                </div>\n            );\n        });\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.timelineWrapper, className)}\n            id={id}\n            data-testid={testId}\n        >\n            <Typography.HeadingSM\n                as=\"h2\"\n                aria-level={headingLevel}\n                data-testid=\"timeline-title\"\n                weight=\"bold\"\n                className={styles.timelineTitle}\n            >\n                {title}\n            </Typography.HeadingSM>\n            <div role=\"list\">{renderItems()}</div>\n        </div>\n    );\n};\n"],"names":["Timeline","items","className","id","title","startCol","colSpan","baseIndicatorTestId","testId","headingLevel","counterOffset","wrapperRef","useRef","useApplyStyle","styles.tokens","wrapper","renderContent","content","_jsx","Typography","BodyMD","children","_Fragment","renderTitle","level","HeadingXS","as","weight","clsx","styles.timelineItemTitle","renderStatusPills","statuses","slice","map","status","index","_createElement","Pill","Object","assign","type","key","renderIcon","variant","TickIcon","ExclamationCircleFillIcon","getStatus","_jsxs","ref","styles.timelineWrapper","HeadingSM","styles.timelineTitle","role","item","_variant","styles.timelineItem","styles.timelineIndicators","styles.circleIndicator","VisuallyHidden","styles.lineIndicator","styles.timelineItemContent","styles.timelinePills"],"mappings":"w6BAoBO,MAAMA,EAAW,EACpBC,QACAC,YACAC,KACAC,QACAC,WACAC,UACA,6BAA8BC,EAC9B,cAAeC,EAAS,WACxBC,eAAe,EACfC,gBAAgB,MAEhB,MAAMC,EAAaC,EAAuB,MAE1CC,EAAcF,EAAY,CACtB,CAACG,EAAcC,QAAQV,UAAWA,EAClC,CAACS,EAAcC,QAAQT,SAAUA,IAMrC,MAAMU,EAAiBC,GACI,iBAAZA,EAEHC,EAACC,EAAWC,OAAM,CAAClB,UAAU,6BAA4BmB,SACpDJ,IAKNC,EAAAI,EAAA,CAAAD,SAAGJ,IAGRM,EAAc,CAChBnB,EACAoB,IAEqB,iBAAVpB,EAEHc,EAACC,EAAWM,UAAS,CACjBC,GAAG,KAAI,aACKF,EACZG,OAAO,WACPzB,UAAW0B,EACPC,EACA,uBACHR,SAEAjB,IAKNc,EAAAI,EAAA,CAAAD,SAAGjB,IAGR0B,EAAqBC,GAEIA,EAASC,MAAM,EAAG,GACnBC,KAAI,CAACC,EAAmBC,IAE1CC,EAACC,EAAIC,OAAAC,OAAA,GACGL,EAAM,CACVM,KAAMN,EAAOM,KACbC,IAAK,eAAeN,IAAO,cACf,cACZjC,UAAU,yBAETgC,EAAOb,YAMlBqB,EAAa,CAACC,EAAkBR,KAClC,OAAQQ,GACJ,IAAK,YACD,OAAOzB,EAAC0B,EAAQ,CAAA,eAAA,IACpB,IAAK,QACD,OAAO1B,EAAC2B,EAAyB,CAAA,eAAA,IACrC,IAAK,UACD,OAAO3B,oCAAmBiB,EAAQ,EAAIzB,IAC1C,QACI,OAAO,OAIboC,EAAY,CAACH,EAAkBR,KACjC,OAAQQ,GACJ,IAAK,UACD,MAAO,eACX,IAAK,YACD,MAAO,iBACX,IAAK,kBACD,MAAO,uBACX,IAAK,oBACD,MAAO,yBACX,IAAK,WACD,MAAO,gBACX,IAAK,QACD,MAAO,gCACX,IAAK,UACD,MAAO,eAAeR,EAAQ,EAAIzB,IACtC,QACI,MAAO,KAqDnB,OACIqC,EAAA,MAAA,CACIC,IAAKrC,EACLT,UAAW0B,EAAKqB,EAAwB/C,GACxCC,GAAIA,EAAE,cACOK,EAAMa,SAAA,CAEnBH,EAACC,EAAW+B,UAAS,CACjBxB,GAAG,KAAI,aACKjB,EAAY,cACZ,iBACZkB,OAAO,OACPzB,UAAWiD,EAAoB9B,SAE9BjB,IAELc,EAAA,MAAA,CAAKkC,KAAK,OAAM/B,SAhEpBpB,EAAMgC,KAAI,CAACoB,EAAyBlB,KAChC,MAAM/B,MAAEA,EAAKa,QAAEA,EAAOc,SAAEA,EAAUY,QAASW,GAAaD,EAIlDV,EACFW,IAAuB,IAAVnB,EAAc,UAAY,mBAE3C,OACIY,EAAA,MAAA,CAEIK,KAAK,WACLlD,UAAWqD,EAAmBlC,SAAA,CAE9B0B,SAAK7C,UAAWsD,EAAyBnC,SAAA,CACrC0B,uBAbkBxC,EACxB,kBAAkB4B,EAAQ,SAAS5B,IACnC,kBAaUL,UAAWuD,EAAsB,eACnBd,EAAOtB,SAAA,CAErBH,EAACwC,EAAc,CAAArC,SACVyB,EAAUH,EAASR,KAEvBO,EAAWC,EAASR,MAEzBjB,EAAA,MAAA,CACIhB,UAAWyD,EAAoB,eACjBhB,OAGtBI,EAAA,MAAA,CACI7C,UAAW0B,EACPgC,EACA,yBACHvC,SAAA,CAEAE,EAAYnB,EAAOK,EAAe,GAClCsB,GACGb,EAAA,MAAA,CAAKhB,UAAW2D,EAAoBxC,SAC/BS,EAAkBC,KAG1Bf,EAAcC,QAhCd,iBAAiBkB,IAkCpB,QAqBR"}

package/timeline/timeline.styles.d.ts

@@ -0,0 +1,15 @@
+export declare const tokens: {
+    readonly wrapper: {
+        readonly startCol: "--fds-internal-timeline-wrapper-startCol";
+        readonly colSpan: "--fds-internal-timeline-wrapper-colSpan";
+    };
+};
+export declare const circleIndicator: import("@linaria/core").LinariaClassName;
+export declare const lineIndicator: import("@linaria/core").LinariaClassName;
+export declare const timelineIndicators: import("@linaria/core").LinariaClassName;
+export declare const timelineWrapper: import("@linaria/core").LinariaClassName;
+export declare const timelineTitle: import("@linaria/core").LinariaClassName;
+export declare const timelineItemTitle: import("@linaria/core").LinariaClassName;
+export declare const timelineItem: import("@linaria/core").LinariaClassName;
+export declare const timelineItemContent: import("@linaria/core").LinariaClassName;
+export declare const timelinePills: import("@linaria/core").LinariaClassName;

package/timeline/timeline.styles.js

@@ -0,0 +1,2 @@
+import"./timeline.styles_1jxzik4.css";const t={wrapper:{startCol:"--fds-internal-timeline-wrapper-startCol",colSpan:"--fds-internal-timeline-wrapper-colSpan"}},e="c1epf9wu",p="l1ff2pyq",l="t1qzwom7",a="tuaspcp",i="tfsmff8",r="t1qpo82v",n="t1d2q33u",s="tvlbvjk",f="t1afag3x";export{e as circleIndicator,p as lineIndicator,l as timelineIndicators,n as timelineItem,s as timelineItemContent,r as timelineItemTitle,f as timelinePills,i as timelineTitle,a as timelineWrapper,t as tokens};
+//# sourceMappingURL=timeline.styles.js.map

package/timeline/timeline.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.styles.js","sources":["../../src/timeline/timeline.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\nexport const tokens = {\n    wrapper: {\n        startCol: \"--fds-internal-timeline-wrapper-startCol\",\n        colSpan: \"--fds-internal-timeline-wrapper-colSpan\",\n    },\n} as const;\n\nexport const circleIndicator = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 1.5rem;\n    height: 1.5rem;\n    border-radius: 100%;\n\n    &[data-variant=\"current\"] {\n        background-color: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-active\"] {\n        border: 4px solid ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-inactive\"] {\n        border: 4px solid ${Colour[\"icon-subtle\"]};\n    }\n\n    &[data-variant=\"disabled\"] {\n        background-color: ${Colour[\"icon-disabled-subtle\"]};\n    }\n\n    &[data-variant=\"completed\"] {\n        background-color: ${Colour[\"icon-success\"]};\n\n        svg {\n            color: ${Colour[\"icon-inverse\"]};\n        }\n    }\n\n    &[data-variant=\"numeric\"] {\n        background-color: ${Colour[\"icon-info\"]};\n        color: ${Colour[\"text-inverse\"]};\n        ${Font[\"body-sm-bold\"]}\n    }\n\n    &[data-variant=\"error\"] {\n        width: 1.8rem;\n        height: 1.8rem;\n        margin: -0.15rem 0 -0.15rem -0.15rem;\n\n        svg {\n            color: ${Colour[\"icon-error\"]};\n            height: 100%;\n            width: 100%;\n        }\n    }\n`;\n\nexport const lineIndicator = css`\n    width: 4px;\n    flex-grow: 1;\n    margin-top: 0.5rem;\n    margin-bottom: 0.5rem;\n    border-radius: ${Radius[\"full\"]};\n\n    &[data-variant=\"completed\"] {\n        background-color: ${Colour[\"icon-success\"]};\n    }\n\n    &[data-variant=\"current\"],\n    &[data-variant=\"upcoming-active\"] {\n        background-color: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    &[data-variant=\"upcoming-inactive\"] {\n        background-color: ${Colour[\"icon-subtle\"]};\n    }\n\n    &[data-variant=\"disabled\"] {\n        background-color: ${Colour[\"icon-disabled-subtle\"]};\n    }\n\n    &[data-variant=\"numeric\"] {\n        background-color: ${Colour[\"icon-info\"]};\n    }\n\n    &[data-variant=\"error\"] {\n        margin-left: -0.15rem;\n        background-color: ${Colour[\"icon-error\"]};\n    }\n`;\n\nexport const timelineIndicators = css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    margin-right: 1rem;\n`;\n\nexport const timelineWrapper = css`\n    ${tokens.wrapper.startCol}: initial;\n    ${tokens.wrapper.colSpan}: initial;\n    grid-column: var(${tokens.wrapper.startCol}, 3) / span\n        var(${tokens.wrapper.colSpan}, 8);\n\n    ${MediaQuery.MaxWidth.lg} {\n        grid-column: span 8;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-column: span 8;\n    }\n`;\n\nexport const timelineTitle = css`\n    margin-bottom: 1rem;\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin-bottom: 1.5rem;\n    }\n`;\n\nexport const timelineItemTitle = css`\n    margin-top: -0.125rem;\n    margin-bottom: 0.5rem;\n`;\n\n// default is 2-8-2 on desktop\nexport const timelineItem = css`\n    display: flex;\n\n    &:last-of-type .${lineIndicator} {\n        margin-bottom: 0;\n    }\n`;\n\nexport const timelineItemContent = css`\n    margin-bottom: 2rem;\n    width: 100%;\n`;\n\nexport const timelinePills = css`\n    display: flex;\n    flex-wrap: wrap;\n    margin-bottom: 0.5rem;\n    gap: 0.5rem;\n`;\n"],"names":["tokens","wrapper","startCol","colSpan","circleIndicator","lineIndicator","timelineIndicators","timelineWrapper","timelineTitle","timelineItemTitle","timelineItem","timelineItemContent","timelinePills"],"mappings":"8DAOO,MAAMA,EAAS,CAClBC,QAAS,CACLC,SAAU,2CACVC,QAAS,4CAIJC,EAAe,WAmDfC,EAAa,WAkCbC,EAAkB,WAOlBC,EAAe,UAefC,EAAa,UAQbC,EAAiB,WAMjBC,EAAY,WAQZC,EAAmB,UAKnBC,EAAa"}

package/timeline/timeline.styles_1jxzik4.css

@@ -0,0 +1,9 @@
+@layer fds{.c1epf9wu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:1.5rem;height:1.5rem;border-radius:100%;}.c1epf9wu[data-variant="current"]{background-color:var(--fds-colour-icon-primary-subtle);}.c1epf9wu[data-variant="upcoming-active"]{border:4px solid var(--fds-colour-icon-primary-subtle);}.c1epf9wu[data-variant="upcoming-inactive"]{border:4px solid var(--fds-colour-icon-subtle);}.c1epf9wu[data-variant="disabled"]{background-color:var(--fds-colour-icon-disabled-subtle);}.c1epf9wu[data-variant="completed"]{background-color:var(--fds-colour-icon-success);}.c1epf9wu[data-variant="completed"] svg{color:var(--fds-colour-icon-inverse);}.c1epf9wu[data-variant="numeric"]{background-color:var(--fds-colour-icon-info);color:var(--fds-colour-text-inverse);font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-bold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}.c1epf9wu[data-variant="error"]{width:1.8rem;height:1.8rem;margin:-0.15rem 0 -0.15rem -0.15rem;}.c1epf9wu[data-variant="error"] svg{color:var(--fds-colour-icon-error);height:100%;width:100%;}
+.l1ff2pyq{width:4px;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;margin-top:0.5rem;margin-bottom:0.5rem;border-radius:var(--fds-radius-full);}.l1ff2pyq[data-variant="completed"]{background-color:var(--fds-colour-icon-success);}.l1ff2pyq[data-variant="current"],.l1ff2pyq[data-variant="upcoming-active"]{background-color:var(--fds-colour-icon-primary-subtle);}.l1ff2pyq[data-variant="upcoming-inactive"]{background-color:var(--fds-colour-icon-subtle);}.l1ff2pyq[data-variant="disabled"]{background-color:var(--fds-colour-icon-disabled-subtle);}.l1ff2pyq[data-variant="numeric"]{background-color:var(--fds-colour-icon-info);}.l1ff2pyq[data-variant="error"]{margin-left:-0.15rem;background-color:var(--fds-colour-icon-error);}
+.t1qzwom7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-right:1rem;}
+.tuaspcp{--fds-internal-timeline-wrapper-startCol:initial;--fds-internal-timeline-wrapper-colSpan:initial;grid-column:var(--fds-internal-timeline-wrapper-startCol, 3)/span var(--fds-internal-timeline-wrapper-colSpan, 8);}:where(body.fds-breakpoint-lg-max) .tuaspcp{grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .tuaspcp{grid-column:span 8;}
+.tfsmff8{margin-bottom:1rem;}:where(body.fds-breakpoint-lg-max) .tfsmff8{margin-bottom:1.5rem;}
+.t1qpo82v{margin-top:-0.125rem;margin-bottom:0.5rem;}
+.t1d2q33u{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}.t1d2q33u:last-of-type .l1ff2pyq{margin-bottom:0;}
+.tvlbvjk{margin-bottom:2rem;width:100%;}
+.t1afag3x{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0.5rem;gap:0.5rem;}}

package/timeline/types.d.ts

@@ -1,20 +1,74 @@
 import type { PillProps } from "../pill";
+/**
+ * Visual state of a timeline step.
+ *
+ * - `"current"` — the active step in progress.
+ * - `"completed"` — a finished step; renders a tick icon.
+ * - `"upcoming-active"` — a future step that is reachable.
+ * - `"upcoming-inactive"` — a future step that cannot yet be started.
+ * - `"error"` — the current step requires action; renders an exclamation icon.
+ * - `"disabled"` — an inactive step that is not reachable.
+ * - `"numeric"` — renders the step's 1-based position number instead of an icon.
+ */
 export type Variant = "completed" | "current" | "upcoming-active" | "upcoming-inactive" | "error" | "disabled" | "numeric";
+/**
+ * Configuration for a single step within a `Timeline`.
+ */
 export interface TimelineItemProps {
+    /** Title of the step. */
     title: string | JSX.Element;
+    /** Body content of the step. */
     content: string | JSX.Element;
+    /**
+     * Up to two status `Pill` descriptors rendered below the title.
+     * Only the first two entries are displayed when more are provided.
+     */
     statuses?: PillProps[] | undefined;
+    /**
+     * Visual state of this step.
+     *
+     * @default "current" for the first item and "upcoming-active" for all subsequent items.
+     */
     variant?: Variant | undefined;
 }
+/**
+ * Props for the `Timeline` component.
+ */
 export interface TimelineProps {
+    /** Ordered list of steps to render. */
     items: TimelineItemProps[];
+    /** Heading text displayed above the step list. */
     title?: string | undefined;
-    className?: string | undefined;
-    id?: string | undefined;
+    /**
+     * CSS grid column the timeline wrapper starts on.
+     * Useful if component is wrapped in a css grid div.
+     */
     startCol?: number | undefined;
+    /**
+     * Number of grid columns the timeline wrapper spans.
+     * Useful if component is wrapped in a css grid div
+     */
     colSpan?: number | undefined;
-    "data-testid"?: string | undefined;
-    "data-base-indicator-testid"?: string | undefined;
+    /**
+     * Heading level assigned to the `title` element.
+     * Item titles are rendered at `headingLevel + 1`.
+     *
+     * @default 2
+     */
     headingLevel?: number | undefined;
+    /**
+     * Value added to each step's displayed counter when `variant` is
+     * `"numeric"`.
+     *
+     * @remarks
+     * Use this when the timeline numbering should not restart from 1.
+     * If offset = `2`, the start of the timeline will be `index + 1 + offset = 3`
+     *
+     * @default 0
+     */
     counterOffset?: number | undefined;
+    className?: string | undefined;
+    id?: string | undefined;
+    "data-testid"?: string | undefined;
+    "data-base-indicator-testid"?: string | undefined;
 }

package/timepicker/timepicker.d.ts

@@ -1,2 +1,8 @@
 import type { TimepickerProps } from "./types";
-export declare const Timepicker: ({ id, disabled, readOnly, error, value, placeholder, format, onChange, onFocus, onBlur, alignment, dropdownZIndex, dropdownRootNode, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: TimepickerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A form input for selecting a time value through a dropdown interface.
+ *
+ * Use `Timepicker` when a user needs to choose a specific time.
+ * @keywords clock, field, form, input, picker, time selection
+ */
+export declare const Timepicker: ({ id, disabled, readOnly, error, value, placeholder, format, onChange, onFocus, onBlur, alignment, dropdownZIndex, dropdownRootNode, className, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: TimepickerProps) => import("react/jsx-runtime").JSX.Element;

package/timepicker/timepicker.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as o,useRef as a,useCallback as n}from"react";import"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as l}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as d}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as i}from"../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as t}from"../util/time-helper.js";import{InputSelectorElement as s}from"./timepicker.styles.js";const p=p=>{var{id:m,disabled:c=!1,readOnly:u=!1,error:b,value:f,placeholder:w,format:y="24hr",onChange:v,onFocus:h,onBlur:g,alignment:j,dropdownZIndex:k,dropdownRootNode:O,"aria-labelledby":x,"aria-describedby":C}=p,D=e(p,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby"]);const[F,$]=o(!1),H=a(null),M=a(null),B=n((()=>"12hr"===y?"HH:MMam":"HH:MM"),[y]),I=()=>{var e;null===(e=M.current)||void 0===e||e.focus({preventScroll:!0})},N=()=>{c||u||$(!0)},R=()=>{$(!1),I()},Z=e=>{null==v||v(e),$(!1),I()},E=()=>{null==h||h()},T=e=>{var r;if(F)return;const o=e.relatedTarget;o&&(null===(r=H.current)||void 0===r?void 0:r.contains(o))||null==g||g()},_=e=>{c||u||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),N())};return r(l,{enabled:!u&&!c,isOpen:F,renderElement:()=>r(d,Object.assign({ref:H,role:"group",$readOnly:u,$disabled:c,$focused:F,$error:b},D,{children:r(s,{ref:M,readOnly:!0,placeholder:w||B(),value:t.formatDisplayValue(f,y),role:"combobox","aria-invalid":b||void 0,"aria-disabled":c||void 0,"aria-readonly":u||void 0,"aria-labelledby":x,"aria-describedby":C,"aria-expanded":!c&&!u&&F,"data-testid":m?`${m}-timepicker-selector`:"timepicker-selector",onFocus:E,onClick:N,onKeyDown:_,onBlur:T})})),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:a})=>r("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"Time picker"},a(),{children:r(i,{id:m,show:F,value:f,format:y,onCancel:R,onChange:Z})})),onOpen:N,onClose:()=>{$(!1),null==g||g()},onDismiss:R,offset:8,alignment:j,customZIndex:k,rootNode:O})};export{p as Timepicker};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import o from"clsx";import{useState as a,useRef as l,useCallback as n}from"react";import{ElementWithDropdown as i}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as d,BasicInput as t}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as s}from"../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as p}from"../util/time-helper.js";import{inputSelectorElement as m,inputSelectorElementDisabled as c}from"./timepicker.styles.js";const u=u=>{var{id:b,disabled:f=!1,readOnly:y=!1,error:v,value:w,placeholder:h,format:g="24hr",onChange:k,onFocus:j,onBlur:x,alignment:O,dropdownZIndex:N,dropdownRootNode:C,className:D,"aria-labelledby":F,"aria-describedby":H}=u,M=e(u,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","aria-labelledby","aria-describedby"]);const[B,I]=a(!1),R=l(null),Z=l(null),E=n((()=>"12hr"===g?"HH:MMam":"HH:MM"),[g]),T=()=>{var e;null===(e=Z.current)||void 0===e||e.focus({preventScroll:!0})},_=()=>{f||y||I(!0)},A=()=>{I(!1),T()},K=e=>{null==k||k(e),I(!1),T()},P=()=>{f||null==j||j()},S=e=>{var r;if(B||f)return;const o=e.relatedTarget;o&&(null===(r=R.current)||void 0===r?void 0:r.contains(o))||null==x||x()},V=e=>{f||y||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),_())};return r(i,{enabled:!y&&!f,isOpen:B,renderElement:()=>r(d,Object.assign({ref:R,role:"group",readOnly:y,disabled:f,focused:B,error:v,className:D},M,{children:r(t,{ref:Z,readOnly:!0,placeholder:h||E(),value:p.formatDisplayValue(w,g),role:"combobox","aria-invalid":v||void 0,"aria-disabled":f||void 0,"aria-readonly":y||void 0,"aria-labelledby":F,"aria-describedby":H,"aria-expanded":!f&&!y&&B,"data-testid":b?`${b}-timepicker-selector`:"timepicker-selector",className:o(m,f&&c),onFocus:P,onClick:_,onKeyDown:V,onBlur:S})})),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:a})=>r("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"Time picker"},a(),{children:r(s,{id:b,show:B,value:w,format:g,onCancel:A,onChange:K})})),onOpen:_,onClose:()=>{I(!1),null==x||x()},onDismiss:A,offset:8,alignment:O,customZIndex:N,rootNode:C})};export{u as Timepicker};
 //# sourceMappingURL=timepicker.js.map