@codeandfunction/callaloo 5.9.0 → 5.11.0

package/dist/components/Form/utils.d.ts

@@ -66,4 +66,14 @@ export declare const selectTheme: ({ color, variant, theme }: ThemeProps) => {
 export declare const calendarTheme: (theme?: ThemeContext) => {
     '--clll-calendar-content-bg': string;
 };
+export declare const timePickerTheme: ({ color, theme }: ThemeProps) => {
+    '--clll-time-picker-bg': string;
+    '--clll-time-picker-input-bg': string;
+    '--clll-time-picker-text': string;
+    '--clll-time-picker-sublabel': string;
+    '--clll-time-picker-border': string;
+    '--clll-time-picker-active-border': string;
+    '--clll-time-picker-active-bg': string;
+    '--clll-time-picker-active-text': string;
+};
 export {};

package/dist/components/Indicators/CLBadge/CLBadge.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLBadge.css';
-import{defineComponent as t,computed as a,createElementBlock as e,openBlock as l,normalizeStyle as r,normalizeClass as s,unref as d,createElementVNode as o,toDisplayString as i}from"vue";import{c as n,d as u}from"../../../chunks/index-C_yUYGq9.js";import{b as c}from"../../../chunks/utils-BTCQeV7Y.js";const m=["data-testid"],f=/* @__PURE__ */t({name:"CLBadge",__name:"CLBadge",props:{borderRadius:{},color:{default:u.Neutral},elevated:{type:Boolean,default:!1},label:{},limit:{},testId:{default:"clll-badge"},variant:{default:n.Soft}},setup(t){const n=t,u="clll-badge",f=a(()=>{const t=n.limit??0,a=n.label??"";return t&&a.toString().length>t?`${a.toString().slice(0,t)}+`:a}),p=a(()=>[u,n.borderRadius?`${u}--${n.borderRadius}`:"",n.elevated?`${u}--elevated`:"",`${u}--${n.color}--${n.variant}`]);return(a,n)=>(l(),e("div",{class:s(d(p)),"data-testid":t.testId,style:r(d(c)({color:t.color,variant:t.variant}))},[o("span",{class:s(`${u}__count`)},i(d(f)),3)],14,m))}});export{f as CLBadge,f as default};
+import{defineComponent as t,computed as a,createElementBlock as e,openBlock as l,normalizeStyle as r,normalizeClass as s,unref as d,createElementVNode as o,toDisplayString as i}from"vue";import{c as n,d as u}from"../../../chunks/index-CGlfDAYR.js";import{b as c}from"../../../chunks/utils-iQnJybN9.js";const m=["data-testid"],f=/* @__PURE__ */t({name:"CLBadge",__name:"CLBadge",props:{borderRadius:{},color:{default:u.Neutral},elevated:{type:Boolean,default:!1},label:{},limit:{},testId:{default:"clll-badge"},variant:{default:n.Soft}},setup(t){const n=t,u="clll-badge",f=a(()=>{const t=n.limit??0,a=n.label??"";return t&&a.toString().length>t?`${a.toString().slice(0,t)}+`:a}),p=a(()=>[u,n.borderRadius?`${u}--${n.borderRadius}`:"",n.elevated?`${u}--elevated`:"",`${u}--${n.color}--${n.variant}`]);return(a,n)=>(l(),e("div",{class:s(d(p)),"data-testid":t.testId,style:r(d(c)({color:t.color,variant:t.variant}))},[o("span",{class:s(`${u}__count`)},i(d(f)),3)],14,m))}});export{f as CLBadge,f as default};

package/dist/components/Indicators/CLBanner/CLBanner.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLBanner.css';
-import{defineComponent as e,computed as a,createBlock as t,openBlock as o,unref as i,withCtx as s,createElementVNode as n,normalizeStyle as l,normalizeClass as r,createElementBlock as d,createCommentVNode as u,createTextVNode as c,toDisplayString as _,createVNode as b}from"vue";import{_ as y}from"../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-f1fPKzcG.js";import{_ as m}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-CjZJuMsj.js";import{_ as k}from"../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-8r8ehDQf.js";import{_ as f}from"../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-BwASexqS.js";import{_ as p}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-CkTc30tw.js";import{c as v,d as g,i as h,k as $,a as L,C,e as x,f as B}from"../../../chunks/index-C_yUYGq9.js";import{a as j}from"../../../chunks/utils-BTCQeV7Y.js";const S=["data-testid"],D=/* @__PURE__ */e({name:"CLBanner",__name:"CLBanner",props:{actionLabel:{},align:{default:h.Left},ariaLabel:{},bordered:{type:Boolean,default:!0},borderRadius:{},busy:{type:Boolean,default:!1},color:{default:g.Neutral},height:{default:"auto"},message:{},onAction:{},onClick:{},onDismiss:{},rounded:{type:Boolean,default:!0},testId:{default:"clll-banner"},title:{},width:{default:"100%"},variant:{default:v.Soft}},setup(e){const g=e,h="clll-banner",D=a(()=>[h,g.actionLabel?`${h}--actionable`:"",g.busy?`${h}--busy`:`${h}--ready`,g.bordered&&g.variant!==v.Ghost?`${h}--bordered`:"",g.borderRadius?`${h}--${g.borderRadius}`:"",g.onDismiss?`${h}--dismissable`:"",`${h}--${g.color}--${g.variant}`,`${h}--align-${g.align}`,g.rounded?`${h}--rounded`:`${h}--box`]);return(a,g)=>(o(),t(i(y),{color:e.color,enabled:!(!e.onClick||!e.ariaLabel),rounded:e.rounded},{default:s(()=>[n("div",{class:r(i(D)),"data-testid":e.testId,style:l({...i(j)({color:e.color,variant:e.variant}),width:e.width,height:e.height})},[n("div",{class:r(`${h}__content`)},[n("div",{class:r(`${h}__nested_content`)},[e.busy?(o(),t(i(f),{key:0,"border-radius":e.borderRadius,height:"28px","test-id":`${h}__skeleton-title`},null,8,["border-radius","test-id"])):u("",!0),e.busy?(o(),t(i(f),{key:1,"border-radius":e.borderRadius,width:"70%",height:"20px","test-id":`${h}__skeleton-message`},null,8,["border-radius","test-id"])):u("",!0),e.title&&!e.busy?(o(),t(i(k),{key:2,align:e.align,color:e.color,type:i($).Section},{default:s(()=>[c(_(e.title),1)]),_:1},8,["align","color","type"])):u("",!0),e.message&&!e.busy?(o(),t(i(p),{key:3,align:e.align,color:e.color,type:i(L).Summary},{default:s(()=>[c(_(e.message),1)]),_:1},8,["align","color","type"])):u("",!0)],2),e.onAction&&e.actionLabel?(o(),d("div",{key:0,class:r(`${h}__action-button`)},[b(i(m),{color:e.color,"border-radius":e.borderRadius,"on-click":e.onAction,"test-id":`${h}__action-button`,variant:e.variant===i(v).Solid?i(v).Soft:i(v).Solid},{default:s(()=>[c(_(e.actionLabel),1)]),_:1},8,["color","border-radius","on-click","test-id","variant"])],2)):u("",!0)],2),e.onDismiss?(o(),d("div",{key:0,class:r(`${h}__dismiss-button`)},[b(i(m),{"aria-label":"Dismiss banner",color:e.color,"icon-before":i(B).Delete,"icon-size":i(x).Tiny,"on-click":e.onDismiss,size:i(C).Tiny,"test-id":`${h}__dismiss-button`,variant:e.variant},null,8,["color","icon-before","icon-size","on-click","size","test-id","variant"])],2)):u("",!0),e.onClick&&e.ariaLabel?(o(),d("button",{key:1,class:"sr-only","data-expand-click-area":"",onClick:g[0]||(g[0]=(...a)=>e.onClick&&e.onClick(...a))},_(e.ariaLabel),1)):u("",!0)],14,S)]),_:1},8,["color","enabled","rounded"]))}});export{D as CLBanner,D as default};
+import{defineComponent as e,computed as a,createBlock as t,openBlock as o,unref as i,withCtx as s,createElementVNode as n,normalizeStyle as l,normalizeClass as r,createElementBlock as d,createCommentVNode as u,createTextVNode as c,toDisplayString as _,createVNode as b}from"vue";import{_ as y}from"../../../chunks/CLA11yButton.vue_vue_type_style_index_0_lang-DmZZOodW.js";import{_ as m}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_ as f}from"../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-BkfH2FiT.js";import{_ as k}from"../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-_qLiUhKp.js";import{_ as p}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{c as v,d as g,i as h,l as $,a as L,C,e as x,f as B}from"../../../chunks/index-CGlfDAYR.js";import{a as j}from"../../../chunks/utils-iQnJybN9.js";const S=["data-testid"],D=/* @__PURE__ */e({name:"CLBanner",__name:"CLBanner",props:{actionLabel:{},align:{default:h.Left},ariaLabel:{},bordered:{type:Boolean,default:!0},borderRadius:{},busy:{type:Boolean,default:!1},color:{default:g.Neutral},height:{default:"auto"},message:{},onAction:{},onClick:{},onDismiss:{},rounded:{type:Boolean,default:!0},testId:{default:"clll-banner"},title:{},width:{default:"100%"},variant:{default:v.Soft}},setup(e){const g=e,h="clll-banner",D=a(()=>[h,g.actionLabel?`${h}--actionable`:"",g.busy?`${h}--busy`:`${h}--ready`,g.bordered&&g.variant!==v.Ghost?`${h}--bordered`:"",g.borderRadius?`${h}--${g.borderRadius}`:"",g.onDismiss?`${h}--dismissable`:"",`${h}--${g.color}--${g.variant}`,`${h}--align-${g.align}`,g.rounded?`${h}--rounded`:`${h}--box`]);return(a,g)=>(o(),t(i(y),{color:e.color,enabled:!(!e.onClick||!e.ariaLabel),rounded:e.rounded},{default:s(()=>[n("div",{class:r(i(D)),"data-testid":e.testId,style:l({...i(j)({color:e.color,variant:e.variant}),width:e.width,height:e.height})},[n("div",{class:r(`${h}__content`)},[n("div",{class:r(`${h}__nested_content`)},[e.busy?(o(),t(i(k),{key:0,"border-radius":e.borderRadius,height:"28px","test-id":`${h}__skeleton-title`},null,8,["border-radius","test-id"])):u("",!0),e.busy?(o(),t(i(k),{key:1,"border-radius":e.borderRadius,width:"70%",height:"20px","test-id":`${h}__skeleton-message`},null,8,["border-radius","test-id"])):u("",!0),e.title&&!e.busy?(o(),t(i(f),{key:2,align:e.align,color:e.color,type:i($).Section},{default:s(()=>[c(_(e.title),1)]),_:1},8,["align","color","type"])):u("",!0),e.message&&!e.busy?(o(),t(i(p),{key:3,align:e.align,color:e.color,type:i(L).Summary},{default:s(()=>[c(_(e.message),1)]),_:1},8,["align","color","type"])):u("",!0)],2),e.onAction&&e.actionLabel?(o(),d("div",{key:0,class:r(`${h}__action-button`)},[b(i(m),{color:e.color,"border-radius":e.borderRadius,"on-click":e.onAction,"test-id":`${h}__action-button`,variant:e.variant===i(v).Solid?i(v).Soft:i(v).Solid},{default:s(()=>[c(_(e.actionLabel),1)]),_:1},8,["color","border-radius","on-click","test-id","variant"])],2)):u("",!0)],2),e.onDismiss?(o(),d("div",{key:0,class:r(`${h}__dismiss-button`)},[b(i(m),{"aria-label":"Dismiss banner",color:e.color,"icon-before":i(B).Delete,"icon-size":i(x).Tiny,"on-click":e.onDismiss,size:i(C).Tiny,"test-id":`${h}__dismiss-button`,variant:e.variant},null,8,["color","icon-before","icon-size","on-click","size","test-id","variant"])],2)):u("",!0),e.onClick&&e.ariaLabel?(o(),d("button",{key:1,class:"sr-only","data-expand-click-area":"",onClick:g[0]||(g[0]=(...a)=>e.onClick&&e.onClick(...a))},_(e.ariaLabel),1)):u("",!0)],14,S)]),_:1},8,["color","enabled","rounded"]))}});export{D as CLBanner,D as default};

