stimeo-ui 0.1.0.pre.beta.3 → 0.2.1

data/dist/controllers/time_picker_controller.js

@@ -0,0 +1,212 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/time_picker_controller.ts
+var AM = 0;
+var PM = 1;
+var TimePickerController = class extends Controller {
+  static targets = ["segment", "field"];
+  static values = {
+    hourCycle: { type: Number, default: 24 },
+    step: { type: Number, default: 1 },
+    seconds: { type: Boolean, default: false },
+    wrap: { type: Boolean, default: true }
+  };
+  static actions = ["onKeydown"];
+  static events = ["change"];
+  /** Current numeric value per segment kind (hours are the *displayed* hours). */
+  #state = { hour: 0, minute: 0, second: 0, meridiem: AM };
+  /** Direct-entry digit buffer and the segment it belongs to. */
+  #typeBuffer = "";
+  #typeSegment = null;
+  /** Last composed field value, to suppress duplicate `change` dispatches. */
+  #lastValue = "";
+  /** Seeds each segment from its initial `aria-valuenow` and syncs the field. */
+  connect() {
+    for (const segment of this.segmentTargets) {
+      const kind = this.#kindOf(segment);
+      if (!kind) continue;
+      const now = Number(segment.getAttribute("aria-valuenow"));
+      const { min, max } = this.#bounds(kind);
+      this.#state[kind] = Number.isFinite(now) ? Math.min(max, Math.max(min, now)) : min;
+    }
+    for (const segment of this.segmentTargets) this.#renderSegment(segment);
+    this.#syncField(false);
+  }
+  /** Handles stepping, inter-segment focus moves, jumps, and direct entry. */
+  onKeydown(event) {
+    const segment = event.target?.closest(
+      "[data-stimeo--time-picker-target='segment']"
+    );
+    const kind = segment ? this.#kindOf(segment) : null;
+    if (!segment || !kind) return;
+    switch (event.key) {
+      case "ArrowUp":
+        event.preventDefault();
+        this.#step(kind, this.#delta(kind));
+        break;
+      case "ArrowDown":
+        event.preventDefault();
+        this.#step(kind, -this.#delta(kind));
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        this.#focusSibling(segment, -1);
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        this.#focusSibling(segment, 1);
+        break;
+      case "Home":
+        event.preventDefault();
+        this.#set(kind, this.#bounds(kind).min);
+        break;
+      case "End":
+        event.preventDefault();
+        this.#set(kind, this.#bounds(kind).max);
+        break;
+      default:
+        if (/^[0-9]$/.test(event.key)) {
+          event.preventDefault();
+          this.#typeDigit(segment, kind, event.key);
+        }
+        return;
+    }
+    this.#typeBuffer = "";
+    this.#typeSegment = null;
+  }
+  /** The per-step delta: minutes step by `step`, others by 1, meridiem toggles. */
+  #delta(kind) {
+    return kind === "minute" ? this.stepValue : 1;
+  }
+  /** Steps a segment, wrapping at its bounds and carrying over when enabled. */
+  #step(kind, delta) {
+    if (kind === "meridiem") {
+      this.#set("meridiem", this.#state.meridiem === AM ? PM : AM);
+      return;
+    }
+    const { min, max } = this.#bounds(kind);
+    const span = max - min + 1;
+    const raw = this.#state[kind] + delta;
+    if (raw > max || raw < min) {
+      if (!this.wrapValue) {
+        this.#set(kind, Math.min(max, Math.max(min, raw)));
+        return;
+      }
+      const wrapped = ((raw - min) % span + span) % span + min;
+      const carry = Math.floor((raw - min) / span);
+      this.#set(kind, wrapped);
+      this.#carry(kind, carry);
+      return;
+    }
+    this.#set(kind, raw);
+  }
+  /** Propagates a wrap carry from `kind` into the next larger segment. */
+  #carry(kind, amount) {
+    if (amount === 0) return;
+    if (kind === "second") this.#step("minute", amount);
+    else if (kind === "minute") this.#step("hour", amount);
+  }
+  /**
+   * Sets a segment's value (clamped to its `[min, max]` bounds), re-renders it,
+   * and resyncs the composed field. Clamping here guards the direct-entry path:
+   * typing `0` into a 12-hour hour (min 1) must not commit an out-of-range
+   * `aria-valuenow="0"`. The stepping path already passes in-bounds values, so
+   * the clamp is a no-op there.
+   */
+  #set(kind, value) {
+    const { min, max } = this.#bounds(kind);
+    this.#state[kind] = Math.min(max, Math.max(min, value));
+    const segment = this.segmentTargets.find((s) => this.#kindOf(s) === kind);
+    if (segment) this.#renderSegment(segment);
+    this.#syncField(true);
+  }
+  /** Accumulates a typed digit, committing and advancing after two digits. */
+  #typeDigit(segment, kind, digit) {
+    if (kind === "meridiem") return;
+    if (this.#typeSegment !== kind) this.#typeBuffer = "";
+    this.#typeSegment = kind;
+    const { max } = this.#bounds(kind);
+    const candidate = Number(`${this.#typeBuffer}${digit}`);
+    if (candidate <= max) this.#typeBuffer = `${this.#typeBuffer}${digit}`;
+    else this.#typeBuffer = digit;
+    this.#set(kind, Number(this.#typeBuffer));
+    if (this.#typeBuffer.length >= 2 || Number(this.#typeBuffer) * 10 > max) {
+      this.#typeBuffer = "";
+      this.#typeSegment = null;
+      this.#focusSibling(segment, 1);
+    }
+  }
+  /** Moves focus to the previous/next segment, if one exists. */
+  #focusSibling(segment, direction) {
+    const index = this.segmentTargets.indexOf(segment);
+    const next = this.segmentTargets[index + direction];
+    next?.focus();
+  }
+  /** Reflects a segment's current value onto its ARIA/text representation. */
+  #renderSegment(segment) {
+    const kind = this.#kindOf(segment);
+    if (!kind) return;
+    const value = this.#state[kind];
+    if (kind === "meridiem") {
+      const text2 = value === PM ? "PM" : "AM";
+      segment.setAttribute("aria-valuenow", String(value));
+      segment.setAttribute("aria-valuetext", text2);
+      segment.setAttribute("aria-valuemin", String(AM));
+      segment.setAttribute("aria-valuemax", String(PM));
+      segment.textContent = text2;
+      return;
+    }
+    const { min, max } = this.#bounds(kind);
+    const text = String(value).padStart(2, "0");
+    segment.setAttribute("aria-valuenow", String(value));
+    segment.setAttribute("aria-valuetext", text);
+    segment.setAttribute("aria-valuemin", String(min));
+    segment.setAttribute("aria-valuemax", String(max));
+    segment.textContent = text;
+  }
+  /** Composes `HH:MM[:SS]` (24-hour) into the hidden field; dispatches `change`. */
+  #syncField(notify) {
+    const h24 = this.#hours24();
+    const parts = [pad(h24), pad(this.#state.minute)];
+    if (this.secondsValue) parts.push(pad(this.#state.second));
+    const value = parts.join(":");
+    if (this.hasFieldTarget && this.fieldTarget.value !== value) {
+      this.fieldTarget.value = value;
+    }
+    if (notify && value !== this.#lastValue) this.dispatch("change", { detail: { value } });
+    this.#lastValue = value;
+  }
+  /** Converts the displayed hour (+ meridiem in 12-hour mode) to 24-hour. */
+  #hours24() {
+    if (this.hourCycleValue !== 12) return this.#state.hour;
+    const base = this.#state.hour % 12;
+    return base + (this.#state.meridiem === PM ? 12 : 0);
+  }
+  /** The inclusive `[min, max]` bounds for a segment kind. */
+  #bounds(kind) {
+    switch (kind) {
+      case "hour":
+        return this.hourCycleValue === 12 ? { min: 1, max: 12 } : { min: 0, max: 23 };
+      case "minute":
+      case "second":
+        return { min: 0, max: 59 };
+      case "meridiem":
+        return { min: AM, max: PM };
+    }
+  }
+  /** Reads a segment's declared kind, or null when absent/invalid. */
+  #kindOf(segment) {
+    const kind = segment.getAttribute("data-segment");
+    if (kind === "hour" || kind === "minute" || kind === "second" || kind === "meridiem") {
+      return kind;
+    }
+    return null;
+  }
+};
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+
+export { TimePickerController };
+//# sourceMappingURL=time_picker_controller.js.map
+//# sourceMappingURL=time_picker_controller.js.map

data/dist/controllers/toast_controller.js

@@ -55,7 +55,42 @@ var SafeTimeout = class extends TimerRegistry {
   }
 };
 
