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

package/time-range-picker/combobox-picker/combobox-picker.styles.js

@@ -1,7 +1,2 @@
-import r from"styled-components";import{InputWrapper as p}from"../../shared/input-wrapper/input-wrapper.js";import{Spacing as e}from"../../theme/index.js";const i=r(p)`
-    height: 3rem;
-    gap: ${e["spacing-8"]};
-    // space for clear icon
-    padding-right: calc(1.25rem + ${e["spacing-20"]});
-`;export{i as TimeFieldContainer};
+import"./combobox-picker.styles_7i9vso.css";const o="t1wpl53s";export{o as timeFieldContainer};
 //# sourceMappingURL=combobox-picker.styles.js.map

package/time-range-picker/combobox-picker/combobox-picker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-picker.styles.js","sources":["../../../src/time-range-picker/combobox-picker/combobox-picker.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { InputWrapper } from \"../../shared/input-wrapper/input-wrapper\";\nimport { Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TimeFieldContainer = styled(InputWrapper)`\n    height: 3rem;\n    gap: ${Spacing[\"spacing-8\"]};\n    // space for clear icon\n    padding-right: calc(1.25rem + ${Spacing[\"spacing-20\"]});\n`;\n"],"names":["TimeFieldContainer","styled","InputWrapper","Spacing"],"mappings":"iKAOaA,EAAqBC,EAAOC,EAAa;;WAE3CC,EAAQ;;oCAEiBA,EAAQ;"}
+{"version":3,"file":"combobox-picker.styles.js","sources":["../../../src/time-range-picker/combobox-picker/combobox-picker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const timeFieldContainer = css`\n    height: 3rem;\n    gap: ${Spacing[\"spacing-8\"]};\n    /* space for clear icon */\n    padding-right: calc(1.25rem + ${Spacing[\"spacing-20\"]});\n`;\n"],"names":["timeFieldContainer"],"mappings":"6FAOO,MAAMA,EAAkB"}

package/time-range-picker/combobox-picker/combobox-picker.styles_7i9vso.css

@@ -0,0 +1 @@
+@layer fds{.t1wpl53s{height:3rem;gap:var(--fds-spacing-8);padding-right:calc(1.25rem + var(--fds-spacing-20));}}

package/time-range-picker/common.styles.d.ts

@@ -1,43 +1,4 @@
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const TimeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("../shared/input-wrapper").InputWrapperStyleProps> & import("../shared/input-wrapper").InputWrapperStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, never>>> & string;
-export declare const SelectorInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "$disabled"> & {
-    $disabled?: boolean | undefined;
-}, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never>> & {
-    as?: import("styled-components").WebTarget | undefined;
-    forwardedAs?: import("styled-components").WebTarget | undefined;
-}, "ref"> & {
-    ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
-}, "$disabled"> & {
-    $disabled?: boolean | undefined;
-}, never>>> & string;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const timeContainer: import("@linaria/core").LinariaClassName;
+export declare const selectorInput: import("@linaria/core").LinariaClassName;
+export declare const selectorInputDisabled: import("@linaria/core").LinariaClassName;

package/time-range-picker/common.styles.js

@@ -1,15 +1,2 @@
-import e,{css as o}from"styled-components";import{InputWrapper as r,BasicInput as t}from"../shared/input-wrapper/input-wrapper.js";import{Spacing as i,Colour as p}from"../theme/index.js";const s=e.div`
-    position: relative;
-`,l=e(r)`
-    height: 3rem;
-    gap: ${i["spacing-8"]};
-`,a=e(t)`
-    display: block;
-    width: 100%;
-    flex: 1;
-    ${e=>e.$disabled&&o`
-            color: ${p["text-subtler"]};
-            cursor: not-allowed;
-        `}
-`;export{a as SelectorInput,l as TimeContainer,s as Wrapper};
+import"./common.styles_cnkkax.css";const s="wfddsjt",t="t102z5ub",c="svbkfs2",e="s1201xt4";export{c as selectorInput,e as selectorInputDisabled,t as timeContainer,s as wrapper};
 //# sourceMappingURL=common.styles.js.map

package/time-range-picker/common.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.styles.js","sources":["../../src/time-range-picker/common.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport {\n    BasicInput,\n    InputWrapper,\n} from \"../shared/input-wrapper/input-wrapper\";\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    position: relative;\n`;\n\nexport const TimeContainer = styled(InputWrapper)`\n    height: 3rem;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const SelectorInput = styled(BasicInput)<{\n    $disabled?: boolean | undefined;\n}>`\n    display: block;\n    width: 100%;\n    flex: 1;\n    ${(props) =>\n        props.$disabled &&\n        css`\n            color: ${Colour[\"text-subtler\"]};\n            cursor: not-allowed;\n        `}\n`;\n"],"names":["Wrapper","styled","div","TimeContainer","InputWrapper","Spacing","SelectorInput","BasicInput","props","$disabled","css","Colour"],"mappings":"2LAUO,MAAMA,EAAUC,EAAOC,GAAG;;EAIpBC,EAAgBF,EAAOG,EAAa;;WAEtCC,EAAQ;EAGNC,EAAgBL,EAAOM,EAElC;;;;MAIKC,GACCA,EAAMC,WACNC,CAAG;qBACUC,EAAO;;;"}
+{"version":3,"file":"common.styles.js","sources":["../../src/time-range-picker/common.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n`;\n\nexport const timeContainer = css`\n    height: 3rem;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const selectorInput = css`\n    display: block;\n    width: 100%;\n    flex: 1;\n`;\n\nexport const selectorInputDisabled = css`\n    color: ${Colour[\"text-subtler\"]};\n    cursor: not-allowed;\n`;\n"],"names":["wrapper","timeContainer","selectorInput","selectorInputDisabled"],"mappings":"oEAOO,MAAMA,EAAO,UAIPC,EAAa,WAKbC,EAAa,UAMbC,EAAqB"}

package/time-range-picker/common.styles_cnkkax.css

@@ -0,0 +1,4 @@
+@layer fds{.wfddsjt{position:relative;}
+.t102z5ub{height:3rem;gap:var(--fds-spacing-8);}
+.svbkfs2{display:block;width:100%;-webkit-flex:1;-ms-flex:1;flex:1;}
+.s1201xt4{color:var(--fds-colour-text-subtler);cursor:not-allowed;}}

package/time-range-picker/dial-picker/dial-picker.d.ts

