@unlk/keymaster 1.6.7 → 1.6.8

package/js/bootstrap.js

@@ -15,3 +15,4 @@ export { default as CarouselCaption } from './carousel-caption';
 export { default as CarouselHeight } from './carousel-height';
 export { default as VideoModal } from './video-modal';
 export { default as AccordionScroll } from './accordion-scroll';
+export { default as OtpInput } from './otp-input';

package/js/otp-input.js

@@ -0,0 +1,199 @@
+import BaseComponent from 'bootstrap/js/src/base-component.js';
+import EventHandler from 'bootstrap/js/src/dom/event-handler.js';
+import SelectorEngine from 'bootstrap/js/src/dom/selector-engine.js';
+import { defineJQueryPlugin } from 'bootstrap/js/src/util/index.js';
+
+const NAME = 'otpInput';
+const DATA_KEY = 'bs.otpInput';
+const EVENT_KEY = `.${DATA_KEY}`;
+
+const EVENT_INPUT = `input${EVENT_KEY}`;
+const EVENT_COMPLETE = `complete${EVENT_KEY}`;
+
+const SELECTOR_OTP = '[data-bs-otp]';
+const SELECTOR_INPUT = '.otp-input';
+const CLASS_SLOTS = 'otp-slots';
+const CLASS_GROUP = 'otp-group';
+const CLASS_SLOT = 'otp-slot';
+const CLASS_CHAR = 'otp-char';
+const CLASS_CURSOR = 'otp-cursor';
+const CLASS_SEPARATOR = 'otp-separator';
+const CLASS_SLOT_ACTIVE = 'otp-slot-active';
+const CLASS_SLOT_FILLED = 'otp-slot-filled';
+const CLASS_DISABLED = 'disabled';
+
+const PATTERNS = {
+  numeric: /\D/g,
+  alpha: /[^a-zA-Z]/g,
+  alphanumeric: /[^a-zA-Z0-9]/g
+};
+
+const INPUT_PATTERNS = {
+  numeric: '[0-9]',
+  alpha: '[a-zA-Z]',
+  alphanumeric: '[a-zA-Z0-9]'
+};
+
+class OtpInput extends BaseComponent {
+  constructor(element, config) {
+    super(element, config);
+
+    this._input = SelectorEngine.findOne(SELECTOR_INPUT, this._element);
+    if (!this._input) return;
+
+    this._length = this._input.maxLength > 0 ? this._input.maxLength : 6;
+    this._type = this._element.dataset.bsType || 'numeric';
+    const charPattern = INPUT_PATTERNS[this._type] || INPUT_PATTERNS.numeric;
+    this._input.pattern = `${charPattern}{${this._length}}`;
+    this._mask = this._element.dataset.bsMask === 'true';
+    this._groups = this._element.dataset.bsGroups
+      ? String(this._element.dataset.bsGroups).split(',').map(Number)
+      : [this._length];
+
+    this._slots = [];
+    this._buildSlots();
+    this._bindEvents();
+    this._render();
+  }
+
+  // Public API
+
+  getValue() {
+    return this._input.value;
+  }
+
+  setValue(value) {
+    const pattern = PATTERNS[this._type] || PATTERNS.numeric;
+    this._input.value = String(value).replace(pattern, '').slice(0, this._length);
+    this._render();
+  }
+
+  clear() {
+    this._input.value = '';
+    this._render();
+    this._input.focus();
+  }
+
+  // Private
+
+  _buildSlots() {
+    // Hide real input visually but keep it accessible
+    this._input.style.cssText =
+      'position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden;white-space:nowrap;';
+
+    const slotsWrapper = document.createElement('div');
+    slotsWrapper.classList.add(CLASS_SLOTS);
+    slotsWrapper.setAttribute('aria-hidden', 'true');
+
+    let slotIndex = 0;
+    for (const [gi, groupLen] of this._groups.entries()) {
+      const groupEl = document.createElement('div');
+      groupEl.classList.add(CLASS_GROUP);
+
+      for (let i = 0; i < groupLen; i++) {
+        const slot = document.createElement('div');
+        slot.classList.add(CLASS_SLOT);
+        slot.dataset.index = slotIndex;
+
+        const char = document.createElement('span');
+        char.classList.add(CLASS_CHAR);
+
+        const cursor = document.createElement('span');
+        cursor.classList.add(CLASS_CURSOR);
+
+        slot.append(char, cursor);
+        groupEl.append(slot);
+        this._slots.push({ slot, char });
+        slotIndex++;
+      }
+
+      slotsWrapper.append(groupEl);
+
+      if (gi < this._groups.length - 1) {
+        const sep = document.createElement('span');
+        sep.classList.add(CLASS_SEPARATOR);
+        sep.textContent = '–';
+        slotsWrapper.append(sep);
+      }
+    }
+
+    this._element.append(slotsWrapper);
+    this._slotsWrapper = slotsWrapper;
+  }
+
+  _bindEvents() {
+    EventHandler.on(this._slotsWrapper, 'click', () => {
+      if (this._input.disabled) return;
+      this._input.focus();
+      const len = this._input.value.length;
+      this._input.setSelectionRange(len, len);
+    });
+
+    EventHandler.on(this._input, 'focus', () => this._render());
+    EventHandler.on(this._input, 'blur', () => this._render());
+
+    EventHandler.on(this._input, 'input', () => {
+      const pattern = PATTERNS[this._type] || PATTERNS.numeric;
+      this._input.value = this._input.value.replace(pattern, '').slice(0, this._length);
+      this._render();
+
+      EventHandler.trigger(this._element, EVENT_INPUT, { value: this._input.value });
+
+      if (this._input.value.length === this._length) {
+        EventHandler.trigger(this._element, EVENT_COMPLETE, { value: this._input.value });
+      }
+    });
+
+    EventHandler.on(this._input, 'keydown', (e) => {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        requestAnimationFrame(() => this._render());
+      }
+    });
+  }
+
+  _render() {
+    const val = this._input.value;
+    const focused = document.activeElement === this._input;
+    const activeIdx = focused ? Math.min(val.length, this._length - 1) : -1;
+    const isDisabled = this._input.disabled;
+
+    this._slotsWrapper.classList.toggle(CLASS_DISABLED, isDisabled);
+
+    for (const [i, { slot, char }] of this._slots.entries()) {
+      const ch = val[i] || '';
+      char.textContent = this._mask && ch ? '•' : ch;
+      slot.classList.toggle(CLASS_SLOT_ACTIVE, i === activeIdx && !isDisabled);
+      slot.classList.toggle(CLASS_SLOT_FILLED, Boolean(ch));
+    }
+  }
+
+  // Static
+
+  static get NAME() {
+    return NAME;
+  }
+
+  static jQueryInterface(config, ...args) {
+    return this.each(function () {
+      const data = OtpInput.getOrCreateInstance(this);
+      if (typeof config === 'string') {
+        if (typeof data[config] === 'undefined') {
+          throw new TypeError(`No method named "${config}"`);
+        }
+
+        data[config](...args);
+      }
+    });
+  }
+}
+
+// Auto-init on DOMContentLoaded
+EventHandler.on(globalThis, 'load', () => {
+  for (const el of SelectorEngine.find(SELECTOR_OTP)) {
+    OtpInput.getOrCreateInstance(el);
+  }
+});
+
+defineJQueryPlugin(OtpInput);
+
+export default OtpInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.6.7",
+  "version": "1.6.8",
   "publishConfig": {
     "access": "public"
   },

