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

package/progress-indicator/progress-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.js","sources":["../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import kebabCase from \"lodash/kebabCase\";\nimport { useContext } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Content,\n    Indicator,\n    IndicatorBar,\n    IndicatorTitleDesktop,\n    IndicatorTitleTablet,\n    Wrapper,\n} from \"./progress-indicator.style\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    fadeColor: _fadeColor,\n    fadePosition: _fadePosition,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isTablet = useMediaQuery({\n        maxWidth: tabletBreakpoint,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <Indicator key={stepIndex} id={getId(stepIndex, currentIndex)}>\n                    <IndicatorBar $highlighted={highlighted}></IndicatorBar>\n                </Indicator>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <Indicator\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                >\n                    <IndicatorTitleDesktop\n                        $highlighted={highlighted}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </IndicatorTitleDesktop>\n                </Indicator>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <Indicator\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n            >\n                <IndicatorTitleTablet\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </IndicatorTitleTablet>\n                <IndicatorTitleTablet\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </IndicatorTitleTablet>\n            </Indicator>\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            <Content>{renderBars()}</Content>\n            <Content>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </Content>\n        </Wrapper>\n    );\n};\n"],"names":["ProgressIndicator","_a","steps","currentIndex","displayExtractor","fadeColor","_fadeColor","fadePosition","_fadePosition","otherProps","__rest","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","isTablet","useMediaQuery","maxWidth","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","Wrapper","Object","assign","children","_jsx","Content","map","step","highlighted","Indicator","id","IndicatorBar","$highlighted","IndicatorTitleTablet","weight","current","fontWeight","IndicatorTitleDesktop","VisuallyHidden"],"mappings":"gkBAiBO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EACAC,UAAWC,EACXC,aAAcC,GAAaP,EACxBQ,EAAUC,EAAAT,EANqB,wEAWlC,MAAMU,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAcRK,EAAmBC,UACrB,OAAIhB,EACOA,EAAiBgB,GAEL,QAAhBnB,EAAAmB,aAAI,EAAJA,EAAMC,kBAAU,IAAApB,EAAAA,EAAI,EAAE,EAG3BqB,EAAmB,CAACC,EAAmBpB,IACrCoB,EAAYpB,EACL,iBACAoB,IAAcpB,EACd,eAEA,gBAITqB,EAAQ,CAACD,EAAmBpB,IACvBsB,EACH,GAAGH,EAAiBC,EAAWpB,MAAiBoB,KAOxD,IAAKrB,EAAMwB,OAAQ,OAAO,KA+D1B,OACIC,EAACC,EAAOC,OAAAC,OAAA,CAAA,EAAKrB,EAAU,CAAAsB,SAAA,CACnBC,EAACC,EAAO,CAAAF,SA9DL7B,EAAMgC,KAAI,CAACC,EAASZ,KAEvB,MAAMa,EAAcb,GAAapB,EAEjC,OACI6B,EAACK,EAAS,CAAiBC,GAAId,EAAMD,EAAWpB,GAAa4B,SACzDC,EAACO,EAAY,CAAAC,aAAeJ,KADhBb,EAEJ,MAwDhBS,EAACC,EAAO,CAAAF,SACHf,EAxBLW,EAACU,EAAS,CAENC,GAAId,EAAMrB,EAAcA,GAAa4B,SAAA,CAErCJ,EAACc,EAAoB,CACjBC,OAAQ,WACRJ,GAAI,GAAGd,EAAMrB,EAAcA,aAAuB4B,SAAA,CAAA,QAE5C5B,EAAe,EAAC,OAAMD,EAAMwB,UAEtCM,EAACS,EAAoB,CACjBC,OAAQ,UACRJ,GAAI,GAAGd,EAAMrB,EAAcA,WAAqB4B,SAE/CZ,EAAgBjB,EAAMC,QAbtBA,GA5BND,EAAMgC,KAAI,CAACC,EAASZ,KACvB,MAAMa,EAAcb,GAAapB,EAC3BwC,EAAUpB,IAAcpB,EACxByC,EAAaD,EAAU,OAAS,UAEtC,OACIX,EAACK,EAAS,CAENC,GAAI,GAAGd,EAAMD,EAAWpB,WAAqB4B,SAE7CJ,EAACkB,EAAqB,CAAAL,aACJJ,EACdM,OAAQE,iBACMD,EAAOZ,SAAA,CAEpBZ,EAAgBgB,GACjBH,EAACc,EAAc,CAAAf,SACVT,EAAiBC,EAAWpB,SAVhCoB,EAaG,SAiCV"}
+{"version":3,"file":"progress-indicator.js","sources":["../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport kebabCase from \"lodash/kebabCase\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./progress-indicator.styles\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\n// @catalog\n/**\n * A horizontal step-progress bar that tracks a user's position through a\n * multi-step flow.\n *\n * Use `ProgressIndicator` when you need to communicate progress through an\n * ordered sequence of steps.\n * @keywords multi-step, step, stepper, wizard, workflow\n */\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    className,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={getId(stepIndex, currentIndex)}\n                    className={styles.indicator}\n                >\n                    <div\n                        className={clsx(\n                            styles.indicatorBar,\n                            highlighted && styles.indicatorBarHighlighted\n                        )}\n                    />\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                    className={styles.indicator}\n                >\n                    <Typography.BodyMD\n                        className={clsx(\n                            styles.indicatorTitleDesktop,\n                            highlighted &&\n                                styles.indicatorTitleDesktopHighlighted\n                        )}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </Typography.BodyMD>\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <div\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n                className={styles.indicator}\n            >\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </Typography.BodyMD>\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </Typography.BodyMD>\n            </div>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div className={styles.content}>{renderBars()}</div>\n            <div className={styles.content}>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </div>\n        </div>\n    );\n};\n"],"names":["ProgressIndicator","_a","steps","currentIndex","displayExtractor","className","otherProps","__rest","isTablet","useMaxWidthMediaQuery","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","clsx","styles.wrapper","children","_jsx","styles.content","map","step","highlighted","id","styles.indicator","styles.indicatorBar","styles.indicatorBarHighlighted","Typography","BodyMD","styles.indicatorTitleTablet","weight","current","fontWeight","styles.indicatorTitleDesktop","styles.indicatorTitleDesktopHighlighted","VisuallyHidden"],"mappings":"q+BAkBO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EAAgBC,UAChBA,GAASJ,EACNK,EAAUC,EAAAN,EALqB,CAAA,QAAA,eAAA,mBAAA,cAUlC,MAAMO,EAAWC,EAAsB,MAajCC,EAAmBC,UACrB,OAAIP,EACOA,EAAiBO,GAEL,QAAhBV,EAAAU,aAAI,EAAJA,EAAMC,kBAAU,IAAAX,EAAAA,EAAI,EAAE,EAG3BY,EAAmB,CAACC,EAAmBX,IACrCW,EAAYX,EACL,iBACAW,IAAcX,EACd,eAEA,gBAITY,EAAQ,CAACD,EAAmBX,IACvBa,EACH,GAAGH,EAAiBC,EAAWX,MAAiBW,KAOxD,IAAKZ,EAAMe,OAAQ,OAAO,KAgF1B,OACIC,uBAAKb,UAAWc,EAAKC,EAAgBf,IAAgBC,EAAU,CAAAe,SAAA,CAC3DC,EAAA,MAAA,CAAKjB,UAAWkB,EAAcF,SA/E3BnB,EAAMsB,KAAI,CAACC,EAASX,KAEvB,MAAMY,EAAcZ,GAAaX,EAEjC,OACImB,EAAA,MAAA,CAEIK,GAAIZ,EAAMD,EAAWX,GACrBE,UAAWuB,EAAgBP,SAE3BC,EAAA,MAAA,CACIjB,UAAWc,EACPU,EACAH,GAAeI,MAPlBhB,EAUH,MAgEVQ,SAAKjB,UAAWkB,EAAcF,SACzBb,EA3BLU,EAAA,MAAA,CAEIS,GAAIZ,EAAMZ,EAAcA,GACxBE,UAAWuB,EAAgBP,SAAA,CAE3BH,EAACa,EAAWC,QACR3B,UAAW4B,EACXC,OAAQ,WACRP,GAAI,GAAGZ,EAAMZ,EAAcA,+BAErBA,EAAe,EAAC,OAAMD,EAAMe,UAEtCK,EAACS,EAAWC,QACR3B,UAAW4B,EACXC,OAAQ,UACRP,GAAI,GAAGZ,EAAMZ,EAAcA,oBAE1BO,EAAgBR,EAAMC,QAhBtBA,GAjCND,EAAMsB,KAAI,CAACC,EAASX,KACvB,MAAMY,EAAcZ,GAAaX,EAC3BgC,EAAUrB,IAAcX,EACxBiC,EAAaD,EAAU,OAAS,UAEtC,OACIb,EAAA,MAAA,CAEIK,GAAI,GAAGZ,EAAMD,EAAWX,WACxBE,UAAWuB,EAAgBP,SAE3BH,EAACa,EAAWC,OAAM,CACd3B,UAAWc,EACPkB,EACAX,GACIY,GAERJ,OAAQE,EAAU,eACJD,EAAOd,SAAA,CAEpBX,EAAgBe,GACjBH,EAACiB,EAAc,CAAAlB,SACVR,EAAiBC,EAAWX,SAfhCW,EAkBH,SAoCR"}

