@yewdiel21/motion-kit 0.9.0 → 0.10.0

package/dist/{chunk-34XYOXHG.js → chunk-TFNRIZHU.js}

@@ -2,7 +2,7 @@ import {
   TIMING,
   createScope,
   reduced
-} from "./chunk-RFDIZYFX.js";
+} from "./chunk-DOOMULVV.js";
 import {
   inert,
   warnOnce
@@ -22,11 +22,11 @@ function springPath(ratio, velocity = 0, steps = 72) {
   const stiffness = 5.6;
   const frequency = stiffness / damping * Math.sqrt(1 - damping * damping);
   const phase = (velocity - stiffness) / frequency;
-  const at = (time) => 1 + Math.exp(-stiffness * time) * (-Math.cos(frequency * time) + phase * Math.sin(frequency * time));
+  const at = (time2) => 1 + Math.exp(-stiffness * time2) * (-Math.cos(frequency * time2) + phase * Math.sin(frequency * time2));
   let path = "M0,0";
   for (let step = 1; step <= steps; step += 1) {
-    const time = step / steps;
-    path += ` L${time.toFixed(4)},${(step === steps ? 1 : at(time)).toFixed(4)}`;
+    const time2 = step / steps;
+    path += ` L${time2.toFixed(4)},${(step === steps ? 1 : at(time2)).toFixed(4)}`;
   }
   return path;
 }
@@ -132,9 +132,9 @@ function stepChannel(channel, seconds) {
   const config = channel.config;
   if (!channel.active || !config) return;
   if (config.type === "spring") {
-    const time = Math.min(0.064, Math.max(0, seconds));
-    const steps = Math.max(1, Math.ceil(time / (1 / 60) - 1e-9));
-    const step = time / steps;
+    const time2 = Math.min(0.064, Math.max(0, seconds));
+    const steps = Math.max(1, Math.ceil(time2 / (1 / 60) - 1e-9));
+    const step = time2 / steps;
     for (let index = 0; index < steps; index += 1) {
       const force = -config.stiffness * (channel.current - channel.target) - config.damping * channel.velocity;
       channel.velocity += force / (config.mass ?? 1) * step;
@@ -591,9 +591,9 @@ function revealCounter(el, to, { from, duration = TIMING.revealCounter, format =
   let began = null;
   let cancel = () => {
   };
-  const step = (time) => {
-    began ??= time;
-    const progress = Math.min(1, (time - began) / (duration * 1e3));
+  const step = (time2) => {
+    began ??= time2;
+    const progress = Math.min(1, (time2 - began) / (duration * 1e3));
     write(start + (to - start) * (1 - (1 - progress) ** 3));
     if (progress < 1) cancel = requestFrame(step);
     else frames.delete(el);
@@ -2291,6 +2291,1599 @@ function createMenu(dialog, options = {}) {
   };
 }
 
+// src/components/quantity/engine.ts
+function createQuantity(root, options = {}) {
+  const input = root?.querySelector("[data-mk-quantity-input]");
+  if (!root || !input) return inert({ setValue() {
+  }, value: 0 });
+  const scope = createScope();
+  const min = Number.isFinite(options.min) ? options.min : 1;
+  const max = Number.isFinite(options.max) ? Math.max(min, options.max) : Math.max(min, 999);
+  const step = Number.isFinite(options.step) && options.step > 0 ? options.step : 1;
+  const steps = Math.floor((max - min) / step + 1e-9);
+  const upper = Math.min(max, Number((min + steps * step).toFixed(10)));
+  const normalize = (n) => Math.max(min, Math.min(upper, Number((min + Math.round((n - min) / step) * step).toFixed(10))));
+  const original = input.value;
+  const disabled = options.disabled ?? input.disabled;
+  const decrease = root.querySelector("[data-mk-quantity-decrease]");
+  const increase = root.querySelector("[data-mk-quantity-increase]");
+  scope.attr(input, "min", String(min));
+  scope.attr(input, "max", String(max));
+  scope.attr(input, "step", String(step));
+  scope.attr(input, "disabled", disabled ? "" : null);
+  scope.attr(root, "data-mk-ready", "");
+  const initial = input.value.trim() ? Number(input.value) : NaN;
+  let value = normalize(Number.isFinite(options.value) ? options.value : Number.isFinite(initial) ? initial : min);
+  let pendingReset = null;
+  const typed = () => input.value.trim() && Number.isFinite(input.valueAsNumber) ? input.valueAsNumber : NaN;
+  const render = (syncInput = true) => {
+    if (pendingReset) {
+      if (pendingReset.eventPhase !== 0) return;
+      if (!pendingReset.defaultPrevented) value = normalize(Number.isFinite(typed()) ? typed() : min);
+      pendingReset = null;
+    }
+    if (syncInput) input.value = String(value);
+    if (decrease) scope.attr(decrease, "disabled", disabled || value <= min ? "" : null);
+    if (increase) scope.attr(increase, "disabled", disabled || value >= upper ? "" : null);
+  };
+  const commit = (next, notify, syncInput) => {
+    if (scope.disposed || !Number.isFinite(next)) return;
+    if (pendingReset?.eventPhase === 0) pendingReset = null;
+    const previous = value;
+    value = normalize(next);
+    render(syncInput);
+    if (notify && value !== previous) {
+      options.onChange?.(value);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value, previous } }));
+    }
+  };
+  const setValue = (next, notify = true) => commit(next, notify, true);
+  if (decrease) scope.on(decrease, "click", () => {
+    if (!decrease.disabled) setValue(value - step);
+  });
+  if (increase) scope.on(increase, "click", () => {
+    if (!increase.disabled) setValue(value + step);
+  });
+  scope.on(input, "input", () => {
+    const n = typed();
+    if (Number.isFinite(n) && normalize(n) === n) commit(n, true, false);
+  });
+  scope.on(input, "change", () => {
+    if (Number.isFinite(typed())) setValue(typed());
+    else render();
+  });
+  scope.on(input, "blur", () => render());
+  if (input.form) scope.on(input.form, "reset", (event) => {
+    render();
+    pendingReset = event;
+    scope.timeout(() => {
+      if (pendingReset === event) render();
+    }, 0);
+  });
+  scope.add(() => {
+    input.value = original;
+  });
+  render();
+  return { setValue, get value() {
+    return value;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/components/pagination/engine.ts
+var positive = (n, fallback) => Number.isFinite(n) ? Math.max(1, Math.min(Number.MAX_SAFE_INTEGER - 32, Math.floor(n))) : fallback;
+function createPagination(root, options = {}) {
+  const pages = root?.querySelector("[data-mk-pagination-pages]");
+  if (!root || !pages) return inert({ setPage() {
+  }, setTotalPages() {
+  }, page: 1, totalPages: 1 });
+  const scope = createScope();
+  const original = [...pages.childNodes];
+  const previous = root.querySelector("[data-mk-pagination-previous]");
+  const next = root.querySelector("[data-mk-pagination-next]");
+  let total = positive(options.totalPages, 10);
+  let page = Math.min(total, positive(options.page, 1));
+  const siblings = Math.min(10, Math.max(0, Number.isFinite(options.siblings) ? Math.floor(options.siblings) : 1));
+  scope.attr(root, "data-mk-ready", "");
+  const render = () => {
+    const hadFocus = pages.contains(document.activeElement);
+    const selected = /* @__PURE__ */ new Set([1, total]);
+    for (let n = Math.max(1, page - siblings); n <= Math.min(total, page + siblings); n++) selected.add(n);
+    const fragment = document.createDocumentFragment();
+    let last = 0;
+    for (const n of [...selected].sort((a, b) => a - b)) {
+      if (last && n - last > 1) {
+        const gap = document.createElement("span");
+        gap.className = "mk-pagination__gap";
+        gap.textContent = "\u2026";
+        gap.setAttribute("aria-hidden", "true");
+        fragment.append(gap);
+      }
+      const button = document.createElement("button");
+      button.type = "button";
+      button.dataset.mkPage = String(n);
+      button.textContent = String(n);
+      button.setAttribute("aria-label", options.pageLabel?.(n) ?? `P\xE1gina ${n}`);
+      if (n === page) button.setAttribute("aria-current", "page");
+      fragment.append(button);
+      last = n;
+    }
+    pages.replaceChildren(fragment);
+    if (hadFocus) pages.querySelector("[aria-current]")?.focus();
+    if (previous) scope.attr(previous, "disabled", page === 1 ? "" : null);
+    if (next) scope.attr(next, "disabled", page === total ? "" : null);
+  };
+  const setPage = (value, notify = true) => {
+    if (scope.disposed || !Number.isFinite(value)) return;
+    const candidate = Math.max(1, Math.min(total, Math.round(value)));
+    if (candidate === page) return;
+    const focused = pages.contains(document.activeElement);
+    page = candidate;
+    render();
+    if (focused) pages.querySelector("[aria-current]")?.focus();
+    if (notify) {
+      options.onChange?.(page);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { page, totalPages: total } }));
+    }
+  };
+  scope.on(root, "click", (event) => {
+    const target = event.target.closest("button");
+    if (!target || target.disabled) return;
+    if (target === previous) setPage(page - 1);
+    else if (target === next) setPage(page + 1);
+    else if (target.dataset.mkPage) setPage(Number(target.dataset.mkPage));
+  });
+  scope.on(root, "keydown", (event) => {
+    if (!(event.target instanceof HTMLButtonElement)) return;
+    const to = event.key === "ArrowRight" ? page + 1 : event.key === "ArrowLeft" ? page - 1 : event.key === "Home" ? 1 : event.key === "End" ? total : null;
+    if (to === null) return;
+    event.preventDefault();
+    setPage(to);
+    pages.querySelector("[aria-current]")?.focus();
+  });
+  scope.add(() => pages.replaceChildren(...original));
+  render();
+  return {
+    setPage,
+    setTotalPages(value) {
+      if (scope.disposed || !Number.isFinite(value)) return;
+      total = positive(value, 1);
+      if (page > total) setPage(total);
+      else render();
+    },
+    get page() {
+      return page;
+    },
+    get totalPages() {
+      return total;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/hover-card/engine.ts
+var sequence = 0;
+function createHoverCard(root, options = {}) {
+  const trigger = root?.querySelector("[data-mk-hover-trigger]");
+  const panel = root?.querySelector("[data-mk-hover-panel]");
+  if (!root || !trigger || !panel) return inert({ open() {
+  }, close() {
+  }, isOpen: false });
+  const scope = createScope();
+  const openDelay = Number.isFinite(options.openDelay) ? Math.max(0, options.openDelay) : 120;
+  const closeDelay = Number.isFinite(options.closeDelay) ? Math.max(0, options.closeDelay) : 140;
+  let opened = false;
+  let timer;
+  let pointerInside = false;
+  let id = panel.id;
+  if (!id) {
+    do {
+      id = `mk-hover-${++sequence}`;
+    } while (document.getElementById(id));
+  }
+  scope.attr(panel, "id", id);
+  scope.attr(trigger, "aria-controls", id);
+  scope.attr(root, "data-mk-placement", options.placement ?? "top");
+  scope.attr(root, "data-mk-ready", "");
+  const cancel = () => {
+    clearTimeout(timer);
+    timer = void 0;
+  };
+  const set = (value) => {
+    cancel();
+    if (scope.disposed) return;
+    const changed = value !== opened;
+    opened = value;
+    scope.attr(trigger, "aria-expanded", String(value));
+    scope.attr(panel, "hidden", value ? null : "");
+    scope.attr(root, "data-mk-open", value ? "" : null);
+    if (changed) {
+      options.onOpenChange?.(value);
+      root.dispatchEvent(new CustomEvent("mk:open-change", { bubbles: true, detail: { open: value } }));
+    }
+  };
+  const schedule = (value, delay) => {
+    cancel();
+    timer = setTimeout(() => set(value), delay);
+  };
+  scope.on(root, "pointerenter", () => {
+    pointerInside = true;
+    schedule(true, openDelay);
+  });
+  scope.on(root, "pointerleave", () => {
+    pointerInside = false;
+    if (!root.contains(document.activeElement)) schedule(false, closeDelay);
+  });
+  scope.on(root, "focusin", () => set(true));
+  scope.on(root, "focusout", (event) => {
+    if (!pointerInside && !root.contains(event.relatedTarget)) schedule(false, closeDelay);
+  });
+  scope.on(trigger, "click", () => set(true));
+  scope.on(document, "pointerdown", (event) => {
+    if (!root.contains(event.target)) set(false);
+  });
+  scope.on(root, "keydown", (event) => {
+    if (event.key !== "Escape" || !opened) return;
+    event.preventDefault();
+    trigger.focus();
+    set(false);
+  });
+  scope.add(cancel);
+  set(false);
+  return { open: () => set(true), close: () => set(false), get isOpen() {
+    return opened;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/components/input-otp/engine.ts
+function createInputOtp(root, options = {}) {
+  const input = root?.querySelector("[data-mk-otp-input]");
+  const slots = root?.querySelector("[data-mk-otp-slots]");
+  if (!root || !input || !slots) return inert({ setValue() {
+  }, focus() {
+  }, value: "" });
+  const scope = createScope();
+  const length = Number.isFinite(options.length) ? Math.min(16, Math.max(1, Math.round(options.length))) : 6;
+  const clean = (text) => text.replace(/[^0-9]/g, "").slice(0, length);
+  const original = input.value;
+  const originalNodes = [...slots.childNodes];
+  let value = clean(options.value ?? input.value);
+  let pendingReset = null;
+  const cells = Array.from({ length }, () => {
+    const cell = document.createElement("span");
+    cell.className = "mk-input-otp__slot";
+    return cell;
+  });
+  slots.replaceChildren(...cells);
+  scope.attr(slots, "aria-hidden", "true");
+  scope.attr(input, "type", "text");
+  scope.attr(input, "inputmode", "numeric");
+  scope.attr(input, "autocomplete", "one-time-code");
+  scope.attr(input, "maxlength", String(length));
+  scope.attr(input, "pattern", `[0-9]{${length}}`);
+  scope.attr(root, "data-mk-ready", "");
+  const render = () => {
+    if (pendingReset) {
+      if (pendingReset.eventPhase !== 0) return;
+      if (!pendingReset.defaultPrevented) value = clean(input.value);
+      pendingReset = null;
+    }
+    input.value = value;
+    const active = document.activeElement === input ? Math.min(length - 1, input.selectionStart ?? value.length) : -1;
+    cells.forEach((cell, i) => {
+      const text = value[i] ? options.mask ? "\u2022" : value[i] : "";
+      if (cell.textContent !== text) cell.textContent = text;
+      cell.toggleAttribute("data-mk-active", i === active);
+      cell.toggleAttribute("data-mk-filled", i < value.length);
+    });
+    scope.attr(root, "data-mk-complete", value.length === length ? "" : null);
+  };
+  const setValue = (next, notify = true) => {
+    if (scope.disposed) return;
+    if (pendingReset?.eventPhase === 0) pendingReset = null;
+    const previous = value;
+    value = clean(String(next));
+    render();
+    if (notify && value !== previous) {
+      options.onChange?.(value);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail: { value, complete: value.length === length } }));
+      if (value.length === length) {
+        options.onComplete?.(value);
+        root.dispatchEvent(new CustomEvent("mk:complete", { bubbles: true, detail: { value } }));
+      }
+    }
+  };
+  scope.on(input, "input", (event) => {
+    if (event.isComposing) return;
+    const caret = clean(input.value.slice(0, input.selectionStart ?? input.value.length)).length;
+    setValue(input.value);
+    input.setSelectionRange(caret, caret);
+    render();
+  });
+  scope.on(input, "compositionend", () => setValue(input.value));
+  scope.on(input, "paste", (event) => {
+    const text = event.clipboardData?.getData("text");
+    if (text === void 0) return;
+    event.preventDefault();
+    const start = input.selectionStart ?? value.length;
+    const end = input.selectionEnd ?? start;
+    const inserted = clean(text);
+    setValue(value.slice(0, start) + inserted + value.slice(end));
+    const caret = Math.min(length, start + inserted.length);
+    input.setSelectionRange(caret, caret);
+    render();
+  });
+  scope.on(input, "focus", render);
+  scope.on(input, "blur", render);
+  scope.on(input, "keyup", render);
+  scope.on(input, "click", render);
+  scope.on(document, "selectionchange", () => {
+    if (document.activeElement === input) render();
+  });
+  if (input.form) scope.on(input.form, "reset", (event) => {
+    render();
+    pendingReset = event;
+    scope.timeout(() => {
+      if (pendingReset === event) render();
+    }, 0);
+  });
+  scope.add(() => {
+    slots.replaceChildren(...originalNodes);
+    input.value = original;
+  });
+  render();
+  return { setValue, focus: () => {
+    if (!scope.disposed) input.focus();
+  }, get value() {
+    return value;
+  }, destroy: () => scope.dispose() };
+}
+
+// src/components/studio-dock/engine.ts
+var nextId = 0;
+var PANEL_OFFSET = 76;
+var VIEWPORT_GAP = 12;
+var MIN_SPACE = 320;
+var FOCUSABLE = 'a[href],button:not(:disabled),input:not(:disabled),select:not(:disabled),textarea:not(:disabled),video[controls],[tabindex]:not([tabindex="-1"])';
+function createStudioDock(root, options = {}) {
+  const toggleButton = root?.querySelector("[data-mk-studio-toggle]");
+  const panel = root?.querySelector("[data-mk-studio-panel]");
+  if (!root || !toggleButton || !panel) return inert({ open() {
+  }, close() {
+  }, toggle() {
+  }, selectPage() {
+  }, state: { open: false, view: "menu", page: 0 } });
+  registerMotion();
+  const scope = createScope();
+  const context = gsap.context(() => {
+  }, root);
+  scope.add(() => context.revert());
+  const views = [...panel.querySelectorAll("[data-mk-studio-view]")];
+  const pages = [...panel.querySelectorAll("[data-mk-studio-page]")];
+  const pageButtons = [...root.querySelectorAll("[data-mk-studio-page-to]")];
+  const slide = root.querySelector("[data-mk-studio-slide]");
+  const tracked = [root, panel, ...slide ? [slide] : []];
+  tracked.forEach((el) => {
+    const style = el.getAttribute("style");
+    scope.add(() => style === null ? el.removeAttribute("style") : el.setAttribute("style", style));
+  });
+  scope.attr(panel, "id", panel.id || `mk-studio-panel-${++nextId}`);
+  scope.attr(panel, "role", panel.getAttribute("role") || "dialog");
+  scope.attr(panel, "aria-label", panel.getAttribute("aria-label") || "Studio navigation");
+  scope.attr(panel, "tabindex", "-1");
+  scope.attr(toggleButton, "aria-controls", panel.id);
+  scope.attr(toggleButton, "aria-expanded", "false");
+  scope.attr(panel, "hidden", "");
+  scope.attr(panel, "aria-hidden", "true");
+  scope.attr(root, "data-mk-ready", "");
+  let state = { open: false, view: "menu", page: 0 };
+  let previousFocus = null;
+  let animation;
+  let slideStart = null;
+  let slideDistance = 0;
+  let slideMoved = false;
+  let suppressSlideClick = false;
+  const place2 = (decide = false) => {
+    const view = root.ownerDocument.defaultView;
+    if (!state.open || !view) return;
+    const rect = root.getBoundingClientRect();
+    const offset = parseFloat(view.getComputedStyle(root).getPropertyValue("--mk-studio-dock-offset")) || PANEL_OFFSET;
+    const above = rect.bottom - offset - VIEWPORT_GAP;
+    const below = view.innerHeight - rect.top - offset - VIEWPORT_GAP;
+    if (decide) scope.attr(root, "data-mk-studio-below", above < Math.min(panel.scrollHeight || MIN_SPACE, MIN_SPACE) && below > above ? "" : null);
+    const flip = root.hasAttribute("data-mk-studio-below");
+    root.style.setProperty("--mk-studio-dock-space", `${Math.max(MIN_SPACE / 2, Math.floor(flip ? below : above))}px`);
+  };
+  const hidden = () => root.hasAttribute("data-mk-studio-below") ? { clipPath: "inset(0% 0% 100% 0% round 18px)", y: -16, opacity: 0 } : { clipPath: "inset(100% 0% 0% 0% round 18px)", y: 16, opacity: 0 };
+  const notify = () => {
+    const value = { ...state };
+    options.onChange?.(value);
+    root.dispatchEvent(new CustomEvent("mk:studio-dock", { bubbles: true, detail: value }));
+  };
+  const isTabbable = (el) => el.tabIndex >= 0 && !el.closest("[hidden], [inert]") && el.getAttribute("aria-disabled") !== "true";
+  const visibleFocus = () => [...panel.querySelectorAll(FOCUSABLE)].filter(isTabbable);
+  const focusView = () => {
+    if (options.focusOnOpen !== false) (visibleFocus()[0] ?? panel).focus({ preventScroll: true });
+  };
+  const setView = (view) => {
+    state.view = views.length && !views.some((el) => el.dataset.mkStudioView === view) ? "menu" : view;
+    views.forEach((el) => scope.attr(el, "hidden", el.dataset.mkStudioView === state.view ? null : ""));
+    scope.attr(root, "data-mk-studio-active", state.view);
+    panel.querySelectorAll("video").forEach((video) => {
+      if (state.view !== "reel") video.pause();
+    });
+  };
+  const selectPage = (index, announce = true) => {
+    if (scope.disposed || !pages.length || !Number.isFinite(index)) return;
+    state.page = (Math.round(index) % pages.length + pages.length) % pages.length;
+    pages.forEach((el, i) => scope.attr(el, "hidden", i === state.page ? null : ""));
+    pageButtons.forEach((el) => scope.attr(el, "aria-current", Number(el.dataset.mkStudioPageTo) === state.page ? "true" : null));
+    if (announce) notify();
+  };
+  const open = (view = "menu") => {
+    if (scope.disposed) return;
+    const wasOpen = state.open;
+    if (wasOpen && state.view === view) return;
+    if (!wasOpen) {
+      const active = root.ownerDocument.activeElement;
+      previousFocus = active instanceof HTMLElement && active !== root.ownerDocument.body && !panel.contains(active) ? active : toggleButton;
+    }
+    animation?.kill();
+    state.open = true;
+    scope.attr(panel, "hidden", null);
+    scope.attr(panel, "inert", null);
+    scope.attr(panel, "aria-hidden", "false");
+    scope.attr(root, "data-mk-studio-open", "");
+    scope.attr(toggleButton, "aria-expanded", "true");
+    setView(view);
+    place2(!wasOpen);
+    if (!reduced()) context.add(() => {
+      animation = gsap.fromTo(panel, hidden(), { clipPath: "inset(0% 0% 0% 0% round 18px)", y: 0, opacity: 1, duration: Math.max(0, options.duration ?? 1.3), ease: options.ease ?? "back.out(0.52)", overwrite: true });
+    });
+    else context.add(() => {
+      gsap.set(panel, { clipPath: "inset(0% round 18px)", y: 0, opacity: 1 });
+    });
+    focusView();
+    notify();
+  };
+  const close = (restoreFocus = true) => {
+    if (scope.disposed || !state.open) return;
+    animation?.kill();
+    state.open = false;
+    scope.attr(toggleButton, "aria-expanded", "false");
+    scope.attr(root, "data-mk-studio-open", null);
+    scope.attr(panel, "inert", "");
+    scope.attr(panel, "aria-hidden", "true");
+    if (reduced()) scope.attr(panel, "hidden", "");
+    else context.add(() => {
+      animation = gsap.to(panel, { ...hidden(), duration: Math.max(0, options.duration ?? 1.3), ease: options.ease ?? "back.out(0.52)", overwrite: true, onComplete: () => {
+        if (!scope.disposed && !state.open) scope.attr(panel, "hidden", "");
+      } });
+    });
+    panel.querySelectorAll("video").forEach((video) => video.pause());
+    if (restoreFocus) (previousFocus?.isConnected ? previousFocus : toggleButton).focus({ preventScroll: true });
+    notify();
+  };
+  scope.on(root, "click", (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    if (!target) return;
+    if (target.closest("[data-mk-studio-toggle]") === toggleButton) state.open ? close() : open();
+    else if (target.closest("[data-mk-studio-close]")) close();
+    else if (target.closest("[data-mk-studio-slide]")) {
+      if (suppressSlideClick) {
+        event.preventDefault();
+        suppressSlideClick = false;
+      } else open("contact");
+    } else {
+      const view = target.closest("[data-mk-studio-to]")?.dataset.mkStudioTo;
+      if (view === "menu" || view === "contact" || view === "reel") open(view);
+      const page = target.closest("[data-mk-studio-page-to]");
+      if (page) selectPage(Number(page.dataset.mkStudioPageTo));
+    }
+  });
+  if (root.ownerDocument.defaultView) scope.on(root.ownerDocument.defaultView, "resize", () => place2());
+  scope.on(root.ownerDocument, "scroll", () => place2(), { passive: true, capture: true });
+  scope.on(root.ownerDocument, "pointerdown", (event) => {
+    if (state.open && event.target instanceof Node && !root.contains(event.target)) close(false);
+  });
+  scope.on(root.ownerDocument, "keydown", (event) => {
+    if (!state.open || event.defaultPrevented) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+      return;
+    }
+    if (!(event.target instanceof Node) || !root.contains(event.target)) return;
+    if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && event.target.closest("[data-mk-studio-pages]")) {
+      event.preventDefault();
+      selectPage(state.page + (event.key === "ArrowRight" ? 1 : -1));
+      pageButtons.find((el) => Number(el.dataset.mkStudioPageTo) === state.page)?.focus();
+    }
+    if (event.key === "Tab" && options.trapFocus !== false) {
+      const elements = [...root.querySelectorAll(FOCUSABLE)].filter((el) => (el === toggleButton || panel.contains(el)) && isTabbable(el));
+      if (!elements.length) {
+        event.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = elements[0], last = elements.at(-1);
+      if (event.shiftKey && (root.ownerDocument.activeElement === first || root.ownerDocument.activeElement === panel)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && root.ownerDocument.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  });
+  if (slide) {
+    scope.on(slide, "pointerdown", (event) => {
+      if (event.button !== 0) return;
+      slideStart = event.clientX;
+      slideDistance = 0;
+      slideMoved = false;
+    });
+    scope.on(root.ownerDocument, "pointermove", (event) => {
+      if (slideStart === null) return;
+      const width = Math.max(0, (slide.parentElement?.clientWidth ?? 0) - slide.offsetWidth);
+      slideMoved ||= Math.abs(event.clientX - slideStart) > 5;
+      slideDistance = Math.max(0, Math.min(width, event.clientX - slideStart));
+      if (!reduced()) slide.style.setProperty("--mk-studio-drag", `${slideDistance}px`);
+    });
+    const release = (cancel = false) => {
+      if (slideStart === null) return;
+      const width = Math.max(0, (slide.parentElement?.clientWidth ?? 0) - slide.offsetWidth);
+      suppressSlideClick = slideMoved;
+      slideStart = null;
+      slide.style.removeProperty("--mk-studio-drag");
+      if (!cancel && width > 0 && slideDistance / width >= 0.7) open("contact");
+      scope.timeout(() => {
+        suppressSlideClick = false;
+      }, 150);
+    };
+    scope.on(root.ownerDocument, "pointerup", () => release());
+    scope.on(root.ownerDocument, "pointercancel", () => release(true));
+  }
+  const clocks = [...root.querySelectorAll("[data-mk-studio-timezone]")];
+  const clockOriginals = clocks.map((el) => ({ el, text: el.textContent, style: el.getAttribute("style") }));
+  const tick = () => clocks.forEach((el) => {
+    try {
+      el.textContent = new Intl.DateTimeFormat(void 0, { hour: "2-digit", minute: "2-digit", timeZone: el.dataset.mkStudioTimezone }).format(/* @__PURE__ */ new Date());
+    } catch {
+    }
+  });
+  if (clocks.length) {
+    tick();
+    const timer = setInterval(tick, 6e4);
+    scope.add(() => clearInterval(timer));
+  }
+  scope.add(() => clockOriginals.forEach(({ el, text, style }) => {
+    el.textContent = text;
+    if (style === null) el.removeAttribute("style");
+    else el.setAttribute("style", style);
+  }));
+  setView("menu");
+  selectPage(0, false);
+  return { open, close, toggle: () => state.open ? close() : open(), selectPage, get state() {
+    return { ...state };
+  }, destroy() {
+    if (scope.disposed) return;
+    const focused = root.contains(root.ownerDocument.activeElement);
+    animation?.kill();
+    panel.querySelectorAll("video").forEach((video) => video.pause());
+    scope.dispose();
+    if (focused) toggleButton.focus({ preventScroll: true });
+  } };
+}
+
+// src/components/trailer/engine.ts
+var time = (value) => {
+  const seconds = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : 0;
+  return `${Math.floor(seconds / 60).toString().padStart(2, "0")}:${(seconds % 60).toString().padStart(2, "0")}`;
+};
+function createTrailer(root, options = {}) {
+  const video = root?.querySelector("video");
+  if (!root || !video || root.tagName !== "DIALOG") return inert({ open() {
+  }, close() {
+  }, toggle() {
+  }, play: async () => false, pause() {
+  }, seek() {
+  }, setVolume() {
+  }, isOpen: false });
+  const scope = createScope();
+  const get = (name) => root.querySelector(`[data-mk-trailer-${name}]`);
+  const playButton = get("play");
+  const muteButton = get("mute");
+  const fullButton = get("fullscreen");
+  const fullTarget = get("stage") ?? video;
+  const captionsButton = get("captions");
+  const seekInput = get("seek");
+  const volumeInput = get("volume");
+  const output = get("time");
+  const status = get("status");
+  const originalText = [output, status].filter((el) => !!el).map((el) => [el, el.textContent]);
+  scope.add(() => originalText.forEach(([el, text]) => {
+    el.textContent = text;
+  }));
+  scope.attr(root, "data-mk-trailer-ready", "");
+  scope.attr(root, "data-mk-trailer-state", "paused");
+  const controls = video.controls;
+  if (playButton && muteButton && seekInput && (!video.querySelector("track") || captionsButton)) video.controls = false;
+  scope.add(() => {
+    video.controls = controls;
+  });
+  for (const input of [seekInput, volumeInput]) {
+    if (!input) continue;
+    const initialValue = input.value;
+    scope.add(() => {
+      input.value = initialValue;
+    });
+    scope.attr(input, "min", "0");
+    scope.attr(input, "max", "1");
+    scope.attr(input, "step", input === volumeInput ? ".01" : ".1");
+    scope.attr(input, "aria-label", input.getAttribute("aria-label") ?? (input === volumeInput ? "Volumen" : "Posici\xF3n del video"));
+  }
+  if (status) scope.attr(status, "role", "status");
+  const tell = (message) => {
+    if (!scope.disposed && status) status.textContent = message;
+  };
+  const sync = () => {
+    if (scope.disposed) return;
+    const duration = Number.isFinite(video.duration) ? Math.max(0, video.duration) : 0;
+    scope.attr(root, "data-mk-trailer-state", video.ended ? "ended" : video.paused ? "paused" : "playing");
+    if (playButton) {
+      scope.attr(playButton, "aria-label", video.paused || video.ended ? "Reproducir" : "Pausar");
+      scope.attr(playButton, "aria-pressed", String(!video.paused && !video.ended));
+    }
+    if (muteButton) {
+      scope.attr(muteButton, "aria-label", video.muted ? "Activar sonido" : "Silenciar");
+      scope.attr(muteButton, "aria-pressed", String(video.muted));
+    }
+    if (seekInput) {
+      scope.attr(seekInput, "max", String(duration || 1));
+      scope.attr(seekInput, "disabled", duration ? null : "");
+      scope.attr(seekInput, "aria-valuetext", `${time(video.currentTime)} de ${time(duration)}`);
+      seekInput.value = String(Number.isFinite(video.currentTime) ? video.currentTime : 0);
+    }
+    if (volumeInput) volumeInput.value = String(video.muted ? 0 : video.volume);
+    if (captionsButton) {
+      scope.attr(captionsButton, "disabled", video.textTracks.length ? null : "");
+      scope.attr(captionsButton, "aria-pressed", String(video.textTracks[0]?.mode === "showing"));
+    }
+    if (output) output.textContent = `${time(video.currentTime)} / ${time(duration)}`;
+  };
+  let playRequest = 0;
+  let wantsPlayback = false;
+  const pause = () => {
+    if (!scope.disposed) {
+      wantsPlayback = false;
+      ++playRequest;
+      video.pause();
+      sync();
+    }
+  };
+  const play = async () => {
+    if (scope.disposed) return false;
+    wantsPlayback = true;
+    const request = ++playRequest;
+    try {
+      await video.play();
+      if (scope.disposed || request !== playRequest) {
+        if (scope.disposed || !wantsPlayback) video.pause();
+        return false;
+      }
+      tell("");
+      sync();
+      return true;
+    } catch {
+      if (scope.disposed || request !== playRequest) return false;
+      wantsPlayback = false;
+      tell("No se pudo reproducir el video. Revisa la fuente y vuelve a intentarlo.");
+      sync();
+      return false;
+    }
+  };
+  const seek = (seconds) => {
+    if (scope.disposed || !Number.isFinite(seconds) || !Number.isFinite(video.duration) || video.duration <= 0) return;
+    video.currentTime = Math.max(0, Math.min(video.duration, seconds));
+    sync();
+  };
+  const setVolume = (volume) => {
+    if (scope.disposed || !Number.isFinite(volume)) return;
+    video.volume = Math.max(0, Math.min(1, volume));
+    video.muted = volume <= 0;
+    sync();
+  };
+  const exitFullscreen = () => {
+    if (document.fullscreenElement !== fullTarget) return;
+    void document.exitFullscreen?.().catch(() => {
+    });
+  };
+  const dialog = createDialog(root, {
+    triggers: options.triggers,
+    closeOnBackdrop: options.closeOnBackdrop ?? true,
+    drag: false,
+    autoResize: false,
+    animateContent: false,
+    onOpen: () => {
+      sync();
+      if (options.autoplay) void play();
+      options.onOpen?.();
+    },
+    onClose: () => {
+      ++playRequest;
+      pause();
+      exitFullscreen();
+      options.onClose?.();
+    }
+  });
+  if (playButton) scope.on(playButton, "click", () => video.paused || video.ended ? void play() : pause());
+  if (muteButton) scope.on(muteButton, "click", () => {
+    video.muted = !video.muted;
+    sync();
+  });
+  if (seekInput) scope.on(seekInput, "input", () => seek(Number(seekInput.value)));
+  if (volumeInput) scope.on(volumeInput, "input", () => setVolume(Number(volumeInput.value)));
+  if (captionsButton) scope.on(captionsButton, "click", () => {
+    const track = video.textTracks[0];
+    if (track) track.mode = track.mode === "showing" ? "hidden" : "showing";
+    sync();
+  });
+  const fullscreen = async () => {
+    if (scope.disposed) return;
+    try {
+      if (document.fullscreenElement === fullTarget) await document.exitFullscreen?.();
+      else if (fullTarget.requestFullscreen) {
+        await fullTarget.requestFullscreen();
+        if (scope.disposed || !dialog.isOpen) exitFullscreen();
+      } else tell("La pantalla completa no est\xE1 disponible en este navegador.");
+    } catch {
+      tell("No se pudo abrir la pantalla completa.");
+    }
+  };
+  if (fullButton) {
+    scope.attr(fullButton, "aria-label", "Pantalla completa");
+    scope.on(fullButton, "click", () => {
+      void fullscreen();
+    });
+    scope.on(document, "fullscreenchange", () => {
+      scope.attr(fullButton, "aria-label", document.fullscreenElement === fullTarget ? "Salir de pantalla completa" : "Pantalla completa");
+    });
+  }
+  for (const event of ["loadedmetadata", "durationchange", "timeupdate", "play", "pause", "ended", "volumechange"]) scope.on(video, event, sync);
+  scope.on(video, "error", () => {
+    tell("El video no est\xE1 disponible.");
+    scope.attr(root, "data-mk-trailer-state", "error");
+  });
+  scope.on(root, "keydown", (event) => {
+    if (!dialog.isOpen || event.target instanceof Element && event.target.closest("button, input, select, textarea, a, [contenteditable]")) return;
+    if (event.key === " " || event.key.toLowerCase() === "k") {
+      event.preventDefault();
+      video.paused ? void play() : pause();
+    } else if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      event.preventDefault();
+      seek(video.currentTime + (event.key === "ArrowRight" ? 5 : -5));
+    } else if (event.key.toLowerCase() === "m") {
+      video.muted = !video.muted;
+      sync();
+    }
+  });
+  sync();
+  return {
+    open: (origin) => {
+      if (!scope.disposed) dialog.open(origin);
+    },
+    close: () => {
+      if (!scope.disposed) dialog.close();
+    },
+    toggle: (origin) => {
+      if (!scope.disposed) dialog.toggle(origin);
+    },
+    play,
+    pause,
+    seek,
+    setVolume,
+    get isOpen() {
+      return dialog.isOpen;
+    },
+    destroy() {
+      if (scope.disposed) return;
+      wantsPlayback = false;
+      ++playRequest;
+      video.pause();
+      exitFullscreen();
+      dialog.destroy();
+      scope.dispose();
+    }
+  };
+}
+
+// src/core/dates.ts
+function toDate(input, fallback = /* @__PURE__ */ new Date()) {
+  if (input instanceof Date) return Number.isNaN(input.getTime()) ? startOfDay(fallback) : startOfDay(input);
+  if (typeof input === "string") {
+    const day = /^(\d{4})-(\d{2})-(\d{2})$/.exec(input.trim());
+    if (day) return new Date(Number(day[1]), Number(day[2]) - 1, Number(day[3]));
+  }
+  if (typeof input === "string" || typeof input === "number") {
+    const parsed = new Date(input);
+    if (!Number.isNaN(parsed.getTime())) return startOfDay(parsed);
+  }
+  return startOfDay(fallback);
+}
+function toDateTime(input) {
+  if (input instanceof Date) return Number.isNaN(input.getTime()) ? null : input;
+  if (typeof input === "string" && /^\d{4}-\d{2}-\d{2}$/.test(input.trim())) return toDate(input);
+  const parsed = new Date(input);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+}
+var startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
+var addDays = (date, days) => new Date(date.getFullYear(), date.getMonth(), date.getDate() + days);
+function addMonths(date, months) {
+  const target = new Date(date.getFullYear(), date.getMonth() + months, 1);
+  const last = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
+  return new Date(target.getFullYear(), target.getMonth(), Math.min(date.getDate(), last));
+}
+var startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+function startOfWeek(date, firstDay = 0) {
+  const shift = (date.getDay() - firstDay + 7) % 7;
+  return addDays(startOfDay(date), -shift);
+}
+var sameDay = (a, b) => !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var sameMonth = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+var pad = (n) => String(n).padStart(2, "0");
+var dayKey = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+function monthWeeks(date, firstDay = 0) {
+  const first = startOfMonth(date);
+  const last = new Date(date.getFullYear(), date.getMonth() + 1, 0);
+  const weeks = [];
+  for (let start = startOfWeek(first, firstDay); start <= last; start = addDays(start, 7)) {
+    weeks.push(Array.from({ length: 7 }, (_, i) => addDays(start, i)));
+  }
+  return weeks;
+}
+var weekDays = (date, firstDay = 0) => Array.from({ length: 7 }, (_, i) => addDays(startOfWeek(date, firstDay), i));
+function weekdayNames(locale, firstDay = 0, width = "short") {
+  const format = safeFormat(locale, { weekday: width });
+  return Array.from({ length: 7 }, (_, i) => format.format(new Date(2024, 8, 1 + (firstDay + i) % 7)));
+}
+function safeFormat(locale, options) {
+  try {
+    return new Intl.DateTimeFormat(locale, options);
+  } catch {
+    return new Intl.DateTimeFormat(void 0, options);
+  }
+}
+var capitalize = (text) => text.charAt(0).toLocaleUpperCase() + text.slice(1);
+function fromJson(value) {
+  if (typeof value !== "string") return value;
+  try {
+    return JSON.parse(value);
+  } catch {
+    return void 0;
+  }
+}
+var clampFirstDay = (n) => Number.isInteger(n) && n >= 0 && n <= 6 ? n : 0;
+
+// src/components/calendar/engine.ts
+var SLIDE = 30;
+var SLIDE_OUT = 0.12;
+var SLIDE_GAP = 0.1;
+var SLIDE_DURATION = 0.25;
+var CELL_STAGGER = 5e-3;
+var EVENT_STAGGER = 0.02;
+function createCalendar(root, options = {}) {
+  const grid = root?.querySelector("[data-mk-calendar-grid]");
+  if (!root || !grid) {
+    const now = toDate(null);
+    return inert({
+      next() {
+      },
+      prev() {
+      },
+      goToday() {
+      },
+      setDate() {
+      },
+      setView() {
+      },
+      setEvents() {
+      },
+      select() {
+      },
+      date: now,
+      view: "month",
+      selected: null,
+      range: { start: now, end: now, view: "month" }
+    });
+  }
+  registerMotion();
+  const scope = createScope();
+  const ctx = gsap.context(() => {
+  });
+  scope.add(() => ctx.revert());
+  const locale = options.locale ?? "es";
+  const firstDay = clampFirstDay(options.firstDay);
+  const maxEvents = Number.isFinite(options.maxEvents) ? Math.max(0, Math.floor(options.maxEvents)) : 3;
+  const labels = {
+    more: options.labels?.more ?? ((n) => `+${n} m\xE1s`),
+    events: options.labels?.events ?? ((n) => n === 1 ? "1 evento" : `${n} eventos`),
+    status: { pending: "pendiente", done: "completado", cancelled: "cancelado", ...options.labels?.status }
+  };
+  let date = toDate(options.date);
+  let view = options.view === "week" ? "week" : "month";
+  let selected = options.selected ? toDate(options.selected) : null;
+  let focusDay = selected ?? date;
+  let events = [];
+  let byDay = /* @__PURE__ */ new Map();
+  let first = true;
+  const today = () => toDate(options.today ?? null);
+  const title = root.querySelector("[data-mk-calendar-title]");
+  const prevButton = root.querySelector("[data-mk-calendar-prev]");
+  const nextButton = root.querySelector("[data-mk-calendar-next]");
+  const todayButton = root.querySelector("[data-mk-calendar-today]");
+  const viewButtons = [...root.querySelectorAll("[data-mk-calendar-view]")];
+  const originalGrid = [...grid.childNodes];
+  const originalTitle = title ? [...title.childNodes] : [];
+  scope.add(() => {
+    grid.replaceChildren(...originalGrid);
+    title?.replaceChildren(...originalTitle);
+  });
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(grid, "role", "grid");
+  if (title) {
+    if (!title.id) scope.attr(title, "id", `mk-calendar-${Math.random().toString(36).slice(2, 8)}`);
+    scope.attr(grid, "aria-labelledby", title.id);
+  }
+  const monthTitle = safeFormat(locale, { month: "long", year: "numeric" });
+  const rangeTitle = safeFormat(locale, { day: "numeric", month: "short", year: "numeric" });
+  const fullDay = safeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" });
+  const timeFormat = safeFormat(locale, { hour: "numeric", minute: "2-digit" });
+  const index = (list2) => {
+    events = Array.isArray(list2) ? list2.filter((e) => e && toDateTime(e.start)) : [];
+    byDay = /* @__PURE__ */ new Map();
+    const sorted = [...events].sort((a, b) => toDateTime(a.start).getTime() - toDateTime(b.start).getTime());
+    for (const event of sorted) {
+      const start = toDate(toDateTime(event.start));
+      const endTime = event.end ? toDateTime(event.end) : null;
+      const end = endTime && endTime > start ? toDate(endTime) : start;
+      for (let day = start, n = 0; day <= end && n < 62; day = addDays(day, 1), n++) {
+        const key = dayKey(day);
+        byDay.set(key, [...byDay.get(key) ?? [], event]);
+      }
+    }
+  };
+  index(fromJson(options.events) ?? []);
+  const days = () => view === "week" ? [weekDays(date, firstDay)] : monthWeeks(date, firstDay);
+  const range = () => {
+    const weeks = days();
+    return { start: weeks[0][0], end: weeks[weeks.length - 1][6], view };
+  };
+  const inRange = (day) => {
+    const r = range();
+    return day >= r.start && day <= r.end;
+  };
+  const header = () => {
+    const row = document.createElement("div");
+    row.className = "mk-calendar__head";
+    row.setAttribute("role", "row");
+    const long = weekdayNames(locale, firstDay, "short");
+    const narrow = weekdayNames(locale, firstDay, "narrow");
+    long.forEach((name, i) => {
+      const cell = document.createElement("div");
+      cell.className = "mk-calendar__weekday";
+      cell.setAttribute("role", "columnheader");
+      cell.innerHTML = '<span class="mk-calendar__weekday-long"></span><span class="mk-calendar__weekday-narrow" aria-hidden="true"></span>';
+      cell.firstElementChild.textContent = name;
+      cell.lastElementChild.textContent = narrow[i];
+      row.append(cell);
+    });
+    return row;
+  };
+  const chip = (event) => {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "mk-calendar__event";
+    button.dataset.mkEvent = String(event.id);
+    const status = event.status ?? "pending";
+    button.dataset.state = status;
+    if (event.color) button.style.setProperty("--mk-calendar-event-color", event.color);
+    const start = toDateTime(event.start);
+    const time2 = event.allDay ? "" : timeFormat.format(start);
+    button.innerHTML = '<span class="mk-calendar__status" aria-hidden="true"></span><span class="mk-calendar__event-title"></span><span class="mk-calendar__event-time"></span>';
+    button.children[1].textContent = event.title;
+    button.children[2].textContent = time2;
+    button.setAttribute("aria-label", [event.title, time2, labels.status[status]].filter(Boolean).join(", "));
+    return button;
+  };
+  const body = () => {
+    const wrap = document.createElement("div");
+    wrap.className = "mk-calendar__body";
+    wrap.dataset.view = view;
+    wrap.setAttribute("role", "rowgroup");
+    const now = today();
+    const focusKey = dayKey(focusDay);
+    for (const week of days()) {
+      const row = document.createElement("div");
+      row.className = "mk-calendar__week";
+      row.setAttribute("role", "row");
+      for (const day of week) {
+        const key = dayKey(day);
+        const cell = document.createElement("div");
+        cell.className = "mk-calendar__day";
+        cell.setAttribute("role", "gridcell");
+        cell.dataset.mkDate = key;
+        if (view === "month" && !sameMonth(day, date)) cell.dataset.outside = "";
+        if (sameDay(day, now)) cell.dataset.today = "";
+        const isSelected = sameDay(day, selected);
+        cell.setAttribute("aria-selected", String(isSelected));
+        const list2 = byDay.get(key) ?? [];
+        const number = document.createElement("button");
+        number.type = "button";
+        number.className = "mk-calendar__number";
+        number.dataset.mkDay = key;
+        number.textContent = view === "week" ? `${day.getDate()}` : String(day.getDate());
+        number.tabIndex = key === focusKey ? 0 : -1;
+        number.setAttribute("aria-label", `${capitalize(fullDay.format(day))}${list2.length ? `, ${labels.events(list2.length)}` : ""}`);
+        if (sameDay(day, now)) number.setAttribute("aria-current", "date");
+        cell.append(number);
+        if (list2.length) {
+          const box = document.createElement("div");
+          box.className = "mk-calendar__events";
+          const shown2 = view === "week" ? list2 : list2.slice(0, maxEvents);
+          for (const event of shown2) box.append(chip(event));
+          if (shown2.length < list2.length) {
+            const more = document.createElement("button");
+            more.type = "button";
+            more.className = "mk-calendar__more";
+            more.dataset.mkMore = key;
+            more.textContent = labels.more(list2.length - shown2.length);
+            box.append(more);
+          }
+          cell.append(box);
+        }
+        row.append(cell);
+      }
+      wrap.append(row);
+    }
+    return wrap;
+  };
+  let current2 = null;
+  const leaving = /* @__PURE__ */ new Set();
+  scope.add(() => leaving.forEach((el) => el.remove()));
+  const syncChrome = () => {
+    if (title) {
+      const r = range();
+      let text = capitalize(monthTitle.format(date));
+      if (view === "week") {
+        const format = rangeTitle;
+        text = format.formatRange ? format.formatRange(r.start, r.end) : `${rangeTitle.format(r.start)} \u2013 ${rangeTitle.format(r.end)}`;
+      }
+      title.textContent = text;
+    }
+    for (const button of viewButtons) {
+      scope.attr(button, "aria-pressed", String(button.dataset.mkCalendarView === view));
+    }
+  };
+  const render = (direction) => {
+    const next = body();
+    const motion = !reduced();
+    if (!current2) {
+      grid.replaceChildren(header(), next);
+    } else if (motion && direction !== 0) {
+      const old = current2;
+      old.style.top = `${old.offsetTop}px`;
+      old.classList.add("mk-calendar__body--leaving");
+      old.setAttribute("aria-hidden", "true");
+      old.querySelectorAll("button").forEach((b) => b.tabIndex = -1);
+      leaving.add(old);
+      grid.append(next);
+      ctx.add(() => {
+        gsap.to(old, { x: -SLIDE * direction, opacity: 0, duration: SLIDE_OUT, ease: "power1.in", onComplete: () => {
+          old.remove();
+          leaving.delete(old);
+        } });
+        gsap.fromTo(next, { x: SLIDE * direction, opacity: 0 }, { x: 0, opacity: 1, duration: SLIDE_DURATION, delay: SLIDE_GAP, ease: "power2.out", clearProps: "transform,opacity" });
+      });
+    } else {
+      current2.replaceWith(next);
+    }
+    current2 = next;
+    syncChrome();
+    if (motion) {
+      ctx.add(() => {
+        if (first) flowIn(next, { target: ".mk-calendar__day", stagger: CELL_STAGGER });
+        flowIn(next, { target: ".mk-calendar__event, .mk-calendar__more", stagger: EVENT_STAGGER, delay: first ? 0.1 : direction ? SLIDE_GAP + SLIDE_DURATION * 0.5 : 0 });
+      });
+    }
+    first = false;
+  };
+  const focusButton = () => grid.querySelector(`.mk-calendar__body:not(.mk-calendar__body--leaving) [data-mk-day="${dayKey(focusDay)}"]`);
+  const navigate = (to, focus = false) => {
+    if (scope.disposed) return;
+    const from = date;
+    const moved = view === "week" ? !sameDay(startOfWeek(to, firstDay), startOfWeek(from, firstDay)) : !sameMonth(to, from);
+    date = to;
+    focusDay = to;
+    if (moved) {
+      render(to > from ? 1 : -1);
+      const r = range();
+      options.onNavigate?.(r);
+      root.dispatchEvent(new CustomEvent("mk:navigate", { bubbles: true, detail: r }));
+    } else {
+      grid.querySelectorAll("[data-mk-day]").forEach((b) => b.tabIndex = b.dataset.mkDay === dayKey(to) ? 0 : -1);
+    }
+    if (focus) focusButton()?.focus();
+  };
+  const select = (value, notify = true) => {
+    if (scope.disposed) return;
+    selected = value === null ? null : toDate(value);
+    grid.querySelectorAll(".mk-calendar__day").forEach((cell) => cell.setAttribute("aria-selected", String(!!selected && cell.dataset.mkDate === dayKey(selected))));
+    if (selected && notify) {
+      options.onSelect?.(selected);
+      root.dispatchEvent(new CustomEvent("mk:select", { bubbles: true, detail: { date: selected, key: dayKey(selected) } }));
+    }
+  };
+  scope.on(root, "click", (e) => {
+    const target = e.target.closest("button");
+    if (!target || !root.contains(target) || target.disabled) return;
+    if (target === prevButton) navigate(view === "week" ? addDays(date, -7) : addMonths(date, -1));
+    else if (target === nextButton) navigate(view === "week" ? addDays(date, 7) : addMonths(date, 1));
+    else if (target === todayButton) navigate(today(), true);
+    else if (target.dataset.mkCalendarView) setView(target.dataset.mkCalendarView);
+    else if (target.dataset.mkEvent !== void 0) {
+      const event = events.find((ev) => String(ev.id) === target.dataset.mkEvent);
+      if (event) {
+        options.onEventClick?.(event);
+        root.dispatchEvent(new CustomEvent("mk:event", { bubbles: true, detail: { event } }));
+      }
+    } else if (target.dataset.mkDay || target.dataset.mkMore) {
+      const day = toDate(target.dataset.mkDay ?? target.dataset.mkMore);
+      focusDay = day;
+      grid.querySelectorAll("[data-mk-day]").forEach((b) => b.tabIndex = b.dataset.mkDay === dayKey(day) ? 0 : -1);
+      select(day);
+    }
+  });
+  scope.on(grid, "keydown", (e) => {
+    const event = e;
+    const target = event.target;
+    if (!target.dataset?.mkDay) return;
+    const day = toDate(target.dataset.mkDay);
+    const map = {
+      ArrowLeft: () => addDays(day, -1),
+      ArrowRight: () => addDays(day, 1),
+      ArrowUp: () => addDays(day, -7),
+      ArrowDown: () => addDays(day, 7),
+      Home: () => startOfWeek(day, firstDay),
+      End: () => addDays(startOfWeek(day, firstDay), 6),
+      PageUp: () => addMonths(day, event.shiftKey ? -12 : -1),
+      PageDown: () => addMonths(day, event.shiftKey ? 12 : 1)
+    };
+    const to = map[event.key]?.();
+    if (!to) return;
+    event.preventDefault();
+    if (!event.key.startsWith("Page") && inRange(to)) {
+      focusDay = to;
+      grid.querySelectorAll("[data-mk-day]").forEach((b) => b.tabIndex = b.dataset.mkDay === dayKey(to) ? 0 : -1);
+      focusButton()?.focus();
+    } else navigate(to, true);
+  });
+  const setView = (next) => {
+    if (scope.disposed || next !== "month" && next !== "week" || next === view) return;
+    view = next;
+    date = focusDay;
+    render(0);
+    const r = range();
+    options.onNavigate?.(r);
+    root.dispatchEvent(new CustomEvent("mk:navigate", { bubbles: true, detail: r }));
+  };
+  render(0);
+  return {
+    next: () => navigate(view === "week" ? addDays(date, 7) : addMonths(date, 1)),
+    prev: () => navigate(view === "week" ? addDays(date, -7) : addMonths(date, -1)),
+    goToday: () => navigate(today()),
+    setDate: (value) => navigate(toDate(value, date)),
+    setView,
+    setEvents(list2) {
+      if (scope.disposed) return;
+      const hadFocus = grid.contains(document.activeElement);
+      index(fromJson(list2) ?? []);
+      const fresh = body();
+      current2?.replaceWith(fresh);
+      current2 = fresh;
+      if (hadFocus) focusButton()?.focus();
+    },
+    select,
+    get date() {
+      return date;
+    },
+    get view() {
+      return view;
+    },
+    get selected() {
+      return selected;
+    },
+    get range() {
+      return range();
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
+// src/components/slot-picker/engine.ts
+var SLIDE2 = 30;
+var SLIDE_DURATION2 = 0.25;
+var slotEaseReady = false;
+function createSlotPicker(root, options = {}) {
+  const daysHost = root?.querySelector("[data-mk-slot-days]");
+  const timesHost = root?.querySelector("[data-mk-slot-times]");
+  if (!root || !daysHost || !timesHost) {
+    return inert({ selectDate() {
+    }, selectTime() {
+    }, setSlots() {
+    }, date: null, time: null, value: null });
+  }
+  registerMotion();
+  if (!slotEaseReady && typeof window !== "undefined") {
+    CustomEase.create("mk-slot-in", ".38,.49,0,1.1");
+    slotEaseReady = true;
+  }
+  const scope = createScope();
+  const ctx = gsap.context(() => {
+  });
+  scope.add(() => ctx.revert());
+  const locale = options.locale ?? "es";
+  const firstDay = clampFirstDay(options.firstDay);
+  const labels = {
+    placeholder: options.labels?.placeholder ?? "Elige un d\xEDa para ver los horarios.",
+    empty: options.labels?.empty ?? "No hay horarios este d\xEDa.",
+    loading: options.labels?.loading ?? "Cargando horarios\u2026",
+    heading: options.labels?.heading ?? ((d) => capitalize(safeFormat(locale, { weekday: "long", day: "numeric", month: "long" }).format(d)))
+  };
+  const min = options.min !== void 0 ? toDate(options.min) : null;
+  const max = options.max !== void 0 ? toDate(options.max) : null;
+  const closedList = fromJson(options.closedDays);
+  const closed = new Set((Array.isArray(closedList) ? closedList : []).filter((n) => Number.isInteger(n)));
+  let slots = fromJson(options.slots) ?? [];
+  const initial = (() => {
+    const v = options.value;
+    if (typeof v === "string") {
+      const match = /^(\d{4}-\d{2}-\d{2})(?:T(\d{1,2}:\d{2}))?/.exec(v);
+      return match ? { date: toDate(match[1]), time: match[2] ?? null } : null;
+    }
+    return v ? { date: toDate(v.date), time: v.time ?? null } : null;
+  })();
+  let month = initial?.date ?? toDate(options.date);
+  let date = initial?.date ?? (options.date !== void 0 ? toDate(options.date) : null);
+  let time2 = initial?.time ?? null;
+  let focusDay = date ?? month;
+  let times = [];
+  let request = 0;
+  const title = root.querySelector("[data-mk-slot-title]");
+  const heading = root.querySelector("[data-mk-slot-heading]");
+  const prev = root.querySelector("[data-mk-slot-prev]");
+  const next = root.querySelector("[data-mk-slot-next]");
+  const output = root.querySelector("[data-mk-slot-value]");
+  const originals = [daysHost, timesHost, title, heading].filter(Boolean).map((el) => [el, [...el.childNodes]]);
+  scope.add(() => originals.forEach(([el, nodes]) => el.replaceChildren(...nodes)));
+  if (output) {
+    const before = output.value;
+    scope.add(() => {
+      output.value = before;
+    });
+  }
+  scope.attr(root, "data-mk-ready", "");
+  scope.attr(daysHost, "role", "grid");
+  scope.attr(timesHost, "role", "radiogroup");
+  if (heading) {
+    if (!heading.id) scope.attr(heading, "id", `mk-slot-${Math.random().toString(36).slice(2, 8)}`);
+    scope.attr(timesHost, "aria-labelledby", heading.id);
+  }
+  if (title) {
+    if (!title.id) scope.attr(title, "id", `mk-slot-month-${Math.random().toString(36).slice(2, 8)}`);
+    scope.attr(daysHost, "aria-labelledby", title.id);
+  }
+  const monthTitle = safeFormat(locale, { month: "long", year: "numeric" });
+  const fullDay = safeFormat(locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" });
+  const disabled = (d) => min && d < min || max && d > max || closed.has(d.getDay()) || !!options.isDisabled?.(d);
+  let daysBody = null;
+  const leaving = /* @__PURE__ */ new Set();
+  scope.add(() => leaving.forEach((el) => el.remove()));
+  const buildDays = () => {
+    const wrap = document.createElement("div");
+    wrap.className = "mk-slot-picker__days";
+    wrap.setAttribute("role", "rowgroup");
+    const head = document.createElement("div");
+    head.className = "mk-slot-picker__weekdays";
+    head.setAttribute("role", "row");
+    for (const name of weekdayNames(locale, firstDay, "short")) {
+      const cell = document.createElement("span");
+      cell.setAttribute("role", "columnheader");
+      cell.textContent = name.slice(0, 2);
+      head.append(cell);
+    }
+    wrap.append(head);
+    const focusKey = dayKey(focusDay);
+    for (const week of monthWeeks(month, firstDay)) {
+      const row = document.createElement("div");
+      row.className = "mk-slot-picker__week";
+      row.setAttribute("role", "row");
+      for (const d of week) {
+        const cell = document.createElement("span");
+        cell.setAttribute("role", "gridcell");
+        if (!sameMonth(d, month)) {
+          row.append(cell);
+          continue;
+        }
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "mk-slot-picker__day";
+        button.dataset.mkSlotDay = dayKey(d);
+        button.textContent = String(d.getDate());
+        button.tabIndex = dayKey(d) === focusKey ? 0 : -1;
+        button.setAttribute("aria-label", capitalize(fullDay.format(d)));
+        if (disabled(d)) button.disabled = true;
+        if (sameDay(d, /* @__PURE__ */ new Date())) button.setAttribute("aria-current", "date");
+        cell.setAttribute("aria-selected", String(sameDay(d, date)));
+        cell.append(button);
+        row.append(cell);
+      }
+      wrap.append(row);
+    }
+    return wrap;
+  };
+  const renderDays = (direction) => {
+    const fresh = buildDays();
+    if (title) title.textContent = capitalize(monthTitle.format(month));
+    if (prev) scope.attr(prev, "disabled", min && new Date(month.getFullYear(), month.getMonth(), 0) < min ? "" : null);
+    if (next) scope.attr(next, "disabled", max && new Date(month.getFullYear(), month.getMonth() + 1, 1) > max ? "" : null);
+    if (daysBody && direction && !reduced()) {
+      const old = daysBody;
+      old.style.top = `${old.offsetTop}px`;
+      old.classList.add("mk-slot-picker__leaving");
+      old.setAttribute("aria-hidden", "true");
+      leaving.add(old);
+      daysHost.append(fresh);
+      ctx.add(() => {
+        gsap.to(old, { x: -SLIDE2 * direction, opacity: 0, duration: SLIDE_DURATION2, ease: "power1.out", onComplete: () => {
+          old.remove();
+          leaving.delete(old);
+        } });
+        gsap.fromTo(fresh, { x: SLIDE2 * direction, opacity: 0 }, { x: 0, opacity: 1, duration: SLIDE_DURATION2, ease: "power1.out", clearProps: "transform,opacity" });
+      });
+    } else if (daysBody) daysBody.replaceWith(fresh);
+    else daysHost.replaceChildren(fresh);
+    daysBody = fresh;
+  };
+  const dayButton = (d) => daysHost.querySelector(`.mk-slot-picker__days:not(.mk-slot-picker__leaving) [data-mk-slot-day="${dayKey(d)}"]`);
+  const moveFocus = (to, focus) => {
+    focusDay = to;
+    if (!sameMonth(to, month)) {
+      const direction = to > month ? 1 : -1;
+      month = to;
+      renderDays(direction);
+    } else daysHost.querySelectorAll("[data-mk-slot-day]").forEach((b) => b.tabIndex = b.dataset.mkSlotDay === dayKey(to) ? 0 : -1);
+    if (focus) dayButton(to)?.focus();
+  };
+  let timesBody = null;
+  let firstList = true;
+  const buildTimes = (state) => {
+    const wrap = document.createElement("div");
+    wrap.className = "mk-slot-picker__list";
+    if (state !== "ready" || !times.length) {
+      const note = document.createElement("p");
+      note.className = "mk-slot-picker__note";
+      note.textContent = state === "placeholder" ? labels.placeholder : state === "loading" ? labels.loading : labels.empty;
+      wrap.append(note);
+      return wrap;
+    }
+    const focusTime = time2 && times.includes(time2) ? time2 : times[0];
+    for (const t of times) {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.className = "mk-slot-picker__time";
+      button.setAttribute("role", "radio");
+      button.dataset.mkSlotTime = t;
+      button.textContent = t;
+      button.setAttribute("aria-checked", String(t === time2));
+      button.tabIndex = t === focusTime ? 0 : -1;
+      wrap.append(button);
+    }
+    return wrap;
+  };
+  const renderTimes = (state, direction) => {
+    const fresh = buildTimes(state);
+    scope.attr(timesHost, "aria-busy", state === "loading" ? "true" : null);
+    const motion = !reduced();
+    if (timesBody && direction && motion) {
+      const old = timesBody;
+      old.style.top = `${old.offsetTop}px`;
+      old.classList.add("mk-slot-picker__leaving");
+      old.setAttribute("aria-hidden", "true");
+      old.querySelectorAll("button").forEach((b) => b.tabIndex = -1);
+      leaving.add(old);
+      timesHost.append(fresh);
+      ctx.add(() => {
+        gsap.to(old, { x: -SLIDE2 * direction, opacity: 0, duration: SLIDE_DURATION2, ease: "power1.out", onComplete: () => {
+          old.remove();
+          leaving.delete(old);
+        } });
+        gsap.fromTo(fresh, { x: SLIDE2 * direction, opacity: 0 }, { x: 0, opacity: 1, duration: SLIDE_DURATION2, ease: "power1.out", clearProps: "transform,opacity" });
+      });
+    } else if (timesBody) timesBody.replaceWith(fresh);
+    else timesHost.replaceChildren(fresh);
+    timesBody = fresh;
+    if (state === "ready" && times.length && motion && firstList) {
+      firstList = false;
+      ctx.add(() => flowIn(fresh, { target: ".mk-slot-picker__time", style: 2, startScale: 0.7, blur: 32, duration: 0.3, stagger: 0.02, ease: "mk-slot-in" }));
+    }
+  };
+  const resolve = (d) => {
+    const source = slots;
+    if (Array.isArray(source)) return source;
+    if (typeof source === "function") return source(d);
+    return source?.[dayKey(d)] ?? [];
+  };
+  const clean = (list2) => Array.isArray(list2) ? [...new Set(list2.filter((t) => typeof t === "string" && /^\d{1,2}:\d{2}$/.test(t)))] : [];
+  const load = (direction) => {
+    if (!date) {
+      times = [];
+      renderTimes("placeholder", 0);
+      return;
+    }
+    const mine = ++request;
+    let result;
+    try {
+      result = resolve(date);
+    } catch {
+      result = [];
+    }
+    if (result && typeof result.then === "function") {
+      renderTimes("loading", direction);
+      result.then(
+        (list2) => {
+          if (mine === request && !scope.disposed) {
+            times = clean(list2);
+            renderTimes("ready", 0);
+          }
+        },
+        () => {
+          if (mine === request && !scope.disposed) {
+            times = [];
+            renderTimes("ready", 0);
+          }
+        }
+      );
+    } else {
+      times = clean(result);
+      if (time2 && !times.includes(time2)) time2 = null;
+      renderTimes("ready", direction);
+    }
+  };
+  const syncHeading = () => {
+    if (!heading) return;
+    if (date) {
+      heading.textContent = labels.heading(date);
+      if (!heading.hasAttribute("data-mk-shown")) scope.attr(heading, "data-mk-shown", "");
+    }
+  };
+  const emit = () => {
+    const key = date ? dayKey(date) : "";
+    const value = date && time2 ? `${key}T${time2}` : null;
+    if (output) {
+      output.value = value ?? "";
+      output.dispatchEvent(new Event("input", { bubbles: true }));
+      output.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    if (date && time2 && value) {
+      const detail = { date, time: time2, key, value };
+      options.onChange?.(detail);
+      root.dispatchEvent(new CustomEvent("mk:change", { bubbles: true, detail }));
+    }
+  };
+  const selectDate = (input, notify = true) => {
+    if (scope.disposed) return;
+    const d = toDate(input);
+    if (disabled(d)) return;
+    const direction = date ? Math.sign(d.getTime() - date.getTime()) : 0;
+    if (sameDay(d, date)) return;
+    date = d;
+    time2 = null;
+    focusDay = d;
+    if (!sameMonth(d, month)) {
+      const dir = d > month ? 1 : -1;
+      month = d;
+      renderDays(dir);
+    }
+    daysHost.querySelectorAll('[role="gridcell"]').forEach((cell) => {
+      const b = cell.querySelector("[data-mk-slot-day]");
+      if (b) {
+        cell.setAttribute("aria-selected", String(b.dataset.mkSlotDay === dayKey(d)));
+        b.tabIndex = b.dataset.mkSlotDay === dayKey(d) ? 0 : -1;
+      }
+    });
+    syncHeading();
+    load(direction);
+    if (notify) {
+      options.onDateChange?.(d);
+      emit();
+    }
+  };
+  const selectTime = (t, notify = true) => {
+    if (scope.disposed || !date) return;
+    if (t !== null && !times.includes(t)) return;
+    time2 = t;
+    timesHost.querySelectorAll("[data-mk-slot-time]").forEach((b) => {
+      b.setAttribute("aria-checked", String(b.dataset.mkSlotTime === t));
+      b.tabIndex = (t ? b.dataset.mkSlotTime === t : b === timesHost.querySelector("[data-mk-slot-time]")) ? 0 : -1;
+    });
+    if (notify) emit();
+  };
+  scope.on(root, "click", (e) => {
+    const target = e.target.closest("button");
+    if (!target || target.disabled || !root.contains(target)) return;
+    if (target === prev) moveFocus(addMonths(month, -1), false);
+    else if (target === next) moveFocus(addMonths(month, 1), false);
+    else if (target.dataset.mkSlotDay) selectDate(target.dataset.mkSlotDay);
+    else if (target.dataset.mkSlotTime) selectTime(target.dataset.mkSlotTime);
+  });
+  scope.on(daysHost, "keydown", (e) => {
+    const event = e;
+    const key = event.target.dataset?.mkSlotDay;
+    if (!key) return;
+    const d = toDate(key);
+    const to = {
+      ArrowLeft: () => addDays(d, -1),
+      ArrowRight: () => addDays(d, 1),
+      ArrowUp: () => addDays(d, -7),
+      ArrowDown: () => addDays(d, 7),
+      Home: () => startOfWeek(d, firstDay),
+      End: () => addDays(startOfWeek(d, firstDay), 6),
+      PageUp: () => addMonths(d, -1),
+      PageDown: () => addMonths(d, 1)
+    }[event.key]?.();
+    if (!to) return;
+    event.preventDefault();
+    moveFocus(to, true);
+  });
+  scope.on(timesHost, "keydown", (e) => {
+    const event = e;
+    const current2 = event.target.dataset?.mkSlotTime;
+    if (!current2) return;
+    const i = times.indexOf(current2);
+    const to = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1, ArrowUp: i - 1, Home: 0, End: times.length - 1 }[event.key];
+    if (to === void 0) return;
+    event.preventDefault();
+    const t = times[(to + times.length) % times.length];
+    selectTime(t);
+    timesHost.querySelector(`[data-mk-slot-time="${t}"]`)?.focus();
+  });
+  renderDays(0);
+  if (date) {
+    syncHeading();
+    load(0);
+    if (time2 && !times.includes(time2)) time2 = null;
+  } else renderTimes("placeholder", 0);
+  return {
+    selectDate: (d) => selectDate(d),
+    selectTime: (t) => selectTime(t),
+    setSlots(source) {
+      if (scope.disposed) return;
+      slots = fromJson(source) ?? [];
+      load(0);
+    },
+    get date() {
+      return date;
+    },
+    get time() {
+      return time2;
+    },
+    get value() {
+      return date && time2 ? `${dayKey(date)}T${time2}` : null;
+    },
+    destroy: () => scope.dispose()
+  };
+}
+
 export {
   PATHS,
   springPath,
@@ -2369,6 +3962,16 @@ export {
   pushUnderlay,
   releaseUnderlay,
   createDialog,
-  createMenu
+  createMenu,
+  createQuantity,
+  createPagination,
+  createHoverCard,
+  createInputOtp,
+  createStudioDock,
+  createTrailer,
+  toDate,
+  dayKey,
+  createCalendar,
+  createSlotPicker
 };
-//# sourceMappingURL=chunk-34XYOXHG.js.map
+//# sourceMappingURL=chunk-TFNRIZHU.js.map