package/dist/components/Indicators/CLPill/CLPill.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLPill.css';
-import{_ as e}from"../../../chunks/CLPill.vue_vue_type_style_index_0_lang-j0AHu53P.js";export{e as CLPill,e as default};
+import{_ as e}from"../../../chunks/CLPill.vue_vue_type_style_index_0_lang-CoaDiJJy.js";export{e as CLPill,e as default};

package/dist/components/Indicators/CLProgress/CLProgress.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLProgress.css';
-import{defineComponent as e,mergeModels as s,useModel as t,computed as a,createElementBlock as l,openBlock as o,normalizeStyle as r,normalizeClass as d,unref as u,createCommentVNode as i,createElementVNode as n,createVNode as m,withCtx as c,createTextVNode as _,toDisplayString as p}from"vue";import{_ as f}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-CkTc30tw.js";import{a as v,d as y,C as $}from"../../../chunks/index-C_yUYGq9.js";import{c as g}from"../../../chunks/utils-BTCQeV7Y.js";import{useTheme as b}from"../../../composables/useTheme.js";const h=["data-testid"],C=/* @__PURE__ */e({name:"CLProgress",__name:"CLProgress",props:/* @__PURE__ */s({color:{default:y.Primary},inverted:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},size:{default:$.Medium},status:{type:Boolean,default:!1},testId:{default:"clll-progress"}},{modelValue:{type:Number,default:0},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const s=e,$=b(),C=t(e,"modelValue"),j="clll-progress",k=a(()=>[j,`${j}--${s.color}`,`${j}--${s.size}`,s.inverted?`${j}--inverted`:"",s.rounded?`${j}--rounded`:`${j}--not-rounded`]),x=a(()=>`${C.value}%`);return(s,t)=>(o(),l("div",{class:d(u(k)),"data-testid":e.testId,style:r({...u(g)({color:e.color,theme:u($)}),"--clll-progress-value":C.value})},[e.status?(o(),l("div",{key:0,class:d(`${j}__status__container`)},[n("div",{class:d(`${j}__status__label`)},[m(u(f),{color:u(y).Neutral,type:u(v).Summary},{default:c(()=>[_(p(u(x)),1)]),_:1},8,["color","type"])],2)],2)):i("",!0),n("div",{class:d(`${j}__bar-container`)},[n("div",{class:d(`${j}__bar`)},null,2)],2)],14,h))}});export{C as CLProgress,C as default};
+import{defineComponent as e,mergeModels as s,useModel as t,computed as a,createElementBlock as l,openBlock as o,normalizeStyle as r,normalizeClass as d,unref as u,createCommentVNode as i,createElementVNode as n,createVNode as m,withCtx as c,createTextVNode as _,toDisplayString as p}from"vue";import{_ as f}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{a as v,d as y,C as $}from"../../../chunks/index-CGlfDAYR.js";import{c as g}from"../../../chunks/utils-iQnJybN9.js";import{useTheme as b}from"../../../composables/useTheme.js";const h=["data-testid"],C=/* @__PURE__ */e({name:"CLProgress",__name:"CLProgress",props:/* @__PURE__ */s({color:{default:y.Primary},inverted:{type:Boolean,default:!1},rounded:{type:Boolean,default:!0},size:{default:$.Medium},status:{type:Boolean,default:!1},testId:{default:"clll-progress"}},{modelValue:{type:Number,default:0},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const s=e,$=b(),C=t(e,"modelValue"),j="clll-progress",k=a(()=>[j,`${j}--${s.color}`,`${j}--${s.size}`,s.inverted?`${j}--inverted`:"",s.rounded?`${j}--rounded`:`${j}--not-rounded`]),x=a(()=>`${C.value}%`);return(s,t)=>(o(),l("div",{class:d(u(k)),"data-testid":e.testId,style:r({...u(g)({color:e.color,theme:u($)}),"--clll-progress-value":C.value})},[e.status?(o(),l("div",{key:0,class:d(`${j}__status__container`)},[n("div",{class:d(`${j}__status__label`)},[m(u(f),{color:u(y).Neutral,type:u(v).Summary},{default:c(()=>[_(p(u(x)),1)]),_:1},8,["color","type"])],2)],2)):i("",!0),n("div",{class:d(`${j}__bar-container`)},[n("div",{class:d(`${j}__bar`)},null,2)],2)],14,h))}});export{C as CLProgress,C as default};

package/dist/components/Loading/CLSkeleton/CLSkeleton.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLSkeleton.css';
-import{_ as e}from"../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-BwASexqS.js";export{e as CLSkeleton,e as default};
+import{_ as e}from"../../../chunks/CLSkeleton.vue_vue_type_style_index_0_lang-_qLiUhKp.js";export{e as CLSkeleton,e as default};

package/dist/components/Loading/CLSpinner/CLSpinner.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLSpinner.css';
-import{_ as e}from"../../../chunks/CLSpinner.vue_vue_type_style_index_0_lang-C0jwsD1v.js";export{e as CLSpinner,e as default};
+import{_ as e}from"../../../chunks/CLSpinner.vue_vue_type_style_index_0_lang-BUtkZagF.js";export{e as CLSpinner,e as default};

package/dist/components/Modals/CLModal/CLModal.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLModal.css';
-import{_ as a}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-vUfynvl2.js";export{a as CLModal,a as default};
+import{_ as a}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CZzQ8wCU.js";export{a as CLModal,a as default};

package/dist/components/Modals/CLModalDatePicker/CLModalDatePicker.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLModalDatePicker.css';
-import{defineComponent as e,mergeModels as a,ref as t,computed as l,useModel as d,onMounted as o,onBeforeUnmount as i,createElementBlock as u,openBlock as n,normalizeClass as r,unref as s,createVNode as b,withCtx as c,createTextVNode as f,toDisplayString as p,createElementVNode as v,nextTick as m}from"vue";import{_ as y}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-CjZJuMsj.js";import{_}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-vUfynvl2.js";import{_ as L}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-bEkt9DYK.js";import{C as X,e as g,f as h,h as k,c as $,d as C}from"../../../chunks/index-C_yUYGq9.js";import{i as w}from"../../../chunks/helper-BlxFN3eF.js";import{useDatePicker as R}from"../../../composables/useDatePicker.js";const S=["data-testid"],B=/* @__PURE__ */e({name:"CLModalDatePicker",__name:"CLModalDatePicker",props:/* @__PURE__ */a({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:C.Primary},buttonLabel:{default:"Select dates"},buttonSize:{default:X.Small},buttonVariant:{default:$.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},id:{},isRange:{type:Boolean,default:!0},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{},testId:{default:"clll-date-picker-modal"},title:{default:"Select dates"}},{modelValue:{default:()=>({end:null,start:null})},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=e,B="clll-date-picker-modal",z=t(!1),V=l(()=>`date-picker-modal-${a.id}`),x=t(),M=d(e,"modelValue"),{rangeLabel:E}=R({appliedStart:l(()=>M.value?.start??null),appliedEnd:l(()=>M.value?.end??null),isRange:a.isRange}),F=t(!1),j=()=>{w&&(F.value=window.innerWidth<480)},P=()=>{if(a.disabled||a.busy)return;j(),z.value=!0,m(()=>{x.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});a.onFocus?.(e)},D=()=>{z.value=!1,x.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});a.onBlur?.(e)},W=()=>{x.value?.apply(),z.value=!1,a.onChange?.()},A=()=>{x.value?.reset(),a.onReset?.()},I=l(()=>F.value);o(()=>{w&&(j(),window.addEventListener("resize",j))}),i(()=>{w&&window.removeEventListener("resize",j)});const N={[X.Tiny]:g.Tiny,[X.Small]:g.Small,[X.Medium]:g.Medium,[X.Large]:g.Large,[X.XL]:g.XL,[X.XXL]:g.XXL,[X.XXXL]:g.XXXL,[X.XXXXL]:g.XXXXL},G=l(()=>[B,a.buttonBorderRadius?`${B}--${a.buttonBorderRadius}`:"",a.busy?`${B}--busy`:`${B}--ready`,`${B}--${a.buttonColor}`,`${B}--${a.buttonSize}`,`${B}--${a.buttonVariant}`,a.disabled||a.busy?`${B}--disabled`:`${B}--active`,a.fluid?`${B}--fluid`:`${B}--fixed`]),T=l(()=>{const e=x.value?.draftStart,t=x.value?.draftEnd;return a.isRange?!!e&&!!t:!!e});return(a,t)=>(n(),u("div",{class:r(s(G)),"data-testid":e.testId},[b(s(y),{"aria-label":e.buttonAriaLabel||"Open date picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":s(h).Calendar,"icon-size":N[e.buttonSize],"on-click":P,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:c(()=>[f(p(s(E)||e.buttonLabel),1)]),_:1},8,["aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),b(s(_),{"border-radius":s(I)?s(k).None:s(k).Medium,fullscreen:s(I),"is-open":s(z),"max-width":"336px","modal-id":s(V),"on-close":D,title:e.title},{body:c(()=>[b(s(L),{ref_key:"calendarRef",ref:x,modelValue:M.value,"onUpdate:modelValue":t[0]||(t[0]=e=>M.value=e),busy:e.busy,disabled:e.disabled,fluid:s(I),"is-range":e.isRange},null,8,["modelValue","busy","disabled","fluid","is-range"])]),footer:c(()=>[v("div",{class:r(`${B}__footer-actions`)},[b(s(y),{color:s(C).Neutral,"on-click":D,variant:s($).Ghost},{default:c(()=>[...t[1]||(t[1]=[f(" Cancel ",-1)])]),_:1},8,["color","variant"]),v("div",{class:r(`${B}__footer-right`)},[b(s(y),{color:s(C).Neutral,disabled:!s(x)?.draftStart&&!s(x)?.draftEnd,"on-click":A,variant:s($).Ghost},{default:c(()=>[...t[2]||(t[2]=[f(" Reset ",-1)])]),_:1},8,["color","disabled","variant"]),b(s(y),{color:s(C).Primary,disabled:!s(T),"on-click":W},{default:c(()=>[...t[3]||(t[3]=[f(" Apply ",-1)])]),_:1},8,["color","disabled"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,S))}});export{B as CLModalDatePicker,B as default};
+import{defineComponent as e,mergeModels as a,ref as t,computed as l,useModel as d,onMounted as o,onBeforeUnmount as i,createElementBlock as u,openBlock as n,normalizeClass as r,unref as s,createVNode as b,withCtx as c,createTextVNode as f,toDisplayString as p,createElementVNode as v,nextTick as m}from"vue";import{_ as y}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CZzQ8wCU.js";import{_ as L}from"../../../chunks/CLCalendar.vue_vue_type_style_index_0_lang-DcHQwUiD.js";import{C as X,e as k,f as g,h,c as $,d as C}from"../../../chunks/index-CGlfDAYR.js";import{i as w}from"../../../chunks/helper-BlxFN3eF.js";import{useDatePicker as R}from"../../../composables/useDatePicker.js";const S=["data-testid"],B=/* @__PURE__ */e({name:"CLModalDatePicker",__name:"CLModalDatePicker",props:/* @__PURE__ */a({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:C.Primary},buttonLabel:{default:"Select dates"},buttonSize:{default:X.Small},buttonVariant:{default:$.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},id:{},isRange:{type:Boolean,default:!0},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{},testId:{default:"clll-date-picker-modal"},title:{default:"Select dates"}},{modelValue:{default:()=>({end:null,start:null})},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const a=e,B="clll-date-picker-modal",z=t(!1),V=l(()=>`date-picker-modal-${a.id}`),x=t(),M=d(e,"modelValue"),{rangeLabel:E}=R({appliedStart:l(()=>M.value?.start??null),appliedEnd:l(()=>M.value?.end??null),isRange:a.isRange}),F=t(!1),j=()=>{w&&(F.value=window.innerWidth<480)},P=()=>{if(a.disabled||a.busy)return;j(),z.value=!0,m(()=>{x.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});a.onFocus?.(e)},D=()=>{z.value=!1,x.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});a.onBlur?.(e)},W=()=>{x.value?.apply(),z.value=!1,a.onChange?.()},A=()=>{x.value?.reset(),a.onReset?.()},I=l(()=>F.value);o(()=>{w&&(j(),window.addEventListener("resize",j))}),i(()=>{w&&window.removeEventListener("resize",j)});const N={[X.Tiny]:k.Tiny,[X.Small]:k.Small,[X.Medium]:k.Medium,[X.Large]:k.Large,[X.XL]:k.XL,[X.XXL]:k.XXL,[X.XXXL]:k.XXXL,[X.XXXXL]:k.XXXXL},G=l(()=>[B,a.buttonBorderRadius?`${B}--${a.buttonBorderRadius}`:"",a.busy?`${B}--busy`:`${B}--ready`,`${B}--${a.buttonColor}`,`${B}--${a.buttonSize}`,`${B}--${a.buttonVariant}`,a.disabled||a.busy?`${B}--disabled`:`${B}--active`,a.fluid?`${B}--fluid`:`${B}--fixed`]),T=l(()=>{const e=x.value?.draftStart,t=x.value?.draftEnd;return a.isRange?!!e&&!!t:!!e});return(a,t)=>(n(),u("div",{class:r(s(G)),"data-testid":e.testId},[b(s(y),{"aria-label":e.buttonAriaLabel||"Open date picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":s(g).Calendar,"icon-size":N[e.buttonSize],"on-click":P,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:c(()=>[f(p(s(E)||e.buttonLabel),1)]),_:1},8,["aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),b(s(_),{"border-radius":s(I)?s(h).None:s(h).Medium,fullscreen:s(I),"is-open":s(z),"max-width":"336px","modal-id":s(V),"on-close":D,title:e.title},{body:c(()=>[b(s(L),{ref_key:"calendarRef",ref:x,modelValue:M.value,"onUpdate:modelValue":t[0]||(t[0]=e=>M.value=e),busy:e.busy,disabled:e.disabled,fluid:s(I),"is-range":e.isRange},null,8,["modelValue","busy","disabled","fluid","is-range"])]),footer:c(()=>[v("div",{class:r(`${B}__footer-actions`)},[b(s(y),{color:s(C).Neutral,"on-click":D,variant:s($).Ghost},{default:c(()=>[...t[1]||(t[1]=[f(" Cancel ",-1)])]),_:1},8,["color","variant"]),v("div",{class:r(`${B}__footer-right`)},[b(s(y),{color:s(C).Neutral,disabled:!s(x)?.draftStart&&!s(x)?.draftEnd,"on-click":A,variant:s($).Ghost},{default:c(()=>[...t[2]||(t[2]=[f(" Reset ",-1)])]),_:1},8,["color","disabled","variant"]),b(s(y),{color:s(C).Primary,disabled:!s(T),"on-click":W},{default:c(()=>[...t[3]||(t[3]=[f(" Apply ",-1)])]),_:1},8,["color","disabled"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,S))}});export{B as CLModalDatePicker,B as default};

package/dist/components/Modals/CLModalTimePicker/CLModalTimePicker.css

@@ -0,0 +1 @@
+.clll-time-picker-modal{box-sizing:border-box}.clll-time-picker-modal--fluid{width:100%}.clll-time-picker-modal__footer-actions{display:flex;justify-content:space-between;align-items:center;width:100%}.clll-time-picker-modal__footer-right{display:flex;gap:var(--clll-unit-2)}

package/dist/components/Modals/CLModalTimePicker/CLModalTimePicker.js

@@ -0,0 +1,3 @@
+import '../../../assets/core.css';
+import './CLModalTimePicker.css';
+import{defineComponent as e,mergeModels as t,ref as o,computed as a,useModel as l,onMounted as i,onBeforeUnmount as u,createElementBlock as d,openBlock as r,normalizeClass as n,createVNode as s,unref as c,withCtx as b,createTextVNode as m,toDisplayString as f,createElementVNode as p,nextTick as v}from"vue";import{_ as y}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{CLTimePicker as _}from"../../Form/CLTimePicker/CLTimePicker.js";import{_ as L}from"../../../chunks/CLModal.vue_vue_type_style_index_0_lang-CZzQ8wCU.js";import{C as k,e as h,f as X,h as $,c as C,d as w}from"../../../chunks/index-CGlfDAYR.js";import{useTimePicker as B}from"../../../composables/useTimePicker.js";import{i as z}from"../../../chunks/helper-BlxFN3eF.js";const g=["data-testid"],S=/* @__PURE__ */e({name:"CLModalTimePicker",__name:"CLModalTimePicker",props:/* @__PURE__ */t({buttonAriaLabel:{default:void 0},buttonBorderRadius:{default:void 0},buttonColor:{default:w.Primary},buttonLabel:{default:"Select time"},buttonSize:{default:k.Small},buttonVariant:{default:C.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean,default:!1},busy:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},fluid:{type:Boolean,default:!1},id:{},onBlur:{type:Function,default:void 0},onChange:{type:Function,default:void 0},onFocus:{type:Function,default:void 0},onReset:{type:Function,default:void 0},testId:{default:"clll-time-picker-modal"},title:{default:"Select time"},use24Hour:{type:Boolean,default:!1}},{modelValue:{default:null},modelModifiers:{}}),emits:["update:modelValue"],setup(e){const t=e,S="clll-time-picker-modal",F=o(!1),V=a(()=>`time-picker-modal-${t.id}`),P=o(),R=l(e,"modelValue"),{formattedLabel:T}=B({appliedTime:R,use24Hour:t.use24Hour}),x=o(!1),M=()=>{z&&(x.value=window.innerWidth<480)},j=()=>{if(t.disabled||t.busy)return;M(),F.value=!0,v(()=>{P.value?.initializeDraft()});const e=new FocusEvent("focus",{bubbles:!0,cancelable:!0});t.onFocus?.(e)},W=()=>{F.value=!1,P.value?.cancel();const e=new FocusEvent("blur",{bubbles:!0,cancelable:!0});t.onBlur?.(e)},E=()=>{P.value?.apply(),F.value=!1,t.onChange?.()},H=()=>{P.value?.reset(),t.onReset?.(),t.onChange?.()},A=a(()=>x.value);i(()=>{z&&(M(),window.addEventListener("resize",M))}),u(()=>{z&&window.removeEventListener("resize",M)});const I={[k.Tiny]:h.Tiny,[k.Small]:h.Small,[k.Medium]:h.Medium,[k.Large]:h.Large,[k.XL]:h.XL,[k.XXL]:h.XXL,[k.XXXL]:h.XXXL,[k.XXXXL]:h.XXXXL},N=a(()=>[S,t.buttonBorderRadius?`${S}--${t.buttonBorderRadius}`:"",t.busy?`${S}--busy`:`${S}--ready`,`${S}--${t.buttonColor}`,`${S}--${t.buttonSize}`,`${S}--${t.buttonVariant}`,t.disabled||t.busy?`${S}--disabled`:`${S}--active`,t.fluid?`${S}--fluid`:`${S}--fixed`]);return(t,o)=>(r(),d("div",{class:n(N.value),"data-testid":e.testId},[s(c(y),{"aria-label":e.buttonAriaLabel||"Open time picker","border-radius":e.buttonBorderRadius,busy:e.busy,color:e.buttonColor,disabled:e.disabled||e.busy,"icon-before":c(X).Clock,"icon-size":I[e.buttonSize],"on-click":j,"test-id":`${e.testId}__trigger`,size:e.buttonSize,variant:e.buttonVariant,width:e.buttonWidth,wrap:e.buttonWrapped},{default:b(()=>[m(f(c(T)||e.buttonLabel),1)]),_:1},8,["aria-label","border-radius","busy","color","disabled","icon-before","icon-size","test-id","size","variant","width","wrap"]),s(c(L),{"border-radius":A.value?c($).None:c($).Medium,fullscreen:A.value,"is-open":F.value,"max-width":"340px","modal-id":V.value,"on-close":W,title:e.title},{body:b(()=>[s(c(_),{ref_key:"timePickerRef",ref:P,modelValue:R.value,"onUpdate:modelValue":o[0]||(o[0]=e=>R.value=e),busy:e.busy,disabled:e.disabled,fluid:A.value,"use24-hour":e.use24Hour},null,8,["modelValue","busy","disabled","fluid","use24-hour"])]),footer:b(()=>[p("div",{class:n(`${S}__footer-actions`)},[s(c(y),{color:c(w).Neutral,variant:c(C).Ghost,"on-click":W},{default:b(()=>[...o[1]||(o[1]=[m(" Cancel ",-1)])]),_:1},8,["color","variant"]),p("div",{class:n(`${S}__footer-right`)},[s(c(y),{color:c(w).Neutral,variant:c(C).Ghost,"on-click":H},{default:b(()=>[...o[2]||(o[2]=[m(" Reset ",-1)])]),_:1},8,["color","variant"]),s(c(y),{color:c(w).Primary,"on-click":E},{default:b(()=>[...o[3]||(o[3]=[m(" Apply ",-1)])]),_:1},8,["color"])],2)],2)]),_:1},8,["border-radius","fullscreen","is-open","modal-id","title"])],10,g))}});export{S as CLModalTimePicker,S as default};

package/dist/components/Modals/CLModalTimePicker/CLModalTimePicker.vue.d.ts

@@ -0,0 +1,128 @@
+import { CLBorderRadius, CLColors, CLColorVariants, CLGenericFocusFunction, CLGenericFunction, CLSizes } from '../../../index.ts';
+export interface CLModalTimePickerProps {
+    /** Sets aria-label on trigger button. */
+    buttonAriaLabel?: string;
+    /** Border radius size of trigger button. */
+    buttonBorderRadius?: CLBorderRadius;
+    /** Color of trigger button and primary actions. */
+    buttonColor?: CLColors;
+    /** Default label text on trigger button. */
+    buttonLabel?: string;
+    /** Size of trigger button. */
+    buttonSize?: CLSizes;
+    /** Color variant of trigger button. */
+    buttonVariant?: CLColorVariants;
+    /** Width of trigger button. */
+    buttonWidth?: string;
+    /** Whether button padding is wrapped. */
+    buttonWrapped?: boolean;
+    /** Busy state. */
+    busy?: boolean;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Fluid layout state. */
+    fluid?: boolean;
+    /** Unique ID, required. */
+    id: string;
+    /** Callback when focus is lost. */
+    onBlur?: CLGenericFocusFunction;
+    /** Callback when value changes. */
+    onChange?: CLGenericFunction;
+    /** Callback when focused. */
+    onFocus?: CLGenericFocusFunction;
+    /** Callback when reset is triggered. */
+    onReset?: CLGenericFunction;
+    /** Custom test ID. */
+    testId?: string;
+    /** Modal header title. */
+    title?: string;
+    /** Use 24-hour format. */
+    use24Hour?: boolean;
+}
+declare const _default: import('vue').DefineComponent<{
+    modelValue?: string | null;
+} & CLModalTimePickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: string | null;
+} & CLModalTimePickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    fluid: boolean;
+    testId: string;
+    title: string;
+    onFocus: CLGenericFocusFunction;
+    onBlur: CLGenericFocusFunction;
+    onChange: CLGenericFunction;
+    onReset: CLGenericFunction;
+    use24Hour: boolean;
+    busy: boolean;
+    disabled: boolean;
+    buttonAriaLabel: string;
+    buttonBorderRadius: CLBorderRadius;
+    buttonColor: CLColors;
+    buttonLabel: string;
+    buttonSize: CLSizes;
+    buttonVariant: CLColorVariants;
+    buttonWidth: string;
+    buttonWrapped: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    timePickerRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        modelValue?: string | null;
+    } & import('../../Form/CLTimePicker').CLTimePickerProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+        "onTime-select"?: ((time: string) => any) | undefined;
+    }>, {
+        apply: () => void;
+        cancel: () => void;
+        draftHour: globalThis.Ref<string, string>;
+        draftMinute: globalThis.Ref<string, string>;
+        draftPeriod: globalThis.Ref<import('../../../composables/useTimePicker').TimePeriod, import('../../../composables/useTimePicker').TimePeriod>;
+        getFormattedDraft: () => string;
+        initializeDraft: () => void;
+        reset: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "update:modelValue": (value: string | null) => any;
+        "time-select": (time: string) => any;
+    }, import('vue').PublicProps, {
+        color: CLColors;
+        fluid: boolean;
+        testId: string;
+        width: string;
+        use24Hour: boolean;
+        busy: boolean;
+        disabled: boolean;
+        headerLabel: string;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        modelValue?: string | null;
+    } & import('../../Form/CLTimePicker').CLTimePickerProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+        "onTime-select"?: ((time: string) => any) | undefined;
+    }>, {
+        apply: () => void;
+        cancel: () => void;
+        draftHour: globalThis.Ref<string, string>;
+        draftMinute: globalThis.Ref<string, string>;
+        draftPeriod: globalThis.Ref<import('../../../composables/useTimePicker').TimePeriod, import('../../../composables/useTimePicker').TimePeriod>;
+        getFormattedDraft: () => string;
+        initializeDraft: () => void;
+        reset: () => void;
+    }, {}, {}, {}, {
+        color: CLColors;
+        fluid: boolean;
+        testId: string;
+        width: string;
+        use24Hour: boolean;
+        busy: boolean;
+        disabled: boolean;
+        headerLabel: string;
+    }> | null;
+}, HTMLDivElement>;
+export default _default;

package/dist/components/Modals/CLModalTimePicker/index.d.ts

@@ -0,0 +1,90 @@
+import { default as CLModalTimePickerComponent } from './CLModalTimePicker.vue';
+export declare const CLModalTimePicker: import('vue').DefineComponent<{
+    modelValue?: string | null;
+} & import('./CLModalTimePicker.vue').CLModalTimePickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<{
+    modelValue?: string | null;
+} & import('./CLModalTimePicker.vue').CLModalTimePickerProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    fluid: boolean;
+    testId: string;
+    title: string;
+    onFocus: import('../../..').CLGenericFocusFunction;
+    onBlur: import('../../..').CLGenericFocusFunction;
+    onChange: import('../../..').CLGenericFunction;
+    onReset: import('../../..').CLGenericFunction;
+    use24Hour: boolean;
+    busy: boolean;
+    disabled: boolean;
+    buttonAriaLabel: string;
+    buttonBorderRadius: import('@codeandfunction/callaloo-tokens').CLBorderRadius;
+    buttonColor: import('@codeandfunction/callaloo-tokens').CLColors;
+    buttonLabel: string;
+    buttonSize: import('@codeandfunction/callaloo-tokens').CLSizes;
+    buttonVariant: import('@codeandfunction/callaloo-tokens').CLColorVariants;
+    buttonWidth: string;
+    buttonWrapped: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    timePickerRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        modelValue?: string | null;
+    } & import('../../Form/CLTimePicker').CLTimePickerProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+        "onTime-select"?: ((time: string) => any) | undefined;
+    }>, {
+        apply: () => void;
+        cancel: () => void;
+        draftHour: globalThis.Ref<string, string>;
+        draftMinute: globalThis.Ref<string, string>;
+        draftPeriod: globalThis.Ref<import('../../../composables/useTimePicker').TimePeriod, import('../../../composables/useTimePicker').TimePeriod>;
+        getFormattedDraft: () => string;
+        initializeDraft: () => void;
+        reset: () => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        "update:modelValue": (value: string | null) => any;
+        "time-select": (time: string) => any;
+    }, import('vue').PublicProps, {
+        color: import('@codeandfunction/callaloo-tokens').CLColors;
+        fluid: boolean;
+        testId: string;
+        width: string;
+        use24Hour: boolean;
+        busy: boolean;
+        disabled: boolean;
+        headerLabel: string;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        modelValue?: string | null;
+    } & import('../../Form/CLTimePicker').CLTimePickerProps> & Readonly<{
+        "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+        "onTime-select"?: ((time: string) => any) | undefined;
+    }>, {
+        apply: () => void;
+        cancel: () => void;
+        draftHour: globalThis.Ref<string, string>;
+        draftMinute: globalThis.Ref<string, string>;
+        draftPeriod: globalThis.Ref<import('../../../composables/useTimePicker').TimePeriod, import('../../../composables/useTimePicker').TimePeriod>;
+        getFormattedDraft: () => string;
+        initializeDraft: () => void;
+        reset: () => void;
+    }, {}, {}, {}, {
+        color: import('@codeandfunction/callaloo-tokens').CLColors;
+        fluid: boolean;
+        testId: string;
+        width: string;
+        use24Hour: boolean;
+        busy: boolean;
+        disabled: boolean;
+        headerLabel: string;
+    }> | null;
+}, HTMLDivElement>;
+export type CLModalTimePicker = InstanceType<typeof CLModalTimePickerComponent>;
+export type { CLModalTimePickerProps } from './CLModalTimePicker.vue';
+export default CLModalTimePicker;