package/progress-indicator/progress-indicator.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const INDICATOR_BAR_MARGIN_RIGHT_TABLET = 0.5;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;
+export declare const indicatorBar: import("@linaria/core").LinariaClassName;
+export declare const indicatorBarHighlighted: import("@linaria/core").LinariaClassName;
+export declare const indicatorTitleDesktop: import("@linaria/core").LinariaClassName;
+export declare const indicatorTitleDesktopHighlighted: import("@linaria/core").LinariaClassName;
+export declare const indicatorTitleTablet: import("@linaria/core").LinariaClassName;
+export declare const indicator: import("@linaria/core").LinariaClassName;

package/progress-indicator/progress-indicator.styles.js

@@ -0,0 +1,2 @@
+import"./progress-indicator.styles_1c038s4.css";const i="w103113g",s="ck7dr6z",o="i1k6bqsf",r="inywq69",c="i1ubzlq2",t="i8ugwdc",e="i8128on",g="i1vcego5";export{s as content,g as indicator,o as indicatorBar,r as indicatorBarHighlighted,c as indicatorTitleDesktop,t as indicatorTitleDesktopHighlighted,e as indicatorTitleTablet,i as wrapper};
+//# sourceMappingURL=progress-indicator.styles.js.map

package/progress-indicator/progress-indicator.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-indicator.styles.js","sources":["../../src/progress-indicator/progress-indicator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Spacing } from \"../theme\";\n\n// Units in rem\nexport const INDICATOR_BAR_MARGIN_RIGHT_TABLET = 0.5;\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n\n    margin: 2rem 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: 1.5rem 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 1rem 0;\n    }\n`;\n\nexport const content = css`\n    display: flex;\n    flex-basis: 0;\n    justify-content: space-between;\n    width: 100%;\n`;\n\nexport const indicatorBar = css`\n    height: 4px;\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const indicatorBarHighlighted = css`\n    background-color: ${Colour[\"bg-primary-subtle\"]};\n`;\n\nexport const indicatorTitleDesktop = css`\n    overflow-wrap: anywhere;\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const indicatorTitleDesktopHighlighted = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const indicatorTitleTablet = css`\n    overflow-wrap: anywhere;\n    color: ${Colour.text};\n`;\n\nexport const indicator = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    &:not(:last-child) {\n        margin-right: ${INDICATOR_BAR_MARGIN_RIGHT_TABLET + \"rem\"};\n    }\n`;\n"],"names":["wrapper","content","indicatorBar","indicatorBarHighlighted","indicatorTitleDesktop","indicatorTitleDesktopHighlighted","indicatorTitleTablet","indicator"],"mappings":"kFAUO,MAAMA,EAAO,WAePC,EAAO,UAOPC,EAAY,WAOZC,EAAuB,UAIvBC,EAAqB,WAKrBC,EAAgC,UAIhCC,EAAoB,UAKpBC,EAAS"}

package/progress-indicator/progress-indicator.styles_1c038s4.css

@@ -0,0 +1,8 @@
+@layer fds{.w103113g{position:relative;width:100%;margin:2rem 0;}:where(body.fds-breakpoint-xl-max) .w103113g{margin:1.5rem 0;}:where(body.fds-breakpoint-lg-max) .w103113g{margin:1rem 0;}
+.ck7dr6z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;width:100%;}
+.i1k6bqsf{height:4px;margin-bottom:var(--fds-spacing-8);border-radius:var(--fds-radius-full);background-color:var(--fds-colour-bg-disabled);}
+.inywq69{background-color:var(--fds-colour-bg-primary-subtle);}
+.i1ubzlq2{overflow-wrap:anywhere;color:var(--fds-colour-text-disabled);}
+.i8ugwdc{color:var(--fds-colour-text-primary);}
+.i8128on{overflow-wrap:anywhere;color:var(--fds-colour-text);}
+.i1vcego5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}.i1vcego5:not(:last-child){margin-right:0.5rem;}}

package/progress-indicator/types.d.ts

@@ -1,14 +1,26 @@
-type FadePosition = "left" | "right" | "both";
+/**
+ * Props for the `ProgressIndicator` component.
+ *
+ * The type parameter `T` represents the shape of each step item in the
+ * `steps` array.
+ */
 export interface ProgressIndicatorProps<T> {
+    /**
+     * Ordered list of step items to render as progress bars and labels.
+     */
     steps: T[];
+    /**
+     * Zero-based index of the current active step.
+     * All steps at or before this index are visually highlighted.
+     */
     currentIndex: number;
-    /** @deprecated Scrolling behaviour has been removed hence this attribute is no longer needed */
-    fadeColor?: string[] | undefined;
-    /** @deprecated Scrolling behaviour has been removed hence this attribute is no longer needed */
-    fadePosition?: FadePosition | undefined;
+    /**
+     * Derives the display label for a step item.
+     *
+     * @remarks Falls back to `item.toString()` when omitted.
+     */
     displayExtractor?: ((item: T) => string) | undefined;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
 }
-export {};

package/radio-button/radio-button.d.ts

@@ -1,2 +1,8 @@
 import type { RadioButtonProps } from "./types";
