@glatam/calendar-ui 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export * from './glatam-calendar.js';
+export * from './glatam-calendar-mini.js';
+export * from './views/month-view.js';
+export * from './views/week-view.js';
+export * from './views/day-view.js';
+export * from './components/calendar-modal.js';
+export * from './styles/variables.css.js';
+export * from './styles/calendar.css.js';
+export { formatISODate, parseISODate, isTimeBlocked } from '@glatam/calendar-core';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/styles/calendar.css.d.ts

@@ -0,0 +1,2 @@
+export declare const calendarStyles: import('lit').CSSResult;
+//# sourceMappingURL=calendar.css.d.ts.map

package/dist/styles/calendar.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.css.d.ts","sourceRoot":"","sources":["../../src/styles/calendar.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAgQ1B,CAAC"}

package/dist/styles/variables.css.d.ts

@@ -0,0 +1,2 @@
+export declare const variablesStyles: import('lit').CSSResult;
+//# sourceMappingURL=variables.css.d.ts.map

package/dist/styles/variables.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.css.d.ts","sourceRoot":"","sources":["../../src/styles/variables.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,yBAwF3B,CAAC"}

package/dist/utils/timezone-utils.d.ts

@@ -0,0 +1,16 @@
+import { TimeSlot } from '@glatam/calendar-core';
+
+/**
+ * Calculates the difference in minutes between two timezones on a specific date.
+ * 'local' represents the user's local timezone.
+ */
+export declare function getTimezoneOffsetDiff(date: Date, fromTz: string, toTz: string): number;
+/**
+ * Shifts a single TimeSlot's times by a given offset in minutes and returns the shifted slot and optional day offset.
+ */
+export declare function shiftSlot(slot: TimeSlot, offsetMinutes: number): {
+    start: string;
+    end: string;
+    dayShift: number;
+};
+//# sourceMappingURL=timezone-utils.d.ts.map

package/dist/utils/timezone-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timezone-utils.d.ts","sourceRoot":"","sources":["../../src/utils/timezone-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAqCtF;AAED;;GAEG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAE,CAsCjH"}

package/dist/views/day-view.d.ts