package/dist/components/Modals/index.d.ts

@@ -1,3 +1,4 @@
 import { CLModal } from './CLModal';
 import { CLModalDatePicker } from './CLModalDatePicker';
-export { CLModal, CLModalDatePicker };
+import { CLModalTimePicker } from './CLModalTimePicker';
+export { CLModal, CLModalDatePicker, CLModalTimePicker };

package/dist/components/Navigation/CLLink/CLLink.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLLink.css';
-import{_ as e}from"../../../chunks/CLLink.vue_vue_type_style_index_0_lang-BoZjt2Xh.js";export{e as CLLink,e as default};
+import{_ as e}from"../../../chunks/CLLink.vue_vue_type_style_index_0_lang-Dfcq8WIX.js";export{e as CLLink,e as default};

package/dist/components/Navigation/CLNavLink/CLNavLink.js

@@ -1,2 +1,2 @@
 import '../../../assets/core.css';
-import{_ as a}from"../../../chunks/CLNavLink.vue_vue_type_script_setup_true_lang-grTk84C0.js";export{a as CLNavLink,a as default};
+import{_ as a}from"../../../chunks/CLNavLink.vue_vue_type_script_setup_true_lang-BDDQvo5I.js";export{a as CLNavLink,a as default};

package/dist/components/Navigation/CLNavSection/CLNavSection.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLNavSection.css';
-import{defineComponent as e,computed as t,createElementBlock as a,openBlock as l,normalizeClass as r,unref as n,Fragment as s,renderList as i,createVNode as o,withCtx as c,createTextVNode as u,toDisplayString as d}from"vue";import{_}from"../../../chunks/CLNavLink.vue_vue_type_script_setup_true_lang-grTk84C0.js";import{_ as m}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-CkTc30tw.js";import{d as p}from"../../../chunks/index-C_yUYGq9.js";import{f}from"../../../chunks/index-ojQDOR8H.js";const v=["data-testid"],k=/* @__PURE__ */e({name:"CLNavSection",__name:"CLNavSection",props:{color:{default:p.Primary},navItems:{},testId:{default:"clll-nav-section"},type:{default:f.Horizontal}},setup(e){const p=e,f="clll-nav-section",k=t(()=>[f,`${f}--${p.type}`]);return(t,p)=>(l(),a("ul",{class:r(n(k)),"data-testid":e.testId},[(l(!0),a(s,null,i(e.navItems,(t,r)=>(l(),a("li",{key:`link-${t.id}-${r}`,class:"clll-nav-section__item"},[o(n(_),{id:t.id,"aria-label":t.ariaLabel,color:e.color,external:t.external,href:t.href,rel:t.rel,target:t.target,"on-click":t.onClick},{default:c(()=>[o(n(m),{as:"span"},{default:c(()=>[u(d(t.label),1)]),_:2},1024)]),_:2},1032,["id","aria-label","color","external","href","rel","target","on-click"])]))),128))],10,v))}});export{k as CLNavSection,k as default};
+import{defineComponent as e,computed as t,createElementBlock as a,openBlock as l,normalizeClass as r,unref as n,Fragment as s,renderList as i,createVNode as o,withCtx as c,createTextVNode as u,toDisplayString as d}from"vue";import{_}from"../../../chunks/CLNavLink.vue_vue_type_script_setup_true_lang-BDDQvo5I.js";import{_ as m}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";import{d as p}from"../../../chunks/index-CGlfDAYR.js";import{f}from"../../../chunks/index-C9S3C1LU.js";const v=["data-testid"],k=/* @__PURE__ */e({name:"CLNavSection",__name:"CLNavSection",props:{color:{default:p.Primary},navItems:{},testId:{default:"clll-nav-section"},type:{default:f.Horizontal}},setup(e){const p=e,f="clll-nav-section",k=t(()=>[f,`${f}--${p.type}`]);return(t,p)=>(l(),a("ul",{class:r(n(k)),"data-testid":e.testId},[(l(!0),a(s,null,i(e.navItems,(t,r)=>(l(),a("li",{key:`link-${t.id}-${r}`,class:"clll-nav-section__item"},[o(n(_),{id:t.id,"aria-label":t.ariaLabel,color:e.color,external:t.external,href:t.href,rel:t.rel,target:t.target,"on-click":t.onClick},{default:c(()=>[o(n(m),{as:"span"},{default:c(()=>[u(d(t.label),1)]),_:2},1024)]),_:2},1032,["id","aria-label","color","external","href","rel","target","on-click"])]))),128))],10,v))}});export{k as CLNavSection,k as default};

