@krollins/blueprint 0.2.2 → 0.3.0

package/dist/components/number-input.js

@@ -1,556 +1,2 @@
-import { css as d, LitElement as m, nothing as u, html as p } from "lit";
-import { property as i, query as h, customElement as v } from "lit/decorators.js";
-import { classMap as c } from "lit/directives/class-map.js";
-const f = d`
-  /* Base styles */
-  :host {
-    display: block;
-  }
-
-  .number-input {
-    font-family: var(--bp-font-family);
-    display: flex;
-    flex-direction: column;
-    gap: var(--bp-spacing-xs);
-  }
-
-  .number-input__label {
-    font-size: var(--bp-font-size-sm);
-    font-weight: var(--bp-font-weight-medium);
-    color: var(--bp-color-text);
-    line-height: var(--bp-line-height-normal);
-  }
-
-  .number-input__required {
-    color: var(--bp-color-error);
-    margin-left: var(--bp-spacing-xs);
-  }
-
-  .number-input__container {
-    display: flex;
-    align-items: stretch;
-  }
-
-  .number-input__input {
-    flex: 1;
-    min-width: 0;
-    font-family: var(--bp-font-family);
-    font-size: var(--bp-font-size-base);
-    line-height: var(--bp-line-height-normal);
-    color: var(--bp-color-text);
-    background-color: var(--bp-color-background);
-    border: var(--bp-border-width) solid var(--bp-color-border);
-    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
-    text-align: center;
-    font-variant-numeric: tabular-nums;
-    transition:
-      border-color var(--bp-transition-fast),
-      box-shadow var(--bp-transition-fast);
-  }
-
-  .number-input__input::placeholder {
-    color: var(--bp-color-text-muted);
-    opacity: var(--bp-opacity-subtle);
-  }
-
-  .number-input__input:hover:not(:disabled):not(:readonly) {
-    border-color: var(--bp-color-border-strong);
-  }
-
-  .number-input__input:focus {
-    outline: none;
-    border-color: var(--bp-color-focus);
-    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);
-  }
-
-  .number-input__input:focus-visible {
-    outline: none;
-    border-color: var(--bp-color-focus);
-    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);
-  }
-
-  /* Button styling */
-  .number-input__button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--bp-color-surface);
-    border: var(--bp-border-width) solid var(--bp-color-border);
-    color: var(--bp-color-text);
-    cursor: pointer;
-    transition:
-      background-color var(--bp-transition-fast),
-      border-color var(--bp-transition-fast);
-    padding: 0;
-  }
-
-  .number-input__button:hover:not(:disabled) {
-    background-color: var(--bp-color-surface-elevated);
-    border-color: var(--bp-color-border-strong);
-  }
-
-  .number-input__button:active:not(:disabled) {
-    background-color: var(--bp-color-surface-subdued);
-  }
-
-  .number-input__button:focus-visible {
-    outline: var(--bp-focus-width) var(--bp-focus-style) var(--bp-color-focus);
-    outline-offset: var(--bp-focus-offset);
-    z-index: 1;
-  }
-
-  .number-input__button:disabled {
-    opacity: var(--bp-opacity-disabled);
-    background-color: var(--bp-color-surface-subdued);
-    cursor: not-allowed;
-  }
-
-  .number-input__button--decrement {
-    border-right: none;
-    border-radius: var(--bp-border-radius-md) 0 0 var(--bp-border-radius-md);
-  }
-
-  .number-input__button--increment {
-    border-left: none;
-    border-radius: 0 var(--bp-border-radius-md) var(--bp-border-radius-md) 0;
-  }
-
-  .number-input__button-icon {
-    font-size: var(--bp-font-size-lg);
-    font-weight: var(--bp-font-weight-bold);
-    line-height: 1;
-    user-select: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  /* Input border radius adjustment when buttons visible */
-  .number-input:not(.number-input--hide-buttons) .number-input__input {
-    border-radius: 0;
-  }
-
-  .number-input--hide-buttons .number-input__input {
-    border-radius: var(--bp-border-radius-md);
-  }
-
-  /* Size variants */
-  .number-input--sm .number-input__input {
-    font-size: var(--bp-font-size-sm);
-    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
-  }
-
-  .number-input--sm .number-input__button {
-    width: var(--bp-spacing-8);
-  }
-
-  .number-input--sm .number-input__button-icon {
-    font-size: var(--bp-font-size-base);
-  }
-
-  .number-input--md .number-input__input {
-    font-size: var(--bp-font-size-base);
-    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
-  }
-
-  .number-input--md .number-input__button {
-    width: var(--bp-spacing-10);
-  }
-
-  .number-input--lg .number-input__input {
-    font-size: var(--bp-font-size-lg);
-    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
-  }
-
-  .number-input--lg .number-input__button {
-    width: var(--bp-spacing-12);
-  }
-
-  .number-input--lg .number-input__button-icon {
-    font-size: var(--bp-font-size-xl);
-  }
-
-  /* Variant styles */
-  .number-input__input--default {
-    border-color: var(--bp-color-border);
-  }
-
-  .number-input__input--success {
-    border-color: var(--bp-color-success);
-  }
-
-  .number-input__input--success:focus,
-  .number-input__input--success:focus-visible {
-    border-color: var(--bp-color-success);
-    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-success);
-  }
-
-  .number-input__input--error {
-    border-color: var(--bp-color-error);
-  }
-
-  .number-input__input--error:focus,
-  .number-input__input--error:focus-visible {
-    border-color: var(--bp-color-error);
-    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-error);
-  }
-
-  .number-input__input--warning {
-    border-color: var(--bp-color-warning);
-  }
-
-  .number-input__input--warning:focus,
-  .number-input__input--warning:focus-visible {
-    border-color: var(--bp-color-warning);
-    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-warning);
-  }
-
-  /* Match button border color to input variant */
-  .number-input--success .number-input__button {
-    border-color: var(--bp-color-success);
-  }
-
-  .number-input--error .number-input__button {
-    border-color: var(--bp-color-error);
-  }
-
-  .number-input--warning .number-input__button {
-    border-color: var(--bp-color-warning);
-  }
-
-  /* States */
-  .number-input--disabled {
-    pointer-events: none;
-  }
-
-  .number-input--disabled .number-input__input {
-    opacity: var(--bp-opacity-disabled);
-    background-color: var(--bp-color-surface-subdued);
-    cursor: not-allowed;
-  }
-
-  .number-input--disabled .number-input__label {
-    opacity: var(--bp-opacity-disabled);
-  }
-
-  .number-input--readonly .number-input__input {
-    background-color: var(--bp-color-surface-subdued);
-    cursor: default;
-  }
-
-  .number-input--readonly .number-input__button {
-    background-color: var(--bp-color-surface-subdued);
-    pointer-events: none;
-  }
-
-  /* Message styles */
-  .number-input__message {
-    font-size: var(--bp-font-size-sm);
-    line-height: var(--bp-line-height-normal);
-    color: var(--bp-color-text-muted);
-  }
-
-  .number-input__message--error {
-    color: var(--bp-color-error);
-  }
-
-  .number-input__message--success {
-    color: var(--bp-color-success);
-  }
-
-  .number-input__message--warning {
-    color: var(--bp-color-warning);
-  }
-
-  /* iOS zoom prevention: ensure 16px minimum on touch devices */
-  @media (max-width: 768px) {
-    .number-input--sm .number-input__input {
-      font-size: 16px;
-    }
-  }
-`;
-var _ = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (t, e, o, a) => {
-  for (var s = a > 1 ? void 0 : a ? g(e, o) : e, l = t.length - 1, b; l >= 0; l--)
-    (b = t[l]) && (s = (a ? b(e, o, s) : b(s)) || s);
-  return a && s && _(e, o, s), s;
-};
-let r = class extends m {
-  constructor() {
-    super(), this.value = null, this.min = void 0, this.max = void 0, this.step = 1, this.name = "", this.label = "", this.placeholder = "", this.disabled = !1, this.required = !1, this.readonly = !1, this.size = "md", this.variant = "default", this.message = "", this.precision = void 0, this.hideButtons = !1;
-  }
-  /**
-   * Check if decrement is allowed
-   */
-  get canDecrement() {
-    return this.disabled || this.readonly ? !1 : this.value === null ? !0 : this.min !== void 0 ? this.value > this.min : !0;
-  }
-  /**
-   * Check if increment is allowed
-   */
-  get canIncrement() {
-    return this.disabled || this.readonly ? !1 : this.value === null ? !0 : this.max !== void 0 ? this.value < this.max : !0;
-  }
-  /**
-   * Format value for display
-   */
-  formatValue(t) {
-    return t === null ? "" : this.precision !== void 0 ? t.toFixed(this.precision) : String(t);
-  }
-  /**
-   * Clamp value to min/max range
-   */
-  clampValue(t) {
-    let e = t;
-    return this.min !== void 0 && (e = Math.max(this.min, e)), this.max !== void 0 && (e = Math.min(this.max, e)), e;
-  }
-  /**
-   * Round value to step precision
-   */
-  roundToStep(t) {
-    if (this.precision !== void 0) {
-      const a = Math.pow(10, this.precision);
-      return Math.round(t * a) / a;
-    }
-    const e = (String(this.step).split(".")[1] || "").length, o = Math.pow(10, e);
-    return Math.round(t * o) / o;
-  }
-  /**
-   * Update value and emit events
-   */
-  updateValue(t, e = !0) {
-    const o = this.value;
-    t !== null && (t = this.clampValue(t), t = this.roundToStep(t)), t !== o && (this.value = t, this.dispatchEvent(
-      new CustomEvent("bp-input", {
-        detail: { value: this.value },
-        bubbles: !0,
-        composed: !0
-      })
-    ), e && this.dispatchEvent(
-      new CustomEvent("bp-change", {
-        detail: { value: this.value },
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-  /**
-   * Handle increment button click
-   */
-  handleIncrement() {
-    if (!this.canIncrement) return;
-    const t = this.value ?? this.min ?? 0;
-    this.updateValue(t + this.step);
-  }
-  /**
-   * Handle decrement button click
-   */
-  handleDecrement() {
-    if (!this.canDecrement) return;
-    const t = this.value ?? this.max ?? 0;
-    this.updateValue(t - this.step);
-  }
-  /**
-   * Handle direct input
-   */
-  handleInput(t) {
-    const o = t.target.value.trim();
-    if (o === "") {
-      this.updateValue(null, !1);
-      return;
-    }
-    const a = parseFloat(o);
-    isNaN(a) || (this.value = a, this.dispatchEvent(
-      new CustomEvent("bp-input", {
-        detail: { value: this.value },
-        bubbles: !0,
-        composed: !0
-      })
-    ));
-  }
-  /**
-   * Handle blur - validate and clamp
-   */
-  handleBlur() {
-    if (this.value !== null) {
-      const t = this.clampValue(this.value), e = this.roundToStep(t);
-      e !== this.value && (this.value = e), this.inputElement && (this.inputElement.value = this.formatValue(this.value));
-    }
-    this.dispatchEvent(
-      new CustomEvent("bp-change", {
-        detail: { value: this.value },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  /**
-   * Handle keyboard navigation
-   */
-  handleKeyDown(t) {
-    if (!(this.disabled || this.readonly))
-      switch (t.key) {
-        case "ArrowUp":
-          t.preventDefault(), this.handleIncrement();
-          break;
-        case "ArrowDown":
-          t.preventDefault(), this.handleDecrement();
-          break;
-        case "PageUp":
-          if (t.preventDefault(), this.canIncrement) {
-            const e = this.value ?? this.min ?? 0;
-            this.updateValue(e + this.step * 10);
-          }
-          break;
-        case "PageDown":
-          if (t.preventDefault(), this.canDecrement) {
-            const e = this.value ?? this.max ?? 0;
-            this.updateValue(e - this.step * 10);
-          }
-          break;
-        case "Home":
-          t.preventDefault(), this.min !== void 0 && this.updateValue(this.min);
-          break;
-        case "End":
-          t.preventDefault(), this.max !== void 0 && this.updateValue(this.max);
-          break;
-      }
-  }
-  render() {
-    const t = {
-      "number-input": !0,
-      [`number-input--${this.size}`]: !0,
-      [`number-input--${this.variant}`]: !0,
-      "number-input--disabled": this.disabled,
-      "number-input--readonly": this.readonly,
-      "number-input--hide-buttons": this.hideButtons
-    }, e = {
-      "number-input__input": !0,
-      [`number-input__input--${this.variant}`]: !0
-    };
-    return p`
-      <div class=${c(t)}>
-        ${this.label ? p`
-              <label class="number-input__label" part="label">
-                ${this.label}
-                ${this.required ? p`<span class="number-input__required">*</span>` : u}
-              </label>
-            ` : u}
-
-        <div class="number-input__container">
-          ${this.hideButtons ? u : p`
-                <button
-                  type="button"
-                  class="number-input__button number-input__button--decrement"
-                  part="decrement"
-                  tabindex="-1"
-                  ?disabled=${!this.canDecrement}
-                  aria-label="Decrease value"
-                  @click=${this.handleDecrement}
-                >
-                  <span class="number-input__button-icon">−</span>
-                </button>
-              `}
-
-          <input
-            type="text"
-            inputmode="decimal"
-            class=${c(e)}
-            part="input"
-            .value=${this.formatValue(this.value)}
-            name=${this.name || u}
-            placeholder=${this.placeholder || u}
-            ?disabled=${this.disabled}
-            ?readonly=${this.readonly}
-            ?required=${this.required}
-            aria-valuemin=${this.min ?? u}
-            aria-valuemax=${this.max ?? u}
-            aria-valuenow=${this.value ?? u}
-            aria-invalid=${this.variant === "error" ? "true" : u}
-            @input=${this.handleInput}
-            @blur=${this.handleBlur}
-            @keydown=${this.handleKeyDown}
-          />
-
-          ${this.hideButtons ? u : p`
-                <button
-                  type="button"
-                  class="number-input__button number-input__button--increment"
-                  part="increment"
-                  tabindex="-1"
-                  ?disabled=${!this.canIncrement}
-                  aria-label="Increase value"
-                  @click=${this.handleIncrement}
-                >
-                  <span class="number-input__button-icon">+</span>
-                </button>
-              `}
-        </div>
-
-        ${this.message ? p`
-              <div
-                class="number-input__message number-input__message--${this.variant}"
-                part="message"
-              >
-                ${this.message}
-              </div>
-            ` : u}
-      </div>
-    `;
-  }
-};
-r.styles = [f];
-n([
-  i({ type: Number })
-], r.prototype, "value", 2);
-n([
-  i({ type: Number })
-], r.prototype, "min", 2);
-n([
-  i({ type: Number })
-], r.prototype, "max", 2);
-n([
-  i({ type: Number })
-], r.prototype, "step", 2);
-n([
-  i({ type: String })
-], r.prototype, "name", 2);
-n([
-  i({ type: String })
-], r.prototype, "label", 2);
-n([
-  i({ type: String })
-], r.prototype, "placeholder", 2);
-n([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
-n([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "required", 2);
-n([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "readonly", 2);
-n([
-  i({ type: String })
-], r.prototype, "size", 2);
-n([
-  i({ type: String })
-], r.prototype, "variant", 2);
-n([
-  i({ type: String })
-], r.prototype, "message", 2);
-n([
-  i({ type: Number })
-], r.prototype, "precision", 2);
-n([
-  i({ type: Boolean, attribute: "hide-buttons" })
-], r.prototype, "hideButtons", 2);
-n([
-  h("input")
-], r.prototype, "inputElement", 2);
-r = n([
-  v("bp-number-input")
-], r);
-export {
-  r as BpNumberInput
-};
-//# sourceMappingURL=number-input.js.map
+import { t as e } from "../shared/number-input-CnHIbGjG.js";
+export { e as BpNumberInput };

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

@@ -1 +1 @@
-{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../source/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,sCAAsC;IAE9B,WAAW,EAAE,MAAM,CAAC;IAE5B,4BAA4B;IAEpB,UAAU,EAAE,MAAM,CAAC;IAE3B,6DAA6D;IAErD,YAAY,EAAE,MAAM,CAAC;IAE7B,0DAA0D;IAElD,aAAa,EAAE,MAAM,CAAC;IAE9B,mCAAmC;IAM3B,aAAa,EAAE,OAAO,CAAC;IAE/B,sCAAsC;IAM9B,YAAY,EAAE,OAAO,CAAC;IAE9B,iDAAiD;IAEzC,QAAQ,EAAE,OAAO,CAAC;IAE1B,sCAAsC;IACD,QAAQ,EAAE,OAAO,CAAC;IAEvD,mBAAmB;IACiB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE7D,MAAM,CAAC,MAAM,4BAAsB;;IAenC,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,cAAc;IAgDtB,MAAM;CAsGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../source/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,sCAAsC;IAE9B,WAAW,EAAE,MAAM,CAAC;IAE5B,4BAA4B;IAEpB,UAAU,EAAE,MAAM,CAAC;IAE3B,6DAA6D;IAErD,YAAY,EAAE,MAAM,CAAC;IAE7B,0DAA0D;IAElD,aAAa,EAAE,MAAM,CAAC;IAE9B,mCAAmC;IAM3B,aAAa,EAAE,OAAO,CAAC;IAE/B,sCAAsC;IAM9B,YAAY,EAAE,OAAO,CAAC;IAE9B,iDAAiD;IAEzC,QAAQ,EAAE,OAAO,CAAC;IAE1B,sCAAsC;IACD,QAAQ,EAAE,OAAO,CAAC;IAEvD,mBAAmB;IACiB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAE7D,MAAM,CAAC,MAAM,4BAAsB;IAEnC,cAWC;IAED,OAAO,CAAC,gBAAgB;IAoBxB,OAAO,CAAC,cAAc;IAgDtB,MAAM,yCAgHL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}