@@ -1,2 +1,2 @@
-import { TimeRangePickerProps } from "../types";
+import type { TimeRangePickerProps } from "../types";
 export declare const DialPicker: ({ id, disabled, error, value, format, readOnly, onChange, onFocus, onBlur, alignment, dropdownZIndex, dropdownRootNode, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...otherProps }: TimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;

package/time-range-picker/dial-picker/dial-picker.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{useState as o,useRef as i,useEffect as t}from"react";import{concatIds as l}from"../../shared/accessibility/index.js";import{ElementWithDropdown as n}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import{RangeInputInnerContainer as d}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimepickerDropdown as s}from"../../shared/timepicker-dropdown/timepicker-dropdown.js";import"../../util/calendar-helper.js";import"../../util/date-helper.js";import"../../util/date-input-helper.js";import{useId as c}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as u}from"../../util/time-helper.js";import{Wrapper as m,TimeContainer as p,SelectorInput as b}from"../common.styles.js";const v=v=>{var{id:f,disabled:g=!1,error:h,value:y,format:k="24hr",readOnly:j,onChange:w,onFocus:F,onBlur:$,alignment:x="left",dropdownZIndex:C,dropdownRootNode:O,"aria-labelledby":B,"aria-describedby":D,"aria-invalid":I}=v,T=e(v,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const[N,R]=o(!1),[S,Z]=o("none"),[E,V]=o(""),[_,A]=o(""),[P,q]=o(!1),z=!j&&!g,G=i(null),H=c(),J=`${H}-start-label`,K=`${H}-end-label`,L=e=>l(B,"start"===e?J:K),M=()=>l(D);t((()=>{y&&(V(y.start),A(y.end))}),[y]);const Q=e=>{z&&(P||N||null==F||F(),q(!0),Z(e),R(!0))},U=e=>{var r,a;const o=!!(null==e?void 0:e.keepFocus),i=null!==(r=null==e?void 0:e.triggerBlur)&&void 0!==r?r:!o;R(!1),Z("none"),q(o),i&&(null==$||$()),o&&(null===(a=G.current)||void 0===a||a.focus())},W=e=>{var r,a,o;if(!P||N)return;const i=e.relatedTarget,t=(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focusable]"))||(null===(a=null==i?void 0:i.matches)||void 0===a?void 0:a.call(i,"[data-floating-ui-focus-guard]"));!(!i||!(null===(o=G.current)||void 0===o?void 0:o.contains(i)))||t||(q(!1),null==$||$())},X=e=>{V(e),null==w||w({start:e,end:_}),Z("end"),R(!0),q(!0)},Y=e=>{A(e),null==w||w({start:E,end:e}),""===E?(Z("start"),R(!0),q(!0)):U({keepFocus:!0})};return r(m,Object.assign({id:f},T,{children:r(n,{enabled:z,isOpen:N,renderElement:()=>r(p,{ref:G,tabIndex:-1,onBlur:W,"data-testid":"timepicker-container",role:"group",$disabled:g,$error:h,$readOnly:j,$focused:P,children:a(d,{error:h,currentActive:S,children:[r(b,{onFocus:()=>Q("start"),onClick:()=>Q("start"),readOnly:!0,placeholder:"From",value:u.formatDisplayValue(E,k),"data-testid":T["data-testid"]?`${T["data-testid"]}-timepicker-selector-from`:"timepicker-selector-from",role:"combobox","aria-expanded":!g&&!j&&N,"aria-invalid":h||I,"aria-disabled":g,"aria-readonly":j,"aria-labelledby":L("start"),"aria-describedby":M(),$disabled:g}),r(b,{onClick:()=>Q("end"),readOnly:!0,placeholder:"To",value:u.formatDisplayValue(_,k),"data-testid":T["data-testid"]?`${T["data-testid"]}-timepicker-selector-to`:"timepicker-selector-to",role:"combobox","aria-expanded":!g&&!j&&N,"aria-invalid":h||I||void 0,"aria-disabled":g||void 0,"aria-readonly":j||void 0,"aria-labelledby":L("end"),"aria-describedby":M(),$disabled:g})]})}),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:i})=>N?a("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"start"===S?"Selecting for: Start time":"end"===S?"Selecting for: End time":void 0},i(),{children:["start"===S&&r(s,{id:f?`${f}-start`:void 0,show:!0,value:E,format:k,onCancel:()=>U({keepFocus:!0}),onChange:X}),"end"===S&&r(s,{id:f?`${f}-end`:void 0,show:!0,value:_,format:k,onCancel:()=>U({keepFocus:!1}),onChange:Y})]}),S):null,onClose:()=>U({keepFocus:!1}),onDismiss:()=>U({keepFocus:!0}),clickToToggle:!1,offset:8,alignment:x,customZIndex:C,rootNode:O})}))};export{v as DialPicker};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as r,jsxs as a}from"react/jsx-runtime";import o from"clsx";import{useState as i,useRef as t,useEffect as l}from"react";import{concatIds as n}from"../../shared/accessibility/index.js";import{ElementWithDropdown as d}from"../../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as s,BasicInput as c}from"../../shared/input-wrapper/input-wrapper.js";import{RangeInputInnerContainer as m}from"../../shared/range-input-inner-container/range-input-inner-container.js";import{TimepickerDropdown as p}from"../../shared/timepicker-dropdown/timepicker-dropdown.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as u}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as v}from"../../util/time-helper.js";import{wrapper as b,timeContainer as f,selectorInput as g,selectorInputDisabled as h}from"../common.styles.js";const y=y=>{var{id:j,disabled:k=!1,error:w,value:x,format:F="24hr",readOnly:C,onChange:N,onFocus:O,onBlur:$,alignment:B="left",dropdownZIndex:D,dropdownRootNode:I,"aria-labelledby":T,"aria-describedby":R,"aria-invalid":S}=y,Z=e(y,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const[E,V]=i(!1),[_,A]=i("none"),[P,q]=i(""),[z,G]=i(""),[H,J]=i(!1),K=!C&&!k,L=t(null),M=u(),Q=`${M}-start-label`,U=`${M}-end-label`,W=e=>n(T,"start"===e?Q:U),X=()=>n(R);l((()=>{x&&(q(x.start),G(x.end))}),[x]);const Y=e=>{K&&(H||E||null==O||O(),J(!0),A(e),V(!0))},ee=e=>{var r,a;const o=!!(null==e?void 0:e.keepFocus),i=null!==(r=null==e?void 0:e.triggerBlur)&&void 0!==r?r:!o;V(!1),A("none"),J(o),i&&(null==$||$()),o&&(null===(a=L.current)||void 0===a||a.focus())},re=e=>{var r,a,o;if(!H||E)return;const i=e.relatedTarget,t=(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focusable]"))||(null===(a=null==i?void 0:i.matches)||void 0===a?void 0:a.call(i,"[data-floating-ui-focus-guard]"));!(!i||!(null===(o=L.current)||void 0===o?void 0:o.contains(i)))||t||(J(!1),null==$||$())},ae=e=>{q(e),null==N||N({start:e,end:z}),A("end"),V(!0),J(!0)},oe=e=>{G(e),null==N||N({start:P,end:e}),""===P?(A("start"),V(!0),J(!0)):ee({keepFocus:!0})};return r("div",Object.assign({id:j},Z,{className:o(b,Z.className),children:r(d,{enabled:K,isOpen:E,renderElement:()=>r(s,{ref:L,tabIndex:-1,onBlur:re,"data-testid":"timepicker-container",role:"group",disabled:k,error:w,readOnly:C,focused:H,className:f,children:a(m,{error:w,currentActive:_,children:[r(c,{onFocus:()=>Y("start"),onClick:()=>Y("start"),readOnly:!0,placeholder:"From",value:v.formatDisplayValue(P,F),"data-testid":Z["data-testid"]?`${Z["data-testid"]}-timepicker-selector-from`:"timepicker-selector-from",role:"combobox","aria-expanded":!k&&!C&&E,"aria-invalid":w||S,"aria-disabled":k,"aria-readonly":C,"aria-labelledby":W("start"),"aria-describedby":X(),className:o(g,k&&h)}),r(c,{onClick:()=>Y("end"),readOnly:!0,placeholder:"To",value:v.formatDisplayValue(z,F),"data-testid":Z["data-testid"]?`${Z["data-testid"]}-timepicker-selector-to`:"timepicker-selector-to",role:"combobox","aria-expanded":!k&&!C&&E,"aria-invalid":w||S||void 0,"aria-disabled":k||void 0,"aria-readonly":C||void 0,"aria-labelledby":W("end"),"aria-describedby":X(),className:o(g,k&&h)})]})}),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:i})=>E?a("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"start"===_?"Selecting for: Start time":"end"===_?"Selecting for: End time":void 0},i(),{children:["start"===_&&r(p,{id:j?`${j}-start`:void 0,show:!0,value:P,format:F,onCancel:()=>ee({keepFocus:!0}),onChange:ae}),"end"===_&&r(p,{id:j?`${j}-end`:void 0,show:!0,value:z,format:F,onCancel:()=>ee({keepFocus:!1}),onChange:oe})]}),_):null,onClose:()=>ee({keepFocus:!1}),onDismiss:()=>ee({keepFocus:!0}),clickToToggle:!1,offset:8,alignment:B,customZIndex:D,rootNode:I})}))};export{y as DialPicker};
 //# sourceMappingURL=dial-picker.js.map

