@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.7

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

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar-week.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week.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 * as styles from \"./time-slot-bar-week.styles\";\nimport { TimeSlotBarWeekDays } from \"./time-slot-bar-week-days\";\nimport type { TimeSlotBarWeekProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\nexport const TimeSlotBarWeek = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    slots,\n    interval,\n    variant,\n    maxVisibleCellHeight,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotBarWeekProps) => {\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    const renderTimeSlotWeekDays = (calendarDate: dayjs.Dayjs) => {\n        return (\n            <TimeSlotBarWeekDays\n                calendarDate={calendarDate}\n                disabledDates={disabledDates}\n                selectedDate={selectedDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                startTime={startTime}\n                endTime={endTime}\n                onSelect={handleDateSelect}\n                slots={slots}\n                interval={interval}\n                variant={variant}\n                maxVisibleCellHeight={maxVisibleCellHeight}\n                enableSelection={enableSelection}\n                onSlotClick={handleOnSlotClick}\n            />\n        );\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 renderTimeSlotWeekDays(calendarDate);\n                }}\n            </CalendarManager>\n        </div>\n    );\n};\n"],"names":["DATE_FORMAT","TimeSlotBarWeek","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","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","TimeSlotBarWeekDays","onSelect","renderTimeSlotWeekDays"],"mappings":"ilBAYA,MAAMA,EAAc,aAEPC,EAAmBC,IAAA,IAAAC,cAC5BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,UACPA,EAASC,QACTA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,qBACPA,EAAoBC,qBACpBA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBhB,EAChBiB,EAAUC,EAAAlB,EAjBe,uOAsB5B,MAAOmB,EAAcC,GAAmBC,EAA6BjB,GAC/DkB,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBhB,EAAM,GACvB,CAACA,IAMJ,MAAMuB,EAAoBvB,IACtB,MAAMwB,EAAcxB,EAAMyB,OAAO/B,GACjCsB,EAAgBQ,GAChBzB,SAAAA,EAAWyB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+B7B,IACjC,GAAIF,EAAqB,CACrB,MAAMgC,EAAc,CAChBC,KAAM,CACFC,eAAgBhC,EAAMiC,QAAQ,QAAQR,OAAO/B,GAC7CwC,cAAelC,EAAMmC,MAAM,QAAQV,OAAO/B,IAE9C0C,MAAOpC,EAAMoC,QAAU,EACvBC,KAAMrC,EAAMqC,QAGhBvC,EAAoBgC,EACxB,GAiCJ,OACIQ,EAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,GAAoB7B,EAAU,CAAA8B,SAC1CL,EAACM,EAAe,CACZC,IAAK3B,EACL4B,eAAa,EACbC,oBAlCDC,EAAWC,QAAQlC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO/B,GAiCJwD,kBAAmBnC,EACnBoC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBxD,GACFyD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAAS1D,EAAS,QAE3B2D,qBAAuBH,KACjBvD,GACFwD,EAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQ3D,EAAS,QAExD4D,qBA9EwB9D,IAE3BoB,EAAqB2C,SACrB3C,EAAqB2C,QAAQC,OAAOhE,EAAO,SAE5C6B,EAA4B7B,GAEhCoB,EAAqB2C,QAAU/D,CAAK,EAwE5BS,qBAAsBA,EACtBR,QAASA,EACTC,QAASA,EACT+D,oBAAsBR,GAClBC,EAAMD,GAActB,MAAM,QAAQV,OAAO,OAE7CyC,mBAAqBT,GACjBC,EAAMD,GAActB,MAAM,QAAQV,OAAO,QAE7C0C,aAAa,EAAIxB,SAEhB,EAAGc,kBApDe,CAACA,GAExBnB,EAAC8B,EAAmB,CAChBX,aAAcA,EACd5D,cAAeA,EACfkB,aAAcA,EACdd,QAASA,EACTC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACTiE,SAAU9C,EACVlB,MAAOA,EACPC,SAAUA,EACVC,QAASA,EACTC,qBAAsBA,EACtBE,gBAAiBA,EACjBC,YAAae,IAqCF4C,CAAuBb,OAGpC"}
+{"version":3,"file":"time-slot-bar-week.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week.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 * as styles from \"./time-slot-bar-week.styles\";\nimport { TimeSlotBarWeekDays } from \"./time-slot-bar-week-days\";\nimport type { TimeSlotBarWeekProps } from \"./types\";\n\nconst DATE_FORMAT = \"YYYY-MM-DD\";\n\n// @catalog\n/**\n * A week calendar grid with a time axis, rendering detailed slot bars within\n * each day column.\n *\n * Use `TimeSlotBarWeek` for detailed time-of-day scheduling where each cell\n * represents a configurable time interval. For a simpler day-level overview\n * without a time axis, use `TimeSlotWeekView` instead.\n */\nexport const TimeSlotBarWeek = ({\n    disabledDates,\n    onWeekDisplayChange,\n    onChange,\n    value,\n    minDate,\n    maxDate,\n    startTime,\n    endTime,\n    slots,\n    interval,\n    variant,\n    maxVisibleCellHeight,\n    showNavigationHeader = true,\n    enableSelection,\n    onSlotClick,\n    currentCalendarDate,\n    ...otherProps\n}: TimeSlotBarWeekProps) => {\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    const renderTimeSlotWeekDays = (calendarDate: dayjs.Dayjs) => {\n        return (\n            <TimeSlotBarWeekDays\n                calendarDate={calendarDate}\n                disabledDates={disabledDates}\n                selectedDate={selectedDate}\n                minDate={minDate}\n                maxDate={maxDate}\n                startTime={startTime}\n                endTime={endTime}\n                onSelect={handleDateSelect}\n                slots={slots}\n                interval={interval}\n                variant={variant}\n                maxVisibleCellHeight={maxVisibleCellHeight}\n                enableSelection={enableSelection}\n                onSlotClick={handleOnSlotClick}\n            />\n        );\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 renderTimeSlotWeekDays(calendarDate);\n                }}\n            </CalendarManager>\n        </div>\n    );\n};\n"],"names":["DATE_FORMAT","TimeSlotBarWeek","_a","disabledDates","onWeekDisplayChange","onChange","value","minDate","maxDate","startTime","endTime","slots","interval","variant","maxVisibleCellHeight","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","TimeSlotBarWeekDays","onSelect","renderTimeSlotWeekDays"],"mappings":"ilBAYA,MAAMA,EAAc,aAWPC,EAAmBC,IAAA,IAAAC,cAC5BA,EAAaC,oBACbA,EAAmBC,SACnBA,EAAQC,MACRA,EAAKC,QACLA,EAAOC,QACPA,EAAOC,UACPA,EAASC,QACTA,EAAOC,MACPA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,qBACPA,EAAoBC,qBACpBA,GAAuB,EAAIC,gBAC3BA,EAAeC,YACfA,EAAWC,oBACXA,GAAmBhB,EAChBiB,EAAUC,EAAAlB,EAjBe,uOAsB5B,MAAOmB,EAAcC,GAAmBC,EAA6BjB,GAC/DkB,EAAqBC,EAA2B,MAChDC,EAAuBD,OAA0BE,GAKvDC,GAAU,KACNN,EAAgBhB,EAAM,GACvB,CAACA,IAMJ,MAAMuB,EAAoBvB,IACtB,MAAMwB,EAAcxB,EAAMyB,OAAO/B,GACjCsB,EAAgBQ,GAChBzB,SAAAA,EAAWyB,EAAY,EAGrBE,EAAoB,CAACC,EAAcC,KACjCjB,GACAA,EAAYgB,EAAMC,EACtB,EAiBEC,EAA+B7B,IACjC,GAAIF,EAAqB,CACrB,MAAMgC,EAAc,CAChBC,KAAM,CACFC,eAAgBhC,EAAMiC,QAAQ,QAAQR,OAAO/B,GAC7CwC,cAAelC,EAAMmC,MAAM,QAAQV,OAAO/B,IAE9C0C,MAAOpC,EAAMoC,QAAU,EACvBC,KAAMrC,EAAMqC,QAGhBvC,EAAoBgC,EACxB,GAiCJ,OACIQ,EAAA,MAAAC,OAAAC,OAAA,CAAKC,UAAWC,GAAoB7B,EAAU,CAAA8B,SAC1CL,EAACM,EAAe,CACZC,IAAK3B,EACL4B,eAAa,EACbC,oBAlCDC,EAAWC,QAAQlC,GAAgBH,GACrCuB,MAAM,QACNV,OAAO/B,GAiCJwD,kBAAmBnC,EACnBoC,iBAAmBC,GAAQA,EAAIC,SAAS,EAAG,QAC3CC,kBAAoBF,GAAQA,EAAIG,IAAI,EAAG,QACvCC,oBAAsBC,KAChBxD,GACFyD,EAAMD,GACDJ,SAAS,EAAG,QACZM,SAAS1D,EAAS,QAE3B2D,qBAAuBH,KACjBvD,GACFwD,EAAMD,GAAcF,IAAI,EAAG,QAAQM,QAAQ3D,EAAS,QAExD4D,qBA9EwB9D,IAE3BoB,EAAqB2C,SACrB3C,EAAqB2C,QAAQC,OAAOhE,EAAO,SAE5C6B,EAA4B7B,GAEhCoB,EAAqB2C,QAAU/D,CAAK,EAwE5BS,qBAAsBA,EACtBR,QAASA,EACTC,QAASA,EACT+D,oBAAsBR,GAClBC,EAAMD,GAActB,MAAM,QAAQV,OAAO,OAE7CyC,mBAAqBT,GACjBC,EAAMD,GAActB,MAAM,QAAQV,OAAO,QAE7C0C,aAAa,EAAIxB,SAEhB,EAAGc,kBApDe,CAACA,GAExBnB,EAAC8B,EAAmB,CAChBX,aAAcA,EACd5D,cAAeA,EACfkB,aAAcA,EACdd,QAASA,EACTC,QAASA,EACTC,UAAWA,EACXC,QAASA,EACTiE,SAAU9C,EACVlB,MAAOA,EACPC,SAAUA,EACVC,QAASA,EACTC,qBAAsBA,EACtBE,gBAAiBA,EACjBC,YAAae,IAqCF4C,CAAuBb,OAGpC"}

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

