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

package/time-slot-bar/time-slot-bar.styles.js

@@ -1,108 +1,2 @@
-import{ChevronLeftIcon as e}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as i}from"@lifesg/react-icons/chevron-right";import t,{css as o}from"styled-components";import{ClickableIcon as r}from"../shared/clickable-icon/clickable-icon.js";import{Typography as n}from"../typography/index.js";import{V3_Colour as l,V3_Shadow as a,V3_Border as s}from"../v3_theme/index.js";const d=1.25,p=e=>"minified"===e?12:40,$=e=>"minified"===e?12:40,g=t.div`
-    position: relative;
-    display: flex;
-    align-items: center;
-`,c=t(r)`
-    z-index: 2;
-    position: absolute;
-    bottom: ${({$variant:e})=>"default"===e?"0.25rem":"0rem"};
-    background-color: ${l.bg};
-    box-shadow: ${a["md-strong"]};
-    border-radius: 100%;
-    padding: 0.5rem;
-    width: 2rem;
-    height: 2rem;
-
-    ${e=>"right"===e.$direction?o`
-                  right: 0;
-              `:o`
-                  left: 0;
-              `}
-
-    > div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    &:focus {
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    }
-`,h=t(i)`
-    width: 1rem;
-    height: 1rem;
-    color: ${l["icon-primary"]};
-`,m=t(e)`
-    font-size: 1rem;
-    color: ${l["icon-primary"]};
-`,b=t.div`
-    overflow: hidden;
-    flex-grow: 1;
-    position: relative;
-    height: ${({$variant:e})=>`${20+$(e)}px`};
-`,f=t.div`
-    position: relative;
-    white-space: nowrap;
-    height: ${d}rem;
-`,x=t.div`
-    display: flex;
-    white-space: nowrap;
-`,v=t.div`
-    display: inline-block;
-    width: ${({$variant:e})=>`${p(e)}px`};
-    position: relative;
-    border-left: ${s["width-010"]} ${s.solid}
-        ${l["border-stronger"]};
-    ${e=>{let i=0;switch(e.$variant){case"default":i=e.$isLongMarker?d:.625;break;case"minified":i=e.$isLongMarker?d:0;break;default:i=0}return o`
-            height: ${i}rem;
-        `}}
-`,w=t(n.BodyXS)`
-    color: ${l["text-subtle"]};
-    position: absolute;
-    bottom: 10%;
-    left: 10%;
-`,u=t.div`
-    ${e=>"vertical"===e.$type?o`
-                display: flex;
-                flex-grow: 1;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                margin: 1px 0px;
-            `:o`
-                position: absolute;
-                height: ${$(e.$variant)}px;
-                width: ${e.$width}px;
-                left: ${e.$left}px;
-            `}
-    background-color: ${({$bgColor:e})=>e};
-    cursor: ${({$clickable:e})=>e?"pointer":"default"};
-
-    ${e=>"stripes"===e.$styleType&&o`
-            background: repeating-linear-gradient(
-                135deg,
-                ${e.$bgColor2||l["bg-strongest"]} 0px,
-                ${e.$bgColor2||l["bg-strongest"]} 10px,
-                ${e.$bgColor||l["bg-stronger"]} 10px,
-                ${e.$bgColor||l["bg-stronger"]} 20px
-            );
-        `}
-`,y=t.div`
-    position: absolute;
-    top: ${d}rem;
-    height: ${({$variant:e})=>`${$(e)}px`};
-    z-index: 1;
-    border-right: ${s["width-010"]} ${s.solid}
-        ${l["border-stronger"]};
-`,k=t(n.BodyXS)`
-    color: ${e=>e.$color||l.text(e)};
-    position: absolute;
-    bottom: 0;
-    padding-left: 4px;
-    padding-bottom: 4px;
-    width: 100%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-`;export{c as ArrowButton,m as ArrowIconLeft,h as ArrowIconRight,k as CellText,g as Container,w as TimeLabel,v as TimeMarker,f as TimeMarkerWrapper,u as TimeSlot,b as TimeSlotBarContainer,y as TimeSlotBorder,x as TimeSlotWrapper,$ as getCellHeight,p as getCellWidth};
+import"./time-slot-bar.styles_wigbyd.css";const t=40,e=12,a={item:{width:"--fds-internal-timeSlotBar-item-width",left:"--fds-internal-timeSlotBar-item-left",color:"--fds-internal-timeSlotBar-item-color"},border:{left:"--fds-internal-timeSlotBar-border-left"}},i="cleto2",l="a18tsztd",r="a9mraed",o="aljok3x",c="av3ykv8",d="as5dred",m="a195ar7o",s="t1dmizys",n="c1w55l7b",f="cqcczbk",y="t10z816e",b="t1ukhl9h",h="t1iag8mt",k="t1iopuc",p="tbp961o",v="t7d7vtm",w="te99x8g",x="t1e383ch",z="tyac3mh",g="twiecck",B="c1yanpy9",S="tfycdxa",_="t11y98ca",u="t1kzvg2s",A="t4axcvt";export{t as DEFAULT_CELL_SIZE,e as MINIFIED_CELL_SIZE,l as arrowButton,r as arrowButtonDefault,c as arrowButtonLeft,o as arrowButtonMinified,d as arrowButtonRight,m as arrowIcon,B as cellText,i as container,n as containerDefault,f as containerMinified,w as timeLabel,h as timeMarker,k as timeMarkerDefault,v as timeMarkerLong,p as timeMarkerMinified,y as timeMarkerWrapper,s as timeSlotBarContainer,x as timeSlotBorder,z as timeSlotBorderDefault,g as timeSlotBorderMinified,S as timeSlotItem,_ as timeSlotItemContent,u as timeSlotItemDefault,A as timeSlotItemMinified,b as timeSlotWrapper,a as tokens};
 //# sourceMappingURL=time-slot-bar.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"time-slot-bar.styles.js","sources":["../../src/time-slot-bar/time-slot-bar.styles.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour, V3_Shadow } from \"../v3_theme\";\nimport type { V3_ThemeStyleProps } from \"../v3_theme/types\";\nimport type { Direction, SlotStyle, TimeSlotBarVariant } from \"./types\";\n\nconst MAX_LINE_HEIGHT = 1.25; // NOTE in rem\n\n// =============================================================================\n// STYLING HELPERS\n// =============================================================================\n\n// Function to get the width of a cell in px\nexport const getCellWidth = (variant: TimeSlotBarVariant) => {\n    if (variant === \"minified\") {\n        return 12;\n    } else {\n        return 40;\n    }\n};\n\n// Function to get the height of a cell in px\nexport const getCellHeight = (variant: TimeSlotBarVariant) => {\n    if (variant === \"minified\") {\n        return 12;\n    } else {\n        return 40;\n    }\n};\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\n\ninterface ArrowStyleProps {\n    $direction?: Direction;\n    $variant: TimeSlotBarVariant;\n}\n\nexport interface TimeSlotStyleProps {\n    $type?: \"default\" | \"vertical\";\n    $variant: TimeSlotBarVariant;\n    $width?: number;\n    $left?: number;\n    $styleType: SlotStyle;\n    $bgColor: string | ((props: V3_ThemeStyleProps) => string);\n    $bgColor2?: string | ((props: V3_ThemeStyleProps) => string);\n    $clickable?: boolean;\n}\n\ninterface CellTextStyleProps {\n    $slotWidth: number;\n    $color?: string;\n}\n\ninterface TimeMarkerStyleProps {\n    $isLongMarker: boolean;\n    $variant: TimeSlotBarVariant;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div`\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\nexport const ArrowButton = styled(ClickableIcon)<ArrowStyleProps>`\n    z-index: 2;\n    position: absolute;\n    bottom: ${({ $variant }) => ($variant === \"default\" ? \"0.25rem\" : \"0rem\")};\n    background-color: ${V3_Colour.bg};\n    box-shadow: ${V3_Shadow[\"md-strong\"]};\n    border-radius: 100%;\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n\n    ${(props) =>\n        props.$direction === \"right\"\n            ? css`\n                  right: 0;\n              `\n            : css`\n                  left: 0;\n              `}\n\n    > div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &:focus {\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n`;\n\nexport const ArrowIconRight = styled(ChevronRightIcon)`\n    width: 1rem;\n    height: 1rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const ArrowIconLeft = styled(ChevronLeftIcon)`\n    font-size: 1rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const TimeSlotBarContainer = styled.div<{\n    $variant: TimeSlotBarVariant;\n}>`\n    overflow: hidden;\n    flex-grow: 1;\n    position: relative;\n    height: ${({ $variant }) =>\n        `${MAX_LINE_HEIGHT * 16 + getCellHeight($variant)}px`};\n`;\n\nexport const TimeMarkerWrapper = styled.div`\n    position: relative;\n    white-space: nowrap;\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const TimeSlotWrapper = styled.div`\n    display: flex;\n    white-space: nowrap;\n`;\n\nexport const TimeMarker = styled.div<TimeMarkerStyleProps>`\n    display: inline-block;\n    width: ${({ $variant }) => `${getCellWidth($variant)}px`};\n    position: relative;\n    border-left: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border-stronger\"]};\n    ${(props) => {\n        let markerHeight = 0;\n\n        switch (props.$variant) {\n            case \"default\":\n                markerHeight = props.$isLongMarker ? MAX_LINE_HEIGHT : 0.625;\n                break;\n            case \"minified\":\n                markerHeight = props.$isLongMarker ? MAX_LINE_HEIGHT : 0;\n                break;\n            default:\n                markerHeight = 0;\n                break;\n        }\n\n        return css`\n            height: ${markerHeight}rem;\n        `;\n    }}\n`;\n\nexport const TimeLabel = styled(Typography.BodyXS)`\n    color: ${V3_Colour[\"text-subtle\"]};\n    position: absolute;\n    bottom: 10%;\n    left: 10%;\n`;\n\nexport const TimeSlot = styled.div<TimeSlotStyleProps>`\n    ${(props) => {\n        if (props.$type === \"vertical\") {\n            return css`\n                display: flex;\n                flex-grow: 1;\n                align-items: center;\n                justify-content: center;\n                width: 100%;\n                margin: 1px 0px;\n            `;\n        } else {\n            return css`\n                position: absolute;\n                height: ${getCellHeight(props.$variant)}px;\n                width: ${props.$width}px;\n                left: ${props.$left}px;\n            `;\n        }\n    }}\n    background-color: ${({ $bgColor }) => $bgColor};\n    cursor: ${({ $clickable }) => ($clickable ? \"pointer\" : \"default\")};\n\n    ${(props) =>\n        props.$styleType === \"stripes\" &&\n        css`\n            background: repeating-linear-gradient(\n                135deg,\n                ${props.$bgColor2 || V3_Colour[\"bg-strongest\"]} 0px,\n                ${props.$bgColor2 || V3_Colour[\"bg-strongest\"]} 10px,\n                ${props.$bgColor || V3_Colour[\"bg-stronger\"]} 10px,\n                ${props.$bgColor || V3_Colour[\"bg-stronger\"]} 20px\n            );\n        `}\n`;\n\nexport const TimeSlotBorder = styled.div<{ $variant: TimeSlotBarVariant }>`\n    position: absolute;\n    top: ${MAX_LINE_HEIGHT}rem;\n    height: ${({ $variant }) => `${getCellHeight($variant)}px`};\n    z-index: 1;\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border-stronger\"]};\n`;\n\nexport const CellText = styled(Typography.BodyXS)<CellTextStyleProps>`\n    color: ${(props) => props.$color || V3_Colour.text(props)};\n    position: absolute;\n    bottom: 0;\n    padding-left: 4px;\n    padding-bottom: 4px;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n`;\n"],"names":["MAX_LINE_HEIGHT","getCellWidth","variant","getCellHeight","Container","styled","div","ArrowButton","ClickableIcon","$variant","V3_Colour","bg","V3_Shadow","props","$direction","css","ArrowIconRight","ChevronRightIcon","ArrowIconLeft","ChevronLeftIcon","TimeSlotBarContainer","TimeMarkerWrapper","TimeSlotWrapper","TimeMarker","V3_Border","solid","markerHeight","$isLongMarker","TimeLabel","Typography","BodyXS","TimeSlot","$type","$width","$left","$bgColor","$clickable","$styleType","$bgColor2","TimeSlotBorder","CellText","$color","text"],"mappings":"iYAUA,MAAMA,EAAkB,KAOXC,EAAgBC,GACT,aAAZA,EACO,GAEA,GAKFC,EAAiBD,GACV,aAAZA,EACO,GAEA,GAsCFE,EAAYC,EAAOC,GAAG;;;;EAMtBC,EAAcF,EAAOG,EAA+B;;;cAGnD,EAAGC,cAA6B,YAAbA,EAAyB,UAAY;wBAC9CC,EAAUC;kBAChBC,EAAU;;;;;;MAMrBC,GACsB,UAArBA,EAAMC,WACAC,CAAG;;gBAGHA,CAAG;;;;;;;;;;;;;EAeJC,EAAiBX,EAAOY,EAAiB;;;aAGzCP,EAAU;EAGVQ,EAAgBb,EAAOc,EAAgB;;aAEvCT,EAAU;EAGVU,EAAuBf,EAAOC,GAEzC;;;;cAIY,EAAGG,cACT,GAAGT,GAAuBG,EAAcM;EAGnCY,EAAoBhB,EAAOC,GAAG;;;cAG7BN;EAGDsB,EAAkBjB,EAAOC,GAAG;;;EAK5BiB,EAAalB,EAAOC,GAAyB;;aAE7C,EAAGG,cAAe,GAAGR,EAAaQ;;mBAE5Be,EAAU,gBAAgBA,EAAUC;UAC7Cf,EAAU;MACbG,IACC,IAAIa,EAAe,EAEnB,OAAQb,EAAMJ,UACV,IAAK,UACDiB,EAAeb,EAAMc,cAAgB3B,EAAkB,KACvD,MACJ,IAAK,WACD0B,EAAeb,EAAMc,cAAgB3B,EAAkB,EACvD,MACJ,QACI0B,EAAe,EAIvB,OAAOX,CAAG;sBACIW;SACb;EAIIE,EAAYvB,EAAOwB,EAAWC,OAAO;aACrCpB,EAAU;;;;EAMVqB,EAAW1B,EAAOC,GAAuB;MAC/CO,GACqB,aAAhBA,EAAMmB,MACCjB,CAAG;;;;;;;cASHA,CAAG;;0BAEIZ,EAAcU,EAAMJ;yBACrBI,EAAMoB;wBACPpB,EAAMqB;;wBAIN,EAAGC,cAAeA;cAC5B,EAAGC,gBAAkBA,EAAa,UAAY;;MAErDvB,GACsB,YAArBA,EAAMwB,YACNtB,CAAG;;;kBAGOF,EAAMyB,WAAa5B,EAAU;kBAC7BG,EAAMyB,WAAa5B,EAAU;kBAC7BG,EAAMsB,UAAYzB,EAAU;kBAC5BG,EAAMsB,UAAYzB,EAAU;;;EAKjC6B,EAAiBlC,EAAOC,GAAqC;;WAE/DN;cACG,EAAGS,cAAe,GAAGN,EAAcM;;oBAE7Be,EAAU,gBAAgBA,EAAUC;UAC9Cf,EAAU;EAGP8B,EAAWnC,EAAOwB,EAAWC,OAA2B;aACvDjB,GAAUA,EAAM4B,QAAU/B,EAAUgC,KAAK7B;;;;;;;;;"}
