sp-component 0.0.1

package/dist/components/number-input/index.d.ts

@@ -0,0 +1,3 @@
+export { SpNumberInputComponent } from './sp-number-input.js';
+export type { SpNumberInputProps, SpNumberInputSize, SpNumberInputEventDetail, } from './sp-number-input.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/number-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAC9D,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,4BAA4B,CAAC"}

package/dist/components/number-input/sp-number-input.css.js

@@ -0,0 +1,4 @@
+const e = ':host{display:block;font-family:inherit;box-sizing:border-box}.sp-number-input{display:flex;flex-direction:column;gap:4px;width:100%;box-sizing:border-box}.sp-number-input-label{display:block;font-size:13px;font-weight:500;color:var(--sp-text-secondary, #374151);line-height:1.4}.sp-number-input-control{display:flex;align-items:stretch;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;overflow:hidden;background:var(--sp-bg, #ffffff);transition:border-color .2s}.sp-number-input-control:focus-within{border-color:var(--sp-primary, #3b82f6);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59, 130, 246, .12))}.sp-number-input-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--sp-bg-subtle, #f9fafb);border:none;color:var(--sp-text-secondary, #374151);cursor:pointer;font-size:16px;font-family:inherit;line-height:1;padding:0;flex-shrink:0;transition:background .15s,color .15s;user-select:none;-webkit-user-select:none}.sp-number-input-btn:hover{background:var(--sp-border-subtle, #e5e7eb);color:var(--sp-text, #111827)}.sp-number-input-btn:active{background:var(--sp-border, #d1d5db)}.sp-number-input-btn:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:-2px;z-index:1}.sp-number-input-btn--dec{border-right:1px solid var(--sp-border-subtle, #e5e7eb)}.sp-number-input-btn--inc{border-left:1px solid var(--sp-border-subtle, #e5e7eb)}.sp-number-input-field{flex:1;min-width:0;border:none;outline:none;text-align:center;background:transparent;font-family:inherit;color:var(--sp-text, #111827);box-sizing:border-box;-webkit-appearance:none;-moz-appearance:textfield;appearance:textfield}.sp-number-input-field::-webkit-outer-spin-button,.sp-number-input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.sp-number-input-field::placeholder{color:var(--sp-text-placeholder, #9ca3af)}:host([size="sm"]) .sp-number-input-btn{width:28px;height:28px;font-size:14px}:host([size="sm"]) .sp-number-input-field{height:28px;font-size:12px;padding:0 6px}:host([size="sm"]) .sp-number-input-label{font-size:12px}:host([size="md"]) .sp-number-input-btn{width:36px;height:36px;font-size:16px}:host([size="md"]) .sp-number-input-field{height:36px;font-size:14px;padding:0 8px}:host([size="lg"]) .sp-number-input-btn{width:44px;height:44px;font-size:18px}:host([size="lg"]) .sp-number-input-field{height:44px;font-size:16px;padding:0 10px}.sp-number-input--error .sp-number-input-control{border-color:var(--sp-error, #FF4D4F)}.sp-number-input--error .sp-number-input-control:focus-within{border-color:var(--sp-error, #FF4D4F);box-shadow:0 0 0 3px var(--sp-error-focus, rgba(255, 77, 79, .12))}.sp-number-input--disabled .sp-number-input-control{background:var(--sp-bg-muted, #f3f4f6);border-color:var(--sp-border-subtle, #e5e7eb);cursor:not-allowed}.sp-number-input--disabled .sp-number-input-btn{opacity:.5;cursor:not-allowed;pointer-events:none}.sp-number-input--disabled .sp-number-input-field{color:var(--sp-text-placeholder, #9ca3af);cursor:not-allowed;pointer-events:none}.sp-number-input-hint{font-size:12px;color:var(--sp-text-muted, #6b7280);line-height:1.4}.sp-number-input-error{font-size:12px;color:var(--sp-error, #FF4D4F);line-height:1.4}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}';
+export {
+  e as default
+};

package/dist/components/number-input/sp-number-input.d.ts

