stimeo-ui 0.1.0.pre.alpha.1

data/dist/controllers/submit_once_controller.js

@@ -0,0 +1,206 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/submit_once_controller.ts
+
+// src/utils/safe_timeout.ts
+var TimerRegistry = class {
+  /** Live timer ids that have not yet been cleared (or, for timeouts, fired). */
+  ids = /* @__PURE__ */ new Set();
+  /**
+   * Cancels a single tracked timer.
+   *
+   * No-ops if the id is unknown (already cleared, fired, or never owned by this
+   * registry), so callers can clear defensively without guarding.
+   */
+  clear(id) {
+    if (this.ids.delete(id)) {
+      this.cancel(id);
+    }
+  }
+  /**
+   * Cancels every tracked timer. Call this from a controller's `disconnect()`
+   * to guarantee no timer outlives the element.
+   */
+  clearAll() {
+    for (const id of this.ids) {
+      this.cancel(id);
+    }
+    this.ids.clear();
+  }
+  /** Number of timers currently tracked (pending). */
+  get size() {
+    return this.ids.size;
+  }
+};
+var SafeTimeout = class extends TimerRegistry {
+  /**
+   * Schedules `callback` after `delay` ms and returns the timer id.
+   *
+   * The id is removed from the registry automatically when the timeout fires,
+   * so {@link TimerRegistry.size | size} reflects only still-pending timers.
+   */
+  set(callback, delay) {
+    const id = this.schedule(() => {
+      this.ids.delete(id);
+      callback();
+    }, delay);
+    this.ids.add(id);
+    return id;
+  }
+  schedule(callback, delay) {
+    return window.setTimeout(callback, delay);
+  }
+  cancel(id) {
+    window.clearTimeout(id);
+  }
+};
+
+// src/controllers/submit_once_controller.ts
+var ORIGINAL_LABEL = "data-submit-once-original-label";
+var DISABLED_MARKER = "data-submit-once-disabled";
+var BUTTON_BUSY_LABEL = "data-submit-once-busy-label";
+var SubmitOnceController = class extends Controller {
+  static targets = ["submit"];
+  static values = {
+    busyLabel: { type: String, default: "" },
+    timeout: { type: Number, default: 0 },
+    restoreFocus: { type: Boolean, default: false }
+  };
+  static actions = ["start"];
+  static events = ["start", "end"];
+  #timeouts = new SafeTimeout();
+  #timeoutId = null;
+  #busy = false;
+  #submitter = null;
+  #onSubmitEnd = (event) => {
+    const success = event.detail?.success;
+    this.#restore(success);
+  };
+  connect() {
+    this.element.addEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#clearStaleBusy();
+  }
+  disconnect() {
+    this.element.removeEventListener("turbo:submit-end", this.#onSubmitEnd);
+    this.#clearTimeout();
+  }
+  /** Enters the busy state for the submission started by `event`. */
+  start(event) {
+    if (this.#busy) return;
+    this.#busy = true;
+    const buttons = this.#buttons;
+    const submitter = this.#resolveSubmitter(event, buttons);
+    this.#submitter = submitter;
+    for (const button of buttons) {
+      this.#enterBusy(button, button === submitter);
+    }
+    this.element.setAttribute("data-submitting", "true");
+    this.element.setAttribute("aria-busy", "true");
+    this.dispatch("start", { detail: {} });
+    if (this.timeoutValue > 0) {
+      this.#timeoutId = this.#timeouts.set(() => this.#restore(false), this.timeoutValue);
+    }
+  }
+  /** Restores the non-busy state, re-enabling buttons and putting labels back. */
+  #restore(success) {
+    if (!this.#busy) return;
+    this.#busy = false;
+    this.#clearTimeout();
+    for (const button of this.#buttons) {
+      this.#exitBusy(button);
+    }
+    this.element.removeAttribute("data-submitting");
+    this.element.removeAttribute("aria-busy");
+    this.dispatch("end", { detail: { success } });
+    if (this.restoreFocusValue && this.#submitter) {
+      this.#submitter.focus();
+    }
+    this.#submitter = null;
+  }
+  /** Disables a button, marks it busy, and swaps the trigger's label. */
+  #enterBusy(button, isTrigger) {
+    if (!button.disabled) {
+      button.disabled = true;
+      button.setAttribute(DISABLED_MARKER, "true");
+      button.setAttribute("aria-busy", "true");
+    }
+    if (!isTrigger) return;
+    const label = button.getAttribute(BUTTON_BUSY_LABEL) ?? this.busyLabelValue;
+    if (label.length === 0) return;
+    if (!button.hasAttribute(ORIGINAL_LABEL)) {
+      button.setAttribute(ORIGINAL_LABEL, this.#getLabel(button));
+    }
+    this.#setLabel(button, label);
+  }
+  /** Re-enables a button we disabled and restores its parked label, if any. */
+  #exitBusy(button) {
+    if (button.hasAttribute(DISABLED_MARKER)) {
+      button.disabled = false;
+      button.removeAttribute(DISABLED_MARKER);
+      button.removeAttribute("aria-busy");
+    }
+    const original = button.getAttribute(ORIGINAL_LABEL);
+    if (original !== null) {
+      this.#setLabel(button, original);
+      button.removeAttribute(ORIGINAL_LABEL);
+    }
+  }
+  /** Resets busy state left in a restored cache snapshot without firing events. */
+  #clearStaleBusy() {
+    this.#busy = false;
+    if (this.element.hasAttribute("data-submitting")) {
+      this.element.removeAttribute("data-submitting");
+      this.element.removeAttribute("aria-busy");
+    }
+    for (const button of this.#buttons) {
+      this.#exitBusy(button);
+    }
+  }
+  /** The triggering button: the event's submitter when ours, else the first button. */
+  #resolveSubmitter(event, buttons) {
+    const submitter = event.submitter;
+    if (submitter && this.#isSubmitButton(submitter) && buttons.includes(submitter)) {
+      return submitter;
+    }
+    return buttons[0] ?? null;
+  }
+  /** The controlled buttons: `submit` targets, or the form's native submit controls. */
+  get #buttons() {
+    if (this.hasSubmitTarget) return this.submitTargets;
+    return Array.from(
+      this.element.querySelectorAll('button[type="submit"], input[type="submit"]')
+    );
+  }
+  #isSubmitButton(el) {
+    return el instanceof HTMLButtonElement || el instanceof HTMLInputElement;
+  }
+  /** Reads a button's visible label (input value, aria-label, or text). */
+  #getLabel(button) {
+    if (button instanceof HTMLInputElement) return button.value;
+    const aria = button.getAttribute("aria-label");
+    if (aria !== null) return aria;
+    return button.textContent ?? "";
+  }
+  /** Writes a button's visible label through the same channel it was read from. */
+  #setLabel(button, text) {
+    if (button instanceof HTMLInputElement) {
+      button.value = text;
+      return;
+    }
+    if (button.hasAttribute("aria-label")) {
+      button.setAttribute("aria-label", text);
+      return;
+    }
+    button.textContent = text;
+  }
+  #clearTimeout() {
+    if (this.#timeoutId !== null) {
+      this.#timeouts.clear(this.#timeoutId);
+      this.#timeoutId = null;
+    }
+  }
+};
+
+export { SubmitOnceController };
+//# sourceMappingURL=submit_once_controller.js.map
+//# sourceMappingURL=submit_once_controller.js.map