package/time-range-picker/dial-picker/dial-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"dial-picker.js","sources":["../../../src/time-range-picker/dial-picker/dial-picker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { concatIds } from \"../../shared/accessibility\";\nimport {\n    DropdownRenderProps,\n    ElementWithDropdown,\n} from \"../../shared/dropdown-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { TimepickerDropdown } from \"../../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, TimeContainer, Wrapper } from \"../common.styles\";\nimport { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\n\ntype Active = \"start\" | \"end\" | \"none\";\n\nexport const DialPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"24hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [active, setActive] = useState<Active>(\"none\");\n    const [startTimeVal, setStartTimeVal] = useState(\"\");\n    const [endTimeVal, setEndTimeVal] = useState(\"\");\n    const [focused, setFocused] = useState(false);\n\n    const enabled = !readOnly && !disabled;\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (active === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (active === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: Exclude<Active, \"none\">) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(ariaDescribedBy);\n    };\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (value) {\n            setStartTimeVal(value.start);\n            setEndTimeVal(value.end);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = (next: Exclude<Active, \"none\">) => {\n        if (!enabled) return;\n        if (!focused && !isOpen) onFocus?.();\n        setFocused(true);\n        setActive(next);\n        setIsOpen(true);\n    };\n\n    const handleClose = (opts?: {\n        keepFocus?: boolean;\n        triggerBlur?: boolean;\n    }) => {\n        const keepFocus = !!opts?.keepFocus;\n        const triggerBlur = opts?.triggerBlur ?? !keepFocus;\n\n        setIsOpen(false);\n        setActive(\"none\");\n        setFocused(keepFocus);\n\n        if (triggerBlur) onBlur?.();\n\n        if (keepFocus) nodeRef.current?.focus();\n    };\n\n    const handleContainerBlur = (\n        event: React.FocusEvent<HTMLDivElement, Element>\n    ) => {\n        if (!focused || isOpen) return;\n\n        const target = event.relatedTarget as HTMLElement | null;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode = !!(target && nodeRef.current?.contains(target));\n\n        if (!isInsideNode && !isFloatingElement) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleStartTime = (value: string) => {\n        setStartTimeVal(value);\n        onChange?.({ start: value, end: endTimeVal } as TimeRangePickerValue);\n\n        setActive(\"end\");\n        setIsOpen(true);\n        setFocused(true);\n    };\n\n    const handleEndTime = (value: string) => {\n        setEndTimeVal(value);\n        onChange?.({ start: startTimeVal, end: value } as TimeRangePickerValue);\n\n        if (startTimeVal === \"\") {\n            setActive(\"start\");\n            setIsOpen(true);\n            setFocused(true);\n        } else {\n            handleClose({ keepFocus: true });\n        }\n    };\n\n    const renderElement = () => (\n        <TimeContainer\n            ref={nodeRef}\n            tabIndex={-1}\n            onBlur={handleContainerBlur}\n            data-testid=\"timepicker-container\"\n            role=\"group\"\n            $disabled={disabled}\n            $error={error}\n            $readOnly={readOnly}\n            $focused={focused}\n        >\n            <RangeInputInnerContainer error={error} currentActive={active}>\n                <SelectorInput\n                    onFocus={() => handleOpen(\"start\")}\n                    onClick={() => handleOpen(\"start\")}\n                    readOnly\n                    placeholder=\"From\"\n                    value={TimeHelper.formatDisplayValue(startTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n                            : \"timepicker-selector-from\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                    $disabled={disabled}\n                />\n                <SelectorInput\n                    onClick={() => handleOpen(\"end\")}\n                    readOnly\n                    placeholder=\"To\"\n                    value={TimeHelper.formatDisplayValue(endTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n                            : \"timepicker-selector-to\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid || undefined}\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                    $disabled={disabled}\n                />\n            </RangeInputInnerContainer>\n        </TimeContainer>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => {\n        if (!isOpen) return null;\n\n        return (\n            <div\n                ref={setFloatingRef}\n                style={styles}\n                role=\"dialog\"\n                key={active}\n                aria-label={getDropdownAriaLabel()}\n                {...getFloatingProps()}\n            >\n                {active === \"start\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-start` : undefined}\n                        show\n                        value={startTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: true })}\n                        onChange={handleStartTime}\n                    />\n                )}\n                {active === \"end\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-end` : undefined}\n                        show\n                        value={endTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: false })}\n                        onChange={handleEndTime}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <ElementWithDropdown\n                enabled={enabled}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onClose={() => handleClose({ keepFocus: false })}\n                onDismiss={() => handleClose({ keepFocus: true })}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </Wrapper>\n    );\n};\n"],"names":["DialPicker","_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","internalId","useId","startLabelId","endLabelId","getInputLabelledBy","type","concatIds","getInputDescribedBy","useEffect","start","end","handleOpen","next","handleClose","opts","keepFocus","triggerBlur","_b","current","focus","handleContainerBlur","event","target","relatedTarget","isFloatingElement","matches","call","_c","contains","handleStartTime","handleEndTime","_jsx","Wrapper","Object","assign","children","ElementWithDropdown","renderElement","TimeContainer","ref","tabIndex","role","$error","$readOnly","_jsxs","RangeInputInnerContainer","currentActive","SelectorInput","onClick","placeholder","TimeHelper","formatDisplayValue","$disabled","undefined","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"dial-picker.js","sources":["../../../src/time-range-picker/dial-picker/dial-picker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { concatIds } from \"../../shared/accessibility\";\nimport type { DropdownRenderProps } from \"../../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../../shared/input-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { TimepickerDropdown } from \"../../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as styles from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\n\ntype Active = \"start\" | \"end\" | \"none\";\n\nexport const DialPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"24hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [active, setActive] = useState<Active>(\"none\");\n    const [startTimeVal, setStartTimeVal] = useState(\"\");\n    const [endTimeVal, setEndTimeVal] = useState(\"\");\n    const [focused, setFocused] = useState(false);\n\n    const enabled = !readOnly && !disabled;\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (active === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (active === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: Exclude<Active, \"none\">) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(ariaDescribedBy);\n    };\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (value) {\n            setStartTimeVal(value.start);\n            setEndTimeVal(value.end);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = (next: Exclude<Active, \"none\">) => {\n        if (!enabled) return;\n        if (!focused && !isOpen) onFocus?.();\n        setFocused(true);\n        setActive(next);\n        setIsOpen(true);\n    };\n\n    const handleClose = (opts?: {\n        keepFocus?: boolean;\n        triggerBlur?: boolean;\n    }) => {\n        const keepFocus = !!opts?.keepFocus;\n        const triggerBlur = opts?.triggerBlur ?? !keepFocus;\n\n        setIsOpen(false);\n        setActive(\"none\");\n        setFocused(keepFocus);\n\n        if (triggerBlur) onBlur?.();\n\n        if (keepFocus) nodeRef.current?.focus();\n    };\n\n    const handleContainerBlur = (\n        event: React.FocusEvent<HTMLDivElement, Element>\n    ) => {\n        if (!focused || isOpen) return;\n\n        const target = event.relatedTarget as HTMLElement | null;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode = !!(target && nodeRef.current?.contains(target));\n\n        if (!isInsideNode && !isFloatingElement) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleStartTime = (value: string) => {\n        setStartTimeVal(value);\n        onChange?.({ start: value, end: endTimeVal } as TimeRangePickerValue);\n\n        setActive(\"end\");\n        setIsOpen(true);\n        setFocused(true);\n    };\n\n    const handleEndTime = (value: string) => {\n        setEndTimeVal(value);\n        onChange?.({ start: startTimeVal, end: value } as TimeRangePickerValue);\n\n        if (startTimeVal === \"\") {\n            setActive(\"start\");\n            setIsOpen(true);\n            setFocused(true);\n        } else {\n            handleClose({ keepFocus: true });\n        }\n    };\n\n    const renderElement = () => (\n        <InputWrapper\n            ref={nodeRef}\n            tabIndex={-1}\n            onBlur={handleContainerBlur}\n            data-testid=\"timepicker-container\"\n            role=\"group\"\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            focused={focused}\n            className={styles.timeContainer}\n        >\n            <RangeInputInnerContainer error={error} currentActive={active}>\n                <BasicInput\n                    onFocus={() => handleOpen(\"start\")}\n                    onClick={() => handleOpen(\"start\")}\n                    readOnly\n                    placeholder=\"From\"\n                    value={TimeHelper.formatDisplayValue(startTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n                            : \"timepicker-selector-from\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                    className={clsx(\n                        styles.selectorInput,\n                        disabled && styles.selectorInputDisabled\n                    )}\n                />\n                <BasicInput\n                    onClick={() => handleOpen(\"end\")}\n                    readOnly\n                    placeholder=\"To\"\n                    value={TimeHelper.formatDisplayValue(endTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n                            : \"timepicker-selector-to\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid || undefined}\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                    className={clsx(\n                        styles.selectorInput,\n                        disabled && styles.selectorInputDisabled\n                    )}\n                />\n            </RangeInputInnerContainer>\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => {\n        if (!isOpen) return null;\n\n        return (\n            <div\n                ref={setFloatingRef}\n                style={styles}\n                role=\"dialog\"\n                key={active}\n                aria-label={getDropdownAriaLabel()}\n                {...getFloatingProps()}\n            >\n                {active === \"start\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-start` : undefined}\n                        show\n                        value={startTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: true })}\n                        onChange={handleStartTime}\n                    />\n                )}\n                {active === \"end\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-end` : undefined}\n                        show\n                        value={endTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: false })}\n                        onChange={handleEndTime}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            id={id}\n            {...otherProps}\n            className={clsx(styles.wrapper, otherProps.className)}\n        >\n            <ElementWithDropdown\n                enabled={enabled}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onClose={() => handleClose({ keepFocus: false })}\n                onDismiss={() => handleClose({ keepFocus: true })}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </div>\n    );\n};\n"],"names":["DialPicker","_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","internalId","useId","startLabelId","endLabelId","getInputLabelledBy","type","concatIds","getInputDescribedBy","useEffect","start","end","handleOpen","next","handleClose","opts","keepFocus","triggerBlur","_b","current","focus","handleContainerBlur","event","target","relatedTarget","isFloatingElement","matches","call","_c","contains","handleStartTime","handleEndTime","_jsx","Object","assign","className","clsx","styles.wrapper","children","ElementWithDropdown","renderElement","InputWrapper","ref","tabIndex","role","styles.timeContainer","_jsxs","RangeInputInnerContainer","currentActive","BasicInput","onClick","placeholder","TimeHelper","formatDisplayValue","styles.selectorInput","styles.selectorInputDisabled","undefined","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"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"}

package/time-range-picker/time-range-picker.d.ts

@@ -1,2 +1,8 @@
-import { TimeRangePickerProps } from "./types";
+import type { TimeRangePickerProps } from "./types";
+/**
+ * A two-field time picker for selecting a start and end time.
+ *
+ * Use `TimeRangePicker` when users need to define a time range.
+ * @keywords duration, end time, field, form, input, interval, start time
+ */
 export declare const TimeRangePicker: ({ variant, ...otherProps }: TimeRangePickerProps) => import("react/jsx-runtime").JSX.Element;

package/time-range-picker/time-range-picker.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import{DialPicker as i}from"./dial-picker/dial-picker.js";import{ComboboxPicker as t}from"./combobox-picker/combobox-picker.js";const m=m=>{var{variant:a="dial"}=m,c=r(m,["variant"]);return o("combobox"===a?t:i,Object.assign({},c))};export{m as TimeRangePicker};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsx as o}from"react/jsx-runtime";import{ComboboxPicker as i}from"./combobox-picker/combobox-picker.js";import{DialPicker as t}from"./dial-picker/dial-picker.js";const m=m=>{var{variant:a="dial"}=m,c=r(m,["variant"]);return o("combobox"===a?i:t,Object.assign({},c))};export{m as TimeRangePicker};
 //# sourceMappingURL=time-range-picker.js.map

package/time-range-picker/time-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-range-picker.js","sources":["../../src/time-range-picker/time-range-picker.tsx"],"sourcesContent":["import { DialPicker } from \"./dial-picker/dial-picker\";\nimport { ComboboxPicker } from \"./combobox-picker/combobox-picker\";\nimport { TimeRangePickerProps } from \"./types\";\n\nexport const TimeRangePicker = ({\n    variant = \"dial\",\n    ...otherProps\n}: TimeRangePickerProps) => {\n    if (variant === \"combobox\") {\n        return <ComboboxPicker {...otherProps} />;\n    } else {\n        return <DialPicker {...otherProps} />;\n    }\n};\n"],"names":["TimeRangePicker","_a","variant","otherProps","__rest","_jsx","ComboboxPicker","DialPicker","Object","assign"],"mappings":"uNAIO,MAAMA,EAAmBC,QAAAC,QAC5BA,EAAU,QAAMD,EACbE,EAAUC,EAAAH,EAFe,aAI5B,OACWI,EADK,aAAZH,EACQI,EAEAC,EAFcC,OAAAC,OAAA,CAAA,EAAKN,GAG/B"}
+{"version":3,"file":"time-range-picker.js","sources":["../../src/time-range-picker/time-range-picker.tsx"],"sourcesContent":["import { ComboboxPicker } from \"./combobox-picker/combobox-picker\";\nimport { DialPicker } from \"./dial-picker/dial-picker\";\nimport type { TimeRangePickerProps } from \"./types\";\n\n// @catalog\n/**\n * A two-field time picker for selecting a start and end time.\n *\n * Use `TimeRangePicker` when users need to define a time range.\n * @keywords duration, end time, field, form, input, interval, start time\n */\nexport const TimeRangePicker = ({\n    variant = \"dial\",\n    ...otherProps\n}: TimeRangePickerProps) => {\n    if (variant === \"combobox\") {\n        return <ComboboxPicker {...otherProps} />;\n    } else {\n        return <DialPicker {...otherProps} />;\n    }\n};\n"],"names":["TimeRangePicker","_a","variant","otherProps","__rest","_jsx","ComboboxPicker","DialPicker","Object","assign"],"mappings":"uNAWO,MAAMA,EAAmBC,QAAAC,QAC5BA,EAAU,QAAMD,EACbE,EAAUC,EAAAH,EAFe,aAI5B,OACWI,EADK,aAAZH,EACQI,EAEAC,EAFcC,OAAAC,OAAA,CAAA,EAAKN,GAG/B"}

