@helixui/library 0.1.0

package/dist/shared/hx-number-input-DgHt4ggr.js

@@ -0,0 +1,642 @@
+import { css as f, LitElement as _, html as o, nothing as h } from "lit";
+import { property as n, query as v, state as c, customElement as m } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { live as x } from "lit/directives/live.js";
+import { t as g } from "./lit-Dpo7RLp4.js";
+const y = f`
+  :host {
+    display: block;
+  }
+
+  :host([disabled]) {
+    opacity: var(--hx-opacity-disabled);
+    pointer-events: none;
+  }
+
+  * {
+    box-sizing: border-box;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--hx-space-1);
+    font-family: var(--hx-number-input-font-family, var(--hx-font-family-sans));
+  }
+
+  /* ─── Label ─── */
+
+  .field__label-wrapper {
+    display: contents;
+  }
+
+  .field__label {
+    display: flex;
+    align-items: baseline;
+    gap: var(--hx-space-1);
+    font-size: var(--hx-font-size-sm);
+    font-weight: var(--hx-font-weight-medium);
+    color: var(--hx-number-input-label-color, var(--hx-color-neutral-700));
+    line-height: var(--hx-line-height-normal);
+  }
+
+  .field__required-marker {
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    font-weight: var(--hx-font-weight-bold);
+  }
+
+  /* ─── Input Wrapper ─── */
+
+  .field__input-wrapper {
+    display: flex;
+    align-items: stretch;
+    border: var(--hx-border-width-thin) solid
+      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+    border-radius: var(--hx-number-input-border-radius, var(--hx-border-radius-md));
+    background-color: var(--hx-number-input-bg, var(--hx-color-neutral-0));
+    transition:
+      border-color var(--hx-transition-fast),
+      box-shadow var(--hx-transition-fast);
+    overflow: hidden;
+  }
+
+  .field__input-wrapper:focus-within {
+    border-color: var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+      color-mix(
+        in srgb,
+        var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color))
+          calc(var(--hx-focus-ring-opacity) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Error State ─── */
+
+  .field--error .field__input-wrapper {
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+  }
+
+  .field--error .field__input-wrapper:focus-within {
+    border-color: var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626));
+    box-shadow: 0 0 0 var(--hx-focus-ring-width)
+      color-mix(
+        in srgb,
+        var(--hx-number-input-error-color, var(--hx-color-error-500, #dc2626))
+          calc(var(--hx-focus-ring-opacity) * 100%),
+        transparent
+      );
+  }
+
+  /* ─── Slots (Prefix / Suffix) ─── */
+
+  .field__prefix,
+  .field__suffix {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--hx-space-3);
+    color: var(--hx-color-neutral-500);
+    flex-shrink: 0;
+  }
+
+  /* ─── Native Input ─── */
+
+  .field__input {
+    flex: 1;
+    border: none;
+    outline: none;
+    background: transparent;
+    font-family: inherit;
+    color: var(--hx-number-input-color, var(--hx-color-neutral-800));
+    line-height: var(--hx-line-height-normal);
+    width: 100%;
+    /* Size: md (default) */
+    padding: var(--hx-space-2) var(--hx-space-3);
+    font-size: var(--hx-font-size-md);
+    min-height: var(--hx-size-10);
+  }
+
+  .field__input::placeholder {
+    color: var(--hx-color-neutral-400);
+  }
+
+  .field__input:disabled {
+    cursor: not-allowed;
+  }
+
+  /* ─── Hide native browser spinners ─── */
+
+  .field__input[type='number']::-webkit-inner-spin-button,
+  .field__input[type='number']::-webkit-outer-spin-button {
+    display: none;
+  }
+
+  .field__input[type='number'] {
+    appearance: textfield;
+  }
+
+  /* ─── Size Variants ─── */
+
+  .field--sm .field__input {
+    padding: var(--hx-space-1) var(--hx-space-2);
+    font-size: var(--hx-font-size-sm);
+    min-height: var(--hx-size-8);
+  }
+
+  .field--lg .field__input {
+    padding: var(--hx-space-3) var(--hx-space-4);
+    font-size: var(--hx-font-size-lg);
+    min-height: var(--hx-size-12);
+  }
+
+  /* ─── Stepper ─── */
+
+  .field__stepper {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    border-left: var(--hx-border-width-thin) solid
+      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+  }
+
+  .field__stepper-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--hx-color-neutral-600);
+    padding: 0;
+    flex: 1;
+    min-width: var(--hx-size-8);
+    line-height: 1;
+    transition: background-color var(--hx-transition-fast);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .field__stepper-btn:not(:last-child) {
+    border-bottom: var(--hx-border-width-thin) solid
+      var(--hx-number-input-border-color, var(--hx-color-neutral-300));
+  }
+
+  .field__stepper-btn:hover:not(:disabled) {
+    background-color: var(--hx-color-neutral-50);
+    color: var(--hx-color-neutral-800);
+  }
+
+  /* Suppress focus ring for mouse/touch focus; keep for keyboard and programmatic focus */
+  .field__stepper-btn:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  .field__stepper-btn:focus-visible {
+    outline: var(--hx-focus-ring-width) solid
+      var(--hx-number-input-focus-ring-color, var(--hx-focus-ring-color));
+    outline-offset: -2px;
+  }
+
+  .field__stepper-btn:disabled {
+    opacity: var(--hx-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .field__stepper-btn svg {
+    pointer-events: none;
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+
+  /* Size sm adjustments for stepper */
+  .field--sm .field__stepper-btn {
+    min-width: var(--hx-size-6);
+  }
+
+  /* Size lg adjustments for stepper */
+  .field--lg .field__stepper-btn {
+    min-width: var(--hx-size-10);
+  }
+
+  /* ─── Help Text & Error Messages ─── */
+
+  .field__help-text {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-color-neutral-500);
+    line-height: var(--hx-line-height-normal);
+  }
+
+  .field__error {
+    font-size: var(--hx-font-size-xs);
+    color: var(--hx-number-input-error-color, var(--hx-color-error-text, #b91c1c));
+    line-height: var(--hx-line-height-normal);
+  }
+
+  /* ─── Reduced Motion ─── */
+
+  @media (prefers-reduced-motion: reduce) {
+    .field__input-wrapper {
+      transition: none;
+    }
+
+    .field__stepper-btn {
+      transition: none;
+    }
+  }
+`;
+var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (e, t, r, l) => {
+  for (var a = l > 1 ? void 0 : l ? S(t, r) : t, d = e.length - 1, u; d >= 0; d--)
+    (u = e[d]) && (a = (l ? u(t, r, a) : u(a)) || a);
+  return l && a && w(t, r, a), a;
+};
+let $ = 0, i = class extends _ {
+  constructor() {
+    super(), this.name = "", this.value = null, this.required = !1, this.disabled = !1, this.readonly = !1, this.min = void 0, this.max = void 0, this.step = 1, this.label = "", this.error = "", this.helpText = "", this.size = "md", this.noStepper = !1, this._hasLabelSlot = !1, this._hasErrorSlot = !1, this._hasHelpSlot = !1, this._defaultValue = null, this._longPressTimer = null, this._repeatInterval = null, this._inputId = `hx-number-input-${++$}`, this._helpTextId = `${this._inputId}-help`, this._errorId = `${this._inputId}-error`, this._internals = this.attachInternals();
+  }
+  // ─── Slot Tracking ───
+  _handleLabelSlotChange(e) {
+    const t = e.target;
+    if (this._hasLabelSlot = t.assignedElements().length > 0, this._hasLabelSlot) {
+      const r = t.assignedElements()[0];
+      r && !r.id && (r.id = `${this._inputId}-slotted-label`);
+    }
+  }
+  _handleErrorSlotChange(e) {
+    const r = e.target.assignedElements();
+    this._hasErrorSlot = r.length > 0, this._hasErrorSlot && r[0] && (r[0].id || (r[0].id = this._errorId));
+  }
+  _handleHelpSlotChange(e) {
+    const t = e.target;
+    this._hasHelpSlot = t.assignedElements().length > 0;
+  }
+  // ─── Lifecycle ───
+  firstUpdated() {
+    this._defaultValue = this.value;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._clearLongPress();
+  }
+  updated(e) {
+    super.updated(e), (e.has("value") || e.has("required") || e.has("min") || e.has("max") || e.has("step")) && (this._syncFormValue(), this._updateValidity());
+  }
+  // ─── Form Integration ───
+  /** Returns the associated form element, if any. */
+  get form() {
+    return this._internals.form;
+  }
+  /** Returns the validation message. */
+  get validationMessage() {
+    return this._internals.validationMessage;
+  }
+  /** Returns the ValidityState object. */
+  get validity() {
+    return this._internals.validity;
+  }
+  /** Checks whether the input satisfies its constraints. */
+  checkValidity() {
+    return this._internals.checkValidity();
+  }
+  /** Reports validity and shows the browser's constraint validation UI. */
+  reportValidity() {
+    return this._internals.reportValidity();
+  }
+  _syncFormValue() {
+    this._internals.setFormValue(this.value !== null ? String(this.value) : null);
+  }
+  _updateValidity() {
+    if (this.required && this.value === null) {
+      this._internals.setValidity(
+        { valueMissing: !0 },
+        this.error || "This field is required.",
+        this._input ?? void 0
+      );
+      return;
+    }
+    if (this.value !== null && this.min !== void 0 && this.value < this.min) {
+      this._internals.setValidity(
+        { rangeUnderflow: !0 },
+        `Value must be at least ${this.min}.`,
+        this._input ?? void 0
+      );
+      return;
+    }
+    if (this.value !== null && this.max !== void 0 && this.value > this.max) {
+      this._internals.setValidity(
+        { rangeOverflow: !0 },
+        `Value must be at most ${this.max}.`,
+        this._input ?? void 0
+      );
+      return;
+    }
+    if (this.value !== null && this.step && this.step !== 0) {
+      const e = this._finite(this.step) ?? 1, t = this._finite(this.min) ?? 0, r = Math.abs((this.value - t) % e), l = 1e-9;
+      if (r > l && Math.abs(r - e) > l) {
+        this._internals.setValidity(
+          { stepMismatch: !0 },
+          `Value must be a multiple of ${e}.`,
+          this._input ?? void 0
+        );
+        return;
+      }
+    }
+    this._internals.setValidity({});
+  }
+  /** Called by the form when it resets. */
+  formResetCallback() {
+    this.value = this._defaultValue, this._internals.setFormValue(this.value !== null ? String(this.value) : null);
+  }
+  /** Called when the form restores state (e.g., back/forward navigation). */
+  formStateRestoreCallback(e) {
+    const t = Number(e);
+    this.value = isNaN(t) ? null : t;
+  }
+  // ─── Value Parsing ───
+  _finite(e) {
+    return Number.isFinite(e) ? e : void 0;
+  }
+  _parseInput(e) {
+    if (e === "" || e === null) return null;
+    const t = parseFloat(e);
+    return isNaN(t) ? null : t;
+  }
+  _clamp(e) {
+    let t = e;
+    const r = this._finite(this.min), l = this._finite(this.max);
+    return r !== void 0 && (t = Math.max(r, t)), l !== void 0 && (t = Math.min(l, t)), t;
+  }
+  // ─── Stepper Helpers ───
+  get _atMin() {
+    return this.value !== null && this.min !== void 0 && this.value <= this.min;
+  }
+  get _atMax() {
+    return this.value !== null && this.max !== void 0 && this.value >= this.max;
+  }
+  _applyStep(e) {
+    if (this.disabled || this.readonly) return;
+    const t = this.value ?? 0, r = this._finite(this.step) ?? 1, l = this._clamp(parseFloat((t + e * r).toFixed(10)));
+    l !== this.value && (this.value = l, this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value }
+      })
+    ));
+  }
+  // ─── Long-press ───
+  _clearLongPress() {
+    this._longPressTimer !== null && (clearTimeout(this._longPressTimer), this._longPressTimer = null), this._repeatInterval !== null && (clearInterval(this._repeatInterval), this._repeatInterval = null);
+  }
+  _startLongPress(e) {
+    this._applyStep(e), this._longPressTimer = setTimeout(() => {
+      this._repeatInterval = setInterval(() => {
+        this._applyStep(e);
+      }, 100);
+    }, 400);
+  }
+  _handleStepperPointerDown(e, t) {
+    this.disabled || this.readonly || (e.preventDefault(), this._startLongPress(t));
+  }
+  _handleStepperPointerUp() {
+    this._clearLongPress();
+  }
+  // ─── Keyboard ───
+  _handleKeyDown(e) {
+    this.disabled || this.readonly || (e.key === "ArrowUp" ? (e.preventDefault(), this._applyStep(1)) : e.key === "ArrowDown" && (e.preventDefault(), this._applyStep(-1)));
+  }
+  // ─── Input Events ───
+  _handleInput(e) {
+    const t = e.target;
+    this.value = this._parseInput(t.value), this._syncFormValue(), this.dispatchEvent(
+      new CustomEvent("hx-input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value }
+      })
+    );
+  }
+  _handleChange(e) {
+    const t = e.target, r = this._parseInput(t.value);
+    this.value = r !== null ? this._clamp(r) : null, this._syncFormValue(), this._updateValidity(), this.dispatchEvent(
+      new CustomEvent("hx-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: this.value }
+      })
+    );
+  }
+  // ─── Public Methods ───
+  /** Moves focus to the input element. */
+  focus(e) {
+    var t;
+    (t = this._input) == null || t.focus(e);
+  }
+  /** Selects all text in the input. */
+  select() {
+    var e;
+    (e = this._input) == null || e.select();
+  }
+  // ─── Render Helpers ───
+  _renderIncrementIcon() {
+    return o`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 12 12"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M6 1v10M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>`;
+  }
+  _renderDecrementIcon() {
+    return o`<svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 12 12"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M1 6h10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+    </svg>`;
+  }
+  // ─── Render ───
+  render() {
+    const e = !!this.error || this._hasErrorSlot, t = {
+      field: !0,
+      "field--error": e,
+      "field--disabled": this.disabled,
+      "field--required": this.required,
+      "field--sm": this.size === "sm",
+      "field--md": this.size === "md",
+      "field--lg": this.size === "lg"
+    }, r = [
+      e ? this._errorId : null,
+      !e && (this.helpText || this._hasHelpSlot) ? this._helpTextId : null
+    ].filter(Boolean).join(" ") || void 0, l = this.value !== null ? String(this.value) : "";
+    return o`
+      <div part="field" class=${b(t)}>
+        <div class="field__label-wrapper">
+          <slot name="label" @slotchange=${this._handleLabelSlotChange}>
+            ${this.label ? o`
+                  <label part="label" class="field__label" for=${this._inputId}>
+                    ${this.label}
+                    ${this.required ? o`<span class="field__required-marker" aria-hidden="true">*</span>` : h}
+                  </label>
+                ` : h}
+          </slot>
+        </div>
+
+        <div part="input-wrapper" class="field__input-wrapper">
+          <span class="field__prefix">
+            <slot name="prefix"></slot>
+          </span>
+
+          <input
+            part="input"
+            class="field__input"
+            id=${this._inputId}
+            type="number"
+            .value=${x(l)}
+            min=${p(this.min)}
+            max=${p(this.max)}
+            step=${this.step}
+            ?required=${this.required}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            name=${p(this.name || void 0)}
+            aria-labelledby=${p(
+      this._hasLabelSlot ? `${this._inputId}-slotted-label` : void 0
+    )}
+            aria-invalid=${e ? "true" : h}
+            aria-describedby=${p(r)}
+            @input=${this._handleInput}
+            @change=${this._handleChange}
+            @keydown=${this._handleKeyDown}
+          />
+
+          <span class="field__suffix">
+            <slot name="suffix"></slot>
+          </span>
+
+          ${this.noStepper ? h : o`
+                <div part="stepper" class="field__stepper">
+                  <button
+                    part="increment"
+                    class="field__stepper-btn"
+                    type="button"
+                    aria-label="Increment"
+                    ?disabled=${this.disabled || this.readonly || this._atMax}
+                    tabindex="-1"
+                    @pointerdown=${(a) => this._handleStepperPointerDown(a, 1)}
+                    @pointerup=${this._handleStepperPointerUp}
+                    @pointerleave=${this._handleStepperPointerUp}
+                    @pointercancel=${this._handleStepperPointerUp}
+                  >
+                    ${this._renderIncrementIcon()}
+                  </button>
+                  <button
+                    part="decrement"
+                    class="field__stepper-btn"
+                    type="button"
+                    aria-label="Decrement"
+                    ?disabled=${this.disabled || this.readonly || this._atMin}
+                    tabindex="-1"
+                    @pointerdown=${(a) => this._handleStepperPointerDown(a, -1)}
+                    @pointerup=${this._handleStepperPointerUp}
+                    @pointerleave=${this._handleStepperPointerUp}
+                    @pointercancel=${this._handleStepperPointerUp}
+                  >
+                    ${this._renderDecrementIcon()}
+                  </button>
+                </div>
+              `}
+        </div>
+
+        <slot name="error" @slotchange=${this._handleErrorSlotChange}>
+          ${this.error ? o`
+                <div part="error-message" class="field__error" id=${this._errorId} role="alert">
+                  ${this.error}
+                </div>
+              ` : h}
+        </slot>
+
+        <div
+          part="help-text"
+          class="field__help-text"
+          id=${this._helpTextId}
+          ?hidden=${e || !this.helpText && !this._hasHelpSlot}
+        >
+          <slot name="help-text" @slotchange=${this._handleHelpSlotChange}>${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+};
+i.styles = [g, y];
+i.formAssociated = !0;
+s([
+  n({ type: String })
+], i.prototype, "name", 2);
+s([
+  n({
+    type: Number,
+    converter: {
+      fromAttribute: (e) => {
+        if (e === null || e === "") return null;
+        const t = Number(e);
+        return isNaN(t) ? null : t;
+      },
+      toAttribute: (e) => e === null ? null : String(e)
+    }
+  })
+], i.prototype, "value", 2);
+s([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "required", 2);
+s([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+s([
+  n({ type: Boolean, reflect: !0 })
+], i.prototype, "readonly", 2);
+s([
+  n({ type: Number })
+], i.prototype, "min", 2);
+s([
+  n({ type: Number })
+], i.prototype, "max", 2);
+s([
+  n({ type: Number })
+], i.prototype, "step", 2);
+s([
+  n({ type: String })
+], i.prototype, "label", 2);
+s([
+  n({ type: String })
+], i.prototype, "error", 2);
+s([
+  n({ type: String, attribute: "help-text" })
+], i.prototype, "helpText", 2);
+s([
+  n({ type: String, attribute: "hx-size" })
+], i.prototype, "size", 2);
+s([
+  n({ type: Boolean, attribute: "no-stepper" })
+], i.prototype, "noStepper", 2);
+s([
+  v(".field__input")
+], i.prototype, "_input", 2);
+s([
+  c()
+], i.prototype, "_hasLabelSlot", 2);
+s([
+  c()
+], i.prototype, "_hasErrorSlot", 2);
+s([
+  c()
+], i.prototype, "_hasHelpSlot", 2);
+i = s([
+  m("hx-number-input")
+], i);
+export {
+  i as H
+};
+//# sourceMappingURL=hx-number-input-DgHt4ggr.js.map