-export declare const RadioButton: ({ className, checked, disabled, displaySize, onChange, ...otherProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A single radio button input.
+ *
+ * Use `RadioButton` as an input within a radio group.
+ * @keywords choice, field, form, input, option, select
+ */
+export declare const RadioButton: ({ className, checked, disabled, displaySize, focusableWhenDisabled, onChange, tabIndex, ...otherProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;

package/radio-button/radio-button.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as d}from"react/jsx-runtime";import{Container as i,Input as t,StyledCheckedIcon as s,StyledUnCheckedIcon as r}from"./radio-button.styles.js";const l=l=>{var{className:o,checked:c,disabled:n,displaySize:h="default",onChange:b}=l,m=e(l,["className","checked","disabled","displaySize","onChange"]);return a(i,{$selected:c,$disabled:n,className:o,$displaySize:h,"data-testid":"radio-button",children:[d(t,Object.assign({type:"radio","data-testid":"radio-input",onChange:e=>{n||null==b||b(e)},checked:c,disabled:n},m)),c?d(s,{"data-testid":"radio-checked",$disabled:n,"aria-hidden":!0}):d(r,{"data-testid":"radio-unchecked",$disabled:n,"aria-hidden":!0})]})};export{l as RadioButton};
+import{__rest as a}from"../_virtual/_tslib.js";import{jsxs as e,jsx as d}from"react/jsx-runtime";import{CircleDotIcon as i,CircleIcon as t}from"@lifesg/react-icons";import s from"clsx";import{input as r,inputActive as l,container as n,icon as o,checkedIconDisabled as c,checkedIcon as m,uncheckedIconDisabled as b,uncheckedIcon as h}from"./radio-button.styles.js";const p=p=>{var{className:u,checked:f,disabled:x,displaySize:N="default",focusableWhenDisabled:g,onChange:k,tabIndex:y}=p,j=a(p,["className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex"]);const v=!!x&&!!g,z=!!x&&!g;return e("div",{className:s(n,u),"data-display-size":N,"data-testid":"radio-button",children:[d("input",Object.assign({type:"radio","data-testid":"radio-input",onChange:a=>{x?a.preventDefault():null==k||k(a)},checked:f,disabled:z,"aria-disabled":v,tabIndex:v?0:y,className:s(r,!x&&l)},j)),f?d(i,{"data-testid":"radio-checked",className:s(o,x?c:m),"aria-hidden":!0}):d(t,{"data-testid":"radio-unchecked",className:s(o,x?b:h),"aria-hidden":!0})]})};export{p as RadioButton};
 //# sourceMappingURL=radio-button.js.map

package/radio-button/radio-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sources":["../../src/radio-button/radio-button.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport {\n    Container,\n    Input,\n    StyledCheckedIcon,\n    StyledUnCheckedIcon,\n} from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    onChange,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (!disabled) {\n            onChange?.(event);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderIcon = () => {\n        return checked ? (\n            <StyledCheckedIcon\n                data-testid=\"radio-checked\"\n                $disabled={disabled}\n                aria-hidden\n            />\n        ) : (\n            <StyledUnCheckedIcon\n                data-testid=\"radio-unchecked\"\n                $disabled={disabled}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <Container\n            $selected={checked}\n            $disabled={disabled}\n            className={className}\n            $displaySize={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <Input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={disabled}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </Container>\n    );\n};\n"],"names":["RadioButton","_a","className","checked","disabled","displaySize","onChange","otherProps","__rest","_jsxs","Container","$selected","$disabled","$displaySize","children","_jsx","Input","Object","assign","type","event","StyledCheckedIcon","StyledUnCheckedIcon"],"mappings":"iNAUO,MAAMA,EAAeC,IAAA,IAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,SACvBA,GAAQL,EACLM,EAAUC,EAAAP,EANW,6DAqCxB,OACIQ,EAACC,EAAS,CAAAC,UACKR,EAAOS,UACPR,EACXF,UAAWA,EAASW,aACNR,gBACF,eAAcS,SAAA,CAE1BC,EAACC,EAAKC,OAAAC,OAAA,CACFC,KAAK,sBACO,cACZb,SArCYc,IACfhB,GACDE,SAAAA,EAAWc,EACf,EAmCQjB,QAASA,EACTC,SAAUA,GACNG,IA7BLJ,EACHY,EAACM,EAAiB,CAAA,cACF,gBAAeT,UAChBR,EAAQ,eAAA,IAIvBW,EAACO,EAAmB,CAAA,cACJ,kBAAiBV,UAClBR,EAAQ,eAAA,MAuBf"}
+{"version":3,"file":"radio-button.js","sources":["../../src/radio-button/radio-button.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { ChangeEvent } from \"react\";\n\nimport * as styles from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\n// @catalog\n/**\n * A single radio button input.\n *\n * Use `RadioButton` as an input within a radio group.\n * @keywords choice, field, form, input, option, select\n */\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    focusableWhenDisabled,\n    onChange,\n    tabIndex,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        return checked ? (\n            <CircleDotIcon\n                data-testid=\"radio-checked\"\n                className={clsx(\n                    styles.icon,\n                    disabled ? styles.checkedIconDisabled : styles.checkedIcon\n                )}\n                aria-hidden\n            />\n        ) : (\n            <CircleIcon\n                data-testid=\"radio-unchecked\"\n                className={clsx(\n                    styles.icon,\n                    disabled\n                        ? styles.uncheckedIconDisabled\n                        : styles.uncheckedIcon\n                )}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(styles.container, className)}\n            data-display-size={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                className={clsx(styles.input, !disabled && styles.inputActive)}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["RadioButton","_a","className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex","otherProps","__rest","isFocusableWhenDisabled","isNativeDisabled","_jsxs","clsx","styles.container","children","_jsx","Object","assign","type","event","preventDefault","styles.input","styles.inputActive","CircleDotIcon","styles.icon","styles.checkedIconDisabled","styles.checkedIcon","CircleIcon","styles.uncheckedIconDisabled","styles.uncheckedIcon"],"mappings":"4WAcO,MAAMA,EAAeC,QAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,sBACvBA,EAAqBC,SACrBA,EAAQC,SACRA,GAAQP,EACLQ,EAAUC,EAAAT,EARW,gGAaxB,MAAMU,IAA4BP,KAAcE,EAC1CM,IAAqBR,IAAaE,EAyCxC,OACIO,EAAA,MAAA,CACIX,UAAWY,EAAKC,EAAkBb,GAAU,oBACzBG,gBACP,eAAcW,SAAA,CAE1BC,EAAA,QAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,cACA,cACZb,SA7CYc,IAChBjB,EACAiB,EAAMC,iBAIVf,SAAAA,EAAWc,EAAM,EAwCTlB,QAASA,EACTC,SAAUQ,EAAgB,gBACXD,EACfH,SAAUG,EAA0B,EAAIH,EACxCN,UAAWY,EAAKS,GAAenB,GAAYoB,IACvCf,IAtCLN,EACHc,EAACQ,EAAa,CAAA,cACE,gBACZvB,UAAWY,EACPY,EACAtB,EAAWuB,EAA6BC,sBAKhDX,EAACY,EAAU,CAAA,cACK,kBACZ3B,UAAWY,EACPY,EACAtB,EACM0B,EACAC,GACT,eAAA,MAwBH"}

package/radio-button/radio-button.styles.d.ts

@@ -1,21 +1,9 @@
-import type { RadioButtonProps, RadioButtonSize } from "./types";
-interface StyleProps {
-    $selected?: boolean;
-    $disabled?: boolean;
-    $displaySize?: RadioButtonSize | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const StyledUnCheckedIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, StyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const StyledCheckedIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, StyleProps>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, RadioButtonProps>> & string;
-export {};
+export declare const classes: {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const icon: import("@linaria/core").LinariaClassName;
+export declare const uncheckedIcon: import("@linaria/core").LinariaClassName;
+export declare const uncheckedIconDisabled: import("@linaria/core").LinariaClassName;
+export declare const checkedIcon: import("@linaria/core").LinariaClassName;
+export declare const checkedIconDisabled: import("@linaria/core").LinariaClassName;
+export declare const input: import("@linaria/core").LinariaClassName;
+export declare const inputActive: import("@linaria/core").LinariaClassName;

package/radio-button/radio-button.styles.js

@@ -1,41 +1,2 @@
-import{CircleIcon as e,CircleDotIcon as i}from"@lifesg/react-icons";import t,{css as o}from"styled-components";import{V3_Motion as n,V3_Colour as r}from"../v3_theme/index.js";const d=t.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    ${e=>"small"===e.$displaySize?o`
-                height: 1.5rem;
-                width: 1.5rem;
-            `:o`
-                height: 2rem;
-                width: 2rem;
-            `}
-    position: relative;
-`,s=t(e)`
-    height: 100%;
-    width: 100%;
-    color: ${e=>e.$disabled?r["icon-disabled-subtle"](e):r["icon-subtle"](e)};
-    transition: ${n["duration-150"]} ${n["ease-default"]};
-`,a=t(i)`
-    height: 100%;
-    width: 100%;
-    color: ${e=>e.$disabled?r["icon-selected-disabled"](e):r["icon-selected"](e)};
-
-    transition: ${n["duration-150"]} ${n["ease-default"]};
-`,l=t.input`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-    z-index: 1;
-
-    appearance: none;
-    background: transparent;
-    border: none;
-
-    &:hover + ${s}, &:hover + ${a} {
-        @media (pointer: fine) {
-            color: ${e=>!e.disabled&&r["icon-hover"](e)};
-        }
-    }
-`;export{d as Container,l as Input,a as StyledCheckedIcon,s as StyledUnCheckedIcon};
+import"./radio-button.styles_1c4v6v.css";const c="c22ppgr",t="iwrt33w",o="u16bhkcz",i="ubjq3ci",r="crf4g3g",b="c1bv24bs",s="ie6234c",p="i1pcowd9";export{r as checkedIcon,b as checkedIconDisabled,c as container,t as icon,s as input,p as inputActive,o as uncheckedIcon,i as uncheckedIconDisabled};
 //# sourceMappingURL=radio-button.styles.js.map

package/radio-button/radio-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.styles.js","sources":["../../src/radio-button/radio-button.styles.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Motion } from \"../v3_theme\";\nimport type { RadioButtonProps, RadioButtonSize } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected?: boolean;\n    $disabled?: boolean;\n    $displaySize?: RadioButtonSize | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<StyleProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    ${(props) => {\n        if (props.$displaySize === \"small\") {\n            return css`\n                height: 1.5rem;\n                width: 1.5rem;\n            `;\n        } else {\n            return css`\n                height: 2rem;\n                width: 2rem;\n            `;\n        }\n    }}\n    position: relative;\n`;\n\nexport const StyledUnCheckedIcon = styled(CircleIcon)<StyleProps>`\n    height: 100%;\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled\n            ? V3_Colour[\"icon-disabled-subtle\"](props)\n            : V3_Colour[\"icon-subtle\"](props)};\n    transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const StyledCheckedIcon = styled(CircleDotIcon)<StyleProps>`\n    height: 100%;\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled\n            ? V3_Colour[\"icon-selected-disabled\"](props)\n            : V3_Colour[\"icon-selected\"](props)};\n\n    transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const Input = styled.input<RadioButtonProps>`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    z-index: 1;\n\n    appearance: none;\n    background: transparent;\n    border: none;\n\n    &:hover + ${StyledUnCheckedIcon}, &:hover + ${StyledCheckedIcon} {\n        @media (pointer: fine) {\n            color: ${(props) =>\n                !props.disabled && V3_Colour[\"icon-hover\"](props)};\n        }\n    }\n`;\n"],"names":["Container","styled","div","props","$displaySize","css","StyledUnCheckedIcon","CircleIcon","$disabled","V3_Colour","V3_Motion","StyledCheckedIcon","CircleDotIcon","Input","input","disabled"],"mappings":"+KAoBO,MAAMA,EAAYC,EAAOC,GAAe;;;;MAIxCC,GAC4B,UAAvBA,EAAMC,aACCC,CAAG;;;cAKHA,CAAG;;;;;EASTC,EAAsBL,EAAOM,EAAuB;;;aAGnDJ,GACNA,EAAMK,UACAC,EAAU,wBAAwBN,GAClCM,EAAU,eAAeN;kBACrBO,EAAU,mBAAmBA,EAAU;EAG5CC,EAAoBV,EAAOW,EAA0B;;;aAGpDT,GACNA,EAAMK,UACAC,EAAU,0BAA0BN,GACpCM,EAAU,iBAAiBN;;kBAEvBO,EAAU,mBAAmBA,EAAU;EAG5CG,EAAQZ,EAAOa,KAAuB;;;;cAIpCX,GAAWA,EAAMY,SAAW,cAAgB;;;;;;;gBAO3CT,gBAAkCK;;qBAE5BR,IACLA,EAAMY,UAAYN,EAAU,cAAcN;;;"}
+{"version":3,"file":"radio-button.styles.js","sources":["../../src/radio-button/radio-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Motion } from \"../theme\";\n\nexport const classes = {} as const;\n\nexport const container = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n\n    &[data-display-size=\"small\"] {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &[data-display-size=\"default\"] {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const icon = css`\n    height: 100%;\n    width: 100%;\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const uncheckedIcon = css`\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const uncheckedIconDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const checkedIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const checkedIconDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n\nexport const input = css`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: not-allowed;\n    z-index: 1;\n\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const inputActive = css`\n    cursor: pointer;\n\n    &:hover + svg {\n        @media (pointer: fine) {\n            color: ${Colour[\"icon-hover\"]};\n        }\n    }\n`;\n"],"names":["container","icon","uncheckedIcon","uncheckedIconDisabled","checkedIcon","checkedIconDisabled","input","inputActive"],"mappings":"qEAMO,MAAMA,EAAS,UAiBTC,EAAI,UAMJC,EAAa,WAIbC,EAAqB,UAIrBC,EAAW,UAIXC,EAAmB,WAInBC,EAAK,UAYLC,EAAW"}

package/radio-button/radio-button.styles_1c4v6v.css

@@ -0,0 +1,8 @@
+@layer fds{.c22ppgr{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;position:relative;}.c22ppgr[data-display-size="small"]{height:1.5rem;width:1.5rem;}.c22ppgr[data-display-size="default"]{height:2rem;width:2rem;}
+.iwrt33w{height:100%;width:100%;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}
+.u16bhkcz{color:var(--fds-colour-icon-subtle);}
+.ubjq3ci{color:var(--fds-colour-icon-disabled-subtle);}
+.crf4g3g{color:var(--fds-colour-icon-selected);}
+.c1bv24bs{color:var(--fds-colour-icon-selected-disabled);}
+.ie6234c{position:absolute;height:100%;width:100%;cursor:not-allowed;z-index:1;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:transparent;border:none;}
+.i1pcowd9{cursor:pointer;}@media (pointer: fine){.i1pcowd9:hover+svg{color:var(--fds-colour-icon-hover);}}}

package/radio-button/types.d.ts

@@ -1,4 +1,19 @@
+/** Visual size variant for the radio button. */
 export type RadioButtonSize = "small" | "default";
+/** Props for the `RadioButton` component. */
 export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    /** The selected state of the component */
+    checked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    /**
+     * Visual size of the radio button icon.
+     *
+     * @default "default"
+     */
     displaySize?: RadioButtonSize | undefined;
+    /**
+     * When `true` and `disabled` is also `true`, the radio button remains
+     * keyboard-focusable. `onChange` is still suppressed.
+     */
+    focusableWhenDisabled?: boolean | undefined;
 }

package/schedule/const.js

@@ -1,2 +1,2 @@
-const o=48,t=42,c=130,e=30,n=280;export{o as CELL_HEIGHT,c as HEADER_HEIGHT,n as MIN_COLUMN_WIDTH,e as SLOT_INTERVAL,t as TIME_INDICATOR_WIDTH};
+const o=48,t=30;export{o as CELL_HEIGHT,t as SLOT_INTERVAL};
 //# sourceMappingURL=const.js.map

package/schedule/const.js.map

@@ -1 +1 @@
-{"version":3,"file":"const.js","sources":["../../src/schedule/const.ts"],"sourcesContent":["export const CELL_HEIGHT = 48; //the height of each cell in the grid (unit: px)\nexport const TIME_INDICATOR_WIDTH = 42; //the width of the time indicator column (unit: px)\nexport const HEADER_HEIGHT = 130; //the height of the header (unit: px)\nexport const SLOT_INTERVAL = 30; // minutes per slot\nexport const MIN_COLUMN_WIDTH = 280; //the min width of the column (unit: px)\n\n// Constants for slot positioning in week view\nexport const SLOT_WIDTH = 30;\nexport const SLOT_GAP = 2;\nexport const MAX_VISIBLE_SLOTS = 3;\n"],"names":["CELL_HEIGHT","TIME_INDICATOR_WIDTH","HEADER_HEIGHT","SLOT_INTERVAL","MIN_COLUMN_WIDTH"],"mappings":"AAAO,MAAMA,EAAc,GACdC,EAAuB,GACvBC,EAAgB,IAChBC,EAAgB,GAChBC,EAAmB"}
+{"version":3,"file":"const.js","sources":["../../src/schedule/const.ts"],"sourcesContent":["export const CELL_HEIGHT = 48; //the height of each cell in the grid (unit: px)\nexport const TIME_INDICATOR_WIDTH = 42; //the width of the time indicator column (unit: px)\nexport const HEADER_HEIGHT = 130; //the height of the header (unit: px)\nexport const SLOT_INTERVAL = 30; // minutes per slot\nexport const MIN_COLUMN_WIDTH = 280; //the min width of the column (unit: px)\n\n// Constants for slot positioning in week view\nexport const SLOT_WIDTH = 30;\nexport const SLOT_GAP = 2;\nexport const MAX_VISIBLE_SLOTS = 3;\n"],"names":["CELL_HEIGHT","SLOT_INTERVAL"],"mappings":"AAAO,MAAMA,EAAc,GAGdC,EAAgB"}

package/schedule/internal-types.d.ts

@@ -0,0 +1,18 @@
+import type { RefObject } from "react";
+/** Shared props passed to the day-view and week-view sub-components. */
+export interface CommonScheduleViewProps {
+    /** The currently displayed date in `YYYY-MM-DD` format. */
+    date: string;
+    /** Whether the schedule is in a loading state. */
+    loading: boolean;
+    /** Earliest visible time in `HH:mm` format. */
+    minTime: string;
+    /** Latest visible time in `HH:mm` format. */
+    maxTime: string;
+    /** Time in `HH:mm` format to scroll into view on mount. */
+    initialScrollTime?: string | undefined;
+    /** Ref to the scrollable container element. */
+    containerRef: RefObject<HTMLDivElement>;
+    /** Message displayed inside blocked time slots. */
+    blockedMessage?: string | undefined;
+}

package/schedule/schedule-day-view/schedule-day-view.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as r,Fragment as i}from"react/jsx-runtime";import{ChevronLeftIcon as t,ChevronRightIcon as n}from"@lifesg/react-icons";import{useRef as o,useMemo as l}from"react";import{ThemedLoadingSpinner as s}from"../../animations/themed-loading-spinner/themed-loading-spinner.js";import{DateHelper as c}from"../../util/date-helper.js";import{TimeHelper as a}from"../../util/time-helper.js";import{useTimelineOffset as m,useInitialScroll as d}from"../shared/hooks.js";import{minutesToTime as h,findSlotsStartingInTimeRange as u,calculateSlotOffset as p,isTimeCellCovered as f}from"../shared/utils.js";import{WithOptionalPopover as T}from"../shared/with-optional-popover.js";import{TimeIndicator as v}from"../time-indicator/time-indicator.js";import{ScheduleContainer as g,LoadingContainer as $,HeaderContainer as k,BlankCell as y,BodyContainer as b,ServiceContainer as j,ServiceColumn as C,ArrowContainer as P,ArrowButton as x,ServiceHeaderContainer as S,Title as w,Description as L,SlotGrid as M,Timeline as W,SlotColumn as N,SlotCell as R,EmptySlot as z,SlotContent as A,SlotTime as D,SlotAvailability as I}from"./schedule-day-view.styles.js";const E=({serviceData:E,isMobile:O,onNextService:U,onPrevService:q,onEmptySlotClick:B,showPrevArrow:F,showNextArrow:G,minTime:H,maxTime:J,initialScrollTime:K,containerRef:Q,loading:V,emptySlotPopover:X,blockedMessage:Y="Unavailable"})=>{const Z=m(H,J),_=d(V,H,K),ee=o(null),re=l((()=>a.generateTimings(30,"24hr",H,J)),[H,J]),ie=(e,r,i)=>{if(null==r?void 0:r.customPopover)return r.customPopover;if(!((e,r)=>!!e.slots&&f(e.slots,r))(e,i)&&X){const r={startTime:i,endTime:c.addMinutesToTime(i,30),name:e.name};return X(r)}},te=(t,n)=>{const o=a.calculateDuration(t.startTime,t.endTime),l=p(t.startTime,n);return e(A,{$status:t.status,$duration:o,$offsetTop:l,onClick:e=>t.onClick&&t.onClick(t,e),children:o>=15&&r(i,{children:[r(D,{children:[a.parseInput(t.startTime,"12hr"),"–"," ",a.parseInput(t.endTime,"12hr")]}),e(I,{children:"blocked"===t.status?Y:`${t.booked} / ${t.capacity}`})]})})},ne=(r,i)=>{const t=((e,r)=>{if(!e.slots)return[];const i=a.timeToMinutes(r),t=h(i+30);return u(e.slots,r,t)})(r,i);return t.length>0?e(R,{$dashed:i.endsWith(":00"),children:t.map(((t,n)=>{const o=ie(r,t,i);return e(T,{containerRef:Q,customPopover:o,children:te(t,i)},`${t.id}-${n}`)}))},i):e(R,{$dashed:i.endsWith(":00"),onClick:()=>((e,r)=>{if(B){const i=c.addMinutesToTime(e,30);B({startTime:e,endTime:i,name:r})}})(i,r.name),children:e(T,{containerRef:Q,customPopover:ie(r,void 0,i),children:e(z,{})})},i)};return e(g,{children:V?e($,{children:e(s,{})}):r(i,{children:[r(k,{ref:ee,onScroll:e=>{ee.current&&_.current&&(_.current.scrollLeft=ee.current.scrollLeft)},$isMobile:O,children:[e(y,{}),e(j,{$columnCount:E.length,children:E.map((i=>r(C,{children:[O&&e(P,{children:F&&q&&e(x,{styleType:"light",sizeType:"small",onClick:q,"aria-label":"Previous service",children:e(t,{"aria-hidden":!0})})}),r(S,{children:[e(w,{children:i.name}),r(L,{children:[e("span",{children:i.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),O&&G&&U&&e(x,{styleType:"light",sizeType:"small",onClick:U,"aria-label":"Next service",children:e(n,{"aria-hidden":!0})})]},i.id)))})]}),r(b,{ref:_,onScroll:e=>{if(ee.current&&_.current){const e=17,r=_.current.scrollWidth-_.current.clientWidth-e,i=_.current.scrollLeft;i>r?(_.current.scrollLeft=r,ee.current.scrollLeft=r):ee.current.scrollLeft=i}},children:[e(v,{minTime:H,maxTime:J,format:"24hr",timelineOffset:Z}),r(M,{$columnCount:E.length,children:[null!==Z&&e(W,{$top:Z}),E.map((r=>e(N,{children:re.map((e=>ne(r,e)))},r.id)))]})]})]})})};export{E as ScheduleDayView};
+import{jsx as e,jsxs as t,Fragment as r}from"react/jsx-runtime";import{ChevronLeftIcon as i,ChevronRightIcon as s}from"@lifesg/react-icons";import o from"clsx";import{useRef as l,useMemo as n}from"react";import{ThemedLoadingSpinner as a}from"../../animations/themed-loading-spinner/themed-loading-spinner.js";import{Button as m}from"../../button/button.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 c}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{Typography as d}from"../../typography/index.js";import{DateHelper as p}from"../../util/date-helper.js";import{TimeHelper as h}from"../../util/time-helper.js";import{useTimelineOffset as u,useInitialScroll as f}from"../shared/hooks.js";import{minutesToTime as v,findSlotsStartingInTimeRange as N,calculateSlotOffset as T,isTimeCellCovered as j}from"../shared/utils.js";import{ScheduleSlotContent as y}from"../schedule-slot-content/schedule-slot-content.js";import{WithOptionalPopover as g}from"../shared/with-optional-popover.js";import{TimeIndicator as b}from"../time-indicator/time-indicator.js";import{tokens as k,scheduleContainer as x,loadingContainer as S,blankCell as M,headerContainer as $,headerContainerMobile as C,bodyContainer as P,serviceContainer as w,serviceColumn as L,arrowContainer as D,arrowButton as R,serviceHeaderContainer as W,title as q,description as z,slotGrid as A,timeline as B,slotColumn as I,emptySlot as E,slotCell as G,slotCellDashed as O,slotContentAvailable as U,slotContentBlocked as F,slotContent as H,slotTime as J,slotAvailability as K}from"./schedule-day-view.styles.js";const Q=({slot:i,timeSlotStart:s,blockedMessage:o})=>{const l=T(i.startTime,s),n=h.calculateDuration(i.startTime,i.endTime);return e(y,{slot:i,offsetTop:l,tokens:k.slotContent,classNames:{container:H,blocked:F,available:U},children:n>=15&&t(r,{children:[t("span",{className:J,children:[h.parseInput(i.startTime,"12hr"),"–"," ",h.parseInput(i.endTime,"12hr")]}),e("span",{className:K,children:"blocked"===i.status?o:`${i.booked} / ${i.capacity}`})]})})},V=({serviceData:T,isMobile:y,onNextService:U,onPrevService:F,onEmptySlotClick:H,showPrevArrow:J,showNextArrow:K,minTime:V,maxTime:X,initialScrollTime:Y,containerRef:Z,loading:_,emptySlotPopover:ee,blockedMessage:te="Unavailable"})=>{const re=u(V,X),ie=f(_,V,Y),se=l(null),oe=l(null),le=l(null),ne=l(null),ae=n((()=>h.generateTimings(30,"24hr",V,X)),[V,X]);c(oe,{[k.serviceContainer.columnCount]:`${T.length}`}),c(le,{[k.slotGrid.columnCount]:`${T.length}`}),c(ne,{[k.timeline.top]:null===re?null:`${re}px`});const me=(e,t,r)=>{if(null==t?void 0:t.customPopover)return t.customPopover;if(!((e,t)=>!!e.slots&&j(e.slots,t))(e,r)&&ee){const t={startTime:r,endTime:p.addMinutesToTime(r,30),name:e.name};return ee(t)}},ce=(t,r)=>e(Q,{slot:t,timeSlotStart:r,blockedMessage:te}),de=e=>o(G,e.endsWith(":00")&&O),pe=(t,r)=>e("div",{className:de(r),onClick:()=>((e,t)=>{if(H){const r=p.addMinutesToTime(e,30);H({startTime:e,endTime:r,name:t})}})(r,t.name),"data-testid":`empty-slot-${t.id}-${r}`,children:e(g,{containerRef:Z,customPopover:me(t,void 0,r),children:e("div",{className:E})})},r),he=(t,r)=>{const i=((e,t)=>{if(!e.slots)return[];const r=h.timeToMinutes(t),i=v(r+30);return N(e.slots,t,i)})(t,r);return i.length>0?((t,r,i)=>e("div",{className:de(r),children:i.map(((i,s)=>e(g,{containerRef:Z,customPopover:me(t,i,r),children:ce(i,r)},`${i.id}-${s}`)))},r))(t,r,i):pe(t,r)};return e("div",{className:x,children:_?e("div",{className:S,children:e(a,{"data-testid":"loading-spinner"})}):t(r,{children:[t("div",{ref:se,onScroll:e=>{se.current&&ie.current&&(ie.current.scrollLeft=se.current.scrollLeft)},className:o($,y&&C),children:[e("div",{className:M}),e("div",{ref:oe,className:w,children:T.map((r=>t("div",{className:L,children:[y&&e("div",{className:D,children:J&&F&&e(m,{className:R,styleType:"light",sizeType:"small",onClick:F,"aria-label":"Previous service",icon:e(i,{"aria-hidden":!0})})}),t("div",{className:W,children:[e(d.BodyMD,{className:q,children:r.name}),t(d.BodySM,{className:z,children:[e("span",{children:r.slots.filter((e=>"available"===e.status)).length})," ","available"]})]}),y&&K&&U&&e(m,{className:R,styleType:"light",sizeType:"small",onClick:U,"aria-label":"Next service",icon:e(s,{"aria-hidden":!0})})]},r.id)))})]}),t("div",{className:P,ref:ie,onScroll:e=>{if(se.current&&ie.current){const e=17,t=ie.current.scrollWidth-ie.current.clientWidth-e,r=ie.current.scrollLeft;r>t?(ie.current.scrollLeft=t,se.current.scrollLeft=t):se.current.scrollLeft=r}},children:[e(b,{minTime:V,maxTime:X,format:"24hr",timelineOffset:re}),t("div",{ref:le,className:A,children:[null!==re&&e("div",{ref:ne,className:B}),T.map((t=>e("div",{className:I,children:ae.map((e=>he(t,e)))},t.id)))]})]})]})})};export{V as ScheduleDayView};
 //# sourceMappingURL=schedule-day-view.js.map

package/schedule/schedule-day-view/schedule-day-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-day-view.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../shared\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport {\n    ArrowButton,\n    ArrowContainer,\n    BlankCell,\n    BodyContainer,\n    Description,\n    EmptySlot,\n    HeaderContainer,\n    LoadingContainer,\n    ScheduleContainer,\n    ServiceColumn,\n    ServiceContainer,\n    ServiceHeaderContainer,\n    SlotAvailability,\n    SlotCell,\n    SlotColumn,\n    SlotContent,\n    SlotGrid,\n    SlotTime,\n    Timeline,\n    Title,\n} from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <ServiceContainer $columnCount={serviceData.length}>\n                {serviceData.map((service) => (\n                    <ServiceColumn key={service.id}>\n                        {isMobile && (\n                            <ArrowContainer>\n                                {showPrevArrow && onPrevService && (\n                                    <ArrowButton\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                    >\n                                        <ChevronLeftIcon aria-hidden />\n                                    </ArrowButton>\n                                )}\n                            </ArrowContainer>\n                        )}\n                        <ServiceHeaderContainer>\n                            <Title>{service.name}</Title>\n                            <Description>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Description>\n                        </ServiceHeaderContainer>\n                        {isMobile && showNextArrow && onNextService && (\n                            <ArrowButton\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                            >\n                                <ChevronRightIcon aria-hidden />\n                            </ArrowButton>\n                        )}\n                    </ServiceColumn>\n                ))}\n            </ServiceContainer>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        const duration = TimeHelper.calculateDuration(\n            slot.startTime,\n            slot.endTime\n        );\n        const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n        return (\n            <SlotContent\n                $status={slot.status}\n                $duration={duration}\n                $offsetTop={offsetTop}\n                onClick={(e) => slot.onClick && slot.onClick(slot, e)}\n            >\n                {duration >= 15 && (\n                    <>\n                        <SlotTime>\n                            {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                            {\"\\u2013\"}{\" \"}\n                            {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                        </SlotTime>\n                        <SlotAvailability>\n                            {slot.status === \"blocked\"\n                                ? blockedMessage\n                                : `${slot.booked} / ${slot.capacity}`}\n                        </SlotAvailability>\n                    </>\n                )}\n            </SlotContent>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n        if (slots.length > 0) {\n            return (\n                <SlotCell key={time} $dashed={time.endsWith(\":00\")}>\n                    {slots.map((slot, index) => {\n                        const popoverConfig = getPopoverConfig(\n                            service,\n                            slot,\n                            time\n                        );\n                        return (\n                            <WithOptionalPopover\n                                key={`${slot.id}-${index}`}\n                                containerRef={containerRef}\n                                customPopover={popoverConfig}\n                            >\n                                {renderSlotContent(slot, time)}\n                            </WithOptionalPopover>\n                        );\n                    })}\n                </SlotCell>\n            );\n        } else {\n            return (\n                <SlotCell\n                    key={time}\n                    $dashed={time.endsWith(\":00\")}\n                    onClick={() => handleEmptySlotClick(time, service.name)}\n                >\n                    <WithOptionalPopover\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(\n                            service,\n                            undefined,\n                            time\n                        )}\n                    >\n                        <EmptySlot />\n                    </WithOptionalPopover>\n                </SlotCell>\n            );\n        }\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <SlotGrid $columnCount={serviceData.length}>\n                {timelineOffset !== null && <Timeline $top={timelineOffset} />}\n                {serviceData.map((service) => (\n                    <SlotColumn key={service.id}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </SlotColumn>\n                ))}\n            </SlotGrid>\n        );\n    };\n\n    return (\n        <ScheduleContainer>\n            {loading ? (\n                <LoadingContainer>\n                    <ThemedLoadingSpinner />\n                </LoadingContainer>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <HeaderContainer\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        $isMobile={isMobile}\n                    >\n                        <BlankCell />\n                        {renderHeader()}\n                    </HeaderContainer>\n\n                    <BodyContainer ref={bodyRef} onScroll={handleBodyScroll}>\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </BodyContainer>\n                </>\n            )}\n        </ScheduleContainer>\n    );\n};\n"],"names":["ScheduleDayView","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","blockedMessage","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","timeSlots","useMemo","TimeHelper","generateTimings","getPopoverConfig","service","slot","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","startTime","endTime","DateHelper","addMinutesToTime","name","renderSlotContent","timeSlotStart","duration","calculateDuration","offsetTop","calculateSlotOffset","_jsx","SlotContent","$status","status","$duration","onClick","e","children","_jsxs","_Fragment","SlotTime","parseInput","SlotAvailability","booked","capacity","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","length","SlotCell","$dashed","endsWith","map","index","popoverConfig","WithOptionalPopover","id","serviceName","endTimeString","handleEmptySlotClick","undefined","EmptySlot","ScheduleContainer","LoadingContainer","ThemedLoadingSpinner","HeaderContainer","ref","onScroll","_e","current","scrollLeft","$isMobile","BlankCell","ServiceContainer","$columnCount","ServiceColumn","ArrowContainer","ArrowButton","styleType","sizeType","ChevronLeftIcon","ServiceHeaderContainer","Title","Description","filter","cell","ChevronRightIcon","BodyContainer","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","SlotGrid","Timeline","$top","SlotColumn"],"mappings":"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"}
+{"version":3,"file":"schedule-day-view.js","sources":["../../../src/schedule/schedule-day-view/schedule-day-view.tsx"],"sourcesContent":["import { ChevronLeftIcon, ChevronRightIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { ThemedLoadingSpinner } from \"../../animations/themed-loading-spinner/themed-loading-spinner\";\nimport { Button } from \"../../button\";\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { DateHelper } from \"../../util/date-helper\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport {\n    calculateSlotOffset,\n    findSlotsStartingInTimeRange,\n    isTimeCellCovered,\n    minutesToTime,\n    ScheduleSlotContent,\n    useInitialScroll,\n    useTimelineOffset,\n} from \"../schedule-slot-content\";\nimport { WithOptionalPopover } from \"../shared/with-optional-popover\";\nimport { TimeIndicator } from \"../time-indicator/time-indicator\";\nimport type { ScheduleEntityProps, ScheduleSlotProps } from \"../types\";\nimport * as styles from \"./schedule-day-view.styles\";\nimport type { ScheduleDayViewProps } from \"./types\";\n\ninterface SlotContentItemProps {\n    slot: ScheduleSlotProps;\n    timeSlotStart: string;\n    blockedMessage: string;\n}\n\nconst SlotContentItem = ({\n    slot,\n    timeSlotStart,\n    blockedMessage,\n}: SlotContentItemProps) => {\n    const offsetTop = calculateSlotOffset(slot.startTime, timeSlotStart);\n    const duration = TimeHelper.calculateDuration(slot.startTime, slot.endTime);\n\n    return (\n        <ScheduleSlotContent\n            slot={slot}\n            offsetTop={offsetTop}\n            tokens={styles.tokens.slotContent}\n            classNames={{\n                container: styles.slotContent,\n                blocked: styles.slotContentBlocked,\n                available: styles.slotContentAvailable,\n            }}\n        >\n            {duration >= 15 && (\n                <>\n                    <span className={styles.slotTime}>\n                        {TimeHelper.parseInput(slot.startTime, \"12hr\")}\n                        {\"\\u2013\"} {TimeHelper.parseInput(slot.endTime, \"12hr\")}\n                    </span>\n                    <span className={styles.slotAvailability}>\n                        {slot.status === \"blocked\"\n                            ? blockedMessage\n                            : `${slot.booked} / ${slot.capacity}`}\n                    </span>\n                </>\n            )}\n        </ScheduleSlotContent>\n    );\n};\n\nexport const ScheduleDayView = ({\n    serviceData,\n    isMobile,\n    onNextService,\n    onPrevService,\n    onEmptySlotClick,\n    showPrevArrow,\n    showNextArrow,\n    minTime,\n    maxTime,\n    initialScrollTime,\n    containerRef,\n    loading,\n    emptySlotPopover,\n    blockedMessage = \"Unavailable\",\n}: ScheduleDayViewProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const timelineOffset = useTimelineOffset(minTime, maxTime);\n    const bodyRef = useInitialScroll(loading, minTime, initialScrollTime);\n    const headerRef = useRef<HTMLDivElement>(null);\n    const serviceContainerRef = useRef<HTMLDivElement>(null);\n    const slotGridRef = useRef<HTMLDivElement>(null);\n    const timelineRef = useRef<HTMLDivElement>(null);\n    const timeSlots = useMemo(\n        () => TimeHelper.generateTimings(30, \"24hr\", minTime, maxTime),\n        [minTime, maxTime]\n    );\n\n    useApplyStyle(serviceContainerRef, {\n        [styles.tokens.serviceContainer.columnCount]: `${serviceData.length}`,\n    });\n\n    useApplyStyle(slotGridRef, {\n        [styles.tokens.slotGrid.columnCount]: `${serviceData.length}`,\n    });\n\n    useApplyStyle(timelineRef, {\n        [styles.tokens.timeline.top]:\n            timelineOffset === null ? null : `${timelineOffset}px`,\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    // Handle empty slot click with slot details\n    const handleEmptySlotClick = (time: string, serviceName: string) => {\n        if (onEmptySlotClick) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            onEmptySlotClick({\n                startTime: time,\n                endTime: endTimeString,\n                name: serviceName,\n            });\n        }\n    };\n\n    // Synchronize horizontal scrolling between header and body\n    const handleBodyScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            // Set a fixed buffer (17px) to prevent over-scrolling and misalignment\n            const SCROLL_BUFFER = 17;\n            const maxScrollLeft =\n                bodyRef.current.scrollWidth -\n                bodyRef.current.clientWidth -\n                SCROLL_BUFFER;\n            const currentScrollLeft = bodyRef.current.scrollLeft;\n            if (currentScrollLeft > maxScrollLeft) {\n                bodyRef.current.scrollLeft = maxScrollLeft;\n                headerRef.current.scrollLeft = maxScrollLeft;\n            } else {\n                headerRef.current.scrollLeft = currentScrollLeft;\n            }\n        }\n    };\n    const handleHeaderScroll = (_e: React.UIEvent<HTMLDivElement>) => {\n        if (headerRef.current && bodyRef.current) {\n            bodyRef.current.scrollLeft = headerRef.current.scrollLeft;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    // Find all slots that should be displayed in a given time cell\n    const findSlotsForTimeCell = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): ScheduleSlotProps[] => {\n        if (!service.slots) return [];\n        const timeSlotMinutes = TimeHelper.timeToMinutes(timeSlot);\n        const nextTime = minutesToTime(timeSlotMinutes + 30);\n\n        const slots = findSlotsStartingInTimeRange(\n            service.slots,\n            timeSlot,\n            nextTime\n        );\n\n        return slots;\n    };\n\n    // Check if a time slot is covered by any existing booking\n    const isServiceTimeSlotCovered = (\n        service: ScheduleEntityProps,\n        timeSlot: string\n    ): boolean => {\n        return service.slots\n            ? isTimeCellCovered(service.slots, timeSlot)\n            : false;\n    };\n\n    const getPopoverConfig = (\n        service: ScheduleEntityProps,\n        slot: ScheduleSlotProps | undefined,\n        time: string\n    ) => {\n        if (slot?.customPopover) {\n            return slot.customPopover;\n        }\n        if (!isServiceTimeSlotCovered(service, time) && emptySlotPopover) {\n            const endTimeString = DateHelper.addMinutesToTime(time, 30);\n            const emptySlotData = {\n                startTime: time,\n                endTime: endTimeString,\n                name: service.name,\n            };\n            return emptySlotPopover(emptySlotData);\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderHeader = () => {\n        return (\n            <div ref={serviceContainerRef} className={styles.serviceContainer}>\n                {serviceData.map((service) => (\n                    <div key={service.id} className={styles.serviceColumn}>\n                        {isMobile && (\n                            <div className={styles.arrowContainer}>\n                                {showPrevArrow && onPrevService && (\n                                    <Button\n                                        className={styles.arrowButton}\n                                        styleType=\"light\"\n                                        sizeType=\"small\"\n                                        onClick={onPrevService}\n                                        aria-label=\"Previous service\"\n                                        icon={<ChevronLeftIcon aria-hidden />}\n                                    />\n                                )}\n                            </div>\n                        )}\n                        <div className={styles.serviceHeaderContainer}>\n                            <Typography.BodyMD className={styles.title}>\n                                {service.name}\n                            </Typography.BodyMD>\n                            <Typography.BodySM className={styles.description}>\n                                <span>\n                                    {\n                                        service.slots.filter(\n                                            (cell) =>\n                                                cell.status === \"available\"\n                                        ).length\n                                    }\n                                </span>{\" \"}\n                                available\n                            </Typography.BodySM>\n                        </div>\n                        {isMobile && showNextArrow && onNextService && (\n                            <Button\n                                className={styles.arrowButton}\n                                styleType=\"light\"\n                                sizeType=\"small\"\n                                onClick={onNextService}\n                                aria-label=\"Next service\"\n                                icon={<ChevronRightIcon aria-hidden />}\n                            />\n                        )}\n                    </div>\n                ))}\n            </div>\n        );\n    };\n\n    const renderSlotContent = (\n        slot: ScheduleSlotProps,\n        timeSlotStart: string\n    ) => {\n        return (\n            <SlotContentItem\n                slot={slot}\n                timeSlotStart={timeSlotStart}\n                blockedMessage={blockedMessage}\n            />\n        );\n    };\n\n    const getSlotCellClassName = (time: string) =>\n        clsx(styles.slotCell, time.endsWith(\":00\") && styles.slotCellDashed);\n\n    const renderFilledSlotCell = (\n        service: ScheduleEntityProps,\n        time: string,\n        slots: ScheduleSlotProps[]\n    ) => {\n        return (\n            <div key={time} className={getSlotCellClassName(time)}>\n                {slots.map((slot, index) => (\n                    <WithOptionalPopover\n                        key={`${slot.id}-${index}`}\n                        containerRef={containerRef}\n                        customPopover={getPopoverConfig(service, slot, time)}\n                    >\n                        {renderSlotContent(slot, time)}\n                    </WithOptionalPopover>\n                ))}\n            </div>\n        );\n    };\n\n    const renderEmptySlotCell = (\n        service: ScheduleEntityProps,\n        time: string\n    ) => {\n        return (\n            <div\n                key={time}\n                className={getSlotCellClassName(time)}\n                onClick={() => handleEmptySlotClick(time, service.name)}\n                data-testid={`empty-slot-${service.id}-${time}`}\n            >\n                <WithOptionalPopover\n                    containerRef={containerRef}\n                    customPopover={getPopoverConfig(service, undefined, time)}\n                >\n                    <div className={styles.emptySlot} />\n                </WithOptionalPopover>\n            </div>\n        );\n    };\n\n    const renderSlotCell = (service: ScheduleEntityProps, time: string) => {\n        const slots = findSlotsForTimeCell(service, time);\n\n        return slots.length > 0\n            ? renderFilledSlotCell(service, time, slots)\n            : renderEmptySlotCell(service, time);\n    };\n\n    const renderTimeSlotGrid = () => {\n        return (\n            <div ref={slotGridRef} className={styles.slotGrid}>\n                {timelineOffset !== null && (\n                    <div ref={timelineRef} className={styles.timeline} />\n                )}\n                {serviceData.map((service) => (\n                    <div key={service.id} className={styles.slotColumn}>\n                        {timeSlots.map((time) => renderSlotCell(service, time))}\n                    </div>\n                ))}\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.scheduleContainer}>\n            {loading ? (\n                <div className={styles.loadingContainer}>\n                    <ThemedLoadingSpinner data-testid=\"loading-spinner\" />\n                </div>\n            ) : (\n                <>\n                    {/* Service Name Header Row */}\n                    <div\n                        ref={headerRef}\n                        onScroll={handleHeaderScroll}\n                        className={clsx(\n                            styles.headerContainer,\n                            isMobile && styles.headerContainerMobile\n                        )}\n                    >\n                        <div className={styles.blankCell} />\n                        {renderHeader()}\n                    </div>\n\n                    <div\n                        className={styles.bodyContainer}\n                        ref={bodyRef}\n                        onScroll={handleBodyScroll}\n                    >\n                        {/* Time labels */}\n                        <TimeIndicator\n                            minTime={minTime}\n                            maxTime={maxTime}\n                            format=\"24hr\"\n                            timelineOffset={timelineOffset}\n                        />\n                        {/* Time slot grid */}\n                        {renderTimeSlotGrid()}\n                    </div>\n                </>\n            )}\n        </div>\n    );\n};\n"],"names":["SlotContentItem","slot","timeSlotStart","blockedMessage","offsetTop","calculateSlotOffset","startTime","duration","TimeHelper","calculateDuration","endTime","_jsx","ScheduleSlotContent","tokens","styles.tokens","slotContent","classNames","container","styles.slotContent","blocked","styles.slotContentBlocked","available","styles.slotContentAvailable","children","_jsxs","_Fragment","className","styles.slotTime","parseInput","styles.slotAvailability","status","booked","capacity","ScheduleDayView","serviceData","isMobile","onNextService","onPrevService","onEmptySlotClick","showPrevArrow","showNextArrow","minTime","maxTime","initialScrollTime","containerRef","loading","emptySlotPopover","timelineOffset","useTimelineOffset","bodyRef","useInitialScroll","headerRef","useRef","serviceContainerRef","slotGridRef","timelineRef","timeSlots","useMemo","generateTimings","useApplyStyle","serviceContainer","columnCount","length","slotGrid","timeline","top","getPopoverConfig","service","time","customPopover","timeSlot","slots","isTimeCellCovered","isServiceTimeSlotCovered","emptySlotData","DateHelper","addMinutesToTime","name","renderSlotContent","getSlotCellClassName","clsx","styles.slotCell","endsWith","styles.slotCellDashed","renderEmptySlotCell","onClick","serviceName","endTimeString","handleEmptySlotClick","id","WithOptionalPopover","undefined","styles.emptySlot","renderSlotCell","timeSlotMinutes","timeToMinutes","nextTime","minutesToTime","findSlotsStartingInTimeRange","findSlotsForTimeCell","map","index","renderFilledSlotCell","styles.scheduleContainer","styles.loadingContainer","ThemedLoadingSpinner","ref","onScroll","_e","current","scrollLeft","styles.headerContainer","styles.headerContainerMobile","styles.blankCell","styles.serviceContainer","styles.serviceColumn","styles.arrowContainer","Button","styles.arrowButton","styleType","sizeType","icon","ChevronLeftIcon","styles.serviceHeaderContainer","Typography","BodyMD","styles.title","BodySM","styles.description","filter","cell","ChevronRightIcon","styles.bodyContainer","SCROLL_BUFFER","maxScrollLeft","scrollWidth","clientWidth","currentScrollLeft","TimeIndicator","format","styles.slotGrid","styles.timeline","styles.slotColumn"],"mappings":"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"}

package/schedule/schedule-day-view/schedule-day-view.styles.d.ts

@@ -1,47 +1,39 @@
-interface HeaderContainerStyleProps {
-    $isMobile: boolean;
-}
-interface ServiceContainerStyleProps {
-    $columnCount: number;
-}
-interface SlotGridStyleProps {
-    $columnCount: number;
-}
-interface SlotCellStyleProps {
-    $dashed?: boolean;
-}
-interface SlotContentStyleProps {
-    $status?: string;
-    $duration?: number;
-    $offsetTop?: number;
-}
-interface TimelineStyleProps {
-    $top: number;
-}
-export declare const ArrowButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ArrowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ScheduleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HeaderContainerStyleProps>> & string;
-export declare const BlankCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ServiceContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ServiceContainerStyleProps>> & string;
-export declare const ServiceColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ServiceHeaderContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const BodyContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SlotGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SlotGridStyleProps>> & string;
-export declare const SlotColumn: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SlotCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SlotCellStyleProps>> & string;
-export declare const SlotContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, SlotContentStyleProps>> & string;
-export declare const SlotTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const SlotAvailability: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const Timeline: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TimelineStyleProps>> & string;
-export declare const EmptySlot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const tokens: {
+    serviceContainer: {
+        columnCount: string;
+    };
+    slotGrid: {
+        columnCount: string;
+    };
+    slotContent: {
+        offsetTop: string;
+        height: string;
+    };
+    timeline: {
+        top: string;
+    };
+};
+export declare const arrowButton: import("@linaria/core").LinariaClassName;
+export declare const arrowContainer: import("@linaria/core").LinariaClassName;
+export declare const scheduleContainer: import("@linaria/core").LinariaClassName;
+export declare const loadingContainer: import("@linaria/core").LinariaClassName;
+export declare const headerContainer: import("@linaria/core").LinariaClassName;
+export declare const headerContainerMobile: import("@linaria/core").LinariaClassName;
+export declare const blankCell: import("@linaria/core").LinariaClassName;
+export declare const serviceContainer: import("@linaria/core").LinariaClassName;
+export declare const serviceColumn: import("@linaria/core").LinariaClassName;
+export declare const serviceHeaderContainer: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const bodyContainer: import("@linaria/core").LinariaClassName;
+export declare const slotGrid: import("@linaria/core").LinariaClassName;
+export declare const slotColumn: import("@linaria/core").LinariaClassName;
+export declare const slotCell: import("@linaria/core").LinariaClassName;
+export declare const slotCellDashed: import("@linaria/core").LinariaClassName;
+export declare const slotContent: import("@linaria/core").LinariaClassName;
+export declare const slotContentBlocked: import("@linaria/core").LinariaClassName;
+export declare const slotContentAvailable: import("@linaria/core").LinariaClassName;
+export declare const slotTime: import("@linaria/core").LinariaClassName;
+export declare const slotAvailability: import("@linaria/core").LinariaClassName;
+export declare const timeline: import("@linaria/core").LinariaClassName;
+export declare const emptySlot: import("@linaria/core").LinariaClassName;