+{"version":3,"file":"time-slot-bar.styles.js","sources":["../../src/time-slot-bar/time-slot-bar.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Shadow } from \"../theme\";\n\nconst MAX_LINE_HEIGHT = 1.25; // NOTE in rem\nexport const DEFAULT_CELL_SIZE = 40;\nexport const MINIFIED_CELL_SIZE = 12;\n\nexport const tokens = {\n    item: {\n        width: \"--fds-internal-timeSlotBar-item-width\",\n        left: \"--fds-internal-timeSlotBar-item-left\",\n        color: \"--fds-internal-timeSlotBar-item-color\",\n    },\n    border: {\n        left: \"--fds-internal-timeSlotBar-border-left\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n`;\n\nexport const arrowButton = css`\n    z-index: 2;\n    position: absolute;\n    bottom: 0rem;\n    background-color: ${Colour.bg};\n    box-shadow: ${Shadow[\"md-strong\"]};\n    border-radius: 100%;\n    padding: 0.5rem;\n    width: 2rem;\n    height: 2rem;\n\n    > div {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    &:focus {\n        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n    }\n`;\n\nexport const arrowButtonDefault = css`\n    bottom: 0.25rem;\n`;\n\nexport const arrowButtonMinified = css`\n    bottom: 0rem;\n`;\n\nexport const arrowButtonLeft = css`\n    left: 0;\n`;\n\nexport const arrowButtonRight = css`\n    right: 0;\n`;\n\nexport const arrowIcon = css`\n    width: 1rem;\n    height: 1rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const timeSlotBarContainer = css`\n    overflow: hidden;\n    flex-grow: 1;\n    position: relative;\n`;\n\nexport const containerDefault = css`\n    height: ${MAX_LINE_HEIGHT * 16 + DEFAULT_CELL_SIZE}px;\n`;\n\nexport const containerMinified = css`\n    height: ${MAX_LINE_HEIGHT * 16 + MINIFIED_CELL_SIZE}px;\n`;\n\nexport const timeMarkerWrapper = css`\n    position: relative;\n    white-space: nowrap;\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const timeSlotWrapper = css`\n    display: flex;\n    white-space: nowrap;\n`;\n\nexport const timeMarker = css`\n    display: inline-block;\n    position: relative;\n    border-left: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const timeMarkerDefault = css`\n    width: ${DEFAULT_CELL_SIZE}px;\n    height: 0.625rem;\n`;\n\nexport const timeMarkerMinified = css`\n    width: ${MINIFIED_CELL_SIZE}px;\n    height: 0rem;\n`;\n\nexport const timeMarkerLong = css`\n    height: ${MAX_LINE_HEIGHT}rem;\n`;\n\nexport const timeLabel = css`\n    color: ${Colour[\"text-subtle\"]};\n    position: absolute;\n    bottom: 10%;\n    left: 10%;\n`;\n\nexport const timeSlotBorder = css`\n    /* reset variable to prevent leaking to child components */\n    ${tokens.border.left}: initial;\n\n    position: absolute;\n    top: ${MAX_LINE_HEIGHT}rem;\n    z-index: 1;\n    left: var(${tokens.border.left});\n    border-right: ${Border[\"width-010\"]} ${Border.solid}\n        ${Colour[\"border-stronger\"]};\n`;\n\nexport const timeSlotBorderDefault = css`\n    height: ${DEFAULT_CELL_SIZE}px;\n`;\n\nexport const timeSlotBorderMinified = css`\n    height: ${MINIFIED_CELL_SIZE}px;\n`;\n\nexport const cellText = css`\n    position: absolute;\n    bottom: 0;\n    padding-left: 4px;\n    padding-bottom: 4px;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: inherit;\n`;\n\nexport const timeSlotItem = css`\n    /* reset variables to prevent leaking to child components */\n    ${tokens.item.left}: initial;\n    ${tokens.item.width}: initial;\n    ${tokens.item.color}: initial;\n\n    position: absolute;\n    color: var(${tokens.item.color});\n    left: var(${tokens.item.left});\n    width: var(${tokens.item.width});\n`;\n\nexport const timeSlotItemContent = css`\n    width: 100%;\n    height: 100%;\n`;\n\nexport const timeSlotItemDefault = css`\n    height: ${DEFAULT_CELL_SIZE}px;\n`;\n\nexport const timeSlotItemMinified = css`\n    height: ${MINIFIED_CELL_SIZE}px;\n`;\n"],"names":["DEFAULT_CELL_SIZE","MINIFIED_CELL_SIZE","tokens","item","width","left","color","border","container","arrowButton","arrowButtonDefault","arrowButtonMinified","arrowButtonLeft","arrowButtonRight","arrowIcon","timeSlotBarContainer","containerDefault","containerMinified","timeMarkerWrapper","timeSlotWrapper","timeMarker","timeMarkerDefault","timeMarkerMinified","timeMarkerLong","timeLabel","timeSlotBorder","timeSlotBorderDefault","timeSlotBorderMinified","cellText","timeSlotItem","timeSlotItemContent","timeSlotItemDefault","timeSlotItemMinified"],"mappings":"uEAKO,MAAMA,EAAoB,GACpBC,EAAqB,GAErBC,EAAS,CAClBC,KAAM,CACFC,MAAO,wCACPC,KAAM,uCACNC,MAAO,yCAEXC,OAAQ,CACJF,KAAM,2CAIDG,EAAS,SAMTC,EAAW,WAsBXC,EAAkB,UAIlBC,EAAmB,UAInBC,EAAe,UAIfC,EAAgB,UAIhBC,EAAS,WAMTC,EAAoB,WAMpBC,EAAgB,WAIhBC,EAAiB,UAIjBC,EAAiB,WAMjBC,EAAe,WAKfC,EAAU,WAOVC,EAAiB,UAKjBC,EAAkB,UAKlBC,EAAc,UAIdC,EAAS,UAOTC,EAAc,WAYdC,EAAqB,UAIrBC,EAAsB,UAItBC,EAAQ,WAYRC,EAAY,UAYZC,EAAmB,WAKnBC,EAAmB,WAInBC,EAAoB"}