@@ -1,45 +1,112 @@
 import type { CommonCalendarProps } from "../shared/internal-calendar/types";
 import type { TimeSlot } from "../time-slot-bar/types";
+/**
+ * Controls how time slot cells are sized within a day column.
+ *
+ * - `"flexible"` — cells expand proportionally to fill available height.
+ * - `"fixed"` — all cells have equal, fixed height regardless of content.
+ */
 export type TimeSlotCellsVariant = "flexible" | "fixed";
+/**
+ * Props for the `TimeSlotBarWeek` component.
+ */
 export interface TimeSlotBarWeekProps extends CommonCalendarProps {
     className?: string | undefined;
     "data-testid"?: string | undefined;
     id?: string | undefined;
-    /** Time slots to render */
+    /**
+     * Map of date strings (YYYY-MM-DD) to the time slot arrays to render for
+     * that date.
+     */
     slots: {
         [date: string]: TimeSlot[];
     };
-    /** The start time of the time slot cells in HH:mm format */
+    /**
+     * The start boundary of the visible time range, in HH:mm format.
+     */
     startTime?: string | undefined;
-    /** The end time of the time slot cells in HH:mm format */
+    /**
+     * The end boundary of the visible time range, in HH:mm format.
+     */
     endTime?: 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 column.
+     */
     value?: string | undefined;
-    /** Number of minutes each cell should represent */
+    /**
+     * Duration in minutes that each time slot cell represents.
+     *
+     * @default 30
+     */
     interval?: number | undefined;
-    /** Variant for the timeslot cells that will be rendered */
+    /**
+     * Controls how time slot cells are sized within each day column.
+     *
+     * @default "flexible"
+     */
     variant?: TimeSlotCellsVariant | undefined;
-    /** Maximum height (px) of the entire timeslot component before it becomes truncated */
+    /**
+     * Maximum height in pixels for the time slot area before it becomes
+     * truncated.
+     */
     maxVisibleCellHeight?: number | undefined;
-    /**  Specifies if the month/year dropdown and navigation arrows should be displayed. */
+    /**
+     * Whether to show the month/year pickers 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;
 }
+/**
+ * Payload passed to `onWeekDisplayChange` describing the newly visible week.
+ *
+ */
 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/time-slot-week-view/time-slot-week-view.d.ts

@@ -1,2 +1,9 @@
 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.
+ */
 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.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 * as styles 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        <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,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,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"}
+{"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 */\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,aAUPC,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/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,8 @@
 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.
+ */
 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.map

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

package/timepicker/timepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n    id,\n    disabled = false,\n    readOnly = false,\n    error,\n    value,\n    placeholder,\n    format = \"24hr\",\n    onChange,\n    onFocus,\n    onBlur,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: TimepickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getPlaceholderValue = useCallback(() => {\n        switch (format) {\n            case \"12hr\":\n                return \"HH:MMam\";\n            case \"24hr\":\n            default:\n                return \"HH:MM\";\n        }\n    }, [format]);\n\n    const restoreFocusToSelector = () => {\n        selectorRef.current?.focus({ preventScroll: true });\n    };\n\n    // =============================================================================\n    // EVENT LISTENERS\n    // =============================================================================\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        onBlur?.();\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleChange = (v: string) => {\n        onChange?.(v);\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleFocus = () => {\n        if (disabled) return;\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen || disabled) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (next && wrapperRef.current?.contains(next)) return;\n\n        onBlur?.();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n            e.preventDefault();\n            handleOpen();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderElement = () => (\n        <InputWrapper\n            ref={wrapperRef}\n            role=\"group\"\n            readOnly={readOnly}\n            disabled={disabled}\n            focused={isOpen}\n            error={error}\n            className={className}\n            {...otherProps}\n        >\n            <BasicInput\n                ref={selectorRef}\n                readOnly\n                placeholder={placeholder || getPlaceholderValue()}\n                value={TimeHelper.formatDisplayValue(value, format)}\n                role=\"combobox\"\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                aria-readonly={readOnly || undefined}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-expanded={!disabled && !readOnly ? isOpen : false}\n                data-testid={\n                    id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n                }\n                className={styles.inputSelectorElement}\n                onFocus={handleFocus}\n                onClick={handleOpen}\n                onKeyDown={handleKeyDown}\n                onBlur={handleSelectorBlur}\n            />\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            ref={setFloatingRef}\n            style={styles}\n            role=\"dialog\"\n            aria-label=\"Time picker\"\n            {...getFloatingProps()}\n        >\n            <TimepickerDropdown\n                id={id}\n                show={isOpen}\n                value={value}\n                format={format}\n                onCancel={handleDismiss}\n                onChange={handleChange}\n            />\n        </div>\n    );\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={isOpen}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            offset={8}\n            alignment={alignment}\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","styles.inputSelectorElement","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"mhBAUO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KACZjC,GACJO,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,GAAUjB,EAAU,OAExB,MAAMoC,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAgEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cA9Dc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,EAAU,CACPJ,IAAK3B,EACLrB,YACAG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,WAAU,eACDhD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACXlD,QAAS0B,EACTyB,QAAS7B,EACT8B,UAAWpB,EACX/B,OAAQ0B,OAiCZ0B,eA5Be,EACnBC,SACAC,iBACAC,sBAEArB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKa,EACLE,MAAOH,EACPX,KAAK,SAAQ,aACF,eACPa,IAAkB,CAAAX,SAEtBV,EAACuB,EAAkB,CACflE,GAAIA,EACJmE,KAAMjD,EACNd,MAAOA,EACPE,OAAQA,EACR8D,SAAUrC,EACVxB,SAAUyB,OAWdqC,OAAQvC,EACRwC,QA7GY,KAChBnD,GAAU,GACVV,SAAAA,GAAU,EA4GN8D,UAAWxC,EACXyC,OAAQ,EACR9D,UAAWA,EACX+D,aAAc9D,EACd+D,SAAU9D,GACZ"}
+{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../shared/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./timepicker.styles\";\nimport type { TimepickerProps } from \"./types\";\n\n// @catalog\n/**\n * A form input for selecting a time value through a dropdown interface.\n *\n * Use `Timepicker` when a user needs to choose a specific time.\n */\nexport const Timepicker = ({\n    id,\n    disabled = false,\n    readOnly = false,\n    error,\n    value,\n    placeholder,\n    format = \"24hr\",\n    onChange,\n    onFocus,\n    onBlur,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    className,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: TimepickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLInputElement>(null);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getPlaceholderValue = useCallback(() => {\n        switch (format) {\n            case \"12hr\":\n                return \"HH:MMam\";\n            case \"24hr\":\n            default:\n                return \"HH:MM\";\n        }\n    }, [format]);\n\n    const restoreFocusToSelector = () => {\n        selectorRef.current?.focus({ preventScroll: true });\n    };\n\n    // =============================================================================\n    // EVENT LISTENERS\n    // =============================================================================\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n        setIsOpen(true);\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        onBlur?.();\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleChange = (v: string) => {\n        onChange?.(v);\n        setIsOpen(false);\n        restoreFocusToSelector();\n    };\n\n    const handleFocus = () => {\n        if (disabled) return;\n        onFocus?.();\n    };\n\n    const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n        if (isOpen || disabled) return;\n\n        const next = e.relatedTarget as Node | null;\n        if (next && wrapperRef.current?.contains(next)) return;\n\n        onBlur?.();\n    };\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n            e.preventDefault();\n            handleOpen();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderElement = () => (\n        <InputWrapper\n            ref={wrapperRef}\n            role=\"group\"\n            readOnly={readOnly}\n            disabled={disabled}\n            focused={isOpen}\n            error={error}\n            className={className}\n            {...otherProps}\n        >\n            <BasicInput\n                ref={selectorRef}\n                readOnly\n                placeholder={placeholder || getPlaceholderValue()}\n                value={TimeHelper.formatDisplayValue(value, format)}\n                role=\"combobox\"\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                aria-readonly={readOnly || undefined}\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-expanded={!disabled && !readOnly ? isOpen : false}\n                data-testid={\n                    id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n                }\n                className={clsx(\n                    styles.inputSelectorElement,\n                    disabled && styles.inputSelectorElementDisabled\n                )}\n                onFocus={handleFocus}\n                onClick={handleOpen}\n                onKeyDown={handleKeyDown}\n                onBlur={handleSelectorBlur}\n            />\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            ref={setFloatingRef}\n            style={styles}\n            role=\"dialog\"\n            aria-label=\"Time picker\"\n            {...getFloatingProps()}\n        >\n            <TimepickerDropdown\n                id={id}\n                show={isOpen}\n                value={value}\n                format={format}\n                onCancel={handleDismiss}\n                onChange={handleChange}\n            />\n        </div>\n    );\n\n    return (\n        <ElementWithDropdown\n            enabled={!readOnly && !disabled}\n            isOpen={isOpen}\n            renderElement={renderElement}\n            renderDropdown={renderDropdown}\n            onOpen={handleOpen}\n            onClose={handleClose}\n            onDismiss={handleDismiss}\n            offset={8}\n            alignment={alignment}\n            customZIndex={dropdownZIndex}\n            rootNode={dropdownRootNode}\n        />\n    );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","className","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","focused","children","BasicInput","TimeHelper","formatDisplayValue","undefined","clsx","styles.inputSelectorElement","styles.inputSelectorElementDisabled","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"ykBAiBO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,UAChBA,EACA,kBAAmBC,EACnB,mBAAoBC,KACjBC,EAAUC,EAAAlB,EAjBU,CAAA,KAAA,WAAA,WAAA,QAAA,QAAA,cAAA,SAAA,WAAA,UAAA,SAAA,YAAA,iBAAA,mBAAA,YAAA,kBAAA,qBAsBvB,MAAOmB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDnB,EAEO,UAGA,SAEhB,CAACA,IAEEoB,EAAyB,WACR,QAAnB3B,EAAAwB,EAAYI,eAAO,IAAA5B,GAAAA,EAAE6B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX7B,GAAYC,GAChBiB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClB1B,SAAAA,EAAW0B,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KACZjC,GACJO,SAAAA,GAAW,EAGT2B,EAAsBC,UACxB,GAAIlB,GAAUjB,EAAU,OAExB,MAAMoC,EAAOD,EAAEE,cACXD,IAA0B,QAAlBtC,EAAAsB,EAAWM,eAAO,IAAA5B,OAAA,EAAAA,EAAEwC,SAASF,KAEzC5B,SAAAA,GAAU,EAGR+B,EAAiBJ,IACfnC,GAAYC,GAIF,UAAVkC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EAmEJ,OACIa,EAACC,EAAmB,CAChBC,SAAU3C,IAAaD,EACvBiB,OAAQA,EACR4B,cAjEc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QACLjD,SAAUA,EACVD,SAAUA,EACVmD,QAASlC,EACTf,MAAOA,EACPU,UAAWA,GACPG,EAAU,CAAAqC,SAEdV,EAACW,GACGJ,IAAK3B,EACLrB,UAAQ,EACRG,YAAaA,GAAemB,IAC5BpB,MAAOmD,EAAWC,mBAAmBpD,EAAOE,GAC5C6C,KAAK,0BACShD,QAASsD,EAAS,gBACjBxD,QAAYwD,EAAS,gBACrBvD,QAAYuD,EAAS,kBACnB3C,EAAc,mBACbC,EAAe,iBACjBd,IAAaC,GAAWgB,EAAc,cAElDlB,EAAK,GAAGA,wBAA2B,sBAEvCa,UAAW6C,EACPC,EACA1D,GAAY2D,GAEhBpD,QAAS0B,EACT2B,QAAS/B,EACTgC,UAAWtB,EACX/B,OAAQ0B,OAiCZ4B,eA5Be,EACnBC,SACAC,iBACAC,sBAEAvB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKe,EACLE,MAAOH,EACPb,KAAK,SAAQ,aACF,eACPe,IAAkB,CAAAb,SAEtBV,EAACyB,EAAkB,CACfpE,GAAIA,EACJqE,KAAMnD,EACNd,MAAOA,EACPE,OAAQA,EACRgE,SAAUvC,EACVxB,SAAUyB,OAWduC,OAAQzC,EACR0C,QAhHY,KAChBrD,GAAU,GACVV,SAAAA,GAAU,EA+GNgE,UAAW1C,EACX2C,OAAQ,EACRhE,UAAWA,EACXiE,aAAchE,EACdiE,SAAUhE,GACZ"}

package/timepicker/timepicker.styles.d.ts

@@ -1 +1,2 @@
 export declare const inputSelectorElement: import("@linaria/core").LinariaClassName;
+export declare const inputSelectorElementDisabled: import("@linaria/core").LinariaClassName;

package/timepicker/timepicker.styles.js

@@ -1,2 +1,2 @@
-import"./timepicker.styles_1jm33yw.css";const e="ixpxnsh";export{e as inputSelectorElement};
+import"./timepicker.styles_lyizvq.css";const i="ixpxnsh",e="isljmoe";export{i as inputSelectorElement,e as inputSelectorElementDisabled};
 //# sourceMappingURL=timepicker.styles.js.map

package/timepicker/timepicker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSelectorElement = css`\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n    cursor: inherit;\n`;\n"],"names":["inputSelectorElement"],"mappings":"kEAKO,MAAMA,EAAoB"}
+{"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSelectorElement = css`\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n    cursor: inherit;\n`;\n\nexport const inputSelectorElementDisabled = css`\n    color: ${Colour[\"text-subtler\"]};\n    cursor: not-allowed;\n`;\n"],"names":["inputSelectorElement","inputSelectorElementDisabled"],"mappings":"iEAOO,MAAMA,EAAoB,UAKpBC,EAA4B"}

package/timepicker/timepicker.styles_lyizvq.css

@@ -0,0 +1,2 @@
+@layer fds{.ixpxnsh{height:calc(3rem - 2px);cursor:inherit;}
+.isljmoe{color:var(--fds-colour-text-subtler);cursor:not-allowed;}}