package/dist/components/Popups/CLDropdownMenu/CLDropdownMenu.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLDropdownMenu.css';
-import{defineComponent as e,ref as t,computed as o,onBeforeUnmount as n,createElementBlock as a,openBlock as d,normalizeClass as r,createVNode as l,createCommentVNode as i,unref as s,withCtx as u,createTextVNode as c,toDisplayString as p,normalizeStyle as f,renderSlot as b}from"vue";import{u as m,a as _,f as v,o as w,s as g}from"../../../chunks/floating-ui.vue-C0JWy0Dz.js";import{_ as h}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-CjZJuMsj.js";import{_ as y}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-DbPAZNtp.js";import{b as B,i as $}from"../../../chunks/helper-BlxFN3eF.js";import{useDropdown as z}from"../../../composables/useDropdown.js";import{useEsc as x}from"../../../composables/useEsc.js";import{n as C,e as I,f as k,c as E,C as L,d as D,i as S}from"../../../chunks/index-C_yUYGq9.js";const H=["data-testid"],j=["id","aria-labelledby","aria-hidden"],O=/* @__PURE__ */e({name:"CLDropdownMenu",__name:"CLDropdownMenu",props:{buttonAlign:{default:S.Center},buttonAriaLabel:{},buttonBorderRadius:{},buttonBusy:{type:Boolean},buttonColor:{default:D.Secondary},buttonDisabled:{type:Boolean},buttonHeight:{default:"auto"},buttonSize:{default:L.Small},buttonVariant:{default:E.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean},containerBordered:{type:Boolean,default:!0},containerBorderRadius:{},containerElevated:{type:Boolean,default:!1},contentWidth:{default:"auto"},dropdownId:{},fluid:{type:Boolean,default:!1},iconAfter:{default:k.ChevronDown},iconBefore:{},iconSize:{default:I.Tiny},isOpen:{type:Boolean,default:!1},label:{},onCloseHandler:{},onOpenHandler:{},placement:{default:C.BottomStart},testId:{default:"clll-dropdown-menu"},zIndex:{default:30}},setup(e,{expose:C}){const I=e;let k=t(),L=t();const S=t(),O=t(),A=t(I.isOpen),W=t(I.placement),R="clll-dropdown-menu",M=o(()=>"auto"===I.zIndex||B(I.zIndex)?I.zIndex:I.zIndex.toString()),V=e=>{e&&(k.value=e)},G=e=>{e&&(L.value=e)},N=()=>{T.value?F():q()},{open:T,openDropdown:q,closeDropdown:F,clearEventListeners:J}=z({triggerElem:k,dropdownRef:O,openDropdownHandler:()=>{A.value=!0,I?.onOpenHandler?.(),P(),$&&document.addEventListener("click",Q)},closeDropdownHandler:()=>{A.value=!1,I?.onCloseHandler?.(),$&&document.removeEventListener("click",Q),U(),J()}});C({close:()=>{F(),J(),U()},open:()=>{q()}});const{floatingStyles:K,update:P}=m(S,O,{middleware:[v(),w(10),g()],placement:W,open:A,whileElementsMounted:_}),Q=e=>{A.value&&O.value?.contains(e?.target)&&F()},{clearEventListeners:U}=x({escHandler:F,triggerElem:k});return n(()=>{$&&document.removeEventListener("click",Q),U(),J()}),(t,o)=>(d(),a("div",{class:r([`${R}__menu`,e.fluid?`${R}__menu--fluid`:""]),"data-testid":e.testId},[l(s(h),{id:`${R}__toggle--${e.dropdownId}`,ref_key:"anchor",ref:S,"aria-controls":`${R}--${e.dropdownId}`,"aria-expanded":s(A)||e.isOpen,"aria-label":e.buttonAriaLabel,"align-content":e.buttonAlign,busy:e.buttonBusy,disabled:e.buttonDisabled||e.buttonBusy,class:r(`${R}__toggle`),color:e.buttonColor,"border-radius":e.buttonBorderRadius,"forward-ref":V,height:e.buttonHeight,"icon-after":e.iconAfter,"icon-before":e.iconBefore,"icon-size":e.iconSize,size:e.buttonSize,"test-id":`${R}__toggle`,variant:e.buttonVariant,width:e.fluid?"100%":e.buttonWidth,wrap:e.buttonWrapped,"on-click":N},{default:u(()=>[c(p(e.label),1)]),_:1},8,["id","aria-controls","aria-expanded","aria-label","align-content","busy","disabled","class","color","border-radius","height","icon-after","icon-before","icon-size","size","test-id","variant","width","wrap"]),s(A)||e.isOpen?(d(),a("div",{key:0,id:`${R}--${e.dropdownId}`,ref_key:"dropdownElem",ref:O,"aria-labelledby":`${R}__toggle--${e.dropdownId}`,"aria-hidden":!(s(A)||e.isOpen),class:r([`${R}__dropdown`,`${R}__dropdown--${s(W)}`]),style:f({...s(K),zIndex:s(M)})},[l(s(y),{bordered:e.containerBordered,"border-radius":e.containerBorderRadius,color:s(D).Neutral,elevated:e.containerElevated,"forward-ref":G,padded:!1,"test-id":`${R}__content`,variant:s(E).Ghost,width:e.contentWidth},{default:u(()=>[b(t.$slots,"content")]),_:3},8,["bordered","border-radius","color","elevated","test-id","variant","width"])],14,j)):i("",!0)],10,H))}});export{O as CLDropdownMenu,O as default};
+import{defineComponent as e,ref as t,computed as o,onBeforeUnmount as n,createElementBlock as a,openBlock as d,normalizeClass as r,createVNode as l,createCommentVNode as i,unref as s,withCtx as u,createTextVNode as c,toDisplayString as p,normalizeStyle as f,renderSlot as b}from"vue";import{u as m,a as _,f as v,o as w,s as g}from"../../../chunks/floating-ui.vue-C0JWy0Dz.js";import{_ as h}from"../../../chunks/CLButton.vue_vue_type_style_index_0_lang-C4FnlILR.js";import{_ as y}from"../../../chunks/CLCard.vue_vue_type_style_index_0_lang-BipF7MT1.js";import{b as B,i as $}from"../../../chunks/helper-BlxFN3eF.js";import{useDropdown as z}from"../../../composables/useDropdown.js";import{useEsc as k}from"../../../composables/useEsc.js";import{n as x,e as C,f as I,c as E,C as L,d as D,i as S}from"../../../chunks/index-CGlfDAYR.js";const H=["data-testid"],j=["id","aria-labelledby","aria-hidden"],O=/* @__PURE__ */e({name:"CLDropdownMenu",__name:"CLDropdownMenu",props:{buttonAlign:{default:S.Center},buttonAriaLabel:{},buttonBorderRadius:{},buttonBusy:{type:Boolean},buttonColor:{default:D.Secondary},buttonDisabled:{type:Boolean},buttonHeight:{default:"auto"},buttonSize:{default:L.Small},buttonVariant:{default:E.Soft},buttonWidth:{default:"auto"},buttonWrapped:{type:Boolean},containerBordered:{type:Boolean,default:!0},containerBorderRadius:{},containerElevated:{type:Boolean,default:!1},contentWidth:{default:"auto"},dropdownId:{},fluid:{type:Boolean,default:!1},iconAfter:{default:I.ChevronDown},iconBefore:{},iconSize:{default:C.Tiny},isOpen:{type:Boolean,default:!1},label:{},onCloseHandler:{},onOpenHandler:{},placement:{default:x.BottomStart},testId:{default:"clll-dropdown-menu"},zIndex:{default:30}},setup(e,{expose:x}){const C=e;let I=t(),L=t();const S=t(),O=t(),A=t(C.isOpen),W=t(C.placement),R="clll-dropdown-menu",M=o(()=>"auto"===C.zIndex||B(C.zIndex)?C.zIndex:C.zIndex.toString()),V=e=>{e&&(I.value=e)},G=e=>{e&&(L.value=e)},N=()=>{T.value?F():q()},{open:T,openDropdown:q,closeDropdown:F,clearEventListeners:J}=z({triggerElem:I,dropdownRef:O,openDropdownHandler:()=>{A.value=!0,C?.onOpenHandler?.(),P(),$&&document.addEventListener("click",Q)},closeDropdownHandler:()=>{A.value=!1,C?.onCloseHandler?.(),$&&document.removeEventListener("click",Q),U(),J()}});x({close:()=>{F(),J(),U()},open:()=>{q()}});const{floatingStyles:K,update:P}=m(S,O,{middleware:[v(),w(10),g()],placement:W,open:A,whileElementsMounted:_}),Q=e=>{A.value&&O.value?.contains(e?.target)&&F()},{clearEventListeners:U}=k({escHandler:F,triggerElem:I});return n(()=>{$&&document.removeEventListener("click",Q),U(),J()}),(t,o)=>(d(),a("div",{class:r([`${R}__menu`,e.fluid?`${R}__menu--fluid`:""]),"data-testid":e.testId},[l(s(h),{id:`${R}__toggle--${e.dropdownId}`,ref_key:"anchor",ref:S,"aria-controls":`${R}--${e.dropdownId}`,"aria-expanded":s(A)||e.isOpen,"aria-label":e.buttonAriaLabel,"align-content":e.buttonAlign,busy:e.buttonBusy,disabled:e.buttonDisabled||e.buttonBusy,class:r(`${R}__toggle`),color:e.buttonColor,"border-radius":e.buttonBorderRadius,"forward-ref":V,height:e.buttonHeight,"icon-after":e.iconAfter,"icon-before":e.iconBefore,"icon-size":e.iconSize,size:e.buttonSize,"test-id":`${R}__toggle`,variant:e.buttonVariant,width:e.fluid?"100%":e.buttonWidth,wrap:e.buttonWrapped,"on-click":N},{default:u(()=>[c(p(e.label),1)]),_:1},8,["id","aria-controls","aria-expanded","aria-label","align-content","busy","disabled","class","color","border-radius","height","icon-after","icon-before","icon-size","size","test-id","variant","width","wrap"]),s(A)||e.isOpen?(d(),a("div",{key:0,id:`${R}--${e.dropdownId}`,ref_key:"dropdownElem",ref:O,"aria-labelledby":`${R}__toggle--${e.dropdownId}`,"aria-hidden":!(s(A)||e.isOpen),class:r([`${R}__dropdown`,`${R}__dropdown--${s(W)}`]),style:f({...s(K),zIndex:s(M)})},[l(s(y),{bordered:e.containerBordered,"border-radius":e.containerBorderRadius,color:s(D).Neutral,elevated:e.containerElevated,"forward-ref":G,padded:!1,"test-id":`${R}__content`,variant:s(E).Ghost,width:e.contentWidth},{default:u(()=>[b(t.$slots,"content")]),_:3},8,["bordered","border-radius","color","elevated","test-id","variant","width"])],14,j)):i("",!0)],10,H))}});export{O as CLDropdownMenu,O as default};