package/react/index.js

@@ -3,3 +3,4 @@ export { useCarouselCaption } from './use-carousel-caption.js';
 export { useCarouselHeight } from './use-carousel-height.js';
 export { useVideoModal } from './use-video-modal.js';
 export { useAccordionScroll } from './use-accordion-scroll.js';
+export { useOtpInput } from './use-otp-input.js';

package/react/use-otp-input.js

@@ -0,0 +1,129 @@
+import { useState, useRef, useCallback, useId } from 'react';
+
+const PATTERNS = {
+  numeric: /\D/g,
+  alpha: /[^a-zA-Z]/g,
+  alphanumeric: /[^a-zA-Z0-9]/g,
+};
+
+/**
+ * Replicates otp-input.js behaviour in React.
+ *
+ * Manages a single hidden input whose value is rendered as individual
+ * character slots, matching the keymaster OTP plugin's visual output.
+ *
+ * @param {object} options
+ * @param {number}  [options.length=6]        Number of character slots.
+ * @param {'numeric'|'alphanumeric'|'alpha'} [options.type='numeric']
+ * @param {boolean} [options.mask=false]      Obscure entered characters.
+ * @param {function} [options.onComplete]     Called with the value when all slots are filled.
+ * @param {function} [options.onChange]       Called with the value on every change.
+ *
+ * Usage:
+ *   const otp = useOtpInput({ length: 6, onComplete: (val) => console.log(val) });
+ *
+ *   <div className="otp-wrapper">
+ *     <label className="form-label">One-time password</label>
+ *     <div className="otp" onClick={otp.focusInput}>
+ *       <input {...otp.inputProps} />
+ *       <div className="otp-slots" aria-hidden="true">
+ *         {otp.slots.map((slot, i) => (
+ *           <div key={i} className="otp-group">
+ *             <div className={otp.slotClassName(i)}>
+ *               <span className="otp-char">{slot.display}</span>
+ *               {slot.active && <span className="otp-cursor" />}
+ *             </div>
+ *           </div>
+ *         ))}
+ *       </div>
+ *     </div>
+ *   </div>
+ */
+export function useOtpInput({
+  length = 6,
+  type = 'numeric',
+  mask = false,
+  onComplete,
+  onChange,
+} = {}) {
+  const [value, setValue] = useState('');
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+  const id = useId();
+  const pattern = PATTERNS[type] || PATTERNS.numeric;
+
+  const handleInput = useCallback(
+    (e) => {
+      const next = e.target.value.replace(pattern, '').slice(0, length);
+      setValue(next);
+      onChange?.(next);
+      if (next.length === length) onComplete?.(next);
+    },
+    [length, pattern, onChange, onComplete]
+  );
+
+  const focusInput = useCallback(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  const clear = useCallback(() => {
+    setValue('');
+    inputRef.current?.focus();
+  }, []);
+
+  // Derive per-slot display data
+  const activeIdx = focused ? Math.min(value.length, length - 1) : -1;
+  const slots = Array.from({ length }, (_, i) => {
+    const ch = value[i] || '';
+    return {
+      char: ch,
+      display: mask && ch ? '•' : ch,
+      active: i === activeIdx,
+      filled: Boolean(ch),
+    };
+  });
+
+  const slotClassName = useCallback(
+    (i) => {
+      const s = slots[i];
+      return [
+        'otp-slot',
+        s?.active ? 'otp-slot-active' : '',
+        s?.filled ? 'otp-slot-filled' : '',
+      ]
+        .filter(Boolean)
+        .join(' ');
+    },
+    [slots]
+  );
+
+  const inputProps = {
+    ref: inputRef,
+    type: 'text',
+    className: 'otp-input',
+    id,
+    value,
+    maxLength: length,
+    autoComplete: 'one-time-code',
+    inputMode: type === 'numeric' ? 'numeric' : 'text',
+    onInput: handleInput,
+    // Keep value in sync when controlled
+    onChange(e) {
+      const next = e.target.value.replace(pattern, '').slice(0, length);
+      setValue(next);
+    },
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    style: {
+      position: 'absolute',
+      opacity: 0,
+      pointerEvents: 'none',
+      width: 1,
+      height: 1,
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+    },
+  };
+
+  return { value, slots, inputProps, slotClassName, focusInput, clear, inputId: id };
+}

package/scss/theme/_forms.scss

@@ -2,3 +2,4 @@
 @import "forms/form-control";
 @import "forms/form-check";
 @import "forms/floating-labels";
+@import "forms/otp";

package/scss/theme/_version.scss

@@ -1,2 +1,2 @@
 // GENERATED FILE – do not edit manually
-$km-version: "1.6.7" !default;
+$km-version: "1.6.8" !default;

package/scss/theme/forms/_otp.scss

@@ -0,0 +1,143 @@
+// OTP Input — single hidden <input> rendered as visual character slots.
+// Slots deliberately match .form-control styling using the same $input-* tokens.
+
+// Wrapper that holds the label + .otp container
+.otp-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: .375rem;
+  align-items: flex-start;
+}
+
+.otp {
+  position: relative;
+  display: inline-block;
+
+  // The real input — hidden but accessible
+  .otp-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  // Visual slot container
+  .otp-slots {
+    display: flex;
+    gap: .375rem;
+    align-items: center;
+    cursor: text;
+    user-select: none;
+  }
+
+  // Each digit group (used when data-bs-groups is set)
+  .otp-group {
+    display: flex;
+    gap: .375rem;
+  }
+
+  // Individual character slot — same look as .form-control
+  .otp-slot {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $input-height;        // square cell using the standard input height
+    height: $input-height;
+    font-family: $input-font-family;
+    font-size: $input-font-size;
+    font-weight: $font-weight-semibold;
+    color: $input-color;
+    background-color: $input-bg;
+    border: $input-border-width solid $input-border-color;
+    @include border-radius($input-border-radius);
+    @include transition(border-color .15s ease-in-out, box-shadow .15s ease-in-out);
+
+    &.otp-slot-active {
+      border-color: $input-focus-border-color;
+      outline: 0;
+      box-shadow: $input-focus-box-shadow;
+
+      .otp-cursor {
+        animation: otp-blink 1s step-end infinite;
+      }
+    }
+
+    &.otp-slot-filled .otp-cursor {
+      display: none;
+    }
+  }
+
+  .otp-char {
+    line-height: 1;
+  }
+
+  // Blinking text cursor
+  .otp-cursor {
+    position: absolute;
+    width: 1px;
+    height: 1.25em;
+    background-color: currentcolor;
+    opacity: 0;
+  }
+
+  // Separator between groups
+  .otp-separator {
+    margin: 0 .25rem;
+    font-size: $input-font-size;
+    line-height: $input-height;
+    color: var(--#{$prefix}secondary-color);
+  }
+
+  // Disabled state — mirrors .form-control:disabled
+  &:has(.otp-slots.disabled) {
+    .otp-slots {
+      pointer-events: none;
+      cursor: default;
+    }
+
+    .otp-slot {
+      color: $input-disabled-color;
+      background-color: $input-disabled-bg;
+      border-color: $input-disabled-border-color;
+    }
+  }
+
+  // Small — matches .form-control-sm
+  &.otp-sm {
+    .otp-slot {
+      width: $input-height-sm;
+      height: $input-height-sm;
+      font-size: $input-font-size-sm;
+      @include border-radius($input-border-radius-sm);
+    }
+
+    .otp-separator {
+      font-size: $input-font-size-sm;
+      line-height: $input-height-sm;
+    }
+  }
+
+  // Large — matches .form-control-lg
+  &.otp-lg {
+    .otp-slot {
+      width: $input-height-lg;
+      height: $input-height-lg;
+      font-size: $input-font-size-lg;
+      @include border-radius($input-border-radius-lg);
+    }
+
+    .otp-separator {
+      font-size: $input-font-size-lg;
+      line-height: $input-height-lg;
+    }
+  }
+}
+
+@keyframes otp-blink {
+  0%,
+  100% { opacity: 1; }
+  50%   { opacity: 0; }
+}

package/scss/theme/forms/_validation.scss

@@ -1,6 +1,11 @@
 @each $state, $data in $form-validation-states {
   $color: map-get($data, color);
-  $border-color: $color;
+  $border-color: map-get($data, border-color);
+  $focus-box-shadow: map-get($data, focus-box-shadow);
   @include form-check-tiled-validation-state($state, $color, $border-color);
   @include form-check-encapsulated-validation-state($state, $color);
+
+  .otp {
+    @include otp-validation-state($state, $border-color, $focus-box-shadow);
+  }
 }

package/scss/theme/mixins/_forms.scss

@@ -1,3 +1,20 @@
+@mixin otp-validation-state($state, $border-color, $focus-box-shadow) {
+  // pattern attribute ensures :valid only fires when all N chars match,
+  // so native :valid/:invalid + :user-valid/:user-invalid work correctly for both states.
+  .was-validated &:has(.otp-input:#{$state}),
+  &:has(.otp-input:user-#{$state}),
+  &:has(.otp-input.is-#{$state}) {
+    .otp-slot {
+      border-color: $border-color;
+    }
+
+    .otp-slot.otp-slot-active {
+      border-color: $border-color;
+      box-shadow: $focus-box-shadow;
+    }
+  }
+}
+
 @mixin form-check-tiled-validation-state($state, $color, $border-color: $color) {
   .form-check.form-check-tiled > .form-check-input {
     @include form-validation-state-selector($state) {