package/time-slot-bar/time-slot-bar.styles_wigbyd.css

@@ -0,0 +1,25 @@
+@layer fds{.cleto2{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.a18tsztd{z-index:2;position:absolute;bottom:0rem;background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-strong);border-radius:100%;padding:0.5rem;width:2rem;height:2rem;}.a18tsztd >div{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}.a18tsztd:focus{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);}
+.a9mraed{bottom:0.25rem;}
+.aljok3x{bottom:0rem;}
+.av3ykv8{left:0;}
+.as5dred{right:0;}
+.a195ar7o{width:1rem;height:1rem;color:var(--fds-colour-icon-primary);}
+.t1dmizys{overflow:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;position:relative;}
+.c1w55l7b{height:60px;}
+.cqcczbk{height:32px;}
+.t10z816e{position:relative;white-space:nowrap;height:1.25rem;}
+.t1ukhl9h{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;white-space:nowrap;}
+.t1iag8mt{display:inline-block;position:relative;border-left:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-stronger);}
+.t1iopuc{width:40px;height:0.625rem;}
+.tbp961o{width:12px;height:0rem;}
+.t7d7vtm{height:1.25rem;}
+.te99x8g{color:var(--fds-colour-text-subtle);position:absolute;bottom:10%;left:10%;}
+.t1e383ch{--fds-internal-timeSlotBar-border-left:initial;position:absolute;top:1.25rem;z-index:1;left:var(--fds-internal-timeSlotBar-border-left);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-stronger);}
+.tyac3mh{height:40px;}
+.twiecck{height:12px;}
+.c1yanpy9{position:absolute;bottom:0;padding-left:4px;padding-bottom:4px;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit;}
+.tfycdxa{--fds-internal-timeSlotBar-item-left:initial;--fds-internal-timeSlotBar-item-width:initial;--fds-internal-timeSlotBar-item-color:initial;position:absolute;color:var(--fds-internal-timeSlotBar-item-color);left:var(--fds-internal-timeSlotBar-item-left);width:var(--fds-internal-timeSlotBar-item-width);}
+.t11y98ca{width:100%;height:100%;}
+.t1kzvg2s{height:40px;}
+.t4axcvt{height:12px;}}