package/dist/components/Popups/CLToast/CLToast.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLToast.css';
-import{_ as s}from"../../../chunks/CLToast.vue_vue_type_style_index_0_lang-Dw2Am9xs.js";export{s as CLToast,s as default};
+import{_ as s}from"../../../chunks/CLToast.vue_vue_type_style_index_0_lang-CwaPbZ_K.js";export{s as CLToast,s as default};

package/dist/components/Providers/CLThemeProvider/CLThemeProvider.js

@@ -1,2 +1,2 @@
 import '../../../assets/core.css';
-import{ref as e,defineComponent as o,provide as t,onMounted as a,onBeforeUnmount as r,watch as s,createBlock as l,openBlock as d,resolveDynamicComponent as i,normalizeStyle as n,normalizeClass as c,unref as m,withCtx as u,renderSlot as f}from"vue";import{D as h,o as k}from"../../../chunks/index-C_yUYGq9.js";import{T as v}from"../../../chunks/context-BrNC8CsD.js";import{i as p,c as M}from"../../../chunks/helper-BlxFN3eF.js";const g=/* @__PURE__ */o({__name:"CLThemeProvider",props:{tag:{default:"div"},themeConfig:{},autoDetectDarkMode:{type:Boolean,default:!0}},setup(o){const g=o,y=(o=>{const t=e(o?.borderRadius||h.borderRadius),a=e(o?.darkMode??h.darkMode),r=e(o?.fontFamily??h.fontFamily),s=k(h.colors,o?.colors),l=e(s);return{borderRadius:t,colors:l,darkMode:a,fontFamily:r,setBorderRadius:e=>{t.value=e},setColors:e=>{l.value={...l.value,...e}},setDarkMode:e=>{a.value=e},setFontFamily:e=>{r.value=e}}})(g.themeConfig);t(v,y);const{borderRadius:D,darkMode:C,fontFamily:F,setBorderRadius:R,setColors:b,setDarkMode:L,setFontFamily:j}=y;let x=null;const B=()=>{if(g.autoDetectDarkMode&&p){const e=M();L(e)}};return a(()=>{g.autoDetectDarkMode&&p&&(B(),x=window.matchMedia("(prefers-color-scheme: dark)"),x.addEventListener("change",B))}),r(()=>{x&&p&&x.removeEventListener("change",B)}),s(()=>g.themeConfig?.borderRadius,e=>{R(e)}),s(()=>g.themeConfig?.colors,e=>{e&&b(e)}),s(()=>g.themeConfig?.darkMode,e=>{void 0===e||g.autoDetectDarkMode||L(e)}),s(()=>g.themeConfig?.fontFamily,e=>{j(e)}),(e,t)=>(d(),l(i(o.tag),{class:c(["clll-theme-provider","--clll-color-theme-"+(m(C)?"dark":"light")]),style:n({"--clll-font-family":m(F),"--clll-default-radius":m(D)?`var(--clll-${m(D)})`:void 0})},{default:u(()=>[f(e.$slots,"default")]),_:3},8,["class","style"]))}});export{g as CLThemeProvider,h as DEFAULT_THEME,v as ThemeInjectionKey,g as default};
+import{ref as e,defineComponent as o,provide as t,onMounted as a,onBeforeUnmount as r,watch as s,createBlock as l,openBlock as d,resolveDynamicComponent as i,normalizeStyle as n,normalizeClass as c,unref as u,withCtx as m,renderSlot as f}from"vue";import{D as h,p as k}from"../../../chunks/index-CGlfDAYR.js";import{T as v}from"../../../chunks/context-BrNC8CsD.js";import{i as p,c as M}from"../../../chunks/helper-BlxFN3eF.js";const g=/* @__PURE__ */o({__name:"CLThemeProvider",props:{tag:{default:"div"},themeConfig:{},autoDetectDarkMode:{type:Boolean,default:!0}},setup(o){const g=o,y=(o=>{const t=e(o?.borderRadius||h.borderRadius),a=e(o?.darkMode??h.darkMode),r=e(o?.fontFamily??h.fontFamily),s=k(h.colors,o?.colors),l=e(s);return{borderRadius:t,colors:l,darkMode:a,fontFamily:r,setBorderRadius:e=>{t.value=e},setColors:e=>{l.value={...l.value,...e}},setDarkMode:e=>{a.value=e},setFontFamily:e=>{r.value=e}}})(g.themeConfig);t(v,y);const{borderRadius:D,darkMode:C,fontFamily:F,setBorderRadius:R,setColors:b,setDarkMode:j,setFontFamily:L}=y;let x=null;const B=()=>{if(g.autoDetectDarkMode&&p){const e=M();j(e)}};return a(()=>{g.autoDetectDarkMode&&p&&(B(),x=window.matchMedia("(prefers-color-scheme: dark)"),x.addEventListener("change",B))}),r(()=>{x&&p&&x.removeEventListener("change",B)}),s(()=>g.themeConfig?.borderRadius,e=>{R(e)}),s(()=>g.themeConfig?.colors,e=>{e&&b(e)}),s(()=>g.themeConfig?.darkMode,e=>{void 0===e||g.autoDetectDarkMode||j(e)}),s(()=>g.themeConfig?.fontFamily,e=>{L(e)}),(e,t)=>(d(),l(i(o.tag),{class:c(["clll-theme-provider","--clll-color-theme-"+(u(C)?"dark":"light")]),style:n({"--clll-font-family":u(F),"--clll-default-radius":u(D)?`var(--clll-${u(D)})`:void 0})},{default:m(()=>[f(e.$slots,"default")]),_:3},8,["class","style"]))}});export{g as CLThemeProvider,h as DEFAULT_THEME,v as ThemeInjectionKey,g as default};

