@stimulus-plumbers/controllers 0.2.8 → 0.3.0

package/src/controllers/modal_controller.js

@@ -1,28 +1,36 @@
 import { Controller } from '@hotwired/stimulus';
-import { FocusTrap } from '../focus';
-import { announce } from '../aria';
+import { FocusTrap } from '../accessibility/focus';
+import { announce } from '../accessibility/aria';
 import { attachDismisser } from '../plumbers';
 
-export default class ModalController extends Controller {
+export default class extends Controller {
   static targets = ['modal', 'overlay'];
 
+  initialize() {
+    this.onCancel = this.close.bind(this);
+  }
+
   connect() {
     if (!this.hasModalTarget) {
       console.error('ModalController requires a modal target. Add data-modal-target="modal" to your element.');
-      return;
     }
+  }
 
-    this.isNativeDialog = this.modalTarget instanceof HTMLDialogElement;
-
+  modalTargetConnected(modal) {
+    this.isNativeDialog = modal instanceof HTMLDialogElement;
     if (this.isNativeDialog) {
-      this.modalTarget.addEventListener('cancel', this.close);
-      this.modalTarget.addEventListener('click', this.onBackdropClick);
+      modal.addEventListener('cancel', this.onCancel);
+      modal.addEventListener('click', this.onBackdropClick);
     } else {
-      this.focusTrap = new FocusTrap(this.modalTarget, {
-        escapeDeactivates: true,
-      });
+      this.focusTrap = new FocusTrap(modal, { escapeDeactivates: true });
+      attachDismisser(this, { element: modal });
+    }
+  }
 
-      attachDismisser(this, { element: this.modalTarget });
+  modalTargetDisconnected(modal) {
+    if (this.isNativeDialog) {
+      modal.removeEventListener('cancel', this.onCancel);
+      modal.removeEventListener('click', this.onBackdropClick);
     }
   }
 
@@ -30,13 +38,6 @@ export default class ModalController extends Controller {
     this.close();
   };
 
-  disconnect() {
-    if (this.isNativeDialog) {
-      this.modalTarget.removeEventListener('cancel', this.close);
-      this.modalTarget.removeEventListener('click', this.onBackdropClick);
-    }
-  }
-
   open(event) {
     if (event) event.preventDefault();
     if (!this.hasModalTarget) return;

package/src/index.js

@@ -5,10 +5,16 @@
  * Following WCAG 2.1+ and WAI-ARIA best practices
  */
 
-// Export utilities (framework-agnostic)
-export * from './focus.js';
-export * from './keyboard.js';
-export * from './aria.js';
+// Export accessibility utilities
+export * from './accessibility/focus.js';
+export * from './accessibility/keyboard.js';
+export * from './accessibility/aria.js';
+
+// Export utilities
+export { Requestor } from './requestor.js';
+export { fuzzyMatcher, filterOptions } from './researcher.js';
+
+export { Formatter, FORMATTER_TYPES } from './plumbers/formatter.js';
 
 // Export Stimulus controllers
 export { default as CalendarMonthController } from './controllers/calendar_month_controller.js';
@@ -21,6 +27,7 @@ export { default as DismisserController } from './controllers/dismisser_controll
 export { default as FlipperController } from './controllers/flipper_controller.js';
 export { default as InputComboboxController } from './controllers/input_combobox_controller.js';
 export { default as InputFormatController } from './controllers/input_format_controller.js';
+export { default as InputSearchController } from './controllers/input_search_controller.js';
 export { default as ModalController } from './controllers/modal_controller.js';
 export { default as PannerController } from './controllers/panner_controller.js';
 export { default as PopoverController } from './controllers/popover_controller.js';

package/src/plumbers/calendar.js

@@ -1,5 +1,5 @@
 import Plumber from './plumber';
-import { isValidDate, tryParseDate } from './plumber/support';
+import { isValidDate, tryParseDate } from './plumber/date';
 
 const DAYS_OF_WEEK = 7;
 

package/src/plumbers/content_loader.js

@@ -1,5 +1,6 @@
 import Plumber from './plumber';
-import { tryParseDate } from './plumber/support';
+import { tryParseDate } from './plumber/date';
+import { Requestor } from '../requestor';
 
 const defaultOptions = {
   content: null,
@@ -7,23 +8,10 @@ const defaultOptions = {
   reload: 'never',
   stale: 3600,
   onLoad: 'canLoad',
-  onLoading: 'contentLoading',
   onLoaded: 'contentLoaded',
 };
 
 export class ContentLoader extends Plumber {
-  /**
-   * Creates a new ContentLoader plumber instance for async content loading.
-   * @param {Object} controller - Stimulus controller instance
-   * @param {Object} [options] - Configuration options
-   * @param {*} [options.content] - Initial content value
-   * @param {string} [options.url=''] - URL to fetch content from
-   * @param {string} [options.reload='never'] - Reload strategy ('never', 'always', or 'stale')
-   * @param {number} [options.stale=3600] - Seconds before content becomes stale
-   * @param {string} [options.onLoad='canLoad'] - Callback name to check if loadable
-   * @param {string} [options.onLoading='contentLoading'] - Callback name to load content
-   * @param {string} [options.onLoaded='contentLoaded'] - Callback name after loading
-   */
   constructor(controller, options = {}) {
     super(controller, options);
 
@@ -34,18 +22,14 @@ export class ContentLoader extends Plumber {
     this.reload = typeof reload === 'string' ? reload : defaultOptions.reload;
     this.stale = typeof stale === 'number' ? stale : defaultOptions.stale;
 
-    const { onLoad, onLoading, onLoaded } = config;
+    const { onLoad, onLoaded } = config;
     this.onLoad = onLoad;
-    this.onLoading = onLoading;
     this.onLoaded = onLoaded;
 
+    this._requestor = new Requestor();
     this.enhance();
   }
 
-  /**
-   * Checks if content should be reloaded based on reload strategy.
-   * @returns {boolean} True if content should be reloaded
-   */
   get reloadable() {
     switch (this.reload) {
       case 'never':
@@ -59,47 +43,15 @@ export class ContentLoader extends Plumber {
     }
   }
 
-  /**
-   * Checks if content should be loaded based on URL presence.
-   * Override this method to provide custom loading conditions.
-   * @param {Object} params - Load parameters
-   * @param {string} params.url - URL to load from
-   * @returns {Promise<boolean>} True if content should be loaded
-   */
   contentLoadable = ({ url }) => !!url;
 
-  /**
-   * Loads content from remote or local source.
-   * Override this method to provide custom loading logic.
-   * @param {Object} params - Load parameters
-   * @param {string} params.url - URL to load from
-   * @returns {Promise<string>} Loaded content
-   */
-  contentLoading = async ({ url }) => {
-    return url ? await this.remoteContentLoader(url) : await this.contentLoader();
-  };
-
-  /**
-   * Provides local/static content when no URL is available.
-   * Override this method to provide static content.
-   * @returns {Promise<string>} Local content
-   */
   contentLoader = async () => '';
 
-  /**
-   * Fetches content from a remote URL.
-   * Override this method to customize remote loading.
-   * @param {string} url - URL to fetch from
-   * @returns {Promise<string>} Fetched content
-   */
-  remoteContentLoader = async (url) => (await fetch(url)).text();
+  remoteContentLoader = async (url) => {
+    const res = await this._requestor.request(url);
+    return res.text();
+  };
 
-  /**
-   * Loads content from remote or local source with lifecycle events.
-   * Checks if loadable via onLoad, fetches content via onLoading,
-   * and notifies via onLoaded callback.
-   * @returns {Promise<void>}
-   */
   load = async () => {
     if (this.loadedAt && !this.reloadable) return;
 
@@ -108,8 +60,8 @@ export class ContentLoader extends Plumber {
     this.dispatch('load', { detail: { url: this.url } });
     if (!loadable) return;
 
-    const content = this.url ? await this.remoteContentLoader(this.url) : await this.contentLoader();
     this.dispatch('loading', { detail: { url: this.url } });
+    const content = this.url ? await this.remoteContentLoader(this.url) : await this.contentLoader();
     if (!content) return;
 
     await this.awaitCallback(this.onLoaded, { url: this.url, content });
@@ -125,10 +77,4 @@ export class ContentLoader extends Plumber {
   }
 }
 
-/**
- * Factory function to create and attach a ContentLoader plumber to a controller.
- * @param {Object} controller - Stimulus controller instance
- * @param {Object} [options] - Configuration options
- * @returns {ContentLoader} ContentLoader plumber instance
- */
 export const attachContentLoader = (controller, options) => new ContentLoader(controller, options);

package/src/plumbers/dismisser.js

@@ -1,4 +1,4 @@
-import Plumber from './plumber';
+import WindowObserver from './plumber/window_observer';
 
 const defaultOptions = {
   trigger: null,
@@ -6,15 +6,7 @@ const defaultOptions = {
   onDismissed: 'dismissed',
 };
 
-export class Dismisser extends Plumber {
-  /**
-   * Creates a new Dismisser plumber instance for handling outside-click dismissals.
-   * @param {Object} controller - Stimulus controller instance
-   * @param {Object} [options] - Configuration options
-   * @param {HTMLElement} [options.trigger] - Trigger element (defaults to controller element)
-   * @param {string[]} [options.events=['click']] - Events to listen for dismissal
-   * @param {string} [options.onDismissed='dismissed'] - Callback name when dismissed
-   */
+export class Dismisser extends WindowObserver {
   constructor(controller, options = {}) {
     super(controller, options);
 
@@ -24,14 +16,9 @@ export class Dismisser extends Plumber {
     this.events = events;
 
     this.enhance();
-    this.observe();
+    this.observe(this.dismiss);
   }
 
-  /**
-   * Handles dismissal when clicking outside the element.
-   * @param {Event} event - DOM event
-   * @returns {Promise<void>}
-   */
   dismiss = async (event) => {
     const { target } = event;
     if (!(target instanceof HTMLElement)) return;
@@ -42,41 +29,6 @@ export class Dismisser extends Plumber {
     await this.awaitCallback(this.onDismissed, { target: this.trigger });
     this.dispatch('dismissed');
   };
-
-  /**
-   * Starts observing configured events for dismissal.
-   */
-  observe() {
-    this.events.forEach((event) => {
-      window.addEventListener(event, this.dismiss, true);
-    });
-  }
-
-  /**
-   * Stops observing events for dismissal.
-   */
-  unobserve() {
-    this.events.forEach((event) => {
-      window.removeEventListener(event, this.dismiss, true);
-    });
-  }
-
-  enhance() {
-    const context = this;
-    const superDisconnect = context.controller.disconnect.bind(context.controller);
-    Object.assign(this.controller, {
-      disconnect: () => {
-        context.unobserve();
-        superDisconnect();
-      },
-    });
-  }
 }
 
-/**
- * Factory function to create and attach a Dismisser plumber to a controller.
- * @param {Object} controller - Stimulus controller instance
- * @param {Object} [options] - Configuration options
- * @returns {Dismisser} Dismisser plumber instance
- */
 export const attachDismisser = (controller, options) => new Dismisser(controller, options);

package/src/plumbers/flipper.js

@@ -1,6 +1,6 @@
-import Plumber from './plumber';
-import { defineRect, viewportRect, directionMap } from './plumber/support';
-import { connectTriggerToTarget } from '../aria';
+import WindowObserver from './plumber/window_observer';
+import { defineRect, viewportRect, directionMap } from './plumber/geometry';
+import { connectTriggerToTarget } from '../accessibility/aria';
 
 const defaultOptions = {
   anchor: null,
@@ -12,19 +12,7 @@ const defaultOptions = {
   respectMotion: true,
 };
 
-export class Flipper extends Plumber {
-  /**
-   * Creates a new Flipper plumber instance for smart positioning relative to an anchor.
-   * @param {Object} controller - Stimulus controller instance
-   * @param {Object} [options] - Configuration options
-   * @param {HTMLElement} [options.anchor] - Anchor element for positioning
-   * @param {string[]} [options.events=['click']] - Events triggering flip calculation
-   * @param {string} [options.placement='bottom'] - Initial placement direction ('top', 'bottom', 'left', 'right')
-   * @param {string} [options.alignment='start'] - Alignment ('start', 'center', 'end')
-   * @param {string} [options.onFlipped='flipped'] - Callback name when flipped
-   * @param {string} [options.ariaRole=null] - ARIA role to set on element
-   * @param {boolean} [options.respectMotion=true] - Respect prefers-reduced-motion preference
-   */
+export class Flipper extends WindowObserver {
   constructor(controller, options = {}) {
     super(controller, options);
 
@@ -43,22 +31,13 @@ export class Flipper extends Plumber {
     this.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 
     if (this.anchor && this.element) {
-      connectTriggerToTarget({
-        trigger: this.anchor,
-        target: this.element,
-        role: this.ariaRole,
-      });
+      connectTriggerToTarget({ trigger: this.anchor, target: this.element, role: this.ariaRole });
     }
 
     this.enhance();
-    this.observe();
+    this.observe(this.flip);
   }
 
-  /**
-   * Attempts to place element in configured direction, flipping to opposite direction if needed.
-   * For example, if placement is 'bottom' but no space below anchor, flips to 'top'.
-   * @returns {Promise<void>}
-   */
   flip = async () => {
     if (!this.visible) return;
 
@@ -68,7 +47,6 @@ export class Flipper extends Plumber {
 
     const placement = this.flippedRect(this.anchor.getBoundingClientRect(), this.element.getBoundingClientRect());
 
-    // Disable transitions for users who prefer reduced motion
     this.element.style.transition = this.respectMotion && this.prefersReducedMotion ? 'none' : '';
 
     for (const [key, value] of Object.entries(placement)) {
@@ -79,12 +57,6 @@ export class Flipper extends Plumber {
     this.dispatch('flipped', { detail: { placement } });
   };
 
-  /**
-   * Determines the best position that fits within viewport boundaries.
-   * @param {DOMRect} anchorRect - Anchor element's bounding rect
-   * @param {DOMRect} referenceRect - Reference element's bounding rect
-   * @returns {Object} Position object with top and left styles
-   */
   flippedRect(anchorRect, referenceRect) {
     const candidateRects = this.quadrumRect(anchorRect, viewportRect());
     const candidates = [this.placement, directionMap[this.placement]];
@@ -92,7 +64,6 @@ export class Flipper extends Plumber {
     while (!Object.keys(flipped).length && candidates.length > 0) {
       const candidate = candidates.shift();
       if (!this.biggerRectThan(candidateRects[candidate], referenceRect)) continue;
-
       const placementRect = this.quadrumPlacement(anchorRect, candidate, referenceRect);
       const alignmentRect = this.quadrumAlignment(anchorRect, candidate, placementRect);
       flipped['top'] = `${alignmentRect['top'] + window.scrollY}px`;
@@ -105,32 +76,16 @@ export class Flipper extends Plumber {
     return flipped;
   }
 
-  /**
-   * Calculates available space in each direction around the inner rect within outer rect.
-   * @param {Object} inner - Inner rect object
-   * @param {Object} outer - Outer rect object
-   * @returns {Object} Rect objects for each direction (left, right, top, bottom)
-   */
   quadrumRect(inner, outer) {
     return {
-      left: defineRect({
-        x: outer.x,
-        y: outer.y,
-        width: inner.x - outer.x,
-        height: outer.height,
-      }),
+      left: defineRect({ x: outer.x, y: outer.y, width: inner.x - outer.x, height: outer.height }),
       right: defineRect({
         x: inner.x + inner.width,
         y: outer.y,
         width: outer.width - (inner.x + inner.width),
         height: outer.height,
       }),
-      top: defineRect({
-        x: outer.x,
-        y: outer.y,
-        width: outer.width,
-        height: inner.y - outer.y,
-      }),
+      top: defineRect({ x: outer.x, y: outer.y, width: outer.width, height: inner.y - outer.y }),
       bottom: defineRect({
         x: outer.x,
         y: inner.y + inner.height,
@@ -140,14 +95,6 @@ export class Flipper extends Plumber {
     };
   }
 
-  /**
-   * Calculates placement rect for reference element in given direction from anchor.
-   * @param {Object} anchor - Anchor rect object
-   * @param {string} direction - Direction ('top', 'bottom', 'left', 'right')
-   * @param {Object} reference - Reference rect object
-   * @returns {Object} Placed rect object
-   * @throws {string} If direction is invalid
-   */
   quadrumPlacement(anchor, direction, reference) {
     switch (direction) {
       case 'top':
@@ -183,14 +130,6 @@ export class Flipper extends Plumber {
     }
   }
 
-  /**
-   * Applies alignment adjustment to placed rect based on configuration.
-   * @param {Object} anchor - Anchor rect object
-   * @param {string} direction - Direction ('top', 'bottom', 'left', 'right')
-   * @param {Object} reference - Reference rect object
-   * @returns {Object} Aligned rect object
-   * @throws {string} If direction is invalid
-   */
   quadrumAlignment(anchor, direction, reference) {
     switch (direction) {
       case 'top':
@@ -198,75 +137,28 @@ export class Flipper extends Plumber {
         let alignment = anchor.x;
         if (this.alignment === 'center') alignment = anchor.x + anchor.width / 2 - reference.width / 2;
         else if (this.alignment === 'end') alignment = anchor.x + anchor.width - reference.width;
-        return defineRect({
-          x: alignment,
-          y: reference.y,
-          width: reference.width,
-          height: reference.height,
-        });
+        return defineRect({ x: alignment, y: reference.y, width: reference.width, height: reference.height });
       }
       case 'left':
       case 'right': {
         let alignment = anchor.y;
         if (this.alignment === 'center') alignment = anchor.y + anchor.height / 2 - reference.height / 2;
         else if (this.alignment === 'end') alignment = anchor.y + anchor.height - reference.height;
-        return defineRect({
-          x: reference.x,
-          y: alignment,
-          width: reference.width,
-          height: reference.height,
-        });
+        return defineRect({ x: reference.x, y: alignment, width: reference.width, height: reference.height });
       }
       default:
         throw `Unable align at the quadrum, ${direction}`;
     }
   }
 
-  /**
-   * Checks if the big rect can contain the small rect dimensions.
-   * @param {Object} big - Larger rect object
-   * @param {Object} small - Smaller rect object
-   * @returns {boolean} True if big rect can contain small rect
-   */
   biggerRectThan(big, small) {
     return big.height >= small.height && big.width >= small.width;
   }
 
-  /**
-   * Starts observing configured events for flipping.
-   */
-  observe() {
-    this.events.forEach((event) => {
-      window.addEventListener(event, this.flip, true);
-    });
-  }
-
-  /**
-   * Stops observing events for flipping.
-   */
-  unobserve() {
-    this.events.forEach((event) => {
-      window.removeEventListener(event, this.flip, true);
-    });
-  }
-
   enhance() {
-    const context = this;
-    const superDisconnect = context.controller.disconnect.bind(context.controller);
-    Object.assign(this.controller, {
-      disconnect: () => {
-        context.unobserve();
-        superDisconnect();
-      },
-      flip: context.flip.bind(context),
-    });
+    super.enhance();
+    this.controller.flip = this.flip;
   }
 }
 
-/**
- * Factory function to create and attach a Flipper plumber to a controller.
- * @param {Object} controller - Stimulus controller instance
- * @param {Object} [options] - Configuration options
- * @returns {Flipper} Flipper plumber instance
- */
 export const attachFlipper = (controller, options) => new Flipper(controller, options);

package/src/plumbers/formatter.js

@@ -0,0 +1,65 @@
+import Plumber from './plumber';
+import { PlainFormatter } from './formatters/plain';
+import { CreditCardFormatter } from './formatters/credit_card';
+import { PhoneFormatter } from './formatters/phone';
+import { CurrencyFormatter } from './formatters/currency';
+import { DateFormatter } from './formatters/date';
+import { TimeFormatter } from './formatters/time';
+
+export const FORMATTER_TYPES = {
+  PLAIN: 'plain',
+  CREDIT_CARD: 'creditCard',
+  PHONE: 'phone',
+  CURRENCY: 'currency',
+  DATE: 'date',
+  TIME: 'time',
+};
+
+const registry = new Map([
+  [FORMATTER_TYPES.PLAIN, PlainFormatter],
+  [FORMATTER_TYPES.CREDIT_CARD, CreditCardFormatter],
+  [FORMATTER_TYPES.PHONE, PhoneFormatter],
+  [FORMATTER_TYPES.CURRENCY, CurrencyFormatter],
+  [FORMATTER_TYPES.DATE, DateFormatter],
+  [FORMATTER_TYPES.TIME, TimeFormatter],
+]);
+
+const defaultOptions = {
+  type: FORMATTER_TYPES.PLAIN,
+  options: {},
+};
+
+export class Formatter extends Plumber {
+  static register(type, formatter) {
+    registry.set(type, formatter);
+  }
+
+  constructor(controller, options = {}) {
+    super(controller, options);
+    this.type = options.type ?? defaultOptions.type;
+    this.options = options.options ?? defaultOptions.options;
+    this.enhance();
+  }
+
+  enhance() {
+    const context = this;
+    const formatter = registry.get(context.type) ?? registry.get(FORMATTER_TYPES.PLAIN);
+
+    const helpers = {
+      normalize: (raw) => formatter.normalize?.(raw, context.options) ?? (typeof raw === 'string' ? raw : ''),
+      validate: (value) => formatter.validate?.(value, context.options) ?? true,
+      format: (value) => formatter.format?.(value, context.options) ?? (typeof value === 'string' ? value : ''),
+      mask: (value) => formatter.mask?.(value, context.options) ?? null,
+      maskable: () => typeof formatter.mask === 'function',
+    };
+
+    Object.defineProperty(this.controller, 'formatter', {
+      get() {
+        return helpers;
+      },
+      configurable: true,
+    });
+  }
+}
+
+export const attachFormatter = (controller, options) => new Formatter(controller, options);

package/src/plumbers/{input_format/formatters → formatters}/credit_card.js

@@ -32,7 +32,7 @@ const VALID_CARD_LENGTH = /^\d{13,19}$/;
 /** Captures groups of up to 4 characters followed by at least one more character */
 const GROUP_FOUR_DIGITS = /(.{4})(?=.)/g;
 
-export const CreditCardInputFormatter = {
+export const CreditCardFormatter = {
   /**
    * Converts raw input to the canonical stored form: digits only, no separators.
    * e.g. '4242 4242 4242 4242' → '4242424242424242'

package/src/plumbers/{input_format/formatters → formatters}/currency.js

@@ -4,7 +4,7 @@ const STRIP_NON_NUMERIC = /[^\d.,-]/g;
 /** Matches a valid canonical amount: optional negative sign, digits, optional decimal part */
 const VALID_AMOUNT_PATTERN = /^-?\d+(\.\d+)?$/;
 
-export const CurrencyInputFormatter = {
+export const CurrencyFormatter = {
   /**
    * Converts raw input to the canonical stored form: a plain decimal number string.
    * Handles US format (1,234.56), European format (1.234,56), and integers ($1,000).

package/src/plumbers/{input_format/formatters → formatters}/date.js

@@ -7,7 +7,7 @@ const SEPARATED_DATE_PATTERN = /^(\d{1,4})[/\-.](\d{1,2})[/\-.](\d{1,4})$/;
 /** Strips all non-digit characters (used when extracting 8-digit compact dates) */
 const STRIP_NON_DIGITS = /\D/g;
 
-export const DateInputFormatter = {
+export const DateFormatter = {
   /**
    * Converts raw input to the canonical stored form: ISO 8601 YYYY-MM-DD.
    * Accepts a variety of common date formats:
@@ -61,7 +61,7 @@ export const DateInputFormatter = {
    */
   validate(value) {
     if (typeof value !== 'string') return false;
-    const iso = DateInputFormatter.normalize(value);
+    const iso = DateFormatter.normalize(value);
     if (!ISO_DATE_PATTERN.test(iso)) return false;
     const date = new Date(`${iso}T00:00:00Z`);
     return !isNaN(date.getTime()) && date.toISOString().startsWith(iso);

package/src/plumbers/{input_format/formatters → formatters}/phone.js

@@ -18,7 +18,7 @@ const STRIP_NON_DIGITS = /\D/g;
 /** Matches an E.164 international phone number: + followed by 7–15 digits */
 const E164_PATTERN = /^\+\d{7,15}$/;
 
-export const PhoneInputFormatter = {
+export const PhoneFormatter = {
   /**
    * Converts raw input to canonical form.
    * If input starts with '+', produces E.164 (+digits); otherwise strips to digits only.

package/src/plumbers/{input_format/formatters → formatters}/plain.js

@@ -1,4 +1,4 @@
-export const PlainInputFormatter = {
+export const PlainFormatter = {
   normalize(raw) {
     if (typeof raw !== 'string') return '';
     return raw;

package/src/plumbers/{input_format/formatters → formatters}/time.js

@@ -1,7 +1,7 @@
 /** Matches a 24-hour time: HH:MM */
 const H24_PATTERN = /^([01]?\d|2[0-3]):([0-5]\d)$/;
 
-export const TimeInputFormatter = {
+export const TimeFormatter = {
   /**
    * Converts raw input to canonical 24-hour form: HH:MM.
    * Accepts HH:MM (24h) and h:mm AM/PM (12h).
@@ -38,7 +38,7 @@ export const TimeInputFormatter = {
    * @returns {boolean}
    */
   validate(value) {
-    return TimeInputFormatter.normalize(value) !== '';
+    return TimeFormatter.normalize(value) !== '';
   },
 
   /**