data/dist/controllers/switch_controller.js

@@ -0,0 +1,50 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/switch_controller.ts
+var SwitchController = class extends Controller {
+  static actions = ["onKeydown", "toggle"];
+  static events = ["changed"];
+  /** Ensures the switch exposes a role and is keyboard-reachable. */
+  connect() {
+    if (!this.element.hasAttribute("role")) {
+      this.element.setAttribute("role", "switch");
+    }
+    if (!this.element.hasAttribute("aria-checked")) {
+      this.element.setAttribute("aria-checked", "false");
+    }
+    if (!(this.element instanceof HTMLButtonElement) && !this.element.hasAttribute("tabindex")) {
+      this.element.setAttribute("tabindex", "0");
+    }
+  }
+  /** Toggles the checked state. Bound via `data-action` (click). */
+  toggle() {
+    this.#checked = !this.#checked;
+  }
+  /**
+   * Activates the switch on Space/Enter for non-native hosts and prevents the
+   * default Space scroll. Bound via `data-action` (keydown). Native `<button>`
+   * hosts are skipped because the browser already turns Space/Enter into a click,
+   * which would otherwise toggle the switch twice.
+   */
+  onKeydown(event) {
+    if (this.element instanceof HTMLButtonElement) return;
+    if (event.repeat) return;
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      this.toggle();
+    }
+  }
+  /** Whether the switch is currently on. */
+  get #checked() {
+    return this.element.getAttribute("aria-checked") === "true";
+  }
+  /** Reflects the new state on `aria-checked` and notifies listeners. */
+  set #checked(value) {
+    this.element.setAttribute("aria-checked", value ? "true" : "false");
+    this.dispatch("changed", { detail: { checked: value } });
+  }
+};
+
+export { SwitchController };
+//# sourceMappingURL=switch_controller.js.map
+//# sourceMappingURL=switch_controller.js.map