package/time-slot-bar/time-slot-divider.d.ts

@@ -0,0 +1,8 @@
+import type { TimeSlotBarVariant } from "./types";
+interface TimeSlotDividerProps {
+    variant: TimeSlotBarVariant;
+    left?: number;
+    dataTestId?: string;
+}
+declare const TimeSlotDivider: ({ variant, left, dataTestId, }: TimeSlotDividerProps) => import("react/jsx-runtime").JSX.Element;
+export default TimeSlotDivider;

package/time-slot-bar/time-slot-divider.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import t from"clsx";import{useRef as r}from"react";import"../theme/theme-provider/index.js";import{formatUnitValue as o}from"../theme/utils/css-variable.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 m}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as s,timeSlotBorder as i,timeSlotBorderDefault as a,timeSlotBorderMinified as p}from"./time-slot-bar.styles.js";const l=({variant:l,left:d,dataTestId:n})=>{const u=r(null);return m(u,{[s.border.left]:void 0===d?void 0:o(d,"px")}),e("div",{ref:u,"data-testid":n,className:t(i,"default"===l?a:p)})};export{l as default};
+//# sourceMappingURL=time-slot-divider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-divider.js","sources":["../../src/time-slot-bar/time-slot-divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlotBarVariant } from \"./types\";\n\ninterface TimeSlotDividerProps {\n    variant: TimeSlotBarVariant;\n    left?: number;\n    dataTestId?: string;\n}\n\nconst TimeSlotDivider = ({\n    variant,\n    left,\n    dataTestId,\n}: TimeSlotDividerProps) => {\n    const dividerRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(dividerRef, {\n        [styles.tokens.border.left]:\n            left === undefined ? undefined : formatUnitValue(left, \"px\"),\n    });\n\n    return (\n        <div\n            ref={dividerRef}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.timeSlotBorder,\n                variant === \"default\"\n                    ? styles.timeSlotBorderDefault\n                    : styles.timeSlotBorderMinified\n            )}\n        />\n    );\n};\n\nexport default TimeSlotDivider;\n"],"names":["TimeSlotDivider","variant","left","dataTestId","dividerRef","useRef","useApplyStyle","styles.tokens","border","undefined","formatUnitValue","_jsx","ref","className","clsx","styles.timeSlotBorder","styles.timeSlotBorderDefault","styles.timeSlotBorderMinified"],"mappings":"smBAaA,MAAMA,EAAkB,EACpBC,UACAC,OACAC,iBAEA,MAAMC,EAAaC,EAAuB,MAO1C,OALAC,EAAcF,EAAY,CACtB,CAACG,EAAcC,OAAON,WACTO,IAATP,OAAqBO,EAAYC,EAAgBR,EAAM,QAI3DS,EAAA,MAAA,CACIC,IAAKR,EAAU,cACFD,EACbU,UAAWC,EACPC,EACY,YAAZd,EACMe,EACAC,IAEZ"}

package/time-slot-bar/time-slot-item.d.ts

@@ -0,0 +1,13 @@
+import { type MouseEvent } from "react";
+import type { TimeSlotBarVariant } from "./types";
+interface TimeSlotItemProps {
+    children: React.ReactNode;
+    color?: string;
+    dataTestId?: string;
+    onClick?: (() => void) | ((evt: MouseEvent<HTMLElement>) => void);
+    slotOffset: number;
+    slotWidth: number;
+    variant: TimeSlotBarVariant;
+}
+declare const TimeSlotItem: ({ children, color, dataTestId, onClick, slotOffset, slotWidth, variant, }: TimeSlotItemProps) => import("react/jsx-runtime").JSX.Element;
+export default TimeSlotItem;

package/time-slot-bar/time-slot-item.js