+// src/utils/transition_completion.ts
+function timeMs(value) {
+  const trimmed = value.trim();
+  const amount = Number.parseFloat(trimmed);
+  if (!Number.isFinite(amount)) return 0;
+  if (trimmed.endsWith("ms")) return amount;
+  if (trimmed.endsWith("s")) return amount * 1e3;
+  return 0;
+}
+function cssList(value) {
+  return value.split(",").map((item) => item.trim()).filter(Boolean);
+}
+function transitionTimings(style) {
+  const properties = cssList(style.transitionProperty);
+  const durations = cssList(style.transitionDuration).map(timeMs);
+  const delays = cssList(style.transitionDelay).map(timeMs);
+  const effectiveProperties = properties.length > 0 ? properties : Array.from({ length: Math.max(durations.length, delays.length, 1) }, () => "all");
+  const effectiveDurations = durations.length > 0 ? durations : [0];
+  const effectiveDelays = delays.length > 0 ? delays : [0];
+  return effectiveProperties.filter((property) => property !== "none").map((property, index) => ({
+    property,
+    totalMs: Math.max(
+      0,
+      (effectiveDurations[index % effectiveDurations.length] ?? 0) + (effectiveDelays[index % effectiveDelays.length] ?? 0)
+    )
+  }));
+}
+function maxTotalMs(timings) {
+  return timings.reduce((max, { totalMs }) => Math.max(max, totalMs), 0);
+}
+function maxTransitionTotalMs(style) {
+  return maxTotalMs(transitionTimings(style));
+}
+
 // src/controllers/toast_controller.ts