data/dist/controllers/tabs_controller.js

@@ -0,0 +1,63 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/tabs_controller.ts
+var TabsController = class extends Controller {
+  static targets = ["tab", "panel"];
+  static actions = ["onKeydown", "select"];
+  /** Selects the initially active tab (the pre-selected one, else the first). */
+  connect() {
+    const preselected = this.tabTargets.findIndex(
+      (tab) => tab.getAttribute("aria-selected") === "true"
+    );
+    this.#selectIndex(preselected === -1 ? 0 : preselected, { focus: false });
+  }
+  /** Selects the clicked tab. Bound via `data-action` (click). */
+  select(event) {
+    const index = this.tabTargets.indexOf(event.currentTarget);
+    if (index !== -1) this.#selectIndex(index, { focus: false });
+  }
+  /** Implements arrow/Home/End navigation with automatic activation. */
+  onKeydown(event) {
+    const tabs = this.tabTargets;
+    const currentIndex = tabs.indexOf(event.currentTarget);
+    if (currentIndex === -1) return;
+    let nextIndex = null;
+    switch (event.key) {
+      case "ArrowRight":
+        nextIndex = (currentIndex + 1) % tabs.length;
+        break;
+      case "ArrowLeft":
+        nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = tabs.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    this.#selectIndex(nextIndex, { focus: true });
+  }
+  /**
+   * Activates the tab/panel pair at `index`: updates `aria-selected`, the roving
+   * `tabindex`, and panel visibility. Optionally moves focus to the new tab.
+   */
+  #selectIndex(index, { focus }) {
+    this.tabTargets.forEach((tab, i) => {
+      const selected = i === index;
+      tab.setAttribute("aria-selected", selected ? "true" : "false");
+      tab.tabIndex = selected ? 0 : -1;
+    });
+    this.panelTargets.forEach((panel, i) => {
+      panel.hidden = i !== index;
+    });
+    if (focus) this.tabTargets[index]?.focus();
+  }
+};
+
+export { TabsController };
+//# sourceMappingURL=tabs_controller.js.map
+//# sourceMappingURL=tabs_controller.js.map

data/dist/controllers/textarea_autosize_controller.js