@@ -0,0 +1,75 @@
+import { LitElement } from 'lit';
+import { SpNumberInputSize } from './sp-number-input.types.js';
+/**
+ * Reusable number input component with increment/decrement buttons.
+ *
+ * @element sp-number-input
+ *
+ * @prop {number}              value       - Current numeric value
+ * @prop {number}              min         - Minimum value (default -Infinity)
+ * @prop {number}              max         - Maximum value (default Infinity)
+ * @prop {number}              step        - Step increment (default 1)
+ * @prop {boolean}             disabled    - Disables the component
+ * @prop {boolean}             readonly    - Makes the input read-only
+ * @prop {boolean}             required    - Marks as required
+ * @prop {string}              name        - Native input name for form submission
+ * @prop {SpNumberInputSize}   size        - Size: sm | md | lg
+ * @prop {string}              label       - Label text
+ * @prop {string}              hint        - Hint text (shown when no error)
+ * @prop {string}              error       - Error message
+ * @prop {string}              placeholder - Placeholder text
+ * @prop {string}              prefix      - Inline prefix text (e.g. "$")
+ * @prop {string}              suffix      - Inline suffix text (e.g. "%")
+ * @prop {boolean}             fullWidth   - Makes the control full-width
+ * @prop {Function}            formatter   - Custom display formatter (value: number) => string
+ *
+ * @fires {CustomEvent<{ value: number }>} sp-input  - Emitted on every input change
+ * @fires {CustomEvent<{ value: number }>} sp-change - Emitted on confirmed change
+ */
+export declare class SpNumberInputComponent extends LitElement {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    name: string;
+    size: SpNumberInputSize;
+    label: string;
+    hint: string;
+    error: string;
+    placeholder: string;
+    prefix: string;
+    suffix: string;
+    fullWidth: boolean;
+    /** Custom display formatter: (value: number) => string */
+    formatter: ((value: number) => string) | null;
+    /** Returns the display string for the current value, applying formatter if set. */
+    _getDisplayValue(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult;
+    updated(changedProperties: Map<string, unknown>): void;
+    formResetCallback(): void;
+    _increment(): void;
+    _decrement(): void;
+    _handleInput(e: Event): void;
+    _handleChange(e: Event): void;
+    /** Start long-press acceleration for increment button */
+    _handleIncMouseDown(): void;
+    /** Start long-press acceleration for decrement button */
+    _handleDecMouseDown(): void;
+    /** Clear long-press timers */
+    _clearLongPress(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-number-input": SpNumberInputComponent;
+    }
+}
+//# sourceMappingURL=sp-number-input.d.ts.map

package/dist/components/number-input/sp-number-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-number-input.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/sp-number-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,sBAAuB,SAAQ,UAAU;;IACpD,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAa7B,KAAK,SAAK;IAGV,GAAG,EAAE,MAAM,CAAa;IAGxB,GAAG,EAAE,MAAM,CAAY;IAGvB,IAAI,SAAK;IAGT,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,IAAI,SAAM;IAGV,IAAI,EAAE,iBAAiB,CAAQ;IAG/B,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,WAAW,SAAM;IAGjB,MAAM,SAAM;IAGZ,MAAM,SAAM;IAGZ,SAAS,UAAS;IAElB,0DAA0D;IAC1D,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,CAAQ;IAErD,mFAAmF;IACnF,gBAAgB,IAAI,MAAM;IAOjB,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,MAAM;IAIN,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAc/D,iBAAiB,IAAI,IAAI;IAKzB,UAAU,IAAI,IAAI;IAYlB,UAAU,IAAI,IAAI;IAYlB,YAAY,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAe5B,aAAa,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAe7B,yDAAyD;IACzD,mBAAmB,IAAI,IAAI;IAS3B,yDAAyD;IACzD,mBAAmB,IAAI,IAAI;IAS3B,8BAA8B;IAC9B,eAAe,IAAI,IAAI;CAUxB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,sBAAsB,CAAC;KAC3C;CACF"}

package/dist/components/number-input/sp-number-input.js

@@ -0,0 +1,156 @@
+import { unsafeCSS as b, LitElement as g } from "lit";
+import { property as a, customElement as C } from "lit/decorators.js";
+import S from "./sp-number-input.css.js";
+import { numberInputTemplate as x } from "./sp-number-input.template.js";
+var w = Object.defineProperty, M = Object.getOwnPropertyDescriptor, y = (t) => {
+  throw TypeError(t);
+}, r = (t, e, s, d) => {
+  for (var h = d > 1 ? void 0 : d ? M(e, s) : e, v = t.length - 1, f; v >= 0; v--)
+    (f = t[v]) && (h = (d ? f(e, s, h) : f(h)) || h);
+  return d && h && w(e, s, h), h;
+}, _ = (t, e, s) => e.has(t) || y("Cannot " + s), l = (t, e, s) => (_(t, e, "read from private field"), s ? s.call(t) : e.get(t)), c = (t, e, s) => e.has(t) ? y("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), n = (t, e, s, d) => (_(t, e, "write to private field"), e.set(t, s), s), p, m, o, u;
+let i = class extends g {
+  constructor() {
+    super(), c(this, p), c(this, m, 0), c(this, o, null), c(this, u, null), this.value = 0, this.min = -1 / 0, this.max = 1 / 0, this.step = 1, this.disabled = !1, this.readonly = !1, this.required = !1, this.name = "", this.size = "md", this.label = "", this.hint = "", this.error = "", this.placeholder = "", this.prefix = "", this.suffix = "", this.fullWidth = !1, this.formatter = null, n(this, p, this.attachInternals());
+  }
+  /** Returns the display string for the current value, applying formatter if set. */
+  _getDisplayValue() {
+    return this.formatter ? this.formatter(this.value) : String(this.value);
+  }
+  connectedCallback() {
+    super.connectedCallback(), n(this, m, this.value);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._clearLongPress();
+  }
+  render() {
+    return x.call(this);
+  }
+  updated(t) {
+    (t.has("value") || t.has("required")) && (l(this, p).setFormValue(String(this.value)), this.required && this.value === null ? l(this, p).setValidity(
+      { valueMissing: !0 },
+      "This field is required"
+    ) : l(this, p).setValidity({}));
+  }
+  formResetCallback() {
+    this.value = l(this, m), l(this, p).setFormValue(String(this.value));
+  }
+  _increment() {
+    this.disabled || this.readonly || (this.value = Math.min(this.max, this.value + this.step), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _decrement() {
+    this.disabled || this.readonly || (this.value = Math.max(this.min, this.value - this.step), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  _handleInput(t) {
+    const e = t.target, s = parseFloat(e.value);
+    isNaN(s) || (this.value = Math.min(this.max, Math.max(this.min, s))), this.dispatchEvent(
+      new CustomEvent("sp-input", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _handleChange(t) {
+    const e = t.target, s = parseFloat(e.value);
+    isNaN(s) || (this.value = Math.min(this.max, Math.max(this.min, s))), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        detail: { value: this.value },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /** Start long-press acceleration for increment button */
+  _handleIncMouseDown() {
+    this.disabled || this.readonly || n(this, o, setTimeout(() => {
+      n(this, u, setInterval(() => {
+        this._increment();
+      }, 100));
+    }, 500));
+  }
+  /** Start long-press acceleration for decrement button */
+  _handleDecMouseDown() {
+    this.disabled || this.readonly || n(this, o, setTimeout(() => {
+      n(this, u, setInterval(() => {
+        this._decrement();
+      }, 100));
+    }, 500));
+  }
+  /** Clear long-press timers */
+  _clearLongPress() {
+    l(this, o) && (clearTimeout(l(this, o)), n(this, o, null)), l(this, u) && (clearInterval(l(this, u)), n(this, u, null));
+  }
+};
+p = /* @__PURE__ */ new WeakMap();
+m = /* @__PURE__ */ new WeakMap();
+o = /* @__PURE__ */ new WeakMap();
+u = /* @__PURE__ */ new WeakMap();
+i.styles = b(S);
+i.formAssociated = !0;
+r([
+  a({ type: Number })
+], i.prototype, "value", 2);
+r([
+  a({ type: Number, attribute: "min" })
+], i.prototype, "min", 2);
+r([
+  a({ type: Number, attribute: "max" })
+], i.prototype, "max", 2);
+r([
+  a({ type: Number })
+], i.prototype, "step", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "readonly", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "required", 2);
+r([
+  a({ type: String })
+], i.prototype, "name", 2);
+r([
+  a({ type: String, reflect: !0 })
+], i.prototype, "size", 2);
+r([
+  a({ type: String })
+], i.prototype, "label", 2);
+r([
+  a({ type: String })
+], i.prototype, "hint", 2);
+r([
+  a({ type: String })
+], i.prototype, "error", 2);
+r([
+  a({ type: String })
+], i.prototype, "placeholder", 2);
+r([
+  a({ type: String })
+], i.prototype, "prefix", 2);
+r([
+  a({ type: String })
+], i.prototype, "suffix", 2);
+r([
+  a({ type: Boolean, reflect: !0 })
+], i.prototype, "fullWidth", 2);
+i = r([
+  C("sp-number-input")
+], i);
+export {
+  i as SpNumberInputComponent
+};

package/dist/components/number-input/sp-number-input.template.d.ts

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit';
+import { SpNumberInputComponent } from './sp-number-input.js';
+/**
+ * HTML template for sp-number-input.
+ * Call as: numberInputTemplate.call(this) inside render()
+ */
+export declare function numberInputTemplate(this: SpNumberInputComponent): TemplateResult;
+//# sourceMappingURL=sp-number-input.template.d.ts.map

package/dist/components/number-input/sp-number-input.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-number-input.template.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/sp-number-input.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sBAAsB,CAAC;AAEnE;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,sBAAsB,GAAG,cAAc,CA4DhF"}

package/dist/components/number-input/sp-number-input.template.js

@@ -0,0 +1,55 @@
+import { nothing as n, html as t } from "lit";
+function l() {
+  const i = !!this.error, e = [
+    "sp-number-input",
+    `sp-number-input--${this.size}`,
+    this.disabled ? "sp-number-input--disabled" : "",
+    i ? "sp-number-input--error" : ""
+  ].filter(Boolean).join(" ");
+  return t`
+    <div class=${e}>
+      ${this.label ? t`<label class="sp-number-input-label">${this.label}</label>` : n}
+
+      <div class="sp-number-input-control">
+        <button
+          class="sp-number-input-btn sp-number-input-btn--dec"
+          aria-label="Decrease"
+          type="button"
+          ?disabled=${this.disabled}
+          @click=${() => this._decrement()}
+        >
+          &minus;
+        </button>
+
+        <input
+          type="number"
+          class="sp-number-input-field"
+          .value=${String(this.value)}
+          min=${this.min === -1 / 0 ? n : this.min}
+          max=${this.max === 1 / 0 ? n : this.max}
+          step=${this.step}
+          placeholder=${this.placeholder || n}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          @input=${(s) => this._handleInput(s)}
+          @change=${(s) => this._handleChange(s)}
+        />
+
+        <button
+          class="sp-number-input-btn sp-number-input-btn--inc"
+          aria-label="Increase"
+          type="button"
+          ?disabled=${this.disabled}
+          @click=${() => this._increment()}
+        >
+          +
+        </button>
+      </div>
+
+      ${i ? t`<span class="sp-number-input-error">${this.error}</span>` : this.hint ? t`<span class="sp-number-input-hint">${this.hint}</span>` : n}
+    </div>
+  `;
+}
+export {
+  l as numberInputTemplate
+};

package/dist/components/number-input/sp-number-input.types.d.ts

@@ -0,0 +1,24 @@
+export type SpNumberInputSize = "sm" | "md" | "lg";
+export interface SpNumberInputProps {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    name: string;
+    size: SpNumberInputSize;
+    label: string;
+    hint: string;
+    error: string;
+    placeholder: string;
+    prefix: string;
+    suffix: string;
+    fullWidth: boolean;
+    formatter: ((value: number) => string) | null;
+}
+export interface SpNumberInputEventDetail {
+    value: number;
+}
+//# sourceMappingURL=sp-number-input.types.d.ts.map

package/dist/components/number-input/sp-number-input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-number-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/number-input/sp-number-input.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,iBAAiB,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/components/otp-input/index.d.ts

@@ -0,0 +1,3 @@
+export { SpOtpInputComponent } from './sp-otp-input.js';
+export type { SpOtpInputProps, SpOtpInputType } from './sp-otp-input.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/otp-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/otp-input/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/otp-input/sp-otp-input.css.js

@@ -0,0 +1,4 @@
+const o = ':host{display:block}.sp-otp-label{display:block;font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);margin-bottom:8px}.sp-otp-container{display:flex;gap:8px}.sp-otp-cell{display:flex;align-items:center;justify-content:center;border:1px solid var(--sp-border, #d1d5db);border-radius:6px;text-align:center;font-family:inherit;font-weight:500;background-color:var(--sp-bg, #ffffff);box-sizing:border-box;transition:border-color .15s,box-shadow .15s;padding:0}:host([size="sm"]) .sp-otp-cell{width:32px;height:32px;font-size:14px}:host([size="md"]) .sp-otp-cell{width:44px;height:44px;font-size:18px}:host([size="lg"]) .sp-otp-cell{width:56px;height:56px;font-size:22px}.sp-otp-cell:focus-visible{border-color:var(--sp-primary, #3b82f6);outline:none;box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(59, 130, 246, .2))}:host([invalid]) .sp-otp-cell{border-color:var(--sp-error, #FF4D4F)}:host([invalid]) .sp-otp-cell:focus-visible{border-color:var(--sp-error, #FF4D4F);box-shadow:0 0 0 3px var(--sp-error-focus, rgba(255, 77, 79, .2))}:host([disabled]) .sp-otp-cell{opacity:.5;cursor:not-allowed;background-color:var(--sp-bg-subtle, #f9fafb)}.sp-otp-separator{display:flex;align-items:center;font-weight:500;color:var(--sp-text-muted, #6b7280);font-size:16px;flex-shrink:0}@media(max-width:480px){:host([size="md"]) .sp-otp-cell{width:36px;height:36px;font-size:16px}:host([size="lg"]) .sp-otp-cell{width:44px;height:44px;font-size:18px}.sp-otp-container{gap:6px}}@media(prefers-reduced-motion:reduce){.sp-otp-cell{transition:none}}';
+export {
+  o as default
+};

package/dist/components/otp-input/sp-otp-input.d.ts

@@ -0,0 +1,55 @@
+import { LitElement } from 'lit';
+import { SpOtpInputProps, SpOtpInputType } from './sp-otp-input.types.js';
+/**
+ * One-time password (OTP) input component with individual digit cells.
+ *
+ * @element sp-otp-input
+ *
+ * @prop {number}          length      - Number of OTP digits (default 6)
+ * @prop {string}          value       - Current value
+ * @prop {boolean}         disabled    - Disables all inputs
+ * @prop {boolean}         invalid     - Marks inputs as invalid
+ * @prop {boolean}         required    - Marks the field as required
+ * @prop {SpOtpInputType}  inputType   - Input type: text | number | password
+ * @prop {string}          placeholder - Placeholder for each cell
+ * @prop {string}          label       - Accessible label
+ * @prop {string}          size        - Size: sm | md | lg
+ *
+ * @fires {CustomEvent<{ value: string }>} sp-change   - Emitted when any digit changes
+ * @fires {CustomEvent<{ value: string }>} sp-complete - Emitted when all digits are filled
+ */
+export declare class SpOtpInputComponent extends LitElement implements SpOtpInputProps {
+    #private;
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    constructor();
+    length: number;
+    value: string;
+    disabled: boolean;
+    invalid: boolean;
+    required: boolean;
+    inputType: SpOtpInputType;
+    placeholder: string;
+    label: string;
+    size: SpOtpInputProps["size"];
+    autoSubmit: boolean;
+    separator: string;
+    separatorIndex: number;
+    _values: string[];
+    willUpdate(changedProperties: Map<string, unknown>): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private _getInputs;
+    private _focusInput;
+    private _emitChange;
+    _handleInput(e: Event, index: number): void;
+    _handleKeydown(e: KeyboardEvent, index: number): void;
+    _handlePaste(e: ClipboardEvent, startIndex: number): void;
+    _handleFocus(_e: FocusEvent, _index: number): void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-otp-input": SpOtpInputComponent;
+    }
+}
+//# sourceMappingURL=sp-otp-input.d.ts.map

package/dist/components/otp-input/sp-otp-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-otp-input.d.ts","sourceRoot":"","sources":["../../../src/components/otp-input/sp-otp-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE/E;;;;;;;;;;;;;;;;;GAiBG;AACH,qBACa,mBAAoB,SAAQ,UAAW,YAAW,eAAe;;IAC5E,OAAgB,MAAM,0BAAqB;IAC3C,MAAM,CAAC,cAAc,UAAQ;;IAU7B,MAAM,EAAE,MAAM,CAAK;IAGnB,KAAK,EAAE,MAAM,CAAM;IAGnB,QAAQ,EAAE,OAAO,CAAS;IAG1B,OAAO,EAAE,OAAO,CAAS;IAGzB,QAAQ,EAAE,OAAO,CAAS;IAG1B,SAAS,EAAE,cAAc,CAAU;IAGnC,WAAW,EAAE,MAAM,CAAO;IAG1B,KAAK,EAAE,MAAM,CAAuB;IAGpC,IAAI,EAAE,eAAe,CAAC,MAAM,CAAC,CAAQ;IAGrC,UAAU,EAAE,OAAO,CAAS;IAG5B,SAAS,EAAE,MAAM,CAAM;IAGvB,cAAc,EAAE,MAAM,CAAM;IAG5B,OAAO,EAAE,MAAM,EAAE,CAAM;IAEd,UAAU,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAMzD,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAe/D,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,WAAW;IAgCnB,YAAY,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAmB3C,cAAc,CAAC,CAAC,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAsBrD,YAAY,CAAC,CAAC,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI;IA4BzD,YAAY,CAAC,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAKzC,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,mBAAmB,CAAC;KACrC;CACF"}

package/dist/components/otp-input/sp-otp-input.js

@@ -0,0 +1,131 @@
+import { unsafeCSS as y, LitElement as _ } from "lit";
+import { property as o, state as m, customElement as g } from "lit/decorators.js";
+import w from "./sp-otp-input.css.js";
+import { otpInputTemplate as b } from "./sp-otp-input.template.js";
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, c = (t) => {
+  throw TypeError(t);
+}, l = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? S(e, s) : e, p = t.length - 1, h; p >= 0; p--)
+    (h = t[p]) && (r = (i ? h(e, s, r) : h(r)) || r);
+  return i && r && C(e, s, r), r;
+}, f = (t, e, s) => e.has(t) || c("Cannot " + s), u = (t, e, s) => (f(t, e, "read from private field"), s ? s.call(t) : e.get(t)), I = (t, e, s) => e.has(t) ? c("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), V = (t, e, s, i) => (f(t, e, "write to private field"), e.set(t, s), s), n;
+let a = class extends _ {
+  constructor() {
+    super(), I(this, n), this.length = 6, this.value = "", this.disabled = !1, this.invalid = !1, this.required = !1, this.inputType = "text", this.placeholder = "·", this.label = "One-time password", this.size = "md", this.autoSubmit = !1, this.separator = "", this.separatorIndex = -1, this._values = [], V(this, n, this.attachInternals());
+  }
+  willUpdate(t) {
+    (t.has("value") || t.has("length")) && (this._values = Array.from({ length: this.length }, (e, s) => this.value[s] ?? ""));
+  }
+  updated(t) {
+    super.updated(t), (t.has("value") || t.has("required") || t.has("length")) && (u(this, n).setFormValue(this.value), this.value.length === this.length && this._values.every((s) => s !== "") ? u(this, n).setValidity({}) : this.required ? u(this, n).setValidity({ valueMissing: !0 }, "Please complete the code") : u(this, n).setValidity({}));
+  }
+  _getInputs() {
+    return this.shadowRoot.querySelectorAll(".sp-otp-cell");
+  }
+  _focusInput(t) {
+    const s = this._getInputs()[t];
+    s && (s.focus(), s.select());
+  }
+  _emitChange(t) {
+    const e = t.join("");
+    this.value = e, u(this, n).setFormValue(e);
+    const s = e.length === this.length && t.every((i) => i !== "");
+    s ? u(this, n).setValidity({}) : this.required ? u(this, n).setValidity({ valueMissing: !0 }, "Please complete the code") : u(this, n).setValidity({}), this.dispatchEvent(
+      new CustomEvent("sp-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e }
+      })
+    ), s && this.dispatchEvent(
+      new CustomEvent("sp-complete", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e }
+      })
+    );
+  }
+  _handleInput(t, e) {
+    if (this.disabled) return;
+    const s = t.target, i = s.value.slice(-1);
+    s.value = i;
+    const r = [...this._values];
+    r[e] = i, this._values = r, i && e < this.length - 1 && this._focusInput(e + 1), this._emitChange(r);
+  }
+  _handleKeydown(t, e) {
+    if (!this.disabled)
+      if (t.key === "Backspace") {
+        if (!t.target.value && e > 0) {
+          const i = [...this._values];
+          i[e - 1] = "", this._values = i, this._focusInput(e - 1), t.preventDefault();
+        }
+      } else t.key === "ArrowLeft" && e > 0 ? (this._focusInput(e - 1), t.preventDefault()) : t.key === "ArrowRight" && e < this.length - 1 && (this._focusInput(e + 1), t.preventDefault());
+  }
+  _handlePaste(t, e) {
+    var r;
+    if (this.disabled) return;
+    t.preventDefault();
+    const s = (((r = t.clipboardData) == null ? void 0 : r.getData("text")) ?? "").replace(/\s/g, "").slice(0, this.length - e);
+    if (!s) return;
+    const i = [...this._values];
+    for (let p = 0; p < s.length; p++)
+      e + p < this.length && (i[e + p] = s[p] ?? "");
+    this._values = i, this.updateComplete.then(() => {
+      const p = i.findIndex((v, d) => d >= e && !v), h = p === -1 ? this.length - 1 : p;
+      this._focusInput(h);
+    }), this._emitChange(i);
+  }
+  _handleFocus(t, e) {
+    t.target.select();
+  }
+  render() {
+    return b.call(this);
+  }
+};
+n = /* @__PURE__ */ new WeakMap();
+a.styles = y(w);
+a.formAssociated = !0;
+l([
+  o({ type: Number })
+], a.prototype, "length", 2);
+l([
+  o({ type: String, reflect: !0 })
+], a.prototype, "value", 2);
+l([
+  o({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+l([
+  o({ type: Boolean, reflect: !0 })
+], a.prototype, "invalid", 2);
+l([
+  o({ type: Boolean, reflect: !0 })
+], a.prototype, "required", 2);
+l([
+  o({ type: String, attribute: "input-type" })
+], a.prototype, "inputType", 2);
+l([
+  o({ type: String })
+], a.prototype, "placeholder", 2);
+l([
+  o({ type: String })
+], a.prototype, "label", 2);
+l([
+  o({ type: String, reflect: !0 })
+], a.prototype, "size", 2);
+l([
+  o({ type: Boolean, attribute: "auto-submit" })
+], a.prototype, "autoSubmit", 2);
+l([
+  o({ type: String })
+], a.prototype, "separator", 2);
+l([
+  o({ type: Number, attribute: "separator-index" })
+], a.prototype, "separatorIndex", 2);
+l([
+  m()
+], a.prototype, "_values", 2);
+a = l([
+  g("sp-otp-input")
+], a);
+export {
+  a as SpOtpInputComponent
+};

package/dist/components/otp-input/sp-otp-input.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpOtpInputComponent } from './sp-otp-input.js';
+export declare function otpInputTemplate(this: SpOtpInputComponent): TemplateResult;
+//# sourceMappingURL=sp-otp-input.template.d.ts.map

package/dist/components/otp-input/sp-otp-input.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-otp-input.template.d.ts","sourceRoot":"","sources":["../../../src/components/otp-input/sp-otp-input.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAE7D,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,mBAAmB,GAAG,cAAc,CAuC1E"}

package/dist/components/otp-input/sp-otp-input.template.js

@@ -0,0 +1,40 @@
+import { nothing as a, html as s } from "lit";
+import { repeat as i } from "lit/directives/repeat.js";
+function r() {
+  const l = Array.from({ length: this.length }, (t, e) => e);
+  return s`
+    ${this.label ? s`<label class="sp-otp-label" id="sp-otp-label">${this.label}</label>` : a}
+    <div
+      class="sp-otp-container"
+      role="group"
+      aria-label=${this.label}
+    >
+      ${i(
+    l,
+    (t) => t,
+    (t) => s`
+          ${this.separator && this.separatorIndex >= 0 && t === this.separatorIndex ? s`<span class="sp-otp-separator">${this.separator}</span>` : a}
+          <input
+            class="sp-otp-cell"
+            type=${this.inputType === "number" ? "tel" : this.inputType}
+            inputmode=${this.inputType === "number" ? "numeric" : a}
+            maxlength="1"
+            .value=${this._values[t] ?? ""}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            aria-label=${`Digit ${t + 1} of ${this.length}`}
+            aria-invalid=${this.invalid ? "true" : a}
+            data-index=${t}
+            @input=${(e) => this._handleInput(e, t)}
+            @keydown=${(e) => this._handleKeydown(e, t)}
+            @paste=${(e) => this._handlePaste(e, t)}
+            @focus=${(e) => this._handleFocus(e, t)}
+          />
+        `
+  )}
+    </div>
+  `;
+}
+export {
+  r as otpInputTemplate
+};

package/dist/components/otp-input/sp-otp-input.types.d.ts

@@ -0,0 +1,16 @@
+export type SpOtpInputType = "text" | "number" | "password";
+export interface SpOtpInputProps {
+    length: number;
+    value: string;
+    disabled: boolean;
+    invalid: boolean;
+    required: boolean;
+    inputType: SpOtpInputType;
+    placeholder: string;
+    label: string;
+    size: "sm" | "md" | "lg";
+    autoSubmit: boolean;
+    separator: string;
+    separatorIndex: number;
+}
+//# sourceMappingURL=sp-otp-input.types.d.ts.map

package/dist/components/otp-input/sp-otp-input.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-otp-input.types.d.ts","sourceRoot":"","sources":["../../../src/components/otp-input/sp-otp-input.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5D,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,cAAc,CAAC;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;CACxB"}

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,3 @@
+export { SpPaginationComponent } from './sp-pagination.js';
+export type { SpPaginationProps } from './sp-pagination.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/pagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAC3D,YAAY,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/pagination/sp-pagination.css.js

@@ -0,0 +1,4 @@
+const i = ":host{display:block}.sp-pagination-wrapper{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap}.sp-pagination{display:inline-flex;align-items:center;gap:4px}.sp-pagination-label{font-size:13px;color:var(--sp-text-muted, #6b7280);white-space:nowrap}.sp-pagination-size{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--sp-text-muted, #6b7280)}.sp-pagination-size-select{border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:4px;padding:2px 6px;font-size:13px;font-family:inherit;background:var(--sp-bg, white);color:var(--sp-text, #111827);cursor:pointer}.sp-pagination-jump{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--sp-text-muted, #6b7280)}.sp-pagination-jump-input{width:56px;border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:4px;padding:2px 6px;font-size:13px;font-family:inherit;text-align:center;background:var(--sp-bg, white);color:var(--sp-text, #111827)}.sp-pagination-jump-btn{border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:4px;background:var(--sp-bg, white);color:var(--sp-text-secondary, #374151);font-size:13px;font-family:inherit;padding:2px 8px;cursor:pointer}.sp-pagination-jump-btn:hover:not(:disabled){background:var(--sp-bg-muted, #f3f4f6)}.sp-pagination-mobile-label{display:none;font-size:14px;color:var(--sp-text-secondary, #374151)}.sp-pagination-pages{display:inline-flex;align-items:center;gap:4px}.sp-pagination-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 8px;border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:6px;background:var(--sp-bg, white);font-size:14px;color:var(--sp-text-secondary, #374151);cursor:pointer;transition:all .15s;font-family:inherit}.sp-pagination-btn:hover:not(:disabled){background:var(--sp-bg-muted, #f3f4f6);border-color:var(--sp-border, #d1d5db)}.sp-pagination-btn--active{background:var(--sp-primary, #3b82f6);border-color:var(--sp-primary, #3b82f6);color:var(--sp-bg, white);font-weight:600}.sp-pagination-btn--active:hover{background:var(--sp-primary-hover, #2563eb)}.sp-pagination-btn:disabled{opacity:.4;cursor:not-allowed}.sp-pagination-dots{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;color:var(--sp-text-placeholder, #9ca3af);font-size:14px}:host([disabled]) .sp-pagination-btn{opacity:.4;cursor:not-allowed;pointer-events:none}.sp-pagination-btn:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(max-width:480px){.sp-pagination-pages{display:none}.sp-pagination-mobile-label{display:inline}.sp-pagination-first,.sp-pagination-last,.sp-pagination-size,.sp-pagination-jump{display:none}}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button]{transition:none!important}}";
+export {
+  i as default
+};