calkit 0.1.0

package/dist/timepicker.umd.js

@@ -0,0 +1,517 @@
+(function(b,v){typeof exports=="object"&&typeof module<"u"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(b=typeof globalThis<"u"?globalThis:b||self,v(b.CalTimepicker={}))})(this,(function(b){"use strict";class v extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this._initialized=!1}static get styles(){return[]}connectedCallback(){this._initialized||(this._adoptStyles(),this._initialized=!0),this.render()}_adoptStyles(){const e=this.constructor.styles;if(e.length)if("adoptedStyleSheets"in this.shadowRoot)this.shadowRoot.adoptedStyleSheets=e.map(s=>{if(s instanceof CSSStyleSheet)return s;const t=new CSSStyleSheet;return t.replaceSync(s),t});else for(const s of e){const t=document.createElement("style");t.textContent=s instanceof CSSStyleSheet?"":s,this.shadowRoot.prepend(t)}}render(){}emit(e,s={}){this.dispatchEvent(new CustomEvent(e,{detail:s,bubbles:!0,composed:!0}))}showStatus(e,s,t={}){if(!this._store)return;const{autoDismiss:a,dismissible:i=!0}=t;clearTimeout(this._statusTimer),this._store.set({statusType:e,statusMessage:s,statusDismissible:i}),this.emit("cal:status",{type:e,message:s}),a&&a>0&&(this._statusTimer=setTimeout(()=>this.clearStatus(),a))}clearStatus(){this._store&&(clearTimeout(this._statusTimer),this._store.set({statusType:null,statusMessage:null,statusDismissible:!0}),this.emit("cal:status",{type:null,message:null}))}$(e){return this.shadowRoot.querySelector(e)}$$(e){return this.shadowRoot.querySelectorAll(e)}}function E(r){let e={...r};const s=new Set;return{get(t){return e[t]},set(t){const a=e;e={...e,...t};let i=!1;for(const l of Object.keys(t))if(a[l]!==e[l]){i=!0;break}if(i)for(const l of s)l(e,a)},getState(){return e},subscribe(t){return s.add(t),()=>s.delete(t)}}}function x(r){if(!r||typeof r!="string")return null;const e=r.trim().toUpperCase(),s=e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/);if(s){let a=parseInt(s[1],10);const i=parseInt(s[2],10),l=s[3];return l==="AM"&&a===12&&(a=0),l==="PM"&&a!==12&&(a+=12),{hours:a,minutes:i}}const t=e.match(/^(\d{1,2}):(\d{2})$/);return t?{hours:parseInt(t[1],10),minutes:parseInt(t[2],10)}:null}function _(r,e,s="24h"){const t=String(e).padStart(2,"0");if(s==="12h"){const a=r>=12?"PM":"AM";return`${r%12||12}:${t} ${a}`}return`${String(r).padStart(2,"0")}:${t}`}function g(r){const e=x(r);return e?e.hours*60+e.minutes:0}function S(r){const e=Math.floor(r/60)%24,s=r%60;return`${String(e).padStart(2,"0")}:${String(s).padStart(2,"0")}`}function M(r,e,s){const t=[],a=g(r),i=g(e);for(let l=a;l<=i;l+=s)t.push(S(l));return t}function z(r,e,s,t="24h"){const a=[],i=g(r),l=g(e);for(let c=i;c<=l;c+=s){const u=S(c),h=c+s,m=S(Math.min(h,l+s)),d=x(u),n=x(m),o=d?_(d.hours,d.minutes,t):u,p=n?_(n.hours,n.minutes,t):m;a.push({time:u,displayText:`${o}–${p}`})}return a}function w(r,e,s){const t=g(r),a=g(e),i=g(s),l=Math.min(a,i),c=Math.max(a,i);return t>=l&&t<=c}const $=`
+  :host {
+    /* Light theme (default) */
+    --cal-bg: 0 0% 100%;
+    --cal-bg-muted: 240 5% 96%;
+    --cal-fg: 240 6% 10%;
+    --cal-fg-muted: 240 4% 46%;
+    --cal-border: 240 6% 90%;
+    --cal-accent: 240 6% 10%;
+    --cal-accent-fg: 0 0% 100%;
+    --cal-accent-subtle: 240 5% 96%;
+    --cal-hover: 240 5% 93%;
+    --cal-ring: 240 6% 10%;
+    --cal-radius: 8px;
+    --cal-radius-sm: 6px;
+    --cal-cell-size: 36px;
+    --cal-transition: 150ms ease;
+
+    /* Booking color palette (softer / less saturated) */
+    --cal-booking-blue-bg: 217 55% 94%;
+    --cal-booking-blue-fg: 217 60% 35%;
+    --cal-booking-green-bg: 152 45% 93%;
+    --cal-booking-green-fg: 152 55% 28%;
+    --cal-booking-red-bg: 4 50% 94%;
+    --cal-booking-red-fg: 4 55% 40%;
+    --cal-booking-orange-bg: 30 55% 93%;
+    --cal-booking-orange-fg: 30 60% 35%;
+    --cal-booking-gray-bg: 240 8% 94%;
+    --cal-booking-gray-fg: 240 8% 38%;
+
+    /* Booking hover tokens */
+    --cal-booking-blue-hover: 217 55% 88%;
+    --cal-booking-green-hover: 152 45% 87%;
+    --cal-booking-red-hover: 4 50% 88%;
+    --cal-booking-orange-hover: 30 55% 87%;
+    --cal-booking-gray-hover: 240 8% 88%;
+
+    /* Scheduler tokens */
+    --cal-sched-grid-line: 240 6% 94%;
+    --cal-sched-now-line: 4 70% 55%;
+    --cal-sched-slot-hover: 240 5% 97%;
+    --cal-sched-header-bg: 240 5% 98%;
+
+    /* Status tokens */
+    --cal-status-error-bg: 4 50% 95%;
+    --cal-status-error-fg: 4 55% 40%;
+    --cal-status-error-border: 4 50% 85%;
+    --cal-status-warning-bg: 40 55% 95%;
+    --cal-status-warning-fg: 40 60% 35%;
+    --cal-status-warning-border: 40 50% 85%;
+    --cal-status-info-bg: 217 55% 95%;
+    --cal-status-info-fg: 217 60% 35%;
+    --cal-status-info-border: 217 50% 85%;
+    --cal-status-success-bg: 152 45% 95%;
+    --cal-status-success-fg: 152 55% 28%;
+    --cal-status-success-border: 152 45% 85%;
+  }
+
+  :host([theme="dark"]) {
+    --cal-bg: 240 6% 10%;
+    --cal-bg-muted: 240 4% 16%;
+    --cal-fg: 0 0% 98%;
+    --cal-fg-muted: 240 4% 54%;
+    --cal-border: 240 4% 20%;
+    --cal-accent: 0 0% 98%;
+    --cal-accent-fg: 240 6% 10%;
+    --cal-accent-subtle: 240 4% 16%;
+    --cal-hover: 240 4% 20%;
+    --cal-ring: 0 0% 98%;
+
+    --cal-booking-blue-bg: 217 50% 25%;
+    --cal-booking-blue-fg: 217 80% 75%;
+    --cal-booking-green-bg: 142 40% 22%;
+    --cal-booking-green-fg: 142 70% 70%;
+    --cal-booking-red-bg: 4 45% 25%;
+    --cal-booking-red-fg: 4 70% 75%;
+    --cal-booking-orange-bg: 30 45% 25%;
+    --cal-booking-orange-fg: 30 80% 75%;
+    --cal-booking-gray-bg: 240 5% 22%;
+    --cal-booking-gray-fg: 240 5% 65%;
+
+    --cal-booking-blue-hover: 217 50% 30%;
+    --cal-booking-green-hover: 142 40% 27%;
+    --cal-booking-red-hover: 4 45% 30%;
+    --cal-booking-orange-hover: 30 45% 30%;
+    --cal-booking-gray-hover: 240 5% 27%;
+
+    --cal-sched-grid-line: 240 4% 18%;
+    --cal-sched-now-line: 4 55% 55%;
+    --cal-sched-slot-hover: 240 4% 14%;
+    --cal-sched-header-bg: 240 5% 12%;
+
+    --cal-status-error-bg: 4 45% 20%;
+    --cal-status-error-fg: 4 70% 75%;
+    --cal-status-error-border: 4 45% 30%;
+    --cal-status-warning-bg: 40 45% 20%;
+    --cal-status-warning-fg: 40 80% 75%;
+    --cal-status-warning-border: 40 45% 30%;
+    --cal-status-info-bg: 217 50% 20%;
+    --cal-status-info-fg: 217 80% 75%;
+    --cal-status-info-border: 217 50% 30%;
+    --cal-status-success-bg: 152 40% 18%;
+    --cal-status-success-fg: 152 70% 70%;
+    --cal-status-success-border: 152 40% 28%;
+  }
+
+  :host([theme="auto"]) {
+    --cal-bg: 0 0% 100%;
+    --cal-bg-muted: 240 5% 96%;
+    --cal-fg: 240 6% 10%;
+    --cal-fg-muted: 240 4% 46%;
+    --cal-border: 240 6% 90%;
+    --cal-accent: 240 6% 10%;
+    --cal-accent-fg: 0 0% 100%;
+    --cal-accent-subtle: 240 5% 96%;
+    --cal-hover: 240 5% 93%;
+    --cal-ring: 240 6% 10%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host([theme="auto"]) {
+      --cal-bg: 240 6% 10%;
+      --cal-bg-muted: 240 4% 16%;
+      --cal-fg: 0 0% 98%;
+      --cal-fg-muted: 240 4% 54%;
+      --cal-border: 240 4% 20%;
+      --cal-accent: 0 0% 98%;
+      --cal-accent-fg: 240 6% 10%;
+      --cal-accent-subtle: 240 4% 16%;
+      --cal-hover: 240 4% 20%;
+      --cal-ring: 0 0% 98%;
+
+      --cal-booking-blue-bg: 217 50% 25%;
+      --cal-booking-blue-fg: 217 80% 75%;
+      --cal-booking-green-bg: 142 40% 22%;
+      --cal-booking-green-fg: 142 70% 70%;
+      --cal-booking-red-bg: 4 45% 25%;
+      --cal-booking-red-fg: 4 70% 75%;
+      --cal-booking-orange-bg: 30 45% 25%;
+      --cal-booking-orange-fg: 30 80% 75%;
+      --cal-booking-gray-bg: 240 5% 22%;
+      --cal-booking-gray-fg: 240 5% 65%;
+
+      --cal-booking-blue-hover: 217 50% 30%;
+      --cal-booking-green-hover: 142 40% 27%;
+      --cal-booking-red-hover: 4 45% 30%;
+      --cal-booking-orange-hover: 30 45% 30%;
+      --cal-booking-gray-hover: 240 5% 27%;
+
+      --cal-sched-grid-line: 240 4% 18%;
+      --cal-sched-now-line: 4 55% 55%;
+      --cal-sched-slot-hover: 240 4% 14%;
+      --cal-sched-header-bg: 240 5% 12%;
+
+      --cal-status-error-bg: 4 45% 20%;
+      --cal-status-error-fg: 4 70% 75%;
+      --cal-status-error-border: 4 45% 30%;
+      --cal-status-warning-bg: 40 45% 20%;
+      --cal-status-warning-fg: 40 80% 75%;
+      --cal-status-warning-border: 40 45% 30%;
+      --cal-status-info-bg: 217 50% 20%;
+      --cal-status-info-fg: 217 80% 75%;
+      --cal-status-info-border: 217 50% 30%;
+      --cal-status-success-bg: 152 40% 18%;
+      --cal-status-success-fg: 152 70% 70%;
+      --cal-status-success-border: 152 40% 28%;
+    }
+  }
+`,O=`
+  :host {
+    display: inline-block;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+    color: hsl(var(--cal-fg));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host([display="inline"]) {
+    display: inline-block;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  button {
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  button:focus-visible {
+    outline: 2px solid hsl(var(--cal-ring));
+    outline-offset: 2px;
+    border-radius: var(--cal-radius-sm);
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+`,B=`
+  @keyframes cal-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes cal-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes cal-slide-left {
+    from {
+      opacity: 0;
+      transform: translateX(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes cal-slide-right {
+    from {
+      opacity: 0;
+      transform: translateX(-16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .cal-animate-fade { animation: cal-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1); }
+  .cal-animate-slide-up { animation: cal-slide-up 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+  .cal-animate-slide-left { animation: cal-slide-left 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+  .cal-animate-slide-right { animation: cal-slide-right 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+
+  @keyframes cal-shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+
+  .cal-skeleton {
+    background: linear-gradient(
+      90deg,
+      hsl(var(--cal-bg-muted)) 25%,
+      hsl(var(--cal-hover)) 50%,
+      hsl(var(--cal-bg-muted)) 75%
+    );
+    background-size: 200% 100%;
+    animation: cal-shimmer 1.5s infinite ease-in-out;
+    border-radius: 999px;
+  }
+
+  .cal-skeleton--rect {
+    border-radius: var(--cal-radius-sm);
+  }
+`;function R({trigger:r,content:e,onClose:s}){const t=document.createElement("div");t.classList.add("cal-popover"),t.setAttribute("role","dialog"),t.setAttribute("aria-modal","false"),t.style.display="none",t.appendChild(e);let a=!1;function i(){t.classList.remove("cal-popover--above");const d=r.getBoundingClientRect(),n=t.offsetHeight,o=window.innerHeight-d.bottom,p=d.top;o<n+8&&p>o?(t.classList.add("cal-popover--above"),t.style.top="auto",t.style.bottom="100%",t.style.marginBottom="4px",t.style.marginTop="0"):(t.style.top="100%",t.style.bottom="auto",t.style.marginTop="4px",t.style.marginBottom="0")}function l(){a||(a=!0,t.style.display="",t.classList.add("cal-animate-slide-up"),requestAnimationFrame(()=>i()),document.addEventListener("click",u,!0),document.addEventListener("keydown",h,!0))}function c(){a&&(a=!1,t.style.display="none",t.classList.remove("cal-animate-slide-up"),document.removeEventListener("click",u,!0),document.removeEventListener("keydown",h,!0),s==null||s())}function u(d){var o;const n=(o=r.getRootNode())==null?void 0:o.host;n&&!n.contains(d.target)&&d.target!==n&&c()}function h(d){d.key==="Escape"&&(d.stopPropagation(),c())}function m(){a&&(a=!1,t.style.display="none",t.classList.remove("cal-animate-slide-up")),document.removeEventListener("click",u,!0),document.removeEventListener("keydown",h,!0)}return{panel:t,open:l,close:c,destroy:m,get isOpen(){return a}}}const j=`
+  .cal-popover-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .cal-popover {
+    position: absolute;
+    left: 0;
+    z-index: 50;
+    background: hsl(var(--cal-bg));
+    border: 1px solid hsl(var(--cal-border));
+    border-radius: var(--cal-radius);
+    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
+    padding: 12px;
+  }
+
+  .cal-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 36px;
+    padding: 0 12px;
+    font-size: 14px;
+    border: 1px solid hsl(var(--cal-border));
+    border-radius: var(--cal-radius-sm);
+    background: hsl(var(--cal-bg));
+    color: hsl(var(--cal-fg));
+    cursor: pointer;
+    transition: border-color var(--cal-transition);
+    white-space: nowrap;
+  }
+
+  .cal-trigger:hover {
+    border-color: hsl(var(--cal-fg-muted));
+  }
+
+  .cal-trigger--placeholder {
+    color: hsl(var(--cal-fg-muted));
+  }
+
+  .cal-trigger__icon {
+    display: flex;
+    color: hsl(var(--cal-fg-muted));
+  }
+`;function H(r){const{slots:e=[],mode:s="single",format:t="24h",selected:a,hoverTime:i,rangeStart:l,unavailableTimes:c=[],onSelect:u,onHover:h,durationLabels:m=!1}=r,d=document.createElement("div");d.classList.add("cal-time-grid"),m&&d.classList.add("cal-time-grid--duration"),d.setAttribute("role","listbox"),s==="multi"&&d.setAttribute("aria-multiselectable","true");for(const n of e){const o=document.createElement("button");o.classList.add("cal-time-slot"),o.setAttribute("role","option"),o.dataset.time=n.time;const p=x(n.time),F=n.displayText?n.displayText:p?_(p.hours,p.minutes,t):n.time,T=document.createElement("span");if(T.classList.add("cal-time-slot__time"),T.textContent=F,o.appendChild(T),n.label){const f=document.createElement("span");f.classList.add("cal-time-slot__label"),f.textContent=n.label,o.appendChild(f)}const A=n.available===!1||c.includes(n.time);if(A&&(o.classList.add("cal-time-slot--unavailable"),o.disabled=!0,o.setAttribute("aria-disabled","true")),I(n.time,a,s)?(o.classList.add("cal-time-slot--selected"),o.setAttribute("aria-selected","true")):o.setAttribute("aria-selected","false"),s==="range"&&l&&!P(a)&&i){const f=w(n.time,l,i),k=n.time===l,y=n.time===i;f&&!k&&!y&&o.classList.add("cal-time-slot--in-range"),k&&o.classList.add("cal-time-slot--range-start"),y&&o.classList.add("cal-time-slot--range-end")}else if(s==="range"&&a&&typeof a=="object"&&a.start&&a.end){const f=w(n.time,a.start,a.end),k=n.time===a.start,y=n.time===a.end;k&&o.classList.add("cal-time-slot--range-start","cal-time-slot--selected"),y&&o.classList.add("cal-time-slot--range-end","cal-time-slot--selected"),f&&!k&&!y&&o.classList.add("cal-time-slot--in-range")}A||(o.addEventListener("click",()=>u==null?void 0:u(n.time)),o.addEventListener("mouseenter",()=>h==null?void 0:h(n.time))),d.appendChild(o)}return d.addEventListener("mouseleave",()=>h==null?void 0:h(null)),d}function I(r,e,s){return e?s==="single"?e===r:s==="multi"?Array.isArray(e)&&e.includes(r):s==="range"&&typeof e=="object"&&e.start&&e.end?e.start===r||e.end===r:!1:!1}function P(r){return r&&typeof r=="object"&&r.start&&r.end}const D=`
+  .cal-time-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 6px;
+    max-height: 280px;
+    overflow-y: auto;
+    padding: 4px;
+  }
+
+  .cal-time-grid::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .cal-time-grid::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .cal-time-grid::-webkit-scrollbar-thumb {
+    background: hsl(var(--cal-border));
+    border-radius: 3px;
+  }
+
+  .cal-time-slot {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    padding: 0 8px;
+    border-radius: 999px;
+    font-size: 13px;
+    background: hsl(var(--cal-bg-muted));
+    color: hsl(var(--cal-fg));
+    transition: background var(--cal-transition), color var(--cal-transition);
+    gap: 1px;
+  }
+
+  .cal-time-slot:not(.cal-time-slot--unavailable):not(.cal-time-slot--selected):hover {
+    background: hsl(var(--cal-hover));
+  }
+
+  .cal-time-slot__time {
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  .cal-time-slot__label {
+    font-size: 9px;
+    opacity: 0.7;
+    line-height: 1;
+  }
+
+  .cal-time-slot--selected {
+    background: hsl(var(--cal-accent));
+    color: hsl(var(--cal-accent-fg));
+    font-weight: 600;
+  }
+
+  .cal-time-slot--in-range {
+    background: hsl(var(--cal-accent-subtle));
+  }
+
+  .cal-time-slot--range-start,
+  .cal-time-slot--range-end {
+    background: hsl(var(--cal-accent));
+    color: hsl(var(--cal-accent-fg));
+    font-weight: 600;
+  }
+
+  .cal-time-slot--unavailable {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .cal-time-grid--duration {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .cal-time-grid--duration .cal-time-slot {
+    font-size: 12px;
+  }
+`;function X({columns:r=3,rows:e=4,durationLabels:s=!1}={}){const t=document.createElement("div");t.setAttribute("role","status"),t.setAttribute("aria-label","Loading..."),t.classList.add("cal-skeleton-time-grid"),s&&t.classList.add("cal-skeleton-time-grid--duration");const a=r*e;for(let i=0;i<a;i++){const l=document.createElement("div");l.classList.add("cal-skeleton"),t.appendChild(l)}return t}const q=`
+  .cal-skeleton-time-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 6px;
+    padding: 4px;
+  }
+
+  .cal-skeleton-time-grid--duration {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .cal-skeleton-time-grid .cal-skeleton {
+    height: 40px;
+  }
+
+  .cal-skeleton-calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+    padding: 4px;
+  }
+
+  .cal-skeleton-calendar-grid__header {
+    height: 20px;
+    margin-bottom: 4px;
+  }
+
+  .cal-skeleton-calendar-grid__day {
+    height: var(--cal-cell-size, 36px);
+    aspect-ratio: 1;
+    border-radius: var(--cal-radius-sm) !important;
+  }
+`,L={error:'<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="7" cy="7" r="6"/><path d="M7 4v3M7 9.5v.01"/></svg>',warning:'<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M7 1.5L1 12.5h12L7 1.5zM7 6v2.5M7 10.5v.01"/></svg>',info:'<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="7" cy="7" r="6"/><path d="M7 6.5V10M7 4.5v.01"/></svg>',success:'<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="7" cy="7" r="6"/><path d="M4.5 7l2 2L9.5 5"/></svg>'};function G({type:r="info",message:e,dismissible:s=!0,onDismiss:t}){const a=document.createElement("div");a.classList.add("cal-status",`cal-status--${r}`,"cal-animate-slide-up"),a.setAttribute("role",r==="error"?"alert":"status"),a.setAttribute("aria-live",r==="error"?"assertive":"polite");const i=document.createElement("span");i.classList.add("cal-status__icon"),i.innerHTML=L[r]||L.info,a.appendChild(i);const l=document.createElement("span");if(l.classList.add("cal-status__text"),l.textContent=e,a.appendChild(l),s){const c=document.createElement("button");c.classList.add("cal-status__close"),c.setAttribute("aria-label","Dismiss"),c.innerHTML='<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 3l6 6M9 3l-6 6"/></svg>',c.addEventListener("click",()=>t==null?void 0:t()),a.appendChild(c)}return a}const N=`
+  .cal-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: var(--cal-radius-sm);
+    font-size: 12px;
+    line-height: 1.4;
+    margin-bottom: 8px;
+  }
+
+  .cal-status__icon {
+    flex-shrink: 0;
+    display: flex;
+  }
+
+  .cal-status__text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cal-status__close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity var(--cal-transition);
+  }
+
+  .cal-status__close:hover {
+    opacity: 1;
+  }
+
+  .cal-status--error {
+    background: hsl(var(--cal-status-error-bg));
+    color: hsl(var(--cal-status-error-fg));
+    border: 1px solid hsl(var(--cal-status-error-border));
+  }
+
+  .cal-status--warning {
+    background: hsl(var(--cal-status-warning-bg));
+    color: hsl(var(--cal-status-warning-fg));
+    border: 1px solid hsl(var(--cal-status-warning-border));
+  }
+
+  .cal-status--info {
+    background: hsl(var(--cal-status-info-bg));
+    color: hsl(var(--cal-status-info-fg));
+    border: 1px solid hsl(var(--cal-status-info-border));
+  }
+
+  .cal-status--success {
+    background: hsl(var(--cal-status-success-bg));
+    color: hsl(var(--cal-status-success-fg));
+    border: 1px solid hsl(var(--cal-status-success-border));
+  }
+`,Y='<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M8 4.5V8l2.5 1.5"/></svg>',U=`
+  .cal-timepicker {
+    background: hsl(var(--cal-bg));
+    border-radius: var(--cal-radius);
+    user-select: none;
+    min-width: 200px;
+  }
+
+  :host([display="inline"]) .cal-timepicker {
+    border: 1px solid hsl(var(--cal-border));
+    padding: 12px;
+  }
+
+  .cal-timepicker__header {
+    font-size: 14px;
+    font-weight: 600;
+    color: hsl(var(--cal-fg));
+    margin-bottom: 8px;
+    padding: 0 4px;
+  }
+`;class C extends v{static get styles(){return[$,O,B,D,j,q,N,U]}static get observedAttributes(){return["mode","display","theme","start-time","end-time","interval","format","placeholder","value","duration-labels","loading"]}constructor(){super(),this._store=E({selected:null,rangeStart:null,hoverTime:null,isOpen:!1,statusType:null,statusMessage:null,statusDismissible:!0}),this._slots=null,this._unavailableTimes=[],this._popover=null,this._unsubscribe=null,this._rendering=!1}get mode(){return this.getAttribute("mode")||"single"}get display(){return this.getAttribute("display")||"inline"}get placeholder(){return this.getAttribute("placeholder")||"Select time"}get startTime(){return this.getAttribute("start-time")||"09:00"}get endTime(){return this.getAttribute("end-time")||"17:00"}get interval(){return parseInt(this.getAttribute("interval")||"30",10)}get format(){return this.getAttribute("format")||"24h"}get durationLabels(){return this.hasAttribute("duration-labels")}get loading(){return this.hasAttribute("loading")}set loading(e){e?this.setAttribute("loading",""):this.removeAttribute("loading")}get slots(){return this._slots}set slots(e){this._slots=Array.isArray(e)?e:null,this._initialized&&this.render()}get unavailableTimes(){return this._unavailableTimes}set unavailableTimes(e){this._unavailableTimes=Array.isArray(e)?e:[],this._initialized&&this.render()}get value(){return this._store.getState().selected}set value(e){this.mode==="single"&&typeof e=="string"?this._store.set({selected:e,rangeStart:null}):this.mode==="multi"&&Array.isArray(e)?this._store.set({selected:[...e].sort((s,t)=>g(s)-g(t)),rangeStart:null}):this.mode==="range"&&e&&typeof e=="object"?this._store.set({selected:{start:e.start,end:e.end},rangeStart:null}):this._store.set({selected:null,rangeStart:null})}_getEffectiveSlots(){return this._slots?this._slots:this.durationLabels?z(this.startTime,this.endTime,this.interval,this.format).map(t=>({...t,available:!this._unavailableTimes.includes(t.time)})):M(this.startTime,this.endTime,this.interval).map(s=>({time:s,available:!this._unavailableTimes.includes(s)}))}connectedCallback(){super.connectedCallback(),this._unsubscribe=this._store.subscribe((s,t)=>{if(this._rendering)return;s.hoverTime!==t.hoverTime&&s.selected===t.selected&&s.rangeStart===t.rangeStart&&s.isOpen===t.isOpen?this._updateSlotHighlight(s):this.render()});const e=this.getAttribute("value");if(e)if(this.mode==="multi"&&e.includes(","))this.value=e.split(",").map(s=>s.trim());else if(this.mode==="range"&&e.includes("/")){const[s,t]=e.split("/");this.value={start:s.trim(),end:t.trim()}}else this.value=e}disconnectedCallback(){var e,s;(e=this._unsubscribe)==null||e.call(this),(s=this._popover)==null||s.destroy(),clearTimeout(this._statusTimer)}attributeChangedCallback(e,s,t){if(s!==t){if(e==="value"&&this._initialized)if(this.mode==="multi"&&t&&t.includes(","))this.value=t.split(",").map(a=>a.trim());else if(this.mode==="range"&&t&&t.includes("/")){const[a,i]=t.split("/");this.value={start:a.trim(),end:i.trim()}}else this.value=t;this._initialized&&this.render()}}_handleSelect(e){const s=this._store.getState();if(this.mode==="single")this._store.set({selected:e}),this.emit("cal:time-change",{value:e}),this.display==="popover"&&this.close();else if(this.mode==="multi"){const t=Array.isArray(s.selected)?[...s.selected]:[],a=t.indexOf(e);a>=0?t.splice(a,1):t.push(e),t.sort((i,l)=>g(i)-g(l)),this._store.set({selected:t}),this.emit("cal:time-change",{value:t})}else if(this.mode==="range")if(!s.rangeStart||s.selected&&typeof s.selected=="object"&&s.selected.start&&s.selected.end)this._store.set({rangeStart:e,selected:null,hoverTime:null});else{let t=s.rangeStart,a=e;g(t)>g(a)&&([t,a]=[a,t]);const i={start:t,end:a};this._store.set({selected:i,rangeStart:null,hoverTime:null}),this.emit("cal:time-change",{value:i}),this.display==="popover"&&this.close()}}_handleHover(e){this.mode==="range"&&this._store.set({hoverTime:e})}_updateSlotHighlight(e){const s=this.$$(".cal-time-slot"),{rangeStart:t,hoverTime:a,selected:i}=e,l=i&&typeof i=="object"&&i.start&&i.end;for(const c of s){const u=c.dataset.time;if(!(!u||c.disabled))if(t&&!l&&a){const h=g(t)<g(a)?t:a,m=g(t)<g(a)?a:t,d=g(u),n=d>g(h)&&d<g(m),o=u===t,p=u===a;c.classList.toggle("cal-time-slot--range-start",o),c.classList.toggle("cal-time-slot--range-end",p),c.classList.toggle("cal-time-slot--in-range",n)}else t||c.classList.remove("cal-time-slot--range-start","cal-time-slot--range-end","cal-time-slot--in-range")}}open(){this._popover&&(this._popover.open(),this._store.set({isOpen:!0}),this.emit("cal:open"))}close(){this._popover&&(this._popover.close(),this._store.set({isOpen:!1}),this.emit("cal:close"))}_renderTimepickerContent(){const e=this._store.getState(),s=document.createElement("div");s.classList.add("cal-timepicker"),e.statusType&&e.statusMessage&&s.appendChild(G({type:e.statusType,message:e.statusMessage,dismissible:e.statusDismissible,onDismiss:()=>this.clearStatus()}));const t=document.createElement("div");if(t.classList.add("cal-timepicker__header"),t.textContent="Select Time",s.appendChild(t),this.loading)s.appendChild(X({durationLabels:this.durationLabels}));else{const a=this._getEffectiveSlots(),i=H({slots:a,mode:this.mode,format:this.format,selected:e.selected,hoverTime:e.hoverTime,rangeStart:e.rangeStart,unavailableTimes:this._unavailableTimes,onSelect:l=>this._handleSelect(l),onHover:l=>this._handleHover(l),durationLabels:this.durationLabels});s.appendChild(i)}return s}_formatTriggerText(){const e=this._store.getState();return e.selected?this.mode==="single"&&typeof e.selected=="string"?e.selected:this.mode==="multi"&&Array.isArray(e.selected)&&e.selected.length?`${e.selected.length} time${e.selected.length>1?"s":""} selected`:this.mode==="range"&&typeof e.selected=="object"&&e.selected.start?`${e.selected.start} – ${e.selected.end}`:null:null}render(){var t;if(this._rendering)return;this._rendering=!0;const e=this.shadowRoot,s=[...e.childNodes];for(const a of s)a.nodeName!=="STYLE"&&!(a instanceof CSSStyleSheet)&&e.removeChild(a);if((t=this._popover)==null||t.destroy(),this._popover=null,this.display==="popover"){const a=document.createElement("div");a.classList.add("cal-popover-wrapper");const i=document.createElement("button");i.classList.add("cal-trigger");const l=document.createElement("span");l.classList.add("cal-trigger__icon"),l.innerHTML=Y,i.appendChild(l);const c=this._formatTriggerText(),u=document.createElement("span");c?u.textContent=c:(u.textContent=this.placeholder,u.classList.add("cal-trigger--placeholder")),i.appendChild(u),a.appendChild(i);const h=this._renderTimepickerContent(),m=R({trigger:i,content:h,onClose:()=>{this._store.set({isOpen:!1}),this.emit("cal:close")}});a.appendChild(m.panel),e.appendChild(a),i.addEventListener("click",d=>{d.stopPropagation(),m.isOpen?this.close():this.open()}),this._popover=m,this._store.get("isOpen")&&m.open()}else e.appendChild(this._renderTimepickerContent());this._rendering=!1}}customElements.get("cal-timepicker")||customElements.define("cal-timepicker",C),b.CalTimepicker=C,Object.defineProperty(b,Symbol.toStringTag,{value:"Module"})}));
+//# sourceMappingURL=timepicker.umd.js.map