@@ -0,0 +1,2 @@
+import{jsx as t}from"react/jsx-runtime";import e from"clsx";import{useRef as o}from"react";import"../theme/theme-provider/index.js";import{formatUnitValue as r}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as m}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as s}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{tokens as i,timeSlotItem as l,timeSlotItemDefault as p,timeSlotItemMinified as a}from"./time-slot-bar.styles.js";const d=({children:d,color:n,dataTestId:c,onClick:h,slotOffset:f,slotWidth:u,variant:j})=>{const x=o(null);return s(x,{[i.item.width]:r(u,"px"),[i.item.left]:r(f,"px"),[i.item.color]:n||m.text}),t("div",{ref:x,"data-testid":c,className:e(l,"default"===j?p:a),onClick:h,children:d})};export{d as default};
+//# sourceMappingURL=time-slot-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"time-slot-item.js","sources":["../../src/time-slot-bar/time-slot-item.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type MouseEvent, useRef } from \"react\";\n\nimport { Colour, formatUnitValue, useApplyStyle } from \"../theme\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlotBarVariant } from \"./types\";\n\ninterface TimeSlotItemProps {\n    children: React.ReactNode;\n    color?: string;\n    dataTestId?: string;\n    onClick?: (() => void) | ((evt: MouseEvent<HTMLElement>) => void);\n    slotOffset: number;\n    slotWidth: number;\n    variant: TimeSlotBarVariant;\n}\n\nconst TimeSlotItem = ({\n    children,\n    color,\n    dataTestId,\n    onClick,\n    slotOffset,\n    slotWidth,\n    variant,\n}: TimeSlotItemProps) => {\n    const itemRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(itemRef, {\n        [styles.tokens.item.width]: formatUnitValue(slotWidth, \"px\"),\n        [styles.tokens.item.left]: formatUnitValue(slotOffset, \"px\"),\n        [styles.tokens.item.color]: color || Colour.text,\n    });\n\n    return (\n        <div\n            ref={itemRef}\n            data-testid={dataTestId}\n            className={clsx(\n                styles.timeSlotItem,\n                variant === \"default\"\n                    ? styles.timeSlotItemDefault\n                    : styles.timeSlotItemMinified\n            )}\n            onClick={onClick}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport default TimeSlotItem;\n"],"names":["TimeSlotItem","children","color","dataTestId","onClick","slotOffset","slotWidth","variant","itemRef","useRef","useApplyStyle","styles.tokens","item","width","formatUnitValue","left","Colour","text","_jsx","ref","className","clsx","styles.timeSlotItem","styles.timeSlotItemDefault","styles.timeSlotItemMinified"],"mappings":"inBAiBA,MAAMA,EAAe,EACjBC,WACAC,QACAC,aACAC,UACAC,aACAC,YACAC,cAEA,MAAMC,EAAUC,EAAuB,MAQvC,OANAC,EAAcF,EAAS,CACnB,CAACG,EAAcC,KAAKC,OAAQC,EAAgBR,EAAW,MACvD,CAACK,EAAcC,KAAKG,MAAOD,EAAgBT,EAAY,MACvD,CAACM,EAAcC,KAAKV,OAAQA,GAASc,EAAOC,OAI5CC,EAAA,MAAA,CACIC,IAAKX,EAAO,cACCL,EACbiB,UAAWC,EACPC,EACY,YAAZf,EACMgB,EACAC,GAEVpB,QAASA,EAAOH,SAEfA,GACC"}

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

@@ -1,52 +1,151 @@
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-export type SlotStyle = "default" | "stripes";
-export type Direction = "right" | "left";
+import type { SlotStyle } from "../shared/time-slot/types";
+/**
+ * Visual density variant for `TimeSlotBar`.
+ *
+ * - `"default"` — full-height bar; slots show labels and are clickable.
+ * - `"minified"` — compact bar; slot labels and click interactions are disabled.
+ */
 export type TimeSlotBarVariant = "minified" | "default";
+export type { SlotStyle } from "../shared/time-slot/types";
+/**
+ * Imperative handle returned by `TimeSlotBar` via `ref`.
+ */
 export interface TimeSlotBarRef {
-    /** Resets the scroll position to the initialScrollTime if provided */
+    /**
+     * Scrolls the bar back to `initialScrollTime`,
+     * or to the start if `initialScrollTime` is not set.
+     */
     resetScroll: () => void;
 }
+/**
+ * Visual styling attributes applied to an individual time slot or the bar background.
+ */
 interface TimeSlotBarStyleAttributes {
-    /** The type of style of the time slot. Values: "default" | "stripes"  */
+    /**
+     * Visual style for the slot fill.
+     *
+     * @default "default"
+     */
     styleType?: SlotStyle | undefined;
-    /** The label color */
+    /** Text color for the slot label. */
     color?: string | undefined;
-    /** The background color */
-    backgroundColor: string | ((props: V3_ThemeStyleProps) => string);
-    /** The secondary background color. Used in conjunction if styleType is "stripes" */
-    backgroundColor2?: string | ((props: V3_ThemeStyleProps) => string) | undefined;
+    /** Primary fill color of the slot. */
+    backgroundColor: string;
+    /**
+     * Secondary fill color used for the alternating stripe.
+     *
+     * @remarks Only applies when `styleType` is `"stripes"`.
+     */
+    backgroundColor2?: string | undefined;
+    /** Primary fill color of the slot on hover. */
+    hoverBackgroundColor?: string | undefined;
+    /**
+     * Secondary fill color on hover when `styleType` is `"stripes"`.
+     *
+     * @remarks Only applies when `styleType` is `"stripes"`.
+     */
+    hoverBackgroundColor2?: string | undefined;
 }
+/**
+ * Props for the `TimeSlotBar` component.
+ */
 export interface TimeSlotBarProps {
     "data-testid"?: string | undefined;
     className?: string | undefined;
-    /** The display variant of the component. Values: "minified" | "default" */
+    /**
+     * Visual density of the bar.
+     *
+     * @default "default"
+     */
     variant?: TimeSlotBarVariant;
-    /** The start time of time slot bar. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * Start of the visible time range in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     startTime: string;
-    /** The end time of time slot bar. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * End of the visible time range in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     endTime: string;
-    /** Initial scroll position in HH:mm format (e.g., "09:00" will scroll to 9am on mount) */
+    /**
+     * Time position the bar scrolls to on mount, in `HH:mm` format.
+     *
+     * When `roundInitialScrollTime` is `true`, the value is
+     * rounded down to the nearest 30-minute interval before scrolling.
+     */
     initialScrollTime?: string | undefined;
+    /**
+     * The individual time slots shown within the configured time range.
+     *
+     * @remarks Slots outside the `startTime`–`endTime` range are clipped.
+     */
     slots: TimeSlot[];
-    /** Callback function when user clicks on the time slot */
+    /**
+     * Called when the user clicks a slot cell.
+     *
+     * @param timeSlot The clicked `TimeSlot` object.
+     */
     onSlotClick: (timeSlot: TimeSlot) => void;
-    /** The default click behaviour when no time slot is specified for the time period */
+    /**
+     * Called when the user clicks an empty slot.
+     *
+     * @remarks Only active in the `"default"` variant.
+     */
     onClick?: () => void;
-    /** The default styling attributes when no time slot is specified for the time period */
+    /**
+     * Styling applied to the bar background region not covered by any slot.
+     * Required to make the background region visible or interactive.
+     */
     styleAttributes?: TimeSlotBarStyleAttributes | undefined;
-    /** Rounds initial scroll time to the nearest interval, e.g 6:30 will be clamped to 6:00 when interval = 60. Default is true */
+    /**
+     * When `true`, `initialScrollTime` is rounded down to the nearest
+     * 30-minute interval before the bar scrolls to it.
+     *
+     * @default true
+     */
     roundInitialScrollTime?: boolean | undefined;
 }
