stimeo-ui 0.2.0 → 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,6 +55,40 @@ 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 {
@@ -304,8 +338,7 @@ var ToastController = class extends Controller {
       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 {
@@ -377,13 +410,7 @@ var ToastController = class extends Controller {
     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

data/dist/controllers/transition_controller.js

@@ -2,6 +2,11 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/transition_controller.ts
 
+// src/utils/reduced_motion.ts
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
 // src/utils/safe_timeout.ts
 var TimerRegistry = class {
   /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
@@ -55,14 +60,149 @@ 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);
+}
+var TransitionCompletion = class {
+  #timers = new SafeTimeout();
+  #element = null;
+  #complete = null;
+  #pendingProperties = null;
+  #deadline = 0;
+  /**
+   * Replaces any prior wait and invokes `complete` synchronously for a 0ms
+   * transition (including when `getComputedStyle` is unavailable).
+   *
+   * With a positive `options.timeoutMs` the synchronous fast-path is skipped and
+   * the override replaces the auto-computed fallback (see {@link TransitionWaitOptions}).
+   */
+  wait(element, complete, options = {}) {
+    this.cancel();
+    const requested = options.timeoutMs ?? 0;
+    const override = Number.isFinite(requested) && requested > 0 ? requested : 0;
+    const timings = typeof window.getComputedStyle === "function" ? transitionTimings(window.getComputedStyle(element)) : [];
+    const maximum = maxTotalMs(timings);
+    if (maximum <= 0 && override <= 0) {
+      complete();
+      return;
+    }
+    this.#element = element;
+    this.#complete = complete;
+    this.#deadline = Date.now() + maximum;
+    const activeProperties = this.#activeTransitionProperties(element);
+    this.#pendingProperties = activeProperties.size > 0 ? activeProperties : this.#explicitPendingProperties(timings);
+    element.addEventListener("transitionend", this.#onTerminal);
+    element.addEventListener("transitioncancel", this.#onTerminal);
+    this.#timers.set(() => this.#finish(), override > 0 ? override : maximum + 50);
+  }
+  /** Cancels the pending wait without invoking its completion callback. */
+  cancel() {
+    this.#complete = null;
+    this.#teardown();
+  }
+  /**
+   * Handles terminal events from the observed element only.
+   *
+   * For explicit property lists, every declared positive-time property must
+   * settle. For `all`, no reliable property set exists, so an event can finish
+   * only after the computed maximum time; the safety timeout owns the usual path.
+   */
+  #onTerminal = (event) => {
+    if (event.target !== this.#element) return;
+    const transitionEvent = event;
+    if (transitionEvent.pseudoElement) return;
+    if (this.#pendingProperties) {
+      const propertyName = transitionEvent.propertyName;
+      const active = this.#activeTransitionProperties(this.#element);
+      if (active.has(propertyName)) return;
+      if (!this.#pendingProperties.delete(propertyName)) return;
+      if (this.#pendingProperties.size > 0) return;
+      if (active.size > 0) {
+        this.#pendingProperties = active;
+        return;
+      }
+      this.#finish();
+      return;
+    }
+    if (Date.now() >= this.#deadline) this.#finish();
+  };
+  /**
+   * Returns active CSS transition properties expanded to the names reported by
+   * terminal events. CSS animations and pseudo-element effects are excluded.
+   */
+  #activeTransitionProperties(element) {
+    if (!element || typeof element.getAnimations !== "function") return /* @__PURE__ */ new Set();
+    try {
+      const properties = element.getAnimations().flatMap((animation) => {
+        if (animation.playState === "idle" || animation.playState === "finished") return [];
+        const effect = animation.effect;
+        if (effect?.pseudoElement) return [];
+        const target = effect?.target;
+        if (target && target !== element) return [];
+        const property = animation.transitionProperty;
+        return typeof property === "string" && property.length > 0 ? [property] : [];
+      });
+      return new Set(properties);
+    } catch {
+      return /* @__PURE__ */ new Set();
+    }
+  }
+  /** Returns explicit positive-time properties, or `null` for the ambiguous `all`. */
+  #explicitPendingProperties(timings) {
+    if (timings.some(({ property }) => property === "all")) return null;
+    const pending = new Set(
+      timings.filter(({ totalMs }) => totalMs > 0).map(({ property }) => property)
+    );
+    return pending.size > 0 ? pending : null;
+  }
+  /** Completes exactly once, releasing listeners and the fallback before the callback. */
+  #finish() {
+    const complete = this.#complete;
+    if (!complete) return;
+    this.#complete = null;
+    this.#teardown();
+    complete();
+  }
+  /** Releases the exact element listeners and timer owned by the current wait. */
+  #teardown() {
+    this.#timers.clearAll();
+    this.#element?.removeEventListener("transitionend", this.#onTerminal);
+    this.#element?.removeEventListener("transitioncancel", this.#onTerminal);
+    this.#element = null;
+    this.#pendingProperties = null;
+    this.#deadline = 0;
+  }
+};
+
 // src/controllers/transition_controller.ts
 var tokensOf = (value) => value.split(/\s+/).filter(Boolean);
-var firstTimeMs = (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;
-};
 var TransitionController = class extends Controller {
   static values = {
     enter: { type: String, default: "" },
@@ -75,9 +215,9 @@ var TransitionController = class extends Controller {
   };
   static actions = ["enter", "leave", "toggle"];
   static events = ["entered", "left"];
-  #timers = new SafeTimeout();
+  /** Owns the cancellable completion wait (terminal events + bounded fallback). */
+  #transition = new TransitionCompletion();
   #rafId = null;
-  #endListener = null;
   connect() {
     this.#strip();
     this.element.setAttribute("data-transition-state", this.element.hidden ? "left" : "entered");
@@ -104,7 +244,7 @@ var TransitionController = class extends Controller {
     const isEnter = kind === "enter";
     if (isEnter) this.element.hidden = false;
     this.element.setAttribute("data-transition-state", isEnter ? "entering" : "leaving");
-    if (this.#prefersReducedMotion()) {
+    if (prefersReducedMotion()) {
       this.#finish(kind);
       return;
     }
@@ -116,12 +256,13 @@ var TransitionController = class extends Controller {
       this.#rafId = null;
       this.#remove(from);
       this.#add(to);
-      this.#awaitEnd(() => this.#finish(kind));
+      this.#transition.wait(this.element, () => this.#finish(kind), {
+        timeoutMs: this.timeoutValue
+      });
     });
   }
   /** Settles the element into the completed state, clearing the stage classes. */
   #finish(kind) {
-    this.#cleanupEnd();
     this.#strip();
     if (kind === "enter") {
       this.element.setAttribute("data-transition-state", "entered");
@@ -132,29 +273,13 @@ var TransitionController = class extends Controller {
       this.dispatch("left", { detail: {} });
     }
   }
-  /** Resolves on the element's own `transitionend`, with a safety timeout fallback. */
-  #awaitEnd(done) {
-    this.#endListener = (event) => {
-      if (event.target === this.element) done();
-    };
-    this.element.addEventListener("transitionend", this.#endListener);
-    const ms = this.timeoutValue > 0 ? this.timeoutValue : this.#duration();
-    this.#timers.set(done, ms);
-  }
-  #cleanupEnd() {
-    if (this.#endListener) {
-      this.element.removeEventListener("transitionend", this.#endListener);
-      this.#endListener = null;
-    }
-    this.#timers.clearAll();
-  }
   /** Cancels any in-flight transition (interruption / teardown). */
   #cancel() {
     if (this.#rafId !== null) {
       this.#cancelRaf(this.#rafId);
       this.#rafId = null;
     }
-    this.#cleanupEnd();
+    this.#transition.cancel();
     this.#strip();
   }
   #add(...lists) {
@@ -176,13 +301,6 @@ var TransitionController = class extends Controller {
       this.leaveToValue
     );
   }
-  /** Auto-computed safety duration (transition time + delay, with a small buffer). */
-  #duration() {
-    if (typeof window.getComputedStyle !== "function") return 0;
-    const style = window.getComputedStyle(this.element);
-    const total = firstTimeMs(style.transitionDuration) + firstTimeMs(style.transitionDelay);
-    return total > 0 ? total + 50 : 0;
-  }
   #raf(callback) {
     if (typeof window.requestAnimationFrame === "function") {
       return window.requestAnimationFrame(() => callback());
@@ -193,9 +311,6 @@ var TransitionController = class extends Controller {
     if (typeof window.cancelAnimationFrame === "function") window.cancelAnimationFrame(id);
     else window.clearTimeout(id);
   }
-  #prefersReducedMotion() {
-    return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-  }
 };
 
 export { TransitionController };