package/dist/components/Providers/CLToastProvider/CLToastProvider.js

@@ -1,2 +1,2 @@
 import '../../../assets/core.css';
-import{defineComponent as s,ref as i,provide as o,createElementBlock as e,openBlock as r,createBlock as a,createCommentVNode as t,renderSlot as d,unref as u,mergeProps as l}from"vue";import{_ as m}from"../../../chunks/CLToast.vue_vue_type_style_index_0_lang-Dw2Am9xs.js";import{T as n}from"../../../chunks/context-JmPivI9V.js";const v={class:"clll-toast-provider"},p=/* @__PURE__ */s({name:"CLToastProvider",__name:"CLToastProvider",props:{borderRadius:{},dismissTimer:{},position:{}},setup(s){const p=s,T=i({}),_=i(!1),c=()=>{_.value=!1,T.value={}};return o(n,{visible:_,showToast:s=>{T.value={...s,borderRadius:s.borderRadius??p.borderRadius,dismissTimer:s.dismissTimer??p.dismissTimer,position:s.position??p.position},_.value=!0},hideToast:c}),(s,i)=>(r(),e("div",v,[_.value?(r(),a(u(m),l({key:0},T.value,{"on-dismiss":c}),null,16)):t("",!0),d(s.$slots,"default")]))}});export{p as CLToastProvider,n as ToastInjectionKey,p as default};
+import{defineComponent as s,ref as i,provide as o,createElementBlock as e,openBlock as r,createBlock as a,createCommentVNode as t,renderSlot as d,unref as u,mergeProps as l}from"vue";import{_ as m}from"../../../chunks/CLToast.vue_vue_type_style_index_0_lang-CwaPbZ_K.js";import{T as n}from"../../../chunks/context-JmPivI9V.js";const v={class:"clll-toast-provider"},p=/* @__PURE__ */s({name:"CLToastProvider",__name:"CLToastProvider",props:{borderRadius:{},dismissTimer:{},position:{}},setup(s){const p=s,T=i({}),_=i(!1),c=()=>{_.value=!1,T.value={}};return o(n,{visible:_,showToast:s=>{T.value={...s,borderRadius:s.borderRadius??p.borderRadius,dismissTimer:s.dismissTimer??p.dismissTimer,position:s.position??p.position},_.value=!0},hideToast:c}),(s,i)=>(r(),e("div",v,[_.value?(r(),a(u(m),l({key:0},T.value,{"on-dismiss":c}),null,16)):t("",!0),d(s.$slots,"default")]))}});export{p as CLToastProvider,n as ToastInjectionKey,p as default};

package/dist/components/Typography/CLHeading/CLHeading.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLHeading.css';
-import{_ as e}from"../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-8r8ehDQf.js";export{e as CLHeading,e as default};
+import{_ as e}from"../../../chunks/CLHeading.vue_vue_type_style_index_0_lang-BkfH2FiT.js";export{e as CLHeading,e as default};