@@ -0,0 +1,72 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/textarea_autosize_controller.ts
+function px(value) {
+  const n = Number.parseFloat(value);
+  return Number.isNaN(n) ? 0 : n;
+}
+var TextareaAutosizeController = class extends Controller {
+  static values = {
+    minRows: { type: Number, default: 1 },
+    maxRows: { type: Number, default: 0 }
+  };
+  static actions = ["resize"];
+  static events = ["resize"];
+  #lastHeight = -1;
+  #onInput = () => {
+    this.resize();
+  };
+  connect() {
+    this.element.addEventListener("input", this.#onInput);
+    this.resize();
+  }
+  disconnect() {
+    this.element.removeEventListener("input", this.#onInput);
+  }
+  /** Re-measures the content and applies the clamped height. */
+  resize() {
+    const el = this.element;
+    const style = window.getComputedStyle(el);
+    const lineHeight = this.#lineHeight(style);
+    const paddingV = px(style.paddingTop) + px(style.paddingBottom);
+    const borderV = px(style.borderTopWidth) + px(style.borderBottomWidth);
+    const borderBox = style.boxSizing === "border-box";
+    el.style.height = "auto";
+    const contentHeight = Math.max(0, el.scrollHeight - paddingV);
+    const rows = Math.max(1, Math.round(contentHeight / lineHeight));
+    let targetContent = Math.max(contentHeight, this.minRowsValue * lineHeight);
+    let atMax = false;
+    if (this.maxRowsValue > 0) {
+      const maxContent = this.maxRowsValue * lineHeight;
+      if (targetContent > maxContent) {
+        targetContent = maxContent;
+        atMax = true;
+      }
+    }
+    const boxExtra = borderBox ? paddingV + borderV : 0;
+    const height = Math.round(targetContent + boxExtra);
+    el.style.height = `${height}px`;
+    el.style.overflowY = atMax ? "auto" : "hidden";
+    if (atMax) {
+      el.setAttribute("data-at-max-rows", "true");
+    } else {
+      el.removeAttribute("data-at-max-rows");
+    }
+    el.style.setProperty("--stimeo-textarea-rows", String(rows));
+    if (height !== this.#lastHeight) {
+      this.#lastHeight = height;
+      this.dispatch("resize", { detail: { height, rows } });
+    }
+  }
+  /** Resolved line height, falling back to ~1.2× font-size when `normal`. */
+  #lineHeight(style) {
+    const lh = px(style.lineHeight);
+    if (lh > 0) return lh;
+    const fontSize = px(style.fontSize);
+    return fontSize > 0 ? fontSize * 1.2 : 16;
+  }
+};
+
+export { TextareaAutosizeController };
+//# sourceMappingURL=textarea_autosize_controller.js.map
+//# sourceMappingURL=textarea_autosize_controller.js.map

data/dist/controllers/theme_controller.js