package/time-range-picker/types.d.ts

@@ -1,76 +1,136 @@
-import { RefObject } from "react";
-import { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+import type { RefObject } from "react";
+import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+/** Time display format: 12-hour clock or 24-hour clock. */
 export type TimeRangePickerFormat = "12hr" | "24hr";
+/**
+ * Picker interaction style.
+ *
+ * - `"dial"` renders a dial spinner input picker.
+ * - `"combobox"` renders scrollable dropdowns with configurable intervals.
+ */
 export type TimeRangePickerVariant = "dial" | "combobox";
+/**
+ * A selected time range represented as `start` and `end` time strings.
+ *
+ * Each field is either an empty string (no selection) or a formatted time
+ * string.
+ *
+ * - 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
+ * - 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
+ *
+ * Note: combobox variant uses "h:mma" instead.
+ */
 export interface TimeRangePickerValue {
     start: string;
     end: string;
 }
+/**
+ * Props for the `TimeRangePicker` component.
+ */
 export interface TimeRangePickerProps {
     className?: string | undefined;
     id?: string | undefined;
     style?: React.CSSProperties | undefined;
+    /**
+     * ID of an element that labels both start and end time inputs.
+     */
     "aria-labelledby"?: string | undefined;
+    /**
+     * ID of an element that describes both start and end time inputs.
+     */
     "aria-describedby"?: string | undefined;
     "aria-invalid"?: boolean | undefined;
     "data-testid"?: string | undefined;
     /**
      * An object with `start` and `end` values as an empty string or a
      * string based format.
-     *
-     * 24 hour uses "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
-     *
-     * 12 hour uses "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
-     *
-     * Note: combobox variant uses "h:mma" instead.
      */
     value?: TimeRangePickerValue | undefined;
     /**
-     * The time input format in `12hr` or `24hr`. Defaults to `24hr`
+     * The time display and input format.
+     *
+     * @default "24hr"
      */
     format?: TimeRangePickerFormat | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
     error?: boolean | undefined;
-    /** Specifies the variant for the time range picker */
+    /**
+     * The picker interaction style.
+     *
+     * @default "dial"
+     */
     variant?: TimeRangePickerVariant | undefined;
     /**
-     * Combobox variant specific attributes
+     * Minute interval between each option in the combobox dropdowns.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
      */
-    /** Specifies the interval (minutes) between each dropdown option */
     interval?: number | undefined;
-    /** Specifies the starting time for the dropdown options */
+    /**
+     * Earliest selectable time shown in the combobox dropdowns.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     startLimit?: string | undefined;
-    /** Specifies the ending time for the dropdown options */
+    /**
+     * Latest selectable time shown in the combobox dropdowns.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     endLimit?: string | undefined;
-    /** Specifies the initial start time to scroll to when the start dropdown opens */
+    /**
+     * The time that the start field dropdown scrolls to on open..
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     initialScrollStartTime?: string | undefined;
-    /** Specifies the initial end time to scroll to when the end dropdown opens */
+    /**
+     * The time that the end field dropdown scrolls to on open.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     initialScrollEndTime?: string | undefined;
-    /** Specifies the alignment of the dropdown to the left or right of the reference element */
+    /**
+     * Aligns the dropdown relative to the trigger element.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     alignment?: DropdownAlignmentType | undefined;
-    /** Specifies the z-index of the dropdown element */
+    /**
+     * CSS `z-index` applied to the dropdown overlay.
+     *
+     * @remarks Only applies when `variant` is `"combobox"`.
+     */
     dropdownZIndex?: number | undefined;
     /**
-     * Use this when the parent container has a higher z-index
-     * and the dropdown would otherwise be hidden.
+     * The root element that contains the dropdown element.
+     *
+     * @remarks
+     * Only applies when `variant` is `"combobox"`.
+     *
+     * Specify this if you need to change the parent of the dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
+     *
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Called when a selection is made. Returns an object with `start` and
-     * `end` values as an empty string or a string based format.
-     *
-     * 24 hour returns "hh:mm" e.g. `{ start: "13:00", end: "14:00" }`
+     * Called when the selected time range changes.
      *
-     * 12 hour returns "hh:mmA" e.g. `{ start: "01:00PM", end: "02:00PM" }`
+     * @param value The current `start` and `end` time strings. Each field is
+     * either an empty string or a formatted time string based on `format`.
      */
     onChange?: ((value: TimeRangePickerValue) => void) | undefined;
     /**
-     * Called when the field is focused
+     * Called when the field receives focus.
      */
     onFocus?: (() => void) | undefined;
     /**
-     * Called when a defocus is made on the field
+     * Called when the field loses focus.
      */
     onBlur?: (() => void) | undefined;
 }

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

@@ -1,24 +1,24 @@
-import { TimeSlot as TTimeSlot, TimeSlotBarVariant } from "./types";
-export declare namespace TimeSlotBarHelper {
+import type { TimeSlot as TTimeSlot, TimeSlotBarVariant } from "./types";
+export declare class TimeSlotBarHelper {
     /**
      * Format HH:mm to am/pm display
      * @param timeString input timeString string
      */
-    const formatHourlyDisplay: (timeString: string) => string;
+    static formatHourlyDisplay(timeString: string): string;
     /**
      * Calculate width in px base on the time range in respect the cell width
      * @param start input start string
      * @param end input end string
      * @param cellWidth input cellWidth number
      */
-    const calculateWidth: (start: string, end: string, cellWidth: number) => number;
+    static calculateWidth(start: string, end: string, cellWidth: number): number;
     /**
      * Based on the time type, adjust the time to the nearest hour or 30 minuites marker.
      * this helps to always show time slot marker properly.
      * @param time - time to be adjusted
      * @param type - "start" or "end" indicating which boundary to adjust
      */
-    const adjustTimeForMarker: (time: string, type: "start" | "end") => string;
+    static adjustTimeForMarker(time: string, type: "start" | "end"): string;
     /**
      * Process raw slots and any gaps in the given time range.
      *
@@ -32,13 +32,14 @@ export declare namespace TimeSlotBarHelper {
      * @param variant - display variant controlling summary and aria label behavior.
      * @returns summary for container aria-label and computed slots ready for rendering.
      */
-    const processSlots: (range: {
+    static processSlots(range: {
         start: string;
         end: string;
-    }, slots: TTimeSlot[], variant: TimeSlotBarVariant) => {
+    }, slots: TTimeSlot[], variant: TimeSlotBarVariant): {
         summary: string;
         computedSlots: (TTimeSlot & {
             ariaLabel?: string;
         })[];
     };
 }
+export declare const getCellWidth: (variant: TimeSlotBarVariant) => 12 | 40;

package/time-slot-bar/helper.js

@@ -1,2 +1,2 @@
-import t from"../external/dayjs/dayjs.min.js";import e from"../external/dayjs/plugin/customParseFormat.js";import"../util/calendar-helper.js";import{DateHelper as r}from"../util/date-helper.js";import"../util/date-input-helper.js";import"react";import{SimpleIdGenerator as i}from"../util/simple-id-generator.js";import{StringHelper as a}from"../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as m}from"../util/time-helper.js";var n;t.extend(e),function(t){t.avail="Available",t.unavail="Unavailable"}(n||(n={}));const s=(t,e,r)=>({id:r,startTime:t,endTime:e,clickable:!1,label:void 0,styleAttributes:{backgroundColor:"transparent"}});var o;!function(e){e.formatHourlyDisplay=e=>t(e,"HH:mm").format("ha"),e.calculateWidth=(t,e,i)=>r.getTimeDiffInMinutes(t,e)/15*(i/2),e.adjustTimeForMarker=(e,r)=>{const i=t(e,"HH:mm");switch(r){case"start":if(i.minute()>0&&i.minute()<30)return i.set("minute",0).format("HH:mm");if(i.minute()>30&&i.minute()<60)return i.set("minute",30).format("HH:mm");break;case"end":if(i.minute()>0&&i.minute()<30)return i.set("minute",30).format("HH:mm");if(i.minute()>30&&i.minute()<60){const t=i.add(1,"hour");return 0===t.hour()?"24:00":t.set("minute",0).format("HH:mm")}break;default:return e}return e},e.processSlots=(e,r,o)=>{const u=["Time slot bar"],l=[],c=t=>{var e;const r=(i=t.startTime,s=t.endTime,c=null===(e=t.clickable)||void 0===e||e,d=t.label,a.joinNonEmptyStrings([m.formatTimeRange(i,s),c?n.avail:n.unavail,d]));var i,s,c,d;"minified"===o&&u.push(r),l.push(Object.assign(Object.assign({},t),{ariaLabel:"default"===o?r:void 0}))};if(r.length<1){const t=s(e.start,e.end,i.generate());return c(t),{summary:a.joinNonEmptyStrings(u),computedSlots:l}}const d=[...r].sort(((e,r)=>{const i=t(e.startTime,"HH:mm"),a=t(r.startTime,"HH:mm");return i.isBefore(a)?-1:i.isAfter(a)?1:0}));if(!m.isSameTime(e.start,d[0].startTime)){const t=s(e.start,d[0].startTime,i.generate());c(t)}d.forEach(((t,e,r)=>{var a;c(t);const{endTime:n}=t,{startTime:o}=null!==(a=r[e+1])&&void 0!==a?a:{};if(o&&!m.isSameTime(n,o)){const t=s(n,o,i.generate());c(t)}}));const f=d[d.length-1];if(!m.isSameTime(e.end,f.endTime)){const t=s(f.endTime,e.end,i.generate());c(t)}return{summary:a.joinNonEmptyStrings(u),computedSlots:l}}}(o||(o={}));export{o as TimeSlotBarHelper};
+import t from"../external/dayjs/dayjs.min.js";import e from"../external/dayjs/plugin/customParseFormat.js";import"../util/calendar-helper.js";import{DateHelper as r}from"../util/date-helper.js";import"react";import{SimpleIdGenerator as i}from"../util/simple-id-generator.js";import{StringHelper as a}from"../util/string-helper.js";import"@react-aria/live-announcer";import{TimeHelper as m}from"../util/time-helper.js";import{MINIFIED_CELL_SIZE as n,DEFAULT_CELL_SIZE as s}from"./time-slot-bar.styles.js";var o;t.extend(e),function(t){t.avail="Available",t.unavail="Unavailable"}(o||(o={}));const l=(t,e,r)=>({id:r,startTime:t,endTime:e,clickable:!1,label:void 0,styleAttributes:{backgroundColor:"transparent"}});class u{static formatHourlyDisplay(e){return t(e,"HH:mm").format("ha")}static calculateWidth(t,e,i){return r.getTimeDiffInMinutes(t,e)/15*(i/2)}static adjustTimeForMarker(e,r){const i=t(e,"HH:mm");switch(r){case"start":if(i.minute()>0&&i.minute()<30)return i.set("minute",0).format("HH:mm");if(i.minute()>30&&i.minute()<60)return i.set("minute",30).format("HH:mm");break;case"end":if(i.minute()>0&&i.minute()<30)return i.set("minute",30).format("HH:mm");if(i.minute()>30&&i.minute()<60){const t=i.add(1,"hour");return 0===t.hour()?"24:00":t.set("minute",0).format("HH:mm")}break;default:return e}return e}static processSlots(e,r,n){const s=["Time slot bar"],u=[],c=t=>{var e;const r=(i=t.startTime,l=t.endTime,c=null===(e=t.clickable)||void 0===e||e,d=t.label,a.joinNonEmptyStrings([m.formatTimeRange(i,l),c?o.avail:o.unavail,d]));var i,l,c,d;"minified"===n&&s.push(r),u.push(Object.assign(Object.assign({},t),{ariaLabel:"default"===n?r:void 0}))};if(r.length<1){const t=l(e.start,e.end,i.generate());return c(t),{summary:a.joinNonEmptyStrings(s),computedSlots:u}}const d=[...r].sort(((e,r)=>{const i=t(e.startTime,"HH:mm"),a=t(r.startTime,"HH:mm");return i.isBefore(a)?-1:i.isAfter(a)?1:0}));if(!m.isSameTime(e.start,d[0].startTime)){const t=l(e.start,d[0].startTime,i.generate());c(t)}d.forEach(((t,e,r)=>{var a;c(t);const{endTime:n}=t,{startTime:s}=null!==(a=r[e+1])&&void 0!==a?a:{};if(s&&!m.isSameTime(n,s)){const t=l(n,s,i.generate());c(t)}}));const f=d[d.length-1];if(!m.isSameTime(e.end,f.endTime)){const t=l(f.endTime,e.end,i.generate());c(t)}return{summary:a.joinNonEmptyStrings(s),computedSlots:u}}}const c=t=>"minified"===t?n:s;export{u as TimeSlotBarHelper,c as getCellWidth};
 //# sourceMappingURL=helper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../src/time-slot-bar/helper.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport { DateHelper, SimpleIdGenerator, StringHelper } from \"src/util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { TimeSlot as TTimeSlot, TimeSlotBarVariant } from \"./types\";\n// Load plugins\ndayjs.extend(customParseFormat);\n\n// ===========================================================================\n// INTERNAL TYPES\n// ===========================================================================\n\nenum ESlotStateLabel {\n    avail = \"Available\",\n    unavail = \"Unavailable\",\n}\n\n// ===========================================================================\n// INTERNAL HELPERS\n// ===========================================================================\n\nconst getSlotAriaLabel = (\n    slotStartTime: string,\n    slotEndTime: string,\n    isAvail?: boolean,\n    label?: string\n) =>\n    StringHelper.joinNonEmptyStrings([\n        TimeHelper.formatTimeRange(slotStartTime, slotEndTime),\n        isAvail ? ESlotStateLabel.avail : ESlotStateLabel.unavail,\n        label,\n    ]);\n\nconst buildUnavailableSlot = (\n    startTime: string,\n    endTime: string,\n    id: string\n): TTimeSlot & { ariaLabel?: string } => ({\n    id,\n    startTime,\n    endTime,\n    clickable: false,\n    label: undefined,\n    styleAttributes: { backgroundColor: \"transparent\" },\n});\n\n// ===========================================================================\n// HELPER FUNCTIONS\n// ===========================================================================\n\nexport namespace TimeSlotBarHelper {\n    /**\n     * Format HH:mm to am/pm display\n     * @param timeString input timeString string\n     */\n    export const formatHourlyDisplay = (timeString: string) => {\n        const parsedTime = dayjs(timeString, \"HH:mm\");\n        return parsedTime.format(\"ha\");\n    };\n\n    /**\n     * Calculate width in px base on the time range in respect the cell width\n     * @param start input start string\n     * @param end input end string\n     * @param cellWidth input cellWidth number\n     */\n    export const calculateWidth = (\n        start: string,\n        end: string,\n        cellWidth: number\n    ) => {\n        /**\n         * Each CELL_WIDTH is 30min interval\n         * Assuming 15 minutes corresponds to a fixed width of x cellWidth pixels (1/2 of CELL_WIDTH)\n         */\n        return (\n            (DateHelper.getTimeDiffInMinutes(start, end) / 15) * (cellWidth / 2)\n        );\n    };\n\n    /**\n     * Based on the time type, adjust the time to the nearest hour or 30 minuites marker.\n     * this helps to always show time slot marker properly.\n     * @param time - time to be adjusted\n     * @param type - \"start\" or \"end\" indicating which boundary to adjust\n     */\n    export const adjustTimeForMarker = (\n        time: string,\n        type: \"start\" | \"end\"\n    ): string => {\n        const parsedTime = dayjs(time, \"HH:mm\");\n        switch (type) {\n            case \"start\": {\n                // For xx:01 to xx:29, adjust to xx:00\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to xx:30\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                break;\n            }\n            case \"end\": {\n                // For xx:01 to xx:29, adjust to xx:30\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to next hour xx:00\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    const nextHour = parsedTime.add(1, \"hour\");\n                    // If it's 23:xx and rounds up to 24:00\n                    if (nextHour.hour() === 0) {\n                        return \"24:00\";\n                    }\n                    return nextHour.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                break;\n            }\n            default:\n                return time;\n        }\n        return time;\n    };\n\n    /**\n     * Process raw slots and any gaps in the given time range.\n     *\n     * Builds a summary string and a list of slots that includes:\n     * - original slots,\n     * - leading/trailing unavailable time gaps,\n     * - gap slots inserted between non-contiguous slots.\n     *\n     * @param range - start/end bounds for the timeslot bar.\n     * @param slots - user-provided slots to render.\n     * @param variant - display variant controlling summary and aria label behavior.\n     * @returns summary for container aria-label and computed slots ready for rendering.\n     */\n    export const processSlots = (\n        range: { start: string; end: string },\n        slots: TTimeSlot[],\n        variant: TimeSlotBarVariant\n    ) => {\n        const summaryParts: string[] = [\"Time slot bar\"];\n        // Build visible slots plus any unavailable gaps\n        const computedSlots: (TTimeSlot & {\n            ariaLabel?: string;\n        })[] = [];\n\n        const createAriaLabelAndPushSlot = (slot: TTimeSlot) => {\n            const ariaLabel = getSlotAriaLabel(\n                slot.startTime,\n                slot.endTime,\n                slot.clickable ?? true,\n                slot.label\n            );\n\n            if (variant === \"minified\") summaryParts.push(ariaLabel);\n            computedSlots.push({\n                ...slot,\n                ariaLabel: variant === \"default\" ? ariaLabel : undefined,\n            });\n        };\n\n        if (slots.length < 1) {\n            // No real slots: represent the whole range as unavailable\n            const fullUnavailSlot = buildUnavailableSlot(\n                range.start,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(fullUnavailSlot);\n\n            return {\n                summary: StringHelper.joinNonEmptyStrings(summaryParts),\n                computedSlots,\n            };\n        }\n\n        const sortedSlots = [...slots].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n\n        if (!TimeHelper.isSameTime(range.start, sortedSlots[0].startTime)) {\n            // Add leading unavailable gap before the first slot\n            const leadingUnavailSlot = buildUnavailableSlot(\n                range.start,\n                sortedSlots[0].startTime,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(leadingUnavailSlot);\n        }\n\n        sortedSlots.forEach((slot, index, self) => {\n            createAriaLabelAndPushSlot(slot);\n\n            const { endTime: slotEndTime } = slot;\n            const { startTime: nextSlotStartTime } = self[index + 1] ?? {};\n            const hasGapAfter =\n                nextSlotStartTime &&\n                !TimeHelper.isSameTime(slotEndTime, nextSlotStartTime);\n\n            if (hasGapAfter) {\n                // Add a gap slot between consecutive slots if non-contiguous\n                const unavailSlot = buildUnavailableSlot(\n                    slotEndTime,\n                    nextSlotStartTime,\n                    SimpleIdGenerator.generate()\n                );\n                createAriaLabelAndPushSlot(unavailSlot);\n            }\n        });\n\n        const lastSlot = sortedSlots[sortedSlots.length - 1];\n        if (!TimeHelper.isSameTime(range.end, lastSlot.endTime)) {\n            // Add trailing unavailable gap after the last slot\n            const trailingUnavailSlot = buildUnavailableSlot(\n                lastSlot.endTime,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(trailingUnavailSlot);\n        }\n\n        return {\n            summary: StringHelper.joinNonEmptyStrings(summaryParts),\n            computedSlots,\n        };\n    };\n}\n"],"names":["ESlotStateLabel","dayjs","extend","customParseFormat","buildUnavailableSlot","startTime","endTime","id","clickable","label","undefined","styleAttributes","backgroundColor","TimeSlotBarHelper","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour","processSlots","range","slots","variant","summaryParts","computedSlots","createAriaLabelAndPushSlot","slot","ariaLabel","slotStartTime","slotEndTime","isAvail","_a","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","avail","unavail","push","Object","assign","length","fullUnavailSlot","SimpleIdGenerator","generate","summary","sortedSlots","sort","a","b","timeA","timeB","isBefore","isAfter","isSameTime","leadingUnavailSlot","forEach","index","self","nextSlotStartTime","unavailSlot","lastSlot","trailingUnavailSlot"],"mappings":"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"}
+{"version":3,"file":"helper.js","sources":["../../src/time-slot-bar/helper.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport { DateHelper, SimpleIdGenerator, StringHelper } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlot as TTimeSlot, TimeSlotBarVariant } from \"./types\";\n// Load plugins\ndayjs.extend(customParseFormat);\n\n// ===========================================================================\n// INTERNAL TYPES\n// ===========================================================================\n\nenum ESlotStateLabel {\n    avail = \"Available\",\n    unavail = \"Unavailable\",\n}\n\n// ===========================================================================\n// INTERNAL HELPERS\n// ===========================================================================\n\nconst getSlotAriaLabel = (\n    slotStartTime: string,\n    slotEndTime: string,\n    isAvail?: boolean,\n    label?: string\n) =>\n    StringHelper.joinNonEmptyStrings([\n        TimeHelper.formatTimeRange(slotStartTime, slotEndTime),\n        isAvail ? ESlotStateLabel.avail : ESlotStateLabel.unavail,\n        label,\n    ]);\n\nconst buildUnavailableSlot = (\n    startTime: string,\n    endTime: string,\n    id: string\n): TTimeSlot & { ariaLabel?: string } => ({\n    id,\n    startTime,\n    endTime,\n    clickable: false,\n    label: undefined,\n    styleAttributes: { backgroundColor: \"transparent\" },\n});\n\n// ===========================================================================\n// HELPER FUNCTIONS\n// ===========================================================================\n\nexport class TimeSlotBarHelper {\n    /**\n     * Format HH:mm to am/pm display\n     * @param timeString input timeString string\n     */\n    public static formatHourlyDisplay(timeString: string): string {\n        const parsedTime = dayjs(timeString, \"HH:mm\");\n        return parsedTime.format(\"ha\");\n    }\n\n    /**\n     * Calculate width in px base on the time range in respect the cell width\n     * @param start input start string\n     * @param end input end string\n     * @param cellWidth input cellWidth number\n     */\n    public static calculateWidth(\n        start: string,\n        end: string,\n        cellWidth: number\n    ): number {\n        /**\n         * Each CELL_WIDTH is 30min interval\n         * Assuming 15 minutes corresponds to a fixed width of x cellWidth pixels (1/2 of CELL_WIDTH)\n         */\n        return (\n            (DateHelper.getTimeDiffInMinutes(start, end) / 15) * (cellWidth / 2)\n        );\n    }\n\n    /**\n     * Based on the time type, adjust the time to the nearest hour or 30 minuites marker.\n     * this helps to always show time slot marker properly.\n     * @param time - time to be adjusted\n     * @param type - \"start\" or \"end\" indicating which boundary to adjust\n     */\n    public static adjustTimeForMarker(\n        time: string,\n        type: \"start\" | \"end\"\n    ): string {\n        const parsedTime = dayjs(time, \"HH:mm\");\n        switch (type) {\n            case \"start\": {\n                // For xx:01 to xx:29, adjust to xx:00\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to xx:30\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                break;\n            }\n            case \"end\": {\n                // For xx:01 to xx:29, adjust to xx:30\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to next hour xx:00\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    const nextHour = parsedTime.add(1, \"hour\");\n                    // If it's 23:xx and rounds up to 24:00\n                    if (nextHour.hour() === 0) {\n                        return \"24:00\";\n                    }\n                    return nextHour.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                break;\n            }\n            default:\n                return time;\n        }\n        return time;\n    }\n\n    /**\n     * Process raw slots and any gaps in the given time range.\n     *\n     * Builds a summary string and a list of slots that includes:\n     * - original slots,\n     * - leading/trailing unavailable time gaps,\n     * - gap slots inserted between non-contiguous slots.\n     *\n     * @param range - start/end bounds for the timeslot bar.\n     * @param slots - user-provided slots to render.\n     * @param variant - display variant controlling summary and aria label behavior.\n     * @returns summary for container aria-label and computed slots ready for rendering.\n     */\n    public static processSlots(\n        range: { start: string; end: string },\n        slots: TTimeSlot[],\n        variant: TimeSlotBarVariant\n    ) {\n        const summaryParts: string[] = [\"Time slot bar\"];\n        // Build visible slots plus any unavailable gaps\n        const computedSlots: (TTimeSlot & {\n            ariaLabel?: string;\n        })[] = [];\n\n        const createAriaLabelAndPushSlot = (slot: TTimeSlot) => {\n            const ariaLabel = getSlotAriaLabel(\n                slot.startTime,\n                slot.endTime,\n                slot.clickable ?? true,\n                slot.label\n            );\n\n            if (variant === \"minified\") summaryParts.push(ariaLabel);\n            computedSlots.push({\n                ...slot,\n                ariaLabel: variant === \"default\" ? ariaLabel : undefined,\n            });\n        };\n\n        if (slots.length < 1) {\n            // No real slots: represent the whole range as unavailable\n            const fullUnavailSlot = buildUnavailableSlot(\n                range.start,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(fullUnavailSlot);\n\n            return {\n                summary: StringHelper.joinNonEmptyStrings(summaryParts),\n                computedSlots,\n            };\n        }\n\n        const sortedSlots = [...slots].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n\n        if (!TimeHelper.isSameTime(range.start, sortedSlots[0].startTime)) {\n            // Add leading unavailable gap before the first slot\n            const leadingUnavailSlot = buildUnavailableSlot(\n                range.start,\n                sortedSlots[0].startTime,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(leadingUnavailSlot);\n        }\n\n        sortedSlots.forEach((slot, index, self) => {\n            createAriaLabelAndPushSlot(slot);\n\n            const { endTime: slotEndTime } = slot;\n            const { startTime: nextSlotStartTime } = self[index + 1] ?? {};\n            const hasGapAfter =\n                nextSlotStartTime &&\n                !TimeHelper.isSameTime(slotEndTime, nextSlotStartTime);\n\n            if (hasGapAfter) {\n                // Add a gap slot between consecutive slots if non-contiguous\n                const unavailSlot = buildUnavailableSlot(\n                    slotEndTime,\n                    nextSlotStartTime,\n                    SimpleIdGenerator.generate()\n                );\n                createAriaLabelAndPushSlot(unavailSlot);\n            }\n        });\n\n        const lastSlot = sortedSlots[sortedSlots.length - 1];\n        if (!TimeHelper.isSameTime(range.end, lastSlot.endTime)) {\n            // Add trailing unavailable gap after the last slot\n            const trailingUnavailSlot = buildUnavailableSlot(\n                lastSlot.endTime,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(trailingUnavailSlot);\n        }\n\n        return {\n            summary: StringHelper.joinNonEmptyStrings(summaryParts),\n            computedSlots,\n        };\n    }\n}\n\n// Function to get the width of a cell in px\nexport const getCellWidth = (variant: TimeSlotBarVariant) => {\n    return variant === \"minified\"\n        ? styles.MINIFIED_CELL_SIZE\n        : styles.DEFAULT_CELL_SIZE;\n};\n"],"names":["ESlotStateLabel","dayjs","extend","customParseFormat","buildUnavailableSlot","startTime","endTime","id","clickable","label","undefined","styleAttributes","backgroundColor","TimeSlotBarHelper","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour","processSlots","range","slots","variant","summaryParts","computedSlots","createAriaLabelAndPushSlot","slot","ariaLabel","slotStartTime","slotEndTime","isAvail","_a","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","avail","unavail","push","Object","assign","length","fullUnavailSlot","SimpleIdGenerator","generate","summary","sortedSlots","sort","a","b","timeA","timeB","isBefore","isAfter","isSameTime","leadingUnavailSlot","forEach","index","self","nextSlotStartTime","unavailSlot","lastSlot","trailingUnavailSlot","getCellWidth","styles.MINIFIED_CELL_SIZE","styles.DEFAULT_CELL_SIZE"],"mappings":"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"}

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

@@ -0,0 +1 @@
+export type Direction = "right" | "left";

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

@@ -1,2 +1,10 @@
-import { TimeSlotBarProps, TimeSlotBarRef } from "./types";
+import type { TimeSlotBarProps, TimeSlotBarRef } from "./types";
+/**
+ * A horizontally scrollable timeline bar that visualises time slots across a
+ * defined time range.
+ *
+ * Use `TimeSlotBar` to display availability, bookings, or schedule occupancy
+ * as coloured cells on a shared time axis.
+ * @keywords availability, booking, occupancy, reservation, schedule
+ */
 export declare const TimeSlotBar: (props: TimeSlotBarProps & import("react").RefAttributes<TimeSlotBarRef>) => React.ReactElement | null;