+/**
+ * A single bookable or occupied slot rendered within a `TimeSlotBar`.
+ *
+ */
 export interface TimeSlot {
+    /** Unique identifier for this slot. */
     id: string;
-    /** The start time of time slot. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * Start boundary of the slot in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     startTime: string;
-    /** The end time of time slot. Format in HH:mm. Note: Minutes can be 00, 15, 30, 45 */
+    /**
+     * End boundary of the slot in `HH:mm` format.
+     *
+     * @remarks Minutes must be one of `00`, `15`, `30`, or `45`.
+     */
     endTime: string;
-    /** The slot cell label */
+    /**
+     * Text rendered inside the slot cell.
+     * Replaced with `"..."` when the cell is too narrow to display the full label.
+     *
+     * @remarks Only displayed in the `"default"` variant.
+     */
     label?: string | undefined;
-    /** Specifies if the slot cell is clickable */
+    /**
+     * Whether the slot responds to clicks.
+     *
+     * @remarks Only active in the `"default"` variant.
+     *
+     * @default true
+     */
     clickable?: boolean | undefined;
+    /** Visual styling for the slot. */
     styleAttributes: TimeSlotBarStyleAttributes;
+    /**
+     * Accessible label for this slot.
+     */
+    ariaLabel?: string | undefined;
 }
-export {};

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

@@ -0,0 +1,3 @@
+export declare const SLOT_HEIGHT = 12;
+export declare const SLOT_GAP = 4;
+export declare const ROW_HEIGHT: number;

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

@@ -0,0 +1,2 @@
+const o=12,t=4,c=16;export{c as ROW_HEIGHT,t as SLOT_GAP,o as SLOT_HEIGHT};
+//# sourceMappingURL=consts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sources":["../../src/time-slot-bar-week/consts.ts"],"sourcesContent":["export const SLOT_HEIGHT = 12; // px\nexport const SLOT_GAP = 4; // px\nexport const ROW_HEIGHT = SLOT_HEIGHT + SLOT_GAP;\n"],"names":["SLOT_HEIGHT","SLOT_GAP","ROW_HEIGHT"],"mappings":"AAAO,MAAMA,EAAc,GACdC,EAAW,EACXC,EAAaF"}

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

@@ -2,7 +2,6 @@ import type { Dayjs } from "dayjs";
 import type { InternalCalendarProps } from "../shared/internal-calendar";
 import type { TimeSlot } from "../time-slot-bar/types";
 import type { TimeSlotCellsVariant } from "./types";