@@ -0,0 +1,154 @@
+import { Controller } from '@hotwired/stimulus';
+
+// src/controllers/theme_controller.ts
+var MODES = ["light", "dark", "system"];
+var isMode = (value) => typeof value === "string" && MODES.includes(value);
+var ThemeController = class extends Controller {
+  static targets = ["option"];
+  static values = {
+    mode: { type: String, default: "system" },
+    storageKey: { type: String, default: "stimeo-theme" },
+    target: { type: String, default: "html" }
+  };
+  static actions = ["set", "toggle"];
+  static events = ["change"];
+  /** The OS dark-mode query, watched so `system` tracks live changes. */
+  #media = null;
+  /** Re-resolves while in `system` mode when the OS preference flips. */
+  #onMediaChange = () => {
+    if (this.modeValue === "system") {
+      this.#applyTheme();
+      this.#syncControls();
+      this.#dispatchChange();
+    }
+  };
+  /** Arrow/Home/End navigation for the radiogroup (APG radio pattern). */
+  #onKeydown = (event) => {
+    const options = this.optionTargets;
+    if (options.length === 0) return;
+    const target = event.target;
+    const current = options.indexOf(target);
+    if (current === -1) return;
+    const last = options.length - 1;
+    let next = current;
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        next = current === last ? 0 : current + 1;
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        next = current === 0 ? last : current - 1;
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = last;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const option = options[next];
+    if (!option) return;
+    option.focus();
+    this.#setMode(this.#optionMode(option));
+  };
+  connect() {
+    const stored = this.#readStored();
+    if (stored) this.modeValue = stored;
+    this.#media = window.matchMedia?.("(prefers-color-scheme: dark)") ?? null;
+    this.#media?.addEventListener("change", this.#onMediaChange);
+    if (this.hasOptionTarget) this.element.addEventListener("keydown", this.#onKeydown);
+    this.#applyTheme();
+    this.#syncControls();
+  }
+  disconnect() {
+    this.#media?.removeEventListener("change", this.#onMediaChange);
+    this.element.removeEventListener("keydown", this.#onKeydown);
+  }
+  /** Selects an explicit mode from the `mode` action param (radiogroup option). */
+  set(event) {
+    const mode = event.params?.mode;
+    if (isMode(mode)) this.#setMode(mode);
+  }
+  /** Toggles light↔dark for the 2-value single-button contract. */
+  toggle() {
+    this.#setMode(this.#resolved() === "dark" ? "light" : "dark");
+  }
+  /** Central mode change: persist, apply to the root, resync controls, announce. */
+  #setMode(mode) {
+    this.modeValue = mode;
+    this.#writeStored(mode);
+    this.#applyTheme();
+    this.#syncControls();
+    this.#dispatchChange();
+  }
+  /** Writes `data-theme` + `color-scheme` (the resolved theme) onto the target. */
+  #applyTheme() {
+    const root = this.#targetElement();
+    if (!root) return;
+    const resolved = this.#resolved();
+    root.setAttribute("data-theme", resolved);
+    root.style.setProperty("color-scheme", resolved);
+  }
+  /** Keeps the radiogroup (aria-checked + roving tabindex) or toggle (aria-pressed) in sync. */
+  #syncControls() {
+    const options = this.optionTargets;
+    if (options.length > 0) {
+      let hasTabbable = false;
+      for (const option of options) {
+        const selected = this.#optionMode(option) === this.modeValue;
+        option.setAttribute("aria-checked", String(selected));
+        option.tabIndex = selected ? 0 : -1;
+        hasTabbable ||= selected;
+      }
+      const first = options[0];
+      if (!hasTabbable && first) first.tabIndex = 0;
+      return;
+    }
+    this.element.setAttribute("aria-pressed", String(this.#resolved() === "dark"));
+  }
+  /** Emits `change` with the selected mode and the resolved theme. */
+  #dispatchChange() {
+    this.dispatch("change", { detail: { mode: this.modeValue, resolved: this.#resolved() } });
+  }
+  /** The effective theme: the OS preference when `system`, else the mode itself. */
+  #resolved() {
+    if (this.modeValue === "dark") return "dark";
+    if (this.modeValue === "light") return "light";
+    return this.#media?.matches ? "dark" : "light";
+  }
+  /** Reads an option's mode from its action param attribute. */
+  #optionMode(option) {
+    const mode = option.getAttribute("data-stimeo--theme-mode-param");
+    return isMode(mode) ? mode : "system";
+  }
+  /** Resolves the state-hook target (`<html>` by default). */
+  #targetElement() {
+    if (this.targetValue === "html" || this.targetValue === ":root")
+      return document.documentElement;
+    return document.querySelector(this.targetValue);
+  }
+  /** Reads a persisted, validated mode from `localStorage` (null when absent/blocked). */
+  #readStored() {
+    try {
+      const value = window.localStorage.getItem(this.storageKeyValue);
+      return isMode(value) ? value : null;
+    } catch {
+      return null;
+    }
+  }
+  /** Persists the mode, swallowing storage errors (private mode / quota). */
+  #writeStored(mode) {
+    try {
+      window.localStorage.setItem(this.storageKeyValue, mode);
+    } catch {
+    }
+  }
+};
+
+export { ThemeController };
+//# sourceMappingURL=theme_controller.js.map
+//# sourceMappingURL=theme_controller.js.map