@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

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

@@ -1,34 +1,79 @@
-import { CommonCalendarProps } from "../shared/internal-calendar/types";
-import { TimeSlot } from "../time-slot-bar/types";
+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 { TimelineProps } from "./types";
+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{Typography as c}from"../typography/typography.js";import{TimelineWrapper as s,TimelineTitle as l,TimelineItem as d,TimelineIndicators as o,CircleIndicator as m,LineIndicator as p,TimelineItemContent as u,TimelinePills as h,TimelineItemTitle as f,TimelinePill as g}from"./timeline.style.js";import{VisuallyHidden as v}from"../shared/accessibility/index.js";const y=({items:y,className:$,id:b,title:w,startCol:N,colSpan:j,"data-base-indicator-testid":C,"data-testid":x="timeline",headingLevel:S=2,counterOffset:A=0})=>{const O=e=>"string"==typeof e?i(c.BodyMD,{className:"timeline-item-content-text",children:e}):i(r,{children:e}),U=(e,t)=>"string"==typeof e?i(f,{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(s,{className:$,id:b,"data-testid":x,$startCol:N,$colSpan:j,children:[i(l,{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:c,variant:s}=e,l=s||(0===r?"current":"upcoming-active");return t(d,{role:"listitem",children:[t(o,{children:[t(m,{"data-testid":C?`circleindicator${r+1}_div_${C}`:"circleindicator",$variant:l,children:[i(v,{children:q(l,r)}),k(l,r)]}),i(p,{$variant:l})]}),t(u,{className:"timeline-item-content",children:[U(a,S+1),c&&i(h,{children:_(c)}),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\";\nimport { PillProps } from \"../pill\";\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 { TimelineItemProps, TimelineProps, Variant } from \"./types\";\nimport { VisuallyHidden } from \"src/shared/accessibility\";\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":"+hBAkBO,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 { PillProps } from "../pill";
+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 { 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;
+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.
+ * @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 l}from"react";import{ElementWithDropdown as n}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as i}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as d}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:y,format:v="24hr",onChange:w,onFocus:h,onBlur:g,alignment:k,dropdownZIndex:j,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=l((()=>"12hr"===v?"HH:MMam":"HH:MM"),[v]),I=()=>{var e;null===(e=M.current)||void 0===e||e.focus({preventScroll:!0})},N=()=>{c||u||F(!0)},R=()=>{F(!1),I()},Z=e=>{null==w||w(e),F(!1),I()},E=()=>{c||null==h||h()},T=e=>{var r;if($||c)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(n,{enabled:!u&&!c,isOpen:$,renderElement:()=>r(i,Object.assign({ref:H,role:"group",$readOnly:u,$disabled:c,$focused:$,$error:b},D,{children:r(s,{$disabled:c,ref:M,readOnly:!0,placeholder:y||B(),value:t.formatDisplayValue(f,v),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&&$,"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(d,{id:m,show:$,value:f,format:v,onCancel:R,onChange:Z})})),onOpen:N,onClose:()=>{F(!1),null==g||g()},onDismiss:R,offset:8,alignment:k,customZIndex:j,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

package/timepicker/timepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport {\n    DropdownRenderProps,\n    ElementWithDropdown,\n} from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { InputSelectorElement } from \"./timepicker.styles\";\nimport { 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    \"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            {...otherProps}\n        >\n            <InputSelectorElement\n                $disabled={disabled}\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                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","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","$readOnly","$disabled","$focused","$error","children","InputSelectorElement","TimeHelper","formatDisplayValue","undefined","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"mgBAWO,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,EACA,kBAAmBC,EACnB,mBAAoBC,GAAef,EAChCgB,EAAUC,EAAAjB,EAhBU,wLAqBvB,MAAOkB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDlB,EAEO,UAGA,SAEhB,CAACA,IAEEmB,EAAyB,WACR,QAAnB1B,EAAAuB,EAAYI,eAAO,IAAA3B,GAAAA,EAAE4B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX5B,GAAYC,GAChBgB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClBzB,SAAAA,EAAWyB,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KACZhC,GACJO,SAAAA,GAAW,EAGT0B,EAAsBC,UACxB,GAAIlB,GAAUhB,EAAU,OAExB,MAAMmC,EAAOD,EAAEE,cACXD,IAA0B,QAAlBrC,EAAAqB,EAAWM,eAAO,IAAA3B,OAAA,EAAAA,EAAEuC,SAASF,KAEzC3B,SAAAA,GAAU,EAGR8B,EAAiBJ,IACflC,GAAYC,GAIF,UAAViC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EA+DJ,OACIa,EAACC,EAAmB,CAChBC,SAAU1C,IAAaD,EACvBgB,OAAQA,EACR4B,cA7Dc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QAAOC,UACDjD,EAAQkD,UACRnD,EAAQoD,SACTpC,EAAMqC,OACRnD,GACJY,EAAU,CAAAwC,SAEdb,EAACc,aACcvD,EACXgD,IAAK3B,EACLpB,UAAQ,EACRG,YAAaA,GAAekB,IAC5BnB,MAAOqD,EAAWC,mBAAmBtD,EAAOE,GAC5C4C,KAAK,WAAU,eACD/C,QAASwD,EAAS,gBACjB1D,QAAY0D,EAAS,gBACrBzD,QAAYyD,EAAS,kBACnB9C,EAAc,mBACbC,EAAe,iBACjBb,IAAaC,GAAWe,EAAc,cAElDjB,EAAK,GAAGA,wBAA2B,sBAEvCQ,QAASyB,EACT2B,QAAS/B,EACTgC,UAAWtB,EACX9B,OAAQyB,OAiCZ4B,eA5Be,EACnBC,SACAC,iBACAC,sBAEAvB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKe,EACLE,MAAOH,EACPb,KAAK,SAAQ,aACF,eACPe,IAAkB,CAAAV,SAEtBb,EAACyB,EAAkB,CACfnE,GAAIA,EACJoE,KAAMnD,EACNb,MAAOA,EACPE,OAAQA,EACR+D,SAAUvC,EACVvB,SAAUwB,OAWduC,OAAQzC,EACR0C,QA5GY,KAChBrD,GAAU,GACVT,SAAAA,GAAU,EA2GN+D,UAAW1C,EACX2C,OAAQ,EACR/D,UAAWA,EACXgE,aAAc/D,EACdgE,SAAU/D,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 * @keywords clock, field, form, input, picker, time selection\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":"ykBAkBO,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,16 +1,2 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const InputSelectorElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "$disabled"> & {
-    $disabled?: boolean | undefined;
-}, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "$disabled"> & {
-    $disabled?: boolean | undefined;
-}, never>>> & string;
+export declare const inputSelectorElement: import("@linaria/core").LinariaClassName;
+export declare const inputSelectorElementDisabled: import("@linaria/core").LinariaClassName;

package/timepicker/timepicker.styles.js

@@ -1,11 +1,2 @@
-import r,{css as o}from"styled-components";import{BasicInput as e}from"../shared/input-wrapper/input-wrapper.js";import{Colour as t}from"../theme/index.js";r.div`
-    position: relative;
-`;const i=r(e)`
-    height: calc(3rem - 2px); // exclude top and bottom borders
-    cursor: inherit;
-    ${r=>r.$disabled&&o`
-            color: ${t["text-subtler"]};
-            cursor: not-allowed;
-        `}
-`;export{i 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.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { BasicInput } from \"../shared/input-wrapper/input-wrapper\";\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    position: relative;\n`;\n\nexport const InputSelectorElement = styled(BasicInput)<{\n    $disabled?: boolean | undefined;\n}>`\n    height: calc(3rem - 2px); // exclude top and bottom borders\n    cursor: inherit;\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${Colour[\"text-subtler\"]};\n            cursor: not-allowed;\n        `}\n`;\n"],"names":["styled","div","InputSelectorElement","BasicInput","props","$disabled","css","Colour"],"mappings":"4JAOuBA,EAAOC,GAAG;;QAIpBC,EAAuBF,EAAOG,EAEzC;;;MAGKC,GACCA,EAAMC,WACNC,CAAG;qBACUC,EAAO;;;"}
+{"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;}}

package/timepicker/types.d.ts

@@ -1,47 +1,82 @@
-import { RefObject } from "react";
-import { DropdownAlignmentType } from "../shared/dropdown-wrapper/types";
+import type { RefObject } from "react";
+import type { DropdownAlignmentType } from "../shared/dropdown-wrapper/types";
+/**
+ * Time display and value format used by `Timepicker`.
+ *
+ * - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
+ * - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
+ */
 export type TimepickerFormat = "12hr" | "24hr";
+/**
+ * Props for the `Timepicker` component.
+ */
 export interface TimepickerProps {
     className?: string | undefined;
     id?: string | undefined;
     style?: React.CSSProperties | undefined;
+    /**
+     * ID of an element that labels the timepicker input.
+     */
     "aria-labelledby"?: string | undefined;
+    /**
+     * ID of an element that describes the timepicker input.
+     */
     "aria-describedby"?: string | undefined;
     "data-testid"?: string | undefined;
     /**
-     * The value of the time input in a string based format
-     *
-     * 24 hour uses "hh:mm" e.g. `"13:00"`
+     * The controlled time value as a string.
      *
-     * 12 hour uses "hh:mmA" e.g. `"01:00PM"`
+     * - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
+     * - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
      */
     value?: string | undefined;
+    /**
+     * Placeholder text shown when no value is selected.
+     *
+     * @default "hh:mm" for 24-hour format or "hh:mmA" for 12-hour format.
+     */
     placeholder?: string | undefined;
     /**
-     * The time input format in `12hr` or `24hr`. Defaults to `24hr`
+     * The time display and input format.
+     *
+     * @default "24hr"
      */
     format?: TimepickerFormat | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
+    /**
+     * Renders the input in an error state when `true`.
+     */
     error?: boolean | undefined;
+    /** Aligns the dropdown relative to the trigger element. */
     alignment?: DropdownAlignmentType | undefined;
+    /** CSS `z-index` applied to the dropdown overlay. */
     dropdownZIndex?: number | undefined;
-    dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Called when the user makes a selection and clicks on the "Confirm" button
-     * in the time selection box. Returns a string based format.
+     * The root element that contains the dropdown element.
+     *
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
      *
-     * 24 hour returns "hh:mm" e.g. `"13:00"`
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
      *
-     * 12 hour returns "hh:mmA" e.g. `"01:00PM"`
+     * @default document.body
      */
-    onChange?: ((value: string) => void) | undefined;
+    dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Called when the field is focused
+     * Called when the user confirms a selection.
+     *
+     * @param value The selected time value as a string.
+     * - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
+     * - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
      */
-    onFocus?: (() => void) | undefined;
+    onChange?: ((value: string) => void) | undefined;
     /**
-     * Called when a defocus is made on the field
+     * Called when the timepicker input receives focus.
      */
+    onFocus?: (() => void) | undefined;
+    /** Called when focus leaves both the input and the dropdown. */
     onBlur?: (() => void) | undefined;
 }

package/timetable/const.js

@@ -1,2 +1,2 @@
-const F=["#FFE6BB","#D8EFEB","#E6EAFE","#FAE4E5","#D3EEFC"],E=2,D=15,B=21,o=252,t=68,A=84,C=["#FFF2DD","#EBF7F5","#F2F4FE","#FCF1F2","#E9F6FD"];export{A as MIN_HOURLY_INTERVAL_WIDTH,B as MIN_INTERVAL_WIDTH,C as ROW_BAR_COLOR_ALTERNATE_COLOR,F as ROW_BAR_COLOR_SEQUENCE,E as ROW_CELL_GAP,o as ROW_HEADER_WIDTH,t as ROW_HEIGHT,D as ROW_INTERVAL};
+const F=["#FFE6BB","#D8EFEB","#E6EAFE","#FAE4E5","#D3EEFC"],E=2,D=15,B=21,o=252,t=["#FFF2DD","#EBF7F5","#F2F4FE","#FCF1F2","#E9F6FD"];export{B as MIN_INTERVAL_WIDTH,t as ROW_BAR_COLOR_ALTERNATE_COLOR,F as ROW_BAR_COLOR_SEQUENCE,E as ROW_CELL_GAP,o as ROW_HEADER_WIDTH,D as ROW_INTERVAL};
 //# sourceMappingURL=const.js.map

package/timetable/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sources":["../../src/timetable/const.ts"],"sourcesContent":["export const ROW_BAR_COLOR_SEQUENCE = [\n    \"#FFE6BB\",\n    \"#D8EFEB\",\n    \"#E6EAFE\",\n    \"#FAE4E5\",\n    \"#D3EEFC\",\n] as const; // Assert to be a readonly tuple\nexport type RowBarMainColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number];\nexport const ROW_CELL_GAP = 2;\nexport const ROW_INTERVAL = 15;\nexport const MIN_INTERVAL_WIDTH = 21;\nexport const ROW_HEADER_WIDTH = 252;\nexport const ROW_HEIGHT = 68;\nexport const MIN_HOURLY_INTERVAL_WIDTH = 84;\nexport const ROW_BAR_COLOR_ALTERNATE_COLOR = [\n    \"#FFF2DD\",\n    \"#EBF7F5\",\n    \"#F2F4FE\",\n    \"#FCF1F2\",\n    \"#E9F6FD\",\n] as const;\nexport type RowBarAlternateColors =\n    (typeof ROW_BAR_COLOR_ALTERNATE_COLOR)[number];\n"],"names":["ROW_BAR_COLOR_SEQUENCE","ROW_CELL_GAP","ROW_INTERVAL","MIN_INTERVAL_WIDTH","ROW_HEADER_WIDTH","ROW_HEIGHT","MIN_HOURLY_INTERVAL_WIDTH","ROW_BAR_COLOR_ALTERNATE_COLOR"],"mappings":"AAAO,MAAMA,EAAyB,CAClC,UACA,UACA,UACA,UACA,WAGSC,EAAe,EACfC,EAAe,GACfC,EAAqB,GACrBC,EAAmB,IACnBC,EAAa,GACbC,EAA4B,GAC5BC,EAAgC,CACzC,UACA,UACA,UACA,UACA"}
+{"version":3,"file":"const.js","sources":["../../src/timetable/const.ts"],"sourcesContent":["export const ROW_BAR_COLOR_SEQUENCE = [\n    \"#FFE6BB\",\n    \"#D8EFEB\",\n    \"#E6EAFE\",\n    \"#FAE4E5\",\n    \"#D3EEFC\",\n] as const; // Assert to be a readonly tuple\nexport type RowBarMainColors = (typeof ROW_BAR_COLOR_SEQUENCE)[number];\nexport const ROW_CELL_GAP = 2;\nexport const ROW_INTERVAL = 15;\nexport const MIN_INTERVAL_WIDTH = 21;\nexport const ROW_HEADER_WIDTH = 252;\nexport const ROW_HEIGHT = 68;\nexport const MIN_HOURLY_INTERVAL_WIDTH = 84;\nexport const ROW_BAR_COLOR_ALTERNATE_COLOR = [\n    \"#FFF2DD\",\n    \"#EBF7F5\",\n    \"#F2F4FE\",\n    \"#FCF1F2\",\n    \"#E9F6FD\",\n] as const;\nexport type RowBarAlternateColors =\n    (typeof ROW_BAR_COLOR_ALTERNATE_COLOR)[number];\n"],"names":["ROW_BAR_COLOR_SEQUENCE","ROW_CELL_GAP","ROW_INTERVAL","MIN_INTERVAL_WIDTH","ROW_HEADER_WIDTH","ROW_BAR_COLOR_ALTERNATE_COLOR"],"mappings":"AAAO,MAAMA,EAAyB,CAClC,UACA,UACA,UACA,UACA,WAGSC,EAAe,EACfC,EAAe,GACfC,EAAqB,GACrBC,EAAmB,IAGnBC,EAAgC,CACzC,UACA,UACA,UACA,UACA"}

package/timetable/internal-types.d.ts

@@ -1,5 +1,5 @@
-import { RowBarAlternateColors, RowBarMainColors } from "./const";
-import { TimeTableRowCellData } from "./types";
+import type { RowBarAlternateColors, RowBarMainColors } from "./const";
+import type { TimeTableRowCellData } from "./types";
 export type InternalTimeTableRowCellData = TimeTableRowCellData & {
     roundedStartTime?: string;
     roundedEndTime?: string;

package/timetable/timetable-header/timetable-header.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from "react";
+import type { RefObject } from "react";
 interface TimeTableHeaderProps {
     selectedDate: string;
     loading: boolean;

package/timetable/timetable-header/timetable-header.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as l}from"react/jsx-runtime";import{RefreshIcon as o}from"@lifesg/react-icons";import{NavigationHeaderWrapper as a,StyledDateNavigator as i,NavigationHeaderSubtitleWrapper as n,StyledResultText as s,StyledRefreshButton as c}from"./timetable-header.style.js";const d=d=>{var{selectedDate:m,loading:f,tableContainerRef:b,totalRecords:h,onPreviousDayClick:C,onNextDayClick:u,onRefresh:D,onCalendarDateSelect:g}=d,p=e(d,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const y=()=>{b.current&&(b.current.scrollTop=0)},R=()=>{D&&(y(),D())};return t(a,{children:[r(i,Object.assign({selectedDate:m,loading:f},p,{onRightArrowClick:e=>{y(),u(e)},onLeftArrowClick:e=>{y(),C(e)},onCalendarDateSelect:g})),void 0===h?r(l,{}):t(n,{children:[t(s,{"data-testid":"timetable-records-results",weight:"semibold",children:[h," result",1!==h?"s":""," found"]}),D&&r(c,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:f,onClick:R,$loading:f,children:r(o,{})})]})]})};export{d as TimeTableHeader};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as r,Fragment as a}from"react/jsx-runtime";import{RefreshIcon as o}from"@lifesg/react-icons";import l from"clsx";import{Button as s}from"../../button/button.js";import{DateNavigator as i}from"../../date-navigator/date-navigator.js";import{Typography as n}from"../../typography/index.js";import{navigationHeaderWrapper as c,dateNavigator as d,navigationHeaderSubtitleWrapper as m,resultText as f,refreshButton as b,refreshButtonLoading as p}from"./timetable-header.styles.js";const h=h=>{var{selectedDate:u,loading:C,tableContainerRef:g,totalRecords:y,onPreviousDayClick:D,onNextDayClick:v,onRefresh:R,onCalendarDateSelect:j}=h,k=e(h,["selectedDate","loading","tableContainerRef","totalRecords","onPreviousDayClick","onNextDayClick","onRefresh","onCalendarDateSelect"]);const N=()=>{g.current&&(g.current.scrollTop=0)},x=()=>{R&&(N(),R())};return t("div",{className:c,children:[r(i,Object.assign({className:d,selectedDate:u,loading:C},k,{onRightArrowClick:e=>{N(),v(e)},onLeftArrowClick:e=>{N(),D(e)},onCalendarDateSelect:j})),void 0===y?r(a,{}):t("div",{className:m,children:[t(n.BodySM,{className:f,"data-testid":"timetable-records-results",weight:"semibold",children:[y," result",1!==y?"s":""," found"]}),R&&r(s,{"data-testid":"timetable-records-refresh-btn","aria-label":"Refresh timetable records",styleType:"light",sizeType:"small",disabled:C,onClick:x,className:l(b,C&&p),icon:r(o,{})})]})]})};export{h as TimeTableHeader};
 //# sourceMappingURL=timetable-header.js.map