package/dist/components/Typography/CLText/CLText.js

@@ -1,3 +1,3 @@
 import '../../../assets/core.css';
 import './CLText.css';
-import{_ as e}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-CkTc30tw.js";export{e as CLText,e as default};
+import{_ as e}from"../../../chunks/CLText.vue_vue_type_style_index_0_lang-BfbUuVfZ.js";export{e as CLText,e as default};

package/dist/composables/index.d.ts

@@ -2,3 +2,5 @@ export { useTheme } from './useTheme';
 export { useToast } from './useToast';
 export { useElementSize } from './useElementSize';
 export { SizeDimension, SizeMode } from './useElementSize';
+export { useTimePicker } from './useTimePicker';
+export { useTimeInputMask } from './useTimeInputMask';

package/dist/composables/useDatePicker.d.ts

@@ -28,6 +28,7 @@ interface Return {
     handlePrevMonth: () => void;
     initializeDraft: () => void;
     isDraftEnd: (iso: ISODate) => boolean;
+    isDraftSameDay: (iso: ISODate) => boolean;
     isDraftStart: (iso: ISODate) => boolean;
     isInDraftRange: (iso: ISODate) => boolean;
     isoToLocalDate: (iso: ISODate) => Date;

package/dist/composables/useDatePicker.js

@@ -1,2 +1,2 @@
 import '../assets/core.css';
-import{ref as e,onMounted as a,computed as t,unref as l}from"vue";const u=({appliedEnd:u,appliedStart:n,isRange:r=!0}={})=>{const o=e(/* @__PURE__ */new Date),v=e(null),i=e(null),g=e(!1);a(()=>{g.value=!0});const d=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,D=e=>/* @__PURE__ */new Date(`${e}T00:00:00`),s=e=>g.value?D(e).toLocaleDateString("default",{day:"numeric",month:"long",weekday:"long",year:"numeric"}):e,c=e=>{const a=D(e);return`${a.getMonth()+1}/${String(a.getDate())}`},h=e=>{const a=D(e);return`${a.getMonth()+1}/${String(a.getDate())}/${String(a.getFullYear()).slice(-2)}`},f=()=>{const e=n?.value?D(n.value):/* @__PURE__ */new Date;o.value=new Date(e.getFullYear(),e.getMonth(),1)},$=t(()=>{if(!g.value){return`${o.value.getMonth()+1}/${o.value.getFullYear()}`}return o.value.toLocaleString("default",{month:"long",year:"numeric"})}),S=t(()=>{const e=n?.value??null,a=u?.value??null;if(!e)return;if(!l(r))return h(e);if(!a)return h(e);return D(e).getFullYear()!==D(a).getFullYear()?`${h(e)} - ${h(a)}`:`${c(e)} - ${c(a)}`}),m=e=>i.value===e,M=e=>v.value===e,w=e=>!!l(r)&&(!!i.value&&(v.value?e>=i.value&&e<=v.value:e===i.value));return{calendarGrid:t(()=>{const e=o.value.getFullYear(),a=o.value.getMonth(),t=new Date(e,a,1),l=new Date(e,a+1,0).getDate(),u=new Date(e,a,0).getDate(),n=t.getDay(),r=[];for(let o=0;o<n;o++){const t=u-(n-1-o),l=d(new Date(e,a-1,t));r.push({day:t,date:l,isOutsideMonth:!0})}for(let o=1;o<=l;o++){const t=d(new Date(e,a,o));r.push({day:o,date:t,isOutsideMonth:!1})}let v=1;for(;r.length<42;){const t=d(new Date(e,a+1,v));r.push({day:v,date:t,isOutsideMonth:!0}),v++}return r}),cancelDraft:()=>{i.value=n?.value??null,v.value=u?.value??null},clearDraft:()=>{n&&(n.value=null),u&&(u.value=null),i.value=null,v.value=null},currentDate:o,currentMonthLabel:$,draftEnd:v,draftStart:i,formatDateToISO:d,formatHumanDate:e=>g.value?D(e).toLocaleDateString("default",{day:"numeric",month:"short",year:"numeric"}):e,formatLongDate:s,formatShortNoYear:c,formatShortWithYear:h,getDayAriaLabel:e=>l(r)?m(e)?`${s(e)} (start date)`:M(e)?`${s(e)} (end date)`:w(e)?`${s(e)} (in range)`:s(e):m(e)?`${s(e)} (selected)`:s(e),handleNextMonth:()=>{o.value=new Date(o.value.getFullYear(),o.value.getMonth()+1,1)},handlePrevMonth:()=>{o.value=new Date(o.value.getFullYear(),o.value.getMonth()-1,1)},initializeDraft:()=>{f(),i.value=n?.value??null,v.value=u?.value??null},isDraftEnd:M,isDraftStart:m,isInDraftRange:w,isoToLocalDate:D,onDayClick:e=>{if(e)return l(r)?!i.value||i.value&&v.value?(i.value=e,void(v.value=null)):e<i.value?(v.value=i.value,void(i.value=e)):void(v.value=e):(i.value=e,void(v.value=null))},rangeLabel:S,setCalendarMonthToAppliedOrToday:f,weekDays:["Su","Mo","Tu","We","Th","Fr","Sa"]}};export{u as useDatePicker};
+import{ref as e,onMounted as a,computed as t,unref as l}from"vue";const u=({appliedEnd:u,appliedStart:n,isRange:r=!0}={})=>{const o=e(/* @__PURE__ */new Date),v=e(null),i=e(null),d=e(!1);a(()=>{d.value=!0});const g=e=>`${e.getFullYear()}-${String(e.getMonth()+1).padStart(2,"0")}-${String(e.getDate()).padStart(2,"0")}`,D=e=>/* @__PURE__ */new Date(`${e}T00:00:00`),s=e=>d.value?D(e).toLocaleDateString("default",{day:"numeric",month:"long",weekday:"long",year:"numeric"}):e,c=e=>{const a=D(e);return`${a.getMonth()+1}/${String(a.getDate())}`},h=e=>{const a=D(e);return`${a.getMonth()+1}/${String(a.getDate())}/${String(a.getFullYear()).slice(-2)}`},f=()=>{const e=n?.value?D(n.value):/* @__PURE__ */new Date;o.value=new Date(e.getFullYear(),e.getMonth(),1)},$=t(()=>{if(!d.value){return`${o.value.getMonth()+1}/${o.value.getFullYear()}`}return o.value.toLocaleString("default",{month:"long",year:"numeric"})}),S=t(()=>{const e=n?.value??null,a=u?.value??null;if(!e)return;if(!l(r))return h(e);if(!a)return h(e);return D(e).getFullYear()!==D(a).getFullYear()?`${h(e)} - ${h(a)}`:`${c(e)} - ${c(a)}`}),m=e=>i.value===e,y=e=>v.value===e,M=e=>Boolean(l(r)&&i.value&&v.value&&i.value===v.value&&i.value===e),w=e=>!!l(r)&&(!!i.value&&(v.value?e>=i.value&&e<=v.value:e===i.value));return{calendarGrid:t(()=>{const e=o.value.getFullYear(),a=o.value.getMonth(),t=new Date(e,a,1),l=new Date(e,a+1,0).getDate(),u=new Date(e,a,0).getDate(),n=t.getDay(),r=[];for(let o=0;o<n;o++){const t=u-(n-1-o),l=g(new Date(e,a-1,t));r.push({day:t,date:l,isOutsideMonth:!0})}for(let o=1;o<=l;o++){const t=g(new Date(e,a,o));r.push({day:o,date:t,isOutsideMonth:!1})}let v=1;for(;r.length<42;){const t=g(new Date(e,a+1,v));r.push({day:v,date:t,isOutsideMonth:!0}),v++}return r}),cancelDraft:()=>{i.value=n?.value??null,v.value=u?.value??null},clearDraft:()=>{n&&(n.value=null),u&&(u.value=null),i.value=null,v.value=null},currentDate:o,currentMonthLabel:$,draftEnd:v,draftStart:i,formatDateToISO:g,formatHumanDate:e=>d.value?D(e).toLocaleDateString("default",{day:"numeric",month:"short",year:"numeric"}):e,formatLongDate:s,formatShortNoYear:c,formatShortWithYear:h,getDayAriaLabel:e=>l(r)?M(e)?`${s(e)} (same day selected)`:m(e)?`${s(e)} (start date)`:y(e)?`${s(e)} (end date)`:w(e)?`${s(e)} (in range)`:s(e):m(e)?`${s(e)} (selected)`:s(e),handleNextMonth:()=>{o.value=new Date(o.value.getFullYear(),o.value.getMonth()+1,1)},handlePrevMonth:()=>{o.value=new Date(o.value.getFullYear(),o.value.getMonth()-1,1)},initializeDraft:()=>{f(),i.value=n?.value??null,v.value=u?.value??null},isDraftEnd:y,isDraftSameDay:M,isDraftStart:m,isInDraftRange:w,isoToLocalDate:D,onDayClick:e=>{if(e)return l(r)?!i.value||i.value&&v.value?(i.value=e,void(v.value=null)):e<i.value?(v.value=i.value,void(i.value=e)):void(v.value=e):(i.value=e,void(v.value=null))},rangeLabel:S,setCalendarMonthToAppliedOrToday:f,weekDays:["Su","Mo","Tu","We","Th","Fr","Sa"]}};export{u as useDatePicker};

package/dist/composables/useTheme.js

@@ -1,2 +1,2 @@
 import '../assets/core.css';
-import{ref as o,getCurrentInstance as e,inject as r}from"vue";import{D as a}from"../chunks/index-C_yUYGq9.js";import{T as n}from"../chunks/context-BrNC8CsD.js";const s=o(a.borderRadius),t=o(a.darkMode),l=o(a.fontFamily),u=o(a.colors||{primary:{},secondary:{},neutral:{},danger:{},warning:{},success:{},info:{}}),m=()=>{const o=e(),a=o?.type.name||"(anonymous component)",m=r(n,null);return m||(console.warn(`[Callaloo]: useTheme() must be used within a <CLThemeProvider />. Called from component: ${a}`,(new Error).stack),{borderRadius:s,colors:u,darkMode:t,fontFamily:l,setBorderRadius:o=>{s.value=o},setColors:o=>{u.value={...u.value,...o}},setDarkMode:o=>{t.value=o},setFontFamily:o=>{l.value=o}})};export{m as useTheme};
+import{ref as o,getCurrentInstance as e,inject as r}from"vue";import{D as a}from"../chunks/index-CGlfDAYR.js";import{T as n}from"../chunks/context-BrNC8CsD.js";const s=o(a.borderRadius),t=o(a.darkMode),l=o(a.fontFamily),u=o(a.colors||{primary:{},secondary:{},neutral:{},danger:{},warning:{},success:{},info:{}}),m=()=>{const o=e(),a=o?.type.name||"(anonymous component)",m=r(n,null);return m||(console.warn(`[Callaloo]: useTheme() must be used within a <CLThemeProvider />. Called from component: ${a}`,(new Error).stack),{borderRadius:s,colors:u,darkMode:t,fontFamily:l,setBorderRadius:o=>{s.value=o},setColors:o=>{u.value={...u.value,...o}},setDarkMode:o=>{t.value=o},setFontFamily:o=>{l.value=o}})};export{m as useTheme};

package/dist/composables/useTimeInputMask.d.ts

@@ -0,0 +1,6 @@
+import { Ref } from 'vue';
+export declare const useTimeInputMask: () => {
+    formatAsTime: (value: string, use24Hour: boolean) => string;
+    handleTimeInput: (event: Event, inputValueRef: Ref<string>, use24Hour: boolean, callback?: () => void) => void;
+    validateTime: (value: string, use24Hour: boolean) => boolean;
+};

package/dist/composables/useTimeInputMask.js

@@ -0,0 +1,2 @@
+import '../assets/core.css';
+import{nextTick as e}from"vue";const t=()=>{const t=(e,t)=>{const n=e.toUpperCase(),i=n.replace(/\D/g,"");if(t){const e=i.slice(0,4);return e.length>2?`${e.slice(0,2)}:${e.slice(2)}`:e}const l=i.slice(0,4);let r="";return n.includes("P")?r=" PM":n.includes("A")&&(r=" AM"),l.length>2?`${l.slice(0,2)}:${l.slice(2)}${r}`:`${l}${r}`};return{formatAsTime:t,handleTimeInput:(n,i,l,r)=>{const s=n.target,c=s.value,u=n.inputType?.includes("delete"),o=s.selectionStart;if(u)return i.value=c,void r?.();const a=t(c,l);c!==a?(i.value=a,e(()=>{if(null!==o){let e=o;const t=a.length-c.length;t>0&&(e+=t),s.setSelectionRange(e,e)}})):i.value=c,r?.()},validateTime:(e,t)=>{if(!e||!e.trim())return!0;if(t){return/^([01]\d|2[0-3]):([0-5]\d)$/.test(e.trim())}return/^(0[1-9]|1[0-2]):([0-5]\d)\s*(AM|PM|am|pm)$/i.test(e.trim())}}};export{t as useTimeInputMask};

package/dist/composables/useTimePicker.d.ts

@@ -0,0 +1,24 @@
+import { MaybeRef, Ref } from 'vue';
+export type TimePeriod = 'AM' | 'PM';
+export interface TimeObject {
+    hour: string;
+    minute: string;
+    period: TimePeriod;
+}
+interface UseTimePickerInput {
+    appliedTime?: Ref<string | null>;
+    use24Hour?: MaybeRef<boolean>;
+}
+export declare const useTimePicker: ({ appliedTime, use24Hour }?: UseTimePickerInput) => {
+    cancelDraft: () => void;
+    clearDraft: () => void;
+    draftHour: Ref<string, string>;
+    draftMinute: Ref<string, string>;
+    draftPeriod: Ref<TimePeriod, TimePeriod>;
+    formattedLabel: globalThis.ComputedRef<string | undefined>;
+    formatTimeObject: (obj: TimeObject, is24?: boolean) => string;
+    getFormattedDraft: () => string;
+    initializeDraft: () => void;
+    parseTime: (timeStr: string | null) => TimeObject;
+};
+export {};

package/dist/composables/useTimePicker.js

@@ -0,0 +1,2 @@
+import '../assets/core.css';
+import{ref as t,computed as r,unref as e}from"vue";const a=({appliedTime:a,use24Hour:i=!1}={})=>{const n=t("12"),u=t("00"),o=t("AM"),p=t=>{if(!t||!t.trim())return{hour:"12",minute:"00",period:"AM"};const r=e(i),a=t.trim(),n=a.match(/^(\d{1,2}):(\d{2})\s*(AM|PM|am|pm)$/i);if(n){let t=parseInt(n[1],10);const r=parseInt(n[2],10),e=n[3].toUpperCase();return t<1&&(t=12),t>12&&(t=12),{hour:String(t).padStart(2,"0"),minute:String(Math.min(59,Math.max(0,r))).padStart(2,"0"),period:e}}const u=a.match(/^(\d{1,2}):(\d{2})$/);if(u){let t=parseInt(u[1],10);const e=parseInt(u[2],10);if(r)return t=Math.min(23,Math.max(0,t)),{hour:String(t).padStart(2,"0"),minute:String(Math.min(59,Math.max(0,e))).padStart(2,"0"),period:"AM"};let a="AM";return t>=12?(a="PM",t>12&&(t-=12)):0===t&&(t=12),{hour:String(t).padStart(2,"0"),minute:String(Math.min(59,Math.max(0,e))).padStart(2,"0"),period:a}}return{hour:"12",minute:"00",period:"AM"}},m=(t,r=e(i))=>{let a=parseInt(t.hour,10);const n=t.minute.padStart(2,"0");return r?("PM"===t.period&&a<12&&(a+=12),"AM"===t.period&&12===a&&(a=0),`${String(a).padStart(2,"0")}:${n}`):`${t.hour}:${n} ${t.period}`},d=()=>{const t=p(a?.value??null);n.value=t.hour,u.value=t.minute,o.value=t.period},l=r(()=>{if(!a?.value)return;const t=p(a.value);return m(t,e(i))});return{cancelDraft:()=>{d()},clearDraft:()=>{a&&(a.value=null),n.value="12",u.value="00",o.value="AM"},draftHour:n,draftMinute:u,draftPeriod:o,formattedLabel:l,formatTimeObject:m,getFormattedDraft:()=>m({hour:n.value,minute:u.value,period:o.value},e(i)),initializeDraft:d,parseTime:p}};export{a as useTimePicker};

package/dist/index.cdn.d.ts

@@ -11,6 +11,8 @@ import { default as CLCalendar } from './components/Form/CLCalendar/CLCalendar.v
 import { default as CLCheckbox } from './components/Form/CLCheckbox/CLCheckbox.vue';
 import { default as CLInput } from './components/Form/CLInput/CLInput.vue';
 import { default as CLInputDatePicker } from './components/Form/CLInputDatePicker/CLInputDatePicker.vue';
+import { default as CLTimePicker } from './components/Form/CLTimePicker/CLTimePicker.vue';
+import { default as CLInputTimePicker } from './components/Form/CLInputTimePicker/CLInputTimePicker.vue';
 import { default as CLRadioButton } from './components/Form/CLRadioButton/CLRadioButton.vue';
 import { default as CLSelect } from './components/Form/CLSelect/CLSelect.vue';
 import { default as CLTextArea } from './components/Form/CLTextArea/CLTextArea.vue';
@@ -22,6 +24,7 @@ import { default as CLSkeleton } from './components/Loading/CLSkeleton/CLSkeleto
 import { default as CLSpinner } from './components/Loading/CLSpinner/CLSpinner.vue';
 import { default as CLModal } from './components/Modals/CLModal/CLModal.vue';
 import { default as CLModalDatePicker } from './components/Modals/CLModalDatePicker/CLModalDatePicker.vue';
+import { default as CLModalTimePicker } from './components/Modals/CLModalTimePicker/CLModalTimePicker.vue';
 import { default as CLLink } from './components/Navigation/CLLink/CLLink.vue';
 import { default as CLNavLink } from './components/Navigation/CLNavLink/CLNavLink.vue';
 import { default as CLNavSection } from './components/Navigation/CLNavSection/CLNavSection.vue';
@@ -33,8 +36,10 @@ import { default as CLHeading } from './components/Typography/CLHeading/CLHeadin
 import { default as CLText } from './components/Typography/CLText/CLText.vue';
 export { useTheme } from './composables/useTheme';
 export { useToast } from './composables/useToast';
+export { useTimePicker } from './composables/useTimePicker';
+export { useTimeInputMask } from './composables/useTimeInputMask';
 export * from './types';
-export { CLIcon, CLTable, CLA11yButton, CLButton, CLCard, CLCarousel, CLDisclosure, CLDrawer, CLCalendar, CLCheckbox, CLInput, CLInputDatePicker, CLRadioButton, CLSelect, CLTextArea, CLBadge, CLBanner, CLPill, CLProgress, CLSkeleton, CLSpinner, CLModal, CLModalDatePicker, CLLink, CLNavLink, CLNavSection, CLDropdownMenu, CLToast, CLThemeProvider, CLToastProvider, CLHeading, CLText };
+export { CLIcon, CLTable, CLA11yButton, CLButton, CLCard, CLCarousel, CLDisclosure, CLDrawer, CLCalendar, CLCheckbox, CLInput, CLInputDatePicker, CLTimePicker, CLInputTimePicker, CLRadioButton, CLSelect, CLTextArea, CLBadge, CLBanner, CLPill, CLProgress, CLSkeleton, CLSpinner, CLModal, CLModalDatePicker, CLModalTimePicker, CLLink, CLNavLink, CLNavSection, CLDropdownMenu, CLToast, CLThemeProvider, CLToastProvider, CLHeading, CLText };
 declare const _default: {
     install(app: App): void;
 };

package/dist/index.js

@@ -1 +1 @@
-export{i as CLAlign,h as CLBorderRadius,j as CLCardTypes,c as CLColorVariants,d as CLColors,m as CLDrawerPosition,k as CLHeadingTypes,f as CLIconNames,e as CLIconSizes,b as CLMode,n as CLPlacement,l as CLPosition,C as CLSizes,q as CLTableTypes,a as CLTextTypes,p as CLToastPosition}from"./chunks/index-C_yUYGq9.js";export{C as CLCharCounterLayout,a as CLHeadingLevels,h as CLInputTypes,b as CLLinkTarget,d as CLLoading,i as CLMessageType,e as CLOrder,f as CLOrientation,c as CLOverflow,g as CLPaginationType}from"./chunks/index-ojQDOR8H.js";var s=/* @__PURE__ */(s=>(s.Button="button",s.Submit="submit",s))(s||{});export{s as CLButtonTypes};
+export{i as CLAlign,h as CLBorderRadius,k as CLCardTypes,c as CLColorVariants,d as CLColors,m as CLDrawerPosition,l as CLHeadingTypes,f as CLIconNames,e as CLIconSizes,b as CLMode,n as CLPlacement,j as CLPosition,C as CLSizes,q as CLTableTypes,a as CLTextTypes,o as CLToastPosition}from"./chunks/index-CGlfDAYR.js";export{C as CLCharCounterLayout,b as CLHeadingLevels,h as CLInputTypes,a as CLLinkTarget,d as CLLoading,i as CLMessageType,e as CLOrder,f as CLOrientation,c as CLOverflow,g as CLPaginationType}from"./chunks/index-C9S3C1LU.js";var s=/* @__PURE__ */(s=>(s.Button="button",s.Submit="submit",s))(s||{});export{s as CLButtonTypes};