-export type DayVariant = "default" | "other-month" | "today";
 interface TimeSlotWeekDaysProps extends Pick<InternalCalendarProps, "disabledDates" | "minDate" | "maxDate"> {
     selectedDate: string | undefined;
     calendarDate: Dayjs;

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useSpring as l}from"@react-spring/web";import i from"../external/dayjs/dayjs.min.js";import r from"../external/lodash/isEmpty.js";import n from"../external/lodash/maxBy.js";import o from"../external/lodash/minBy.js";import{useState as a,useMemo as s}from"react";import{useResizeDetector as c}from"../external/react-resize-detector/build/index.esm.js";import{DayCell as d}from"../shared/internal-calendar/day-cell/day-cell.js";import{CalendarHelper as m}from"../util/calendar-helper.js";import{DateHelper as h}from"../util/date-helper.js";import"../util/string-helper.js";import{V3_Colour as f}from"../v3_theme/index.js";import{Wrapper as u,HeaderCellWeekColumn as g,HeaderCellWeek as b,CellWeekText as v,TimeColumn as p,TimeColumnWrapper as T,TimeColumnText as y,Expandable as $,ColumnWeekCell as j,TimeSlotWrapper as x,TimeSlotComponent as M,CollapseExpandAllWrapper as k,CollapseExpandAllButton as D,ChevronIcon as w}from"./time-slot-bar-week-days.style.js";const C=({calendarDate:C,disabledDates:L,selectedDate:O,onSelect:S,minDate:H,maxDate:A,startTime:E,endTime:F,maxVisibleCellHeight:I,slots:R,interval:Y=30,variant:B="flexible",enableSelection:W=!0,onSlotClick:z})=>{var V,_,q,G;const J="YYYY-MM-DD",[K,N]=a(!1),[P,Q]=a(),U=s((()=>m.generateDaysForCurrentWeek(C)),[C]),X=Object.values(null!=R?R:{}).flat(),Z=null!==(_=null!=E?E:null===(V=o(X,"startTime"))||void 0===V?void 0:V.startTime)&&void 0!==_?_:"00:00",ee=null!==(G=null!=F?F:null===(q=n(X,"endTime"))||void 0===q?void 0:q.endTime)&&void 0!==G?G:"24:00",te=Math.ceil(h.getTimeDiffInMinutes(Z,ee)/Y),{height:le=0,ref:ie}=c(),re=I?le<I||K?le:I:le,ne=l({height:re}),oe=s((()=>{if(R){const e={};return Object.entries(R).forEach((([t,l])=>{const i=function(e){const t=Array(te).fill({});return e.forEach((e=>{const l=Math.max(0,h.getTimeDiffInMinutes(Z,e.startTime)/Y),i=Math.min(te,h.getTimeDiffInMinutes(Z,e.endTime)/Y),n=Math.ceil(i)-Math.floor(l);switch(B){case"fixed":t[Math.floor(l)]=Object.assign(Object.assign({},e),{cellLength:i-l});break;case"flexible":for(let o=0;o<n;o++){const a=h.addMinutesToTime(Z,Math.floor(l+o)*Y),s=h.addMinutesToTime(a,Y);let c;r(t[Math.floor(l+o)])?0===o&&l%1!=0?c="top":o===n-1&&i%1!=0&&(c="bottom"):c=void 0,t[Math.floor(l+o)]=Object.assign(Object.assign({},e),{id:`${e.id}-${o}`,startTime:a,endTime:s,cellLength:1,halfFill:c})}}})),t}(l);e[t]=function(e){var t,l,i,n;let o=0;switch(B){case"fixed":for(e=e.reduce(((e,t)=>{const l=e.length>0?e[e.length-1]:e[0];return r(t)&&r(l)?e:[...e,t]}),[{}]);o<e.length;){if(r(e[o])){const r=null!==(l=null===(t=e[o-1])||void 0===t?void 0:t.endTime)&&void 0!==l?l:Z,a=null!==(n=null===(i=e[o+1])||void 0===i?void 0:i.startTime)&&void 0!==n?n:ee;if(r!==a){const t=h.getTimeDiffInMinutes(r,a)/Y;e[o]=Object.assign(Object.assign({},me(o)),{startTime:r,endTime:a,cellLength:t})}}o++}break;case"flexible":for(;o<e.length;)r(e[o])?(e[o]=me(o),o++):o+=e[o].cellLength}return e.filter((e=>!r(e)&&e.cellLength>0))}(i)})),e}return{}}),[R]),ae=e=>{Q(e)},se=()=>{Q(void 0)},ce=e=>{e.preventDefault(),N((e=>!e))},de=e=>{var t;const l=m.isWithinRange(e,H?i(H):void 0,A?i(A):void 0),r=null!==(t=L&&L.includes(e.format(J)))&&void 0!==t&&t;return!l||r};function me(e,t=1){return{id:`${e.toString()}-${(new Date).getTime()}`,startTime:"",endTime:"",clickable:!1,styleAttributes:{backgroundColor:f["bg-stronger"]},cellLength:t}}return e(u,{children:[t(g,{children:U.map(((e,l)=>{const r=(e=>{const t=e.format(J),l=de(e),i={},r=W&&!l;l&&(i.disabled=!0),i.interactive=W?r:null;const n=r&&P&&e.isSame(P,"day"),o=[O].includes(t);return o&&n?(i.labelType="selected-hover",i.circleLeft="selected-hover-outline",i.circleRight="selected-hover-outline"):o?(i.labelType="selected",i.circleLeft="selected-outline",i.circleRight="selected-outline"):n&&(i.labelType="hover",i.circleLeft="hover-subtle",i.circleRight="hover-subtle"),i})(e);return t(d,Object.assign({date:e,calendarDate:i(O),onSelect:()=>{((e,t)=>{!t&&W&&S(e)})(e,!r.interactive)},onHover:ae,onHoverEnd:se},r),`day-${l}`)}))}),t(g,{children:U.map(((e,l)=>t(b,{children:t(v,{weight:"semibold",$disabled:de(e),children:i(e).format("ddd")})},`week-day-${l}`)))}),(()=>{let e=!1;const l=t=>{const l=i(Z,"HH:mm").add(4*t*Y,"minutes"),r=l.format("h"),n=l.format("mm"),o=l.format("a");let a=`${r}${"00"!==n?` ${n}`:""}`;return e||"pm"!==o||"00"!==n||(a+=` ${o}`,e=!0),a};return t(p,{$height:re,children:Array(Math.ceil(te/4)).fill(void 0).map(((e,i)=>t(T,{children:t(y,{children:l(i)})},`time-${i}`)))})})(),t($,{style:ne,children:t(j,{ref:ie,children:U.map(((e,l)=>{var i;const r=e.format(J),n=null!==(i=oe[r])&&void 0!==i?i:Array("flexible"===B?te:1).fill(void 0).map(((e,t)=>me(t,"fixed"===B?te:void 0)));return t(x,{children:n.map((e=>{const{id:l,clickable:i=!0,styleAttributes:n,cellLength:o,halfFill:a}=e,{styleType:s="default",backgroundColor:c,backgroundColor2:d}=n;return t(M,{$type:"vertical",$variant:"default",$styleType:s,$bgColor:c,$bgColor2:d,$halfFill:a,$clickable:i,$height:"fixed"===B?12*o+4*(o-1):12,onClick:()=>i&&((e,t)=>{null==z||z(e,t)})(r,e)},l)}))},`wrapper-${l}`)}))},`week-cell-${C.format(J)}`)}),(()=>{if(I&&ie.current&&!(le&&le<I))return t(k,{children:e(D,{"data-testid":"time-bar-expand-collapse-button",styleType:"light",onClick:ce,children:[t(w,{$isExpanded:K}),(K?"Hide":"Show")+" later times"]})})})()]})};export{C as TimeSlotBarWeekDays};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ChevronUpIcon as r}from"@lifesg/react-icons";import{useSpring as i,animated as l}from"@react-spring/web";import o from"clsx";import a from"../external/dayjs/dayjs.min.js";import n from"../external/lodash/isEmpty.js";import s from"../external/lodash/maxBy.js";import c from"../external/lodash/minBy.js";import{useState as d,useRef as m,useMemo as u}from"react";import{useResizeDetector as f}from"../external/react-resize-detector/build/index.esm.js";import{Button as h}from"../button/button.js";import{DayCell as p}from"../shared/internal-calendar/day-cell/day-cell.js";import"../theme/theme-provider/index.js";import{formatUnitValue as v}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as g}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as b}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as y}from"../typography/index.js";import{CalendarHelper as j}from"../util/calendar-helper.js";import{DateHelper as x}from"../util/date-helper.js";import"../util/simple-id-generator.js";import{StringHelper as T}from"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsMounted as w}from"../util/use-mount.js";import{TimeHelper as k}from"../util/time-helper.js";import{ROW_HEIGHT as M,SLOT_GAP as D}from"./consts.js";import{tokens as N,wrapper as S,gridWrapper as A,headerCellWeekColumn as I,headerCellWeek as $,cellWeekTextDisabled as C,timeColumn as L,timeColumnWrapper as O,timeColumnText as R,expandable as Y,columnWeekCell as H,timeSlotWrapper as B,collapseExpandAllWrapper as E,collapseExpandAllButton as F,collapseExpandAllButtonContent as P,chevronIcon as U,chevronIconExpanded as q}from"./time-slot-bar-week-days.styles.js";import{WeekTimeSlotCell as z}from"./time-slot-cell.js";const W=({calendarDate:W,disabledDates:K,selectedDate:V,onSelect:X,minDate:G,maxDate:J,startTime:Q,endTime:Z,maxVisibleCellHeight:_,slots:ee,interval:te=30,variant:re="flexible",enableSelection:ie=!0,onSlotClick:le})=>{var oe,ae,ne,se;const ce="YYYY-MM-DD",[de,me]=d(!1),[ue,fe]=d(),he=w(),pe=m({}),ve=m(null),ge=u((()=>j.generateDaysForCurrentWeek(W)),[W]),be=Object.values(null!=ee?ee:{}).flat(),ye=null!==(ae=null!=Q?Q:null===(oe=c(be,"startTime"))||void 0===oe?void 0:oe.startTime)&&void 0!==ae?ae:"00:00",je=null!==(se=null!=Z?Z:null===(ne=s(be,"endTime"))||void 0===ne?void 0:ne.endTime)&&void 0!==se?se:"24:00",xe=Math.ceil(x.getTimeDiffInMinutes(ye,je)/te),{height:Te=0,ref:we}=f(),ke=!!_&&Te>_,Me=void 0!==_?Math.max(1,Math.floor((_+D)/M)):0,De=_?!ke||de?Te:Me>0?Me*M-D:_:Te,Ne=i({height:De}),Se=u((()=>{if(ee){const e={};return Object.entries(ee).forEach((([t,r])=>{const i=function(e){const t=Array(xe).fill({});return e.forEach((e=>{const r=Math.max(0,x.getTimeDiffInMinutes(ye,e.startTime)/te),i=Math.min(xe,x.getTimeDiffInMinutes(ye,e.endTime)/te),l=Math.ceil(i)-Math.floor(r);switch(re){case"fixed":t[Math.floor(r)]=Object.assign(Object.assign({},e),{isActualSlot:!0,rowIndex:Math.floor(r),cellLength:i-r});break;case"flexible":for(let o=0;o<l;o++){const a=x.addMinutesToTime(ye,Math.floor(r+o)*te),s=x.addMinutesToTime(a,te);let c;c=n(t[Math.floor(r+o)])?0===o&&r%1!=0?"top":o===l-1&&i%1!=0?"bottom":"default":"default",t[Math.floor(r+o)]=Object.assign(Object.assign({},e),{id:`${e.id}-${o}`,startTime:a,endTime:s,isActualSlot:!0,rowIndex:Math.floor(r+o),cellLength:1,halfFill:c})}}})),t}(r);e[t]=function(e){var t,r,i,l;let o=0;switch(re){case"fixed":for(e=e.reduce(((e,t)=>{const r=e.length>0?e[e.length-1]:e[0];return n(t)&&n(r)?e:[...e,t]}),[{}]);o<e.length;){if(n(e[o])){const a=null!==(r=null===(t=e[o-1])||void 0===t?void 0:t.endTime)&&void 0!==r?r:ye,n=null!==(l=null===(i=e[o+1])||void 0===i?void 0:i.startTime)&&void 0!==l?l:je;if(a!==n){const t=x.getTimeDiffInMinutes(a,n)/te;e[o]=Object.assign(Object.assign({},He(o)),{startTime:a,endTime:n,cellLength:t})}}o++}break;case"flexible":for(;o<e.length;)n(e[o])?(e[o]=He(o),o++):o+=e[o].cellLength}return e.filter((e=>!n(e)&&e.cellLength>0))}(i)})),e}return{}}),[ee]),Ae=u((()=>ge.reduce(((e,t)=>{const r=t.format(ce);return e[r]=Ee(r).filter((e=>!!e.isActualSlot&&void 0!==e.rowIndex)).map((e=>({key:`${r}-${e.id}`,date:r,rowIndex:e.rowIndex}))).sort(((e,t)=>e.rowIndex-t.rowIndex)),e}),{})),[ge,Se]);b(ve,{[N.timeColumn.height]:v(De,"px")});const Ie=e=>{fe(e)},$e=()=>{fe(void 0)},Ce=(e,t)=>{null==le||le(e,t)},Le=(e,t)=>r=>{r.stopPropagation(),Ce(e,t)},Oe=e=>{e.preventDefault(),me((e=>!e))},Re=(e,t)=>{var r;const i=null!==(r=Ae[t.date])&&void 0!==r?r:[],l=e=>{var t;e&&(null===(t=pe.current[e.key])||void 0===t||t.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const r=i.findIndex((e=>e.key===t.key));l(i[r+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const r=i.findIndex((e=>e.key===t.key));l(i[r-1]);break}case"Home":case"PageUp":e.preventDefault(),l(i[0]);break;case"End":e.preventDefault(),l(i[i.length-1]);break;case"PageDown":if(e.preventDefault(),ke&&!de){me(!0);const e=[...i].reverse().find((e=>e.rowIndex<Me));l(null!=e?e:i[0]);break}l(i[i.length-1])}},Ye=e=>{var t;const r=j.isWithinRange(e,G?a(G):void 0,J?a(J):void 0),i=null!==(t=K&&K.includes(e.format(ce)))&&void 0!==t&&t;return!r||i};function He(e,t=1){return{id:`${e.toString()}-${(new Date).getTime()}`,startTime:"",endTime:"",clickable:!1,isActualSlot:!1,styleAttributes:{backgroundColor:g["bg-stronger"]},cellLength:t}}function Be(e,t){var r;const{startTime:i,endTime:l}=t;return T.joinNonEmptyStrings([a(e).format("D MMMM YYYY dddd"),i&&l?k.formatTimeRange(i,l):void 0,t.label,null===(r=t.clickable)||void 0===r||r?"Available":"Unavailable"])}function Ee(e){var t;return null!==(t=Se[e])&&void 0!==t?t:Array("flexible"===re?xe:1).fill(void 0).map(((e,t)=>He(t,"fixed"===re?xe:void 0)))}return e("div",{className:S,children:[e("div",{className:A,role:"grid",children:[t("div",{className:I,role:"row",onBlur:$e,children:ge.map(((e,r)=>{const i=(e=>{const t=e.format(ce),r=Ye(e),i={},l=ie&&!r;r&&(i.disabled=!0),i.interactive=!!ie&&l;const o=l&&ue&&e.isSame(ue,"day"),a=[V].includes(t);return a&&o?(i.labelType="selected-hover",i.circleLeft="selected-hover-outline",i.circleRight="selected-hover-outline"):a?(i.labelType="selected",i.circleLeft="selected-outline",i.circleRight="selected-outline"):o&&(i.labelType="hover",i.circleLeft="hover-subtle",i.circleRight="hover-subtle"),i})(e);return t(p,Object.assign({date:e,calendarDate:a(V),role:"columnheader",tabIndex:i.interactive?0:-1,onSelect:()=>{((e,t)=>{!t&&ie&&X(e)})(e,!i.interactive)},onHover:Ie,onHoverEnd:$e,onFocus:Ie},i),`day-${r}`)}))}),t("div",{className:I,role:"row",children:ge.map(((e,r)=>t("div",{className:$,role:"gridcell",children:t(y.BodyXS,{weight:"semibold",className:o(Ye(e)&&C),children:a(e).format("ddd")})},`week-day-${r}`)))}),(()=>{let e=!1;const r=t=>{const r=a(ye,"HH:mm").add(4*t*te,"minutes"),i=r.format("h"),l=r.format("mm"),o=r.format("a");let n=`${i}${"00"!==l?` ${l}`:""}`;return e||"pm"!==o||"00"!==l||(n+=` ${o}`,e=!0),n};return t("div",{className:L,ref:ve,"aria-hidden":!0,children:Array(Math.ceil(xe/4)).fill(void 0).map(((e,i)=>t("div",{className:O,children:t("div",{className:R,children:r(i)})},`time-${i}`)))})})(),t(l.div,{className:Y,style:he?Ne:void 0,role:"row",children:t("div",{className:H,ref:we,children:ge.map(((e,r)=>{const i=e.format(ce),l=Ee(i);return t("div",{className:B,role:"gridcell",children:l.map((e=>((e,r)=>t(z,{formattedDate:e,slot:r,variant:re,hasCollapsedContent:ke,expandAll:de,visibleRowCount:Me,onSlotClick:Ce,getSlotAriaLabel:Be,onSlotKeyDown:Re,onSlotButtonClick:Le,slotButtonRefs:pe},r.id))(i,e)))},`wrapper-${r}`)}))},`week-cell-${W.format(ce)}`)})]}),(()=>{if(_&&we.current)return t("div",{className:E,children:t(h,{"data-testid":"time-bar-expand-collapse-button",styleType:"light",sizeType:"small","aria-expanded":de,onClick:Oe,className:F,children:e("span",{className:P,children:[t(r,{className:o(U,de&&q)}),(de?"Hide":"Show")+" later times"]})})})})()]})};export{W as TimeSlotBarWeekDays};
 //# sourceMappingURL=time-slot-bar-week-days.js.map