@@ -0,0 +1,27 @@
+import { LitElement } from 'lit';
+import { CalendarDay, TimeSlot } from '@glatam/calendar-core';
+
+export declare class GlatamCalendarDayView extends LitElement {
+    static styles: import('lit').CSSResult;
+    day: CalendarDay | null;
+    slots: TimeSlot[];
+    locale: string;
+    selectedRange: {
+        dateString: string;
+        start: string;
+        end: string;
+    } | null;
+    role: string;
+    private isDragging;
+    private dragStartSlotIndex;
+    private dragEndSlotIndex;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleMouseDown;
+    private handleMouseEnter;
+    private handleMouseUp;
+    private isSlotSelected;
+    private isSlotDragSelecting;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=day-view.d.ts.map

package/dist/views/day-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"day-view.d.ts","sourceRoot":"","sources":["../../src/views/day-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE9D,qBACa,qBAAsB,SAAQ,UAAU;IACnD,MAAM,CAAC,MAAM,0BA6BX;IAE0B,GAAG,EAAE,WAAW,GAAG,IAAI,CAAQ;IAChC,KAAK,EAAE,QAAQ,EAAE,CAAM;IACtB,MAAM,SAAQ;IACd,aAAa,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAQ;IAChF,IAAI,SAAc;IAErC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,kBAAkB,CAAuB;IACjD,OAAO,CAAC,gBAAgB,CAAuB;IAExD,iBAAiB;IACjB,oBAAoB;IAEpB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa,CAenB;IAEF,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,mBAAmB;IAM3B,MAAM;CAkCP"}

package/dist/views/month-view.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { CalendarDay } from '@glatam/calendar-core';
+
+export declare class GlatamCalendarMonthView extends LitElement {
+    static styles: import('lit').CSSResult;
+    days: CalendarDay[];
+    locale: string;
+    startOfWeekDay: number;
+    selectedDates: string[];
+    role: string;
+    size: string;
+    minDate: string;
+    maxDate: string;
+    showNeighboringMonth: boolean;
+    tileClassName: ((data: {
+        date: Date;
+        dateString: string;
+    }) => string) | null;
+    private getWeekdayNames;
+    private handleDayClick;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=month-view.d.ts.map

package/dist/views/month-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"month-view.d.ts","sourceRoot":"","sources":["../../src/views/month-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpD,qBACa,uBAAwB,SAAQ,UAAU;IACrD,MAAM,CAAC,MAAM,0BAgCX;IAEyB,IAAI,EAAE,WAAW,EAAE,CAAM;IACxB,MAAM,SAAQ;IACd,cAAc,SAAK;IACpB,aAAa,EAAE,MAAM,EAAE,CAAM;IAC5B,IAAI,SAAc;IACH,IAAI,SAAY;IAC/B,OAAO,SAAM;IACb,OAAO,SAAM;IACZ,oBAAoB,UAAQ;IACzB,aAAa,EAAE,CAAC,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,IAAI,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,KAAK,MAAM,CAAC,GAAG,IAAI,CAAQ;IAEpH,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,cAAc;IAQtB,MAAM;CA4CP"}

package/dist/views/week-view.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { CalendarDay, TimeSlot } from '@glatam/calendar-core';
+
+export declare class GlatamCalendarWeekView extends LitElement {
+    static styles: import('lit').CSSResult;
+    days: CalendarDay[];
+    slots: TimeSlot[];
+    locale: string;
+    selectedRange: {
+        dateString: string;
+        start: string;
+        end: string;
+    } | null;
+    role: string;
+    private isDragging;
+    private dragDayIndex;
+    private dragStartSlotIndex;
+    private dragEndSlotIndex;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleMouseDown;
+    private handleMouseEnter;
+    private handleMouseUp;
+    private isSlotSelected;
+    private isSlotDragSelecting;
+    render(): import('lit-html').TemplateResult<1>;
+}
+//# sourceMappingURL=week-view.d.ts.map

package/dist/views/week-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"week-view.d.ts","sourceRoot":"","sources":["../../src/views/week-view.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE9D,qBACa,sBAAuB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,0BAoDX;IAEyB,IAAI,EAAE,WAAW,EAAE,CAAM;IACzB,KAAK,EAAE,QAAQ,EAAE,CAAM;IACtB,MAAM,SAAQ;IACd,aAAa,EAAE;QAAE,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAQ;IAChF,IAAI,SAAc;IAErC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,kBAAkB,CAAuB;IACjD,OAAO,CAAC,gBAAgB,CAAuB;IAExD,iBAAiB;IACjB,oBAAoB;IAEpB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa,CAenB;IAEF,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,mBAAmB;IAM3B,MAAM;CAsCP"}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@glatam/calendar-ui",
+  "version": "1.0.0",
+  "description": "Componente web UI para el calendario @glatam/calendar",
+  "type": "module",
+  "author": "Santiago Hernández Saldarriaga",
+  "license": "MIT",
+  "main": "./dist/glatam-calendar.js",
+  "module": "./dist/glatam-calendar.js",
+  "types": "./dist/glatam-calendar.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/glatam-calendar.d.ts",
+      "import": "./dist/glatam-calendar.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@glatam/calendar-core": "^1.0.0",
+    "lit": "^3.1.2"
+  },
+  "devDependencies": {
+    "vite": "^5.1.4",
+    "vite-plugin-dts": "^3.7.3"
+  }
+}

package/src/components/calendar-modal.ts