+var DELEGATED_EVENTS = ["click", "focusin", "focusout", "keydown", "mouseover", "mouseout"];
 var ToastController = class extends Controller {
   static targets = ["list", "template", "item"];
   static values = {
@@ -76,34 +111,57 @@ var ToastController = class extends Controller {
    * Tracked so {@link disconnect} can cancel any that have not fired, preventing a
    * detached element from being mutated after it leaves the DOM (Turbo).
    */
-  #rafHandles = /* @__PURE__ */ new Set();
+  #rafHandles = /* @__PURE__ */ new Map();
   /** Track active timeouts mapped by each toast element for safe cancellation. */
   #activeTimeouts = /* @__PURE__ */ new Map();
   /** Track active pause reasons (hover/focus) per toast for WCAG 2.2.1 pause/resume. */
   #pauseReasons = /* @__PURE__ */ new Map();
+  /** The stable list that owns delegated listeners for dynamically added items. */
+  #delegatedList = null;
   connect() {
+    this.#connectDelegatedEvents();
     this.enforceMaxLimit();
     for (const item of this.itemTargets) {
-      if (!this.#activeTimeouts.has(item)) {
+      if (!this.#activeTimeouts.has(item) && item.dataset.state !== "leaving") {
         this.#startTimer(item);
       }
     }
   }
   disconnect() {
+    this.#disconnectDelegatedEvents();
     this.#timers.clearAll();
-    for (const handle of this.#rafHandles) {
+    for (const handle of this.#rafHandles.values()) {
       window.cancelAnimationFrame(handle);
     }
     this.#rafHandles.clear();
     this.#activeTimeouts.clear();
     this.#pauseReasons.clear();
   }
+  /** Rebinds delegated interaction when Turbo replaces the list target in place. */
+  listTargetConnected(element) {
+    if (this.#delegatedList !== element) this.#connectDelegatedEvents(element);
+  }
+  /** Releases delegation only when the removed target is its current owner. */
+  listTargetDisconnected(element) {
+    if (this.#delegatedList === element) this.#disconnectDelegatedEvents();
+  }
   durationValueChanged() {
-    if (this.durationValue > 0) {
-      for (const item of this.itemTargets) {
-        if (!this.#activeTimeouts.has(item)) {
-          this.#startTimer(item);
-        }
+    for (const item of this.itemTargets) {
+      if (item.dataset.state === "leaving") continue;
+      const pauseReasons = this.#pauseReasons.get(item);
+      this.#clearTimer(item);
+      if (this.durationValue <= 0) {
+        item.removeAttribute("data-paused");
+      } else if (pauseReasons && pauseReasons.size > 0) {
+        this.#pauseReasons.set(item, pauseReasons);
+        this.#activeTimeouts.set(item, {
+          id: 0,
+          startedAt: 0,
+          remaining: this.durationValue
+        });
+        item.setAttribute("data-paused", "true");
+      } else {
+        this.#startTimer(item);
       }
     }
   }
@@ -117,17 +175,21 @@ var ToastController = class extends Controller {
    */
   itemTargetConnected(element) {
     this.enforceMaxLimit();
+    if (element.dataset.state === "leaving" || element.parentNode !== this.listTarget) return;
     this.#startTimer(element);
     element.setAttribute("data-state", "entering");
+    this.#cancelAnimation(element);
     const handle = window.requestAnimationFrame(() => {
-      this.#rafHandles.delete(handle);
+      this.#rafHandles.delete(element);
+      if (element.parentNode !== this.listTarget || element.dataset.state === "leaving") return;
       element.setAttribute("data-state", "visible");
     });
-    this.#rafHandles.add(handle);
+    this.#rafHandles.set(element, handle);
   }
   /** Clears any active timer when a toast is removed from the DOM. */
   itemTargetDisconnected(element) {
     this.#clearTimer(element);
+    this.#cancelAnimation(element);
   }
   /**
    * Shows a new toast. Accepts its content from either a Stimulus action param
@@ -150,10 +212,9 @@ var ToastController = class extends Controller {
     const item = clone.querySelector("[data-stimeo--toast-target='item']");
     if (!item) return;
     const bodySlot = item.querySelector("[data-toast-slot='body']");
-    if (bodySlot) {
-      bodySlot.textContent = body;
-    }
-    item.setAttribute("role", this.#readField(event, "type") === "alert" ? "alert" : "status");
+    if (!bodySlot) return;
+    bodySlot.textContent = body;
+    bodySlot.setAttribute("role", this.#readField(event, "type") === "alert" ? "alert" : "status");
     this.listTarget.appendChild(item);
     this.dispatch("show", { detail: { item } });
   }
@@ -175,18 +236,15 @@ var ToastController = class extends Controller {
   }
   /** Dismisses the toast that contained the trigger. */
   dismiss(event) {
-    const target = event.currentTarget || event.target;
-    if (!target) return;
-    const item = target.closest("[data-stimeo--toast-target='item']");
+    const item = this.#itemFromEvent(event);
     if (!item) return;
     this.#removeWithTransition(item, "user");
   }
   /** Dismisses the focused toast when Escape is pressed. */
   onKeydown(event) {
     if (event.key === "Escape") {
-      const target = event.currentTarget || event.target;
-      if (!target) return;
-      const item = target.closest("[data-stimeo--toast-target='item']");
+      if (event.defaultPrevented || event.isComposing) return;
+      const item = this.#itemFromEvent(event);
       if (!item) return;
       event.preventDefault();
       this.#removeWithTransition(item, "user");
@@ -212,6 +270,10 @@ var ToastController = class extends Controller {
     this.#timers.clear(timeout.id);
     const elapsed = Date.now() - timeout.startedAt;
     const remaining = Math.max(0, timeout.remaining - elapsed);
+    if (remaining <= 0) {
+      this.#removeWithTransition(item, "timeout");
+      return;
+    }
     this.#activeTimeouts.set(item, { id: 0, startedAt: 0, remaining });
     item.setAttribute("data-paused", "true");
   }
@@ -223,14 +285,17 @@ var ToastController = class extends Controller {
     reasons.delete(this.#pauseReason(event));
     if (reasons.size > 0) return;
     const timeout = this.#activeTimeouts.get(item);
-    if (!timeout || timeout.remaining <= 0) return;
+    if (!timeout) return;
+    if (timeout.id !== 0 || timeout.remaining <= 0) return;
     item.removeAttribute("data-paused");
     this.#startTimer(item, timeout.remaining);
   }
   /** Resolves the toast item element a pause/resume event targets. */
   #itemFromEvent(event) {
-    const target = event.currentTarget || event.target;
-    return target?.closest("[data-stimeo--toast-target='item']") ?? null;
+    const target = event.target instanceof Element ? event.target : event.currentTarget;
+    if (!(target instanceof Element) || !this.hasListTarget) return null;
+    const item = target.closest("[data-stimeo--toast-target='item']");
+    return item && this.listTarget.contains(item) ? item : null;
   }
   /** Classifies a pause/resume event as a hover or focus reason. */
   #pauseReason(event) {
@@ -246,7 +311,9 @@ var ToastController = class extends Controller {
     return reasons;
   }
   #startTimer(element, duration = this.durationValue) {
-    if (duration <= 0) return;
+    if (duration <= 0 || element.dataset.state === "leaving" || element.parentNode !== this.listTarget) {
+      return;
+    }
     this.#clearTimer(element);
     const id = this.#timers.set(() => {
       this.#removeWithTransition(element, "timeout");
@@ -262,16 +329,16 @@ var ToastController = class extends Controller {
     this.#pauseReasons.delete(element);
   }
   #removeWithTransition(element, reason) {
+    if (element.dataset.state === "leaving" || element.parentNode !== this.listTarget) return;
     this.#clearTimer(element);
+    this.#cancelAnimation(element);
     element.setAttribute("data-state", "leaving");
     const finalize = () => {
-      if (element.parentNode === this.listTarget) {
-        this.listTarget.removeChild(element);
-      }
+      if (element.parentNode !== this.listTarget) return;
+      this.listTarget.removeChild(element);
       this.dispatch("dismiss", { detail: { item: element, reason } });
     };
-    const transitions = window.getComputedStyle(element).transitionDuration;
-    const duration = cssTimeToMs(transitions);
+    const duration = maxTransitionTotalMs(window.getComputedStyle(element));
     if (duration > 0) {
       this.#timers.set(finalize, duration);
     } else {
@@ -289,22 +356,61 @@ var ToastController = class extends Controller {
    */
   enforceMaxLimit() {
     const currentItems = this.itemTargets;
-    if (currentItems.length > this.maxValue) {
-      const excessCount = currentItems.length - this.maxValue;
+    const max = Math.max(0, this.maxValue);
+    if (currentItems.length > max) {
+      const excessCount = currentItems.length - max;
       for (let i = 0; i < excessCount; i++) {
         const oldest = currentItems[i];
         if (oldest) this.#removeWithTransition(oldest, "timeout");
       }
     }
   }
+  /** Wires stable-container delegation so newly appended items work immediately. */
+  #connectDelegatedEvents(list = this.hasListTarget ? this.listTarget : null) {
+    this.#disconnectDelegatedEvents();
+    if (!list) return;
+    this.#delegatedList = list;
+    for (const type of DELEGATED_EVENTS) {
+      this.#delegatedList.addEventListener(type, this.#onListEvent);
+    }
+  }
+  /** Releases every delegated listener from the exact list that owns it. */
+  #disconnectDelegatedEvents() {
+    if (!this.#delegatedList) return;
+    for (const type of DELEGATED_EVENTS) {
+      this.#delegatedList.removeEventListener(type, this.#onListEvent);
+    }
+    this.#delegatedList = null;
+  }
+  /** Routes every delegated item interaction from the stable list. */
+  #onListEvent = (event) => {
+    if (event.type === "click") {
+      const target = event.target instanceof Element ? event.target : null;
+      const trigger = target?.closest("[data-toast-dismiss]");
+      if (trigger && this.#delegatedList?.contains(trigger)) this.dismiss(event);
+    } else if (event.type === "keydown") {
+      this.onKeydown(event);
+    } else if (this.#crossesItemBoundary(event)) {
+      if (event.type === "focusin" || event.type === "mouseover") this.pause(event);
+      else this.resume(event);
+    }
+  };
+  /** Whether a bubbling focus/pointer event enters or leaves a toast boundary. */
+  #crossesItemBoundary(event) {
+    const item = this.#itemFromEvent(event);
+    if (!item) return false;
+    const related = "relatedTarget" in event ? event.relatedTarget : null;
+    return !(related instanceof Node && item.contains(related));
+  }
+  /** Cancels the pending entering-to-visible frame owned by one item. */
+  #cancelAnimation(element) {
+    const handle = this.#rafHandles.get(element);
+    if (handle === void 0) return;
+    window.cancelAnimationFrame(handle);
+    this.#rafHandles.delete(element);
+  }
 };
-function cssTimeToMs(value) {
-  const first = value.split(",")[0]?.trim() ?? "";
-  const amount = Number.parseFloat(first);
-  if (Number.isNaN(amount)) return 0;
-  return first.endsWith("ms") ? amount : amount * 1e3;
-}
 
-export { ToastController, cssTimeToMs };
+export { ToastController };
 //# sourceMappingURL=toast_controller.js.map
 //# sourceMappingURL=toast_controller.js.map