@@ -0,0 +1,297 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { BlockingRule } from '@glatam/calendar-core';
+
+@customElement('glatam-calendar-modal')
+export class GlatamCalendarModal extends LitElement {
+  static styles = css`
+    .modal-overlay {
+      position: fixed;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background: rgba(0, 0, 0, 0.35);
+      backdrop-filter: blur(10px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 1000;
+      opacity: 0; pointer-events: none;
+      transition: opacity var(--glatam-transition-normal);
+    }
+    .modal-overlay.open {
+      opacity: 1; pointer-events: auto;
+    }
+    .modal-content {
+      background: var(--glatam-bg);
+      color: var(--glatam-text);
+      border-radius: 24px;
+      padding: 28px;
+      width: 90%;
+      max-width: 400px;
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
+      border: 1px solid var(--glatam-border);
+      transform: scale(0.92) translateY(10px);
+      transition: transform var(--glatam-transition-normal), background-color var(--glatam-transition-normal);
+      display: flex;
+      flex-direction: column;
+      gap: 18px;
+    }
+    .modal-overlay.open .modal-content {
+      transform: scale(1) translateY(0);
+    }
+    h3 { margin: 0; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
+    .form-group { display: flex; flex-direction: column; gap: 6px; }
+    label { font-size: 0.8rem; color: var(--glatam-text-secondary); font-weight: 600; }
+    input[type="text"] {
+      background: var(--glatam-surface);
+      border: 1px solid var(--glatam-border);
+      border-radius: 10px;
+      padding: 10px 14px;
+      color: var(--glatam-text);
+      font-family: inherit;
+      font-size: 0.9rem;
+      outline: none;
+      transition: border-color var(--glatam-transition-fast);
+    }
+    input[type="text"]:focus {
+      border-color: var(--glatam-primary);
+    }
+    .switch-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px 0;
+    }
+    
+    /* Apple Switch Style */
+    .switch {
+      position: relative;
+      display: inline-block;
+      width: 46px;
+      height: 26px;
+    }
+    .switch input { opacity: 0; width: 0; height: 0; }
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background-color: var(--glatam-border);
+      transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
+      border-radius: 26px;
+    }
+    .slider:before {
+      position: absolute;
+      content: "";
+      height: 20px;
+      width: 20px;
+      left: 3px;
+      bottom: 3px;
+      background-color: white;
+      transition: .25s cubic-bezier(0.16, 1, 0.3, 1);
+      border-radius: 50%;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    }
+    input:checked + .slider {
+      background-color: var(--glatam-primary);
+    }
+    input:checked + .slider:before {
+      transform: translateX(20px);
+    }
+
+    .days-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 6px;
+      margin-top: 4px;
+    }
+    .day-btn {
+      width: 36px;
+      height: 36px;
+      margin: 0 auto;
+      border-radius: 50%;
+      border: 1px solid var(--glatam-border);
+      background: var(--glatam-bg);
+      color: var(--glatam-text);
+      font-size: 0.8rem;
+      font-weight: 600;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background-color var(--glatam-transition-fast), color var(--glatam-transition-fast), border-color var(--glatam-transition-fast);
+    }
+    .day-btn:hover {
+      background-color: var(--glatam-surface);
+    }
+    .day-btn.selected {
+      background: var(--glatam-primary);
+      color: var(--glatam-text-light);
+      border-color: var(--glatam-primary);
+    }
+    .btn-actions { display: flex; gap: 10px; margin-top: 10px; justify-content: flex-end; }
+    .btn {
+      padding: 10px 18px;
+      border-radius: 20px;
+      font-size: 0.875rem;
+      font-weight: 600;
+      cursor: pointer;
+      border: none;
+      transition: opacity var(--glatam-transition-fast), transform var(--glatam-transition-fast);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .btn:active { transform: scale(0.97); }
+    .btn-cancel { background: transparent; color: var(--glatam-text); border: 1px solid var(--glatam-border); }
+    .btn-cancel:hover { background-color: var(--glatam-surface); }
+    .btn-save { background: var(--glatam-primary); color: var(--glatam-text-light); }
+    .btn-save:hover { opacity: 0.95; }
+    .btn-danger {
+      background: rgba(255, 69, 58, 0.12);
+      color: #ff453a;
+      margin-right: auto;
+    }
+    .btn-danger:hover {
+      background: rgba(255, 69, 58, 0.18);
+    }
+  `;
+
+  @property({ type: Boolean }) open = false;
+  @property({ type: String }) dateString = '';
+  @property({ type: String }) startTime = '';
+  @property({ type: String }) endTime = '';
+  @property({ type: Boolean }) isRange = false;
+  @property({ type: Object }) existingRule: BlockingRule | null = null;
+
+  @state() private description = '';
+  @state() private blockAllDay = true;
+  @state() private isRecurring = false;
+  @state() private selectedDays: number[] = [];
+
+  willUpdate(changedProperties: Map<string, any>) {
+    if (changedProperties.has('open') && this.open) {
+      if (this.existingRule) {
+        this.description = 'Bloqueo';
+        this.blockAllDay = !this.existingRule.slots || this.existingRule.slots.length === 0;
+        this.isRecurring = this.existingRule.type === 'weekly';
+        this.selectedDays = this.existingRule.daysOfWeek || [];
+      } else {
+        this.description = '';
+        this.blockAllDay = !this.isRange;
+        this.isRecurring = false;
+        this.selectedDays = [new Date(this.dateString + 'T00:00:00').getDay()];
+      }
+    }
+  }
+
+  private toggleDay(dayNum: number) {
+    const idx = this.selectedDays.indexOf(dayNum);
+    if (idx > -1) {
+      this.selectedDays = this.selectedDays.filter(d => d !== dayNum);
+    } else {
+      this.selectedDays = [...this.selectedDays, dayNum];
+    }
+  }
+
+  private handleSave() {
+    const detail = {
+      title: this.description || 'Bloqueo',
+      blockAllDay: this.blockAllDay,
+      isRecurring: this.isRecurring,
+      selectedDays: this.selectedDays,
+      dateString: this.dateString,
+      startTime: this.startTime,
+      endTime: this.endTime
+    };
+    this.dispatchEvent(new CustomEvent('save-rule', { detail, bubbles: true, composed: true }));
+  }
+
+  private handleDelete() {
+    if (this.existingRule) {
+      this.dispatchEvent(new CustomEvent('delete-rule', {
+        detail: { id: this.existingRule.id },
+        bubbles: true,
+        composed: true
+      }));
+    }
+  }
+
+  render() {
+    const weekLabels = ['D', 'L', 'M', 'M', 'J', 'V', 'S'];
+    const formattedSelection = this.isRange 
+      ? `${this.dateString} (${this.startTime} - ${this.endTime})`
+      : this.dateString;
+
+    return html`
+      <div class=${classMap({ 'modal-overlay': true, 'open': this.open })}>
+        <div class="modal-content">
+          <h3>${this.existingRule ? 'Gestionar Bloqueo' : 'Crear Bloqueo'}</h3>
+          
+          <div style="font-size: 0.85rem; color: var(--glatam-text-secondary);">
+            Selección: <strong>${formattedSelection}</strong>
+          </div>
+
+          <div class="form-group">
+            <label>Descripción / Nota</label>
+            <input 
+              type="text" 
+              .value=${this.description} 
+              @input=${(e: any) => this.description = e.target.value}
+              placeholder="Ej. Reunión de equipo, Vacaciones" 
+            />
+          </div>
+
+          <div class="switch-row">
+            <label>Bloquear todo el día</label>
+            <label class="switch">
+              <input 
+                type="checkbox" 
+                .checked=${this.blockAllDay} 
+                @change=${(e: any) => this.blockAllDay = e.target.checked}
+              />
+              <span class="slider"></span>
+            </label>
+          </div>
+
+          <div class="switch-row">
+            <label>Repetir semanalmente</label>
+            <label class="switch">
+              <input 
+                type="checkbox" 
+                .checked=${this.isRecurring} 
+                @change=${(e: any) => this.isRecurring = e.target.checked}
+              />
+              <span class="slider"></span>
+            </label>
+          </div>
+
+          ${this.isRecurring 
+            ? html`
+                <div class="form-group">
+                  <label>Repetir los días</label>
+                  <div class="days-grid">
+                    ${[1, 2, 3, 4, 5, 6, 0].map(day => html`
+                      <button 
+                        class="day-btn ${this.selectedDays.includes(day) ? 'selected' : ''}"
+                        @click=${() => this.toggleDay(day)}
+                      >
+                        ${weekLabels[day]}
+                      </button>
+                    `)}
+                  </div>
+                </div>
+              `
+            : ''}
+
+          <div class="btn-actions">
+            ${this.existingRule 
+              ? html`<button class="btn btn-danger" @click=${this.handleDelete}>Eliminar</button>` 
+              : ''}
+            <button class="btn btn-cancel" @click=${() => this.dispatchEvent(new CustomEvent('close'))}>Cancelar</button>
+            <button class="btn btn-save" @click=${this.handleSave}>Guardar</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/glatam-calendar-mini.ts

@@ -0,0 +1,147 @@
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import {
+  generateMonthDays,
+  isTimeBlocked,
+  BlockingRule,
+  TimeSlot
+} from '@glatam/calendar-core';
+import { variablesStyles } from './styles/variables.css.js';
+import { calendarStyles } from './styles/calendar.css.js';
+import { getTimezoneOffsetDiff, shiftSlot } from './utils/timezone-utils.js';
+
+import './views/month-view.js';
+
+@customElement('glatam-calendar-mini')
+export class GlatamCalendarMini extends LitElement {
+  static styles = [
+    variablesStyles,
+    calendarStyles,
+    css`
+      :host {
+        display: inline-block;
+        background: transparent;
+        border: none;
+        padding: 0;
+        box-shadow: none;
+        width: 100%;
+      }
+    `
+  ];
+
+  @property({ type: String }) role = 'buyer'; // Default to buyer for checkout
+  @property({ type: String }) locale = 'es';
+  @property({ type: Number }) startOfWeekDay = 0;
+  @property({ type: Array }) rules: BlockingRule[] = [];
+  @property({ type: Object }) selectedRange: { dateString: string; start: string; end: string } | null = null;
+  @property({ type: String, reflect: true }) size = 'medium';
+  @property({ type: String }) hostTimezone = 'America/Bogota'; @property({ type: String }) activeTimezone = 'local';
+  @property({ type: String }) minDate = ''; @property({ type: String }) maxDate = '';
+  @property({ type: Boolean }) showNeighboringMonth = true;
+  @property({ attribute: false }) tileClassName: ((data: { date: Date; dateString: string }) => string) | null = null;
+  @property({ type: Array }) slots: TimeSlot[] = [
+    { start: '09:00', end: '10:00' }, { start: '10:00', end: '11:00' },
+    { start: '11:00', end: '12:00' }, { start: '12:00', end: '13:00' },
+    { start: '13:00', end: '14:00' }, { start: '14:00', end: '15:00' },
+    { start: '15:00', end: '16:00' }, { start: '16:00', end: '17:00' },
+    { start: '17:00', end: '18:00' },
+  ];
+
+  @state() private activeDate = new Date();
+  @state() private dropdownOpen = false;
+  @state() private dropdownSelectedDateString = '';
+
+  private handleDropdownDaySelect(e: CustomEvent<{ dateString: string }>) {
+    this.dropdownSelectedDateString = e.detail.dateString;
+  }
+
+  private selectDropdownSlot(slot: any) {
+    const detail = {
+      dateString: this.dropdownSelectedDateString,
+      start: slot.displayStart,
+      end: slot.displayEnd,
+      hostStart: slot.start,
+      hostEnd: slot.end
+    };
+    this.selectedRange = { dateString: this.dropdownSelectedDateString, start: slot.displayStart, end: slot.displayEnd };
+    this.dispatchEvent(new CustomEvent('booking-selected', { detail, bubbles: true, composed: true }));
+    this.dropdownOpen = false;
+    this.dropdownSelectedDateString = '';
+  }
+
+  render() {
+    const label = this.selectedRange
+      ? `Reserva: ${this.selectedRange.dateString} (${this.selectedRange.start} - ${this.selectedRange.end})`
+      : 'Seleccionar Fecha y Hora';
+
+    const y = this.activeDate.getFullYear(), m = this.activeDate.getMonth();
+    const dropdownDate = this.dropdownSelectedDateString ? new Date(this.dropdownSelectedDateString + 'T00:00:00') : null;
+    const offset = dropdownDate && this.activeTimezone === 'local' ? getTimezoneOffsetDiff(dropdownDate, this.hostTimezone, 'local') : 0;
+    
+    const dropdownSlots = dropdownDate
+      ? this.slots.map(slot => {
+          const isBlocked = isTimeBlocked(dropdownDate, slot, this.rules);
+          const shifted = shiftSlot(slot, offset);
+          const suffix = shifted.dayShift > 0 ? ' (+1d)' : shifted.dayShift < 0 ? ' (-1d)' : '';
+          return {
+            ...slot,
+            displayStart: shifted.start + suffix,
+            displayEnd: shifted.end + suffix,
+            isBlocked
+          };
+        })
+      : [];
+
+    return html`
+      <div class="dropdown-container">
+        <button class="btn btn-primary dropdown-toggle" @click=${() => this.dropdownOpen = !this.dropdownOpen}>
+          <span>${label}</span> <span>${this.dropdownOpen ? '▲' : '▼'}</span>
+        </button>
+
+        ${this.dropdownOpen
+          ? html`
+              <div class="dropdown-card" style="--glatam-day-min-height: 38px;">
+                ${!this.dropdownSelectedDateString
+                  ? html`
+                      <div style="font-weight:600; font-size:0.9rem; text-align:center; color: var(--glatam-text);">Selecciona un Día</div>
+                      <glatam-calendar-month-view
+                        .days=${generateMonthDays(y, m, this.rules, this.slots, this.startOfWeekDay)}
+                        .locale=${this.locale}
+                        .startOfWeekDay=${this.startOfWeekDay}
+                        .role=${this.role}
+                        size="small"
+                        .minDate=${this.minDate}
+                        .maxDate=${this.maxDate}
+                        .showNeighboringMonth=${this.showNeighboringMonth}
+                        .tileClassName=${this.tileClassName}
+                        @day-select=${this.handleDropdownDaySelect}
+                      ></glatam-calendar-month-view>
+                    `
+                  : html`
+                      <div style="display:flex; justify-content:space-between; align-items:center; border-bottom: 1px solid var(--glatam-border); padding-bottom:8px;">
+                        <button class="btn" style="height:28px; padding:0 8px; font-size:0.75rem;" @click=${() => this.dropdownSelectedDateString = ''}>&lt; Volver</button>
+                        <span style="font-size:0.8rem; font-weight:600; color: var(--glatam-text);">${this.dropdownSelectedDateString}</span>
+                      </div>
+                      <div class="slot-list">
+                        ${dropdownSlots.map(s => html`
+                          <button
+                            class="slot-btn ${s.isBlocked ? 'blocked' : ''}"
+                            ?disabled=${s.isBlocked}
+                            @click=${() => this.selectDropdownSlot(s)}
+                          >
+                            ${s.displayStart} - ${s.displayEnd} ${s.isBlocked ? '(Ocupado)' : ''}
+                          </button>
+                        `)}
+                      </div>
+                    `}
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap { 'glatam-calendar-mini': GlatamCalendarMini; }
+}