@krollins/blueprint 0.2.2 → 0.3.0

package/dist/components/date-picker.js

@@ -1,726 +1,2 @@
-import { css as f, LitElement as k, html as l } from "lit";
-import { property as c, state as b, customElement as m } from "lit/decorators.js";
-import { classMap as g } from "lit/directives/class-map.js";
-const _ = f`
-  /* Base */
-  .date-picker {
-    position: relative;
-    width: 100%;
-  }
-
-  .date-picker__input-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-  }
-
-  .date-picker__input {
-    flex: 1;
-    padding: var(--bp-spacing-sm) var(--bp-spacing-md);
-    padding-right: var(--bp-spacing-2xl);
-    font-family: var(--bp-font-family);
-    font-size: var(--bp-font-size-base);
-    color: var(--bp-color-text);
-    background-color: var(--bp-color-surface);
-    border: var(--bp-border-width) solid var(--bp-color-border);
-    border-radius: var(--bp-border-radius-md);
-    cursor: pointer;
-    transition:
-      border-color var(--bp-transition-fast),
-      box-shadow var(--bp-transition-fast);
-    outline: none;
-  }
-
-  .date-picker__input:hover:not(:disabled) {
-    border-color: var(--bp-color-primary);
-  }
-
-  .date-picker__input:focus {
-    border-color: var(--bp-color-focus);
-    box-shadow: 0 0 0 var(--bp-focus-width) var(--bp-color-focus);
-  }
-
-  .date-picker__input:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  .date-picker__input::placeholder {
-    color: var(--bp-color-text-muted);
-  }
-
-  .date-picker__clear {
-    position: absolute;
-    right: var(--bp-spacing-2xl);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--bp-spacing-lg);
-    height: var(--bp-spacing-lg);
-    padding: 0;
-    font-size: var(--bp-font-size-sm);
-    color: var(--bp-color-text-muted);
-    background: none;
-    border: none;
-    border-radius: var(--bp-border-radius-sm);
-    cursor: pointer;
-    transition:
-      color var(--bp-transition-fast),
-      background-color var(--bp-transition-fast);
-  }
-
-  .date-picker__clear:hover {
-    color: var(--bp-color-primary);
-    background-color: color-mix(
-      in srgb,
-      var(--bp-color-primary) 8%,
-      transparent
-    );
-  }
-
-  .date-picker__indicator {
-    position: absolute;
-    right: var(--bp-spacing-md);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--bp-spacing-lg);
-    height: var(--bp-spacing-lg);
-    color: var(--bp-color-text-muted);
-    pointer-events: none;
-  }
-
-  /* Calendar */
-  .date-picker__calendar {
-    position: absolute;
-    top: calc(100% + var(--bp-spacing-xs));
-    left: 0;
-    z-index: var(--bp-z-dropdown);
-    min-width: var(--bp-spacing-2xl);
-    padding: var(--bp-spacing-md);
-    background-color: var(--bp-color-surface);
-    border-top: calc(var(--bp-border-width) * 2) solid var(--bp-color-primary);
-    border-right: var(--bp-border-width) solid var(--bp-color-border);
-    border-bottom: var(--bp-border-width) solid var(--bp-color-border);
-    border-left: var(--bp-border-width) solid var(--bp-color-border);
-    border-radius: var(--bp-border-radius-md);
-    box-shadow: var(--bp-shadow-md);
-  }
-
-  /* Header */
-  .date-picker__header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: var(--bp-spacing-sm);
-  }
-
-  .date-picker__nav-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--bp-spacing-xl);
-    height: var(--bp-spacing-xl);
-    padding: 0;
-    font-size: var(--bp-font-size-xl);
-    color: var(--bp-color-text);
-    background: none;
-    border: none;
-    border-radius: var(--bp-border-radius-sm);
-    cursor: pointer;
-    transition: background-color var(--bp-transition-fast);
-  }
-
-  .date-picker__nav-button:hover {
-    background-color: color-mix(
-      in srgb,
-      var(--bp-color-primary) 8%,
-      transparent
-    );
-  }
-
-  .date-picker__month-year {
-    flex: 1;
-    font-size: var(--bp-font-size-base);
-    font-weight: var(--bp-font-weight-semibold);
-    color: var(--bp-color-text);
-    text-align: center;
-  }
-
-  /* Weekdays */
-  .date-picker__weekdays {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: var(--bp-spacing-xs);
-    margin-bottom: var(--bp-spacing-xs);
-  }
-
-  .date-picker__weekday {
-    padding: var(--bp-spacing-xs);
-    font-size: var(--bp-font-size-xs);
-    font-weight: var(--bp-font-weight-semibold);
-    color: var(--bp-color-text-muted);
-    text-align: center;
-    text-transform: uppercase;
-  }
-
-  /* Days */
-  .date-picker__days {
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: var(--bp-spacing-xs);
-  }
-
-  .date-picker__day {
-    aspect-ratio: 1;
-    padding: var(--bp-spacing-xs);
-    font-size: var(--bp-font-size-sm);
-    color: var(--bp-color-text);
-    background: none;
-    border: none;
-    border-radius: var(--bp-border-radius-sm);
-    cursor: pointer;
-    transition:
-      background-color var(--bp-transition-fast),
-      color var(--bp-transition-fast);
-  }
-
-  .date-picker__day:hover:not(:disabled) {
-    background-color: color-mix(
-      in srgb,
-      var(--bp-color-primary) 8%,
-      transparent
-    );
-  }
-
-  .date-picker__day--other-month {
-    color: var(--bp-color-text-muted);
-    opacity: 0.5;
-  }
-
-  .date-picker__day--today {
-    font-weight: var(--bp-font-weight-bold);
-    color: var(--bp-color-primary);
-    background-color: color-mix(
-      in srgb,
-      var(--bp-color-primary) 4%,
-      transparent
-    );
-  }
-
-  .date-picker__day--selected {
-    color: var(--bp-color-text-inverse);
-    background-color: var(--bp-color-primary);
-  }
-
-  .date-picker__day--selected:hover:not(:disabled) {
-    background-color: var(--bp-color-primary-hover);
-  }
-
-  .date-picker__day--focused {
-    outline: var(--bp-focus-width) solid var(--bp-color-primary);
-    outline-offset: calc(-1 * var(--bp-focus-width));
-  }
-
-  .date-picker__day--disabled {
-    color: var(--bp-color-text-muted);
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* Sizes */
-  .date-picker--sm .date-picker__input {
-    padding: var(--bp-spacing-xs) var(--bp-spacing-sm);
-    padding-right: var(--bp-spacing-xl);
-    font-size: var(--bp-font-size-sm);
-  }
-
-  .date-picker--sm .date-picker__indicator {
-    right: var(--bp-spacing-xs);
-    width: var(--bp-spacing-md);
-    height: var(--bp-spacing-md);
-  }
-
-  .date-picker--sm .date-picker__clear {
-    right: var(--bp-spacing-xl);
-    width: var(--bp-spacing-md);
-    height: var(--bp-spacing-md);
-  }
-
-  .date-picker--sm .date-picker__calendar {
-    padding: var(--bp-spacing-sm);
-  }
-
-  .date-picker--sm .date-picker__nav-button {
-    width: var(--bp-spacing-lg);
-    height: var(--bp-spacing-lg);
-    font-size: var(--bp-font-size-lg);
-  }
-
-  .date-picker--sm .date-picker__month-year {
-    font-size: var(--bp-font-size-sm);
-  }
-
-  .date-picker--sm .date-picker__header {
-    margin-bottom: var(--bp-spacing-xs);
-  }
-
-  .date-picker--sm .date-picker__weekdays {
-    gap: var(--bp-spacing-2xs);
-    margin-bottom: var(--bp-spacing-2xs);
-  }
-
-  .date-picker--sm .date-picker__weekday {
-    padding: var(--bp-spacing-2xs);
-    font-size: var(--bp-font-size-xs);
-  }
-
-  .date-picker--sm .date-picker__days {
-    gap: var(--bp-spacing-2xs);
-  }
-
-  .date-picker--sm .date-picker__day {
-    padding: var(--bp-spacing-2xs);
-    font-size: var(--bp-font-size-xs);
-  }
-
-  .date-picker--lg .date-picker__input {
-    padding: var(--bp-spacing-md) var(--bp-spacing-lg);
-    padding-right: var(--bp-spacing-24);
-    font-size: var(--bp-font-size-lg);
-  }
-
-  .date-picker--lg .date-picker__indicator {
-    right: var(--bp-spacing-md);
-    width: var(--bp-spacing-xl);
-    height: var(--bp-spacing-xl);
-  }
-
-  .date-picker--lg .date-picker__clear {
-    right: var(--bp-spacing-24);
-    width: var(--bp-spacing-xl);
-    height: var(--bp-spacing-xl);
-  }
-
-  .date-picker--lg .date-picker__calendar {
-    padding: var(--bp-spacing-lg);
-  }
-
-  .date-picker--lg .date-picker__nav-button {
-    width: var(--bp-spacing-2xl);
-    height: var(--bp-spacing-2xl);
-    font-size: var(--bp-font-size-2xl);
-  }
-
-  .date-picker--lg .date-picker__month-year {
-    font-size: var(--bp-font-size-lg);
-  }
-
-  .date-picker--lg .date-picker__header {
-    margin-bottom: var(--bp-spacing-md);
-  }
-
-  .date-picker--lg .date-picker__weekdays {
-    gap: var(--bp-spacing-sm);
-    margin-bottom: var(--bp-spacing-sm);
-  }
-
-  .date-picker--lg .date-picker__weekday {
-    padding: var(--bp-spacing-sm);
-    font-size: var(--bp-font-size-sm);
-  }
-
-  .date-picker--lg .date-picker__days {
-    gap: var(--bp-spacing-sm);
-  }
-
-  .date-picker--lg .date-picker__day {
-    padding: var(--bp-spacing-sm);
-    font-size: var(--bp-font-size-base);
-  }
-
-  /* States */
-  .date-picker--disabled {
-    opacity: 0.6;
-    pointer-events: none;
-  }
-`;
-var D = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (e, t, a, d) => {
-  for (var s = d > 1 ? void 0 : d ? w(t, a) : t, n = e.length - 1, r; n >= 0; n--)
-    (r = e[n]) && (s = (d ? r(t, a, s) : r(s)) || s);
-  return d && s && D(t, a, s), s;
-};
-let i = class extends k {
-  constructor() {
-    super(), this.isOpen = !1, this.displayMonth = (/* @__PURE__ */ new Date()).getMonth(), this.displayYear = (/* @__PURE__ */ new Date()).getFullYear(), this.focusedDate = null, this.value = "", this.name = "", this.label = "", this.placeholder = "Select date...", this.disabled = !1, this.required = !1, this.size = "md", this.min = "", this.max = "", this.firstDayOfWeek = "0";
-  }
-  handleInputClick() {
-    this.disabled || (this.isOpen = !this.isOpen);
-  }
-  handlePreviousMonth() {
-    this.displayMonth === 0 ? (this.displayMonth = 11, this.displayYear--) : this.displayMonth--;
-  }
-  handleNextMonth() {
-    this.displayMonth === 11 ? (this.displayMonth = 0, this.displayYear++) : this.displayMonth++;
-  }
-  handleDateSelect(e) {
-    const t = this.value;
-    this.value = this.formatDate(e), this.isOpen = !1, this.focusedDate = null, this.dispatchEvent(
-      new CustomEvent("bp-change", {
-        detail: {
-          value: this.value,
-          previousValue: t,
-          date: e
-        },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleClear(e) {
-    e.stopPropagation();
-    const t = this.value;
-    this.value = "", this.focusedDate = null, this.dispatchEvent(
-      new CustomEvent("bp-change", {
-        detail: {
-          value: "",
-          previousValue: t,
-          date: null
-        },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleKeyDown(e) {
-    const t = e;
-    if (!this.isOpen) {
-      (t.key === "ArrowDown" || t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.isOpen = !0, this.focusedDate = this.getSelectedDate() || this.getTodayDate());
-      return;
-    }
-    const a = this.focusedDate || this.getSelectedDate() || this.getTodayDate();
-    switch (t.key) {
-      case "Escape":
-        t.preventDefault(), this.isOpen = !1, this.focusedDate = null;
-        break;
-      case "ArrowLeft":
-        t.preventDefault(), this.focusedDate = this.addDays(a, -1), this.updateDisplayMonth(this.focusedDate);
-        break;
-      case "ArrowRight":
-        t.preventDefault(), this.focusedDate = this.addDays(a, 1), this.updateDisplayMonth(this.focusedDate);
-        break;
-      case "ArrowUp":
-        t.preventDefault(), this.focusedDate = this.addDays(a, -7), this.updateDisplayMonth(this.focusedDate);
-        break;
-      case "ArrowDown":
-        t.preventDefault(), this.focusedDate = this.addDays(a, 7), this.updateDisplayMonth(this.focusedDate);
-        break;
-      case "Home":
-        t.preventDefault(), this.focusedDate = new Date(
-          a.getFullYear(),
-          a.getMonth(),
-          1
-        );
-        break;
-      case "End":
-        t.preventDefault(), this.focusedDate = new Date(
-          a.getFullYear(),
-          a.getMonth() + 1,
-          0
-        );
-        break;
-      case "PageUp":
-        t.preventDefault(), this.focusedDate = this.addMonths(
-          a,
-          t.shiftKey ? -12 : -1
-        ), this.updateDisplayMonth(this.focusedDate);
-        break;
-      case "PageDown":
-        t.preventDefault(), this.focusedDate = this.addMonths(
-          a,
-          t.shiftKey ? 12 : 1
-        ), this.updateDisplayMonth(this.focusedDate);
-        break;
-      case "Enter":
-      case " ":
-        t.preventDefault(), this.focusedDate && !this.isDateDisabled(this.focusedDate) && this.handleDateSelect(this.focusedDate);
-        break;
-    }
-  }
-  updateDisplayMonth(e) {
-    this.displayMonth = e.getMonth(), this.displayYear = e.getFullYear();
-  }
-  addDays(e, t) {
-    const a = new Date(e);
-    return a.setDate(a.getDate() + t), a;
-  }
-  addMonths(e, t) {
-    const a = new Date(e);
-    return a.setMonth(a.getMonth() + t), a;
-  }
-  formatDate(e) {
-    const t = e.getFullYear(), a = String(e.getMonth() + 1).padStart(2, "0"), d = String(e.getDate()).padStart(2, "0");
-    return `${t}-${a}-${d}`;
-  }
-  parseDate(e) {
-    if (!e) return null;
-    const t = e.match(/^(\d{4})-(\d{2})-(\d{2})$/);
-    if (t) {
-      const [, d, s, n] = t, r = new Date(
-        parseInt(d, 10),
-        parseInt(s, 10) - 1,
-        parseInt(n, 10)
-      );
-      return r.setHours(0, 0, 0, 0), r;
-    }
-    const a = new Date(e);
-    return isNaN(a.getTime()) ? (console.warn(
-      `bp-date-picker: Invalid date format "${e}". Expected YYYY-MM-DD.`
-    ), null) : a;
-  }
-  getSelectedDate() {
-    return this.parseDate(this.value);
-  }
-  getTodayDate() {
-    const e = /* @__PURE__ */ new Date();
-    return e.setHours(0, 0, 0, 0), e;
-  }
-  isSameDay(e, t) {
-    return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
-  }
-  isDateDisabled(e) {
-    if (this.min) {
-      const t = this.parseDate(this.min);
-      if (t && e < t) return !0;
-    }
-    if (this.max) {
-      const t = this.parseDate(this.max);
-      if (t && e > t) return !0;
-    }
-    return !1;
-  }
-  getCalendarDays() {
-    const t = new Date(this.displayYear, this.displayMonth, 1), a = new Date(this.displayYear, this.displayMonth + 1, 0), d = this.firstDayOfWeek === "1" ? 1 : 0;
-    let s = t.getDay() - d;
-    s < 0 && (s += 7);
-    const n = [];
-    for (let p = s - 1; p >= 0; p--) {
-      const h = new Date(this.displayYear, this.displayMonth, -p);
-      n.push(h);
-    }
-    for (let p = 1; p <= a.getDate(); p++)
-      n.push(new Date(this.displayYear, this.displayMonth, p));
-    const r = 42 - n.length;
-    for (let p = 1; p <= r; p++)
-      n.push(new Date(this.displayYear, this.displayMonth + 1, p));
-    return n;
-  }
-  checkValidity() {
-    if (this.required && !this.value)
-      return !1;
-    if (this.value) {
-      const e = this.parseDate(this.value);
-      if (e && this.isDateDisabled(e))
-        return !1;
-    }
-    return !0;
-  }
-  getWeekdayNames() {
-    const e = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-    return this.firstDayOfWeek === "1" ? [...e.slice(1), e[0]] : e;
-  }
-  getMonthName(e) {
-    return new Date(2e3, e, 1).toLocaleString("default", {
-      month: "long"
-    });
-  }
-  getFormattedValue() {
-    const e = this.getSelectedDate();
-    return e ? e.toLocaleDateString() : "";
-  }
-  render() {
-    const e = this.getSelectedDate(), t = this.getTodayDate(), a = this.getCalendarDays(), d = this.getWeekdayNames(), s = !!this.value, n = {
-      "date-picker": !0,
-      "date-picker--open": this.isOpen,
-      "date-picker--disabled": this.disabled,
-      [`date-picker--${this.size}`]: !0
-    };
-    return l`
-      <div class=${g(n)} part="control">
-        <div class="date-picker__input-wrapper">
-          <input
-            type="text"
-            class="date-picker__input"
-            part="input"
-            .value=${this.getFormattedValue()}
-            placeholder=${this.placeholder}
-            ?disabled=${this.disabled}
-            ?required=${this.required}
-            readonly
-            @click=${this.handleInputClick}
-            @keydown=${this.handleKeyDown}
-            role="combobox"
-            aria-haspopup="grid"
-            aria-expanded=${this.isOpen}
-            aria-disabled=${this.disabled}
-            aria-label=${this.label || this.placeholder || "Date picker"}
-          />
-          ${s && !this.disabled ? l`
-                <button
-                  type="button"
-                  class="date-picker__clear"
-                  part="clear-button"
-                  @click=${this.handleClear}
-                  aria-label="Clear date"
-                  tabindex="-1"
-                >
-                  ✕
-                </button>
-              ` : ""}
-          <div class="date-picker__indicator" part="indicator">
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 16 16"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M5 2V4M11 2V4M3 6H13M4 4H12C12.5523 4 13 4.44772 13 5V13C13 13.5523 12.5523 14 12 14H4C3.44772 14 3 13.5523 3 13V5C3 4.44772 3.44772 4 4 4Z"
-                stroke="currentColor"
-                stroke-width="1.5"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-              />
-            </svg>
-          </div>
-        </div>
-
-        ${this.isOpen ? l`
-              <div class="date-picker__calendar" part="calendar" role="grid">
-                <div class="date-picker__header" part="header">
-                  <button
-                    type="button"
-                    class="date-picker__nav-button"
-                    part="nav-button"
-                    @click=${this.handlePreviousMonth}
-                    aria-label="Previous month"
-                    tabindex="-1"
-                  >
-                    ‹
-                  </button>
-                  <div class="date-picker__month-year" part="month-year">
-                    ${this.getMonthName(this.displayMonth)} ${this.displayYear}
-                  </div>
-                  <button
-                    type="button"
-                    class="date-picker__nav-button"
-                    part="nav-button"
-                    @click=${this.handleNextMonth}
-                    aria-label="Next month"
-                    tabindex="-1"
-                  >
-                    ›
-                  </button>
-                </div>
-
-                <div class="date-picker__weekdays">
-                  ${d.map(
-      (r) => l`
-                      <div
-                        class="date-picker__weekday"
-                        part="weekday"
-                        role="columnheader"
-                      >
-                        ${r}
-                      </div>
-                    `
-    )}
-                </div>
-
-                <div class="date-picker__days">
-                  ${a.map((r) => {
-      const p = r.getMonth() === this.displayMonth, h = e && this.isSameDay(r, e), v = this.isSameDay(r, t), y = this.focusedDate && this.isSameDay(r, this.focusedDate), u = this.isDateDisabled(r);
-      return l`
-                      <button
-                        type="button"
-                        class=${g({
-        "date-picker__day": !0,
-        "date-picker__day--other-month": !p,
-        "date-picker__day--selected": !!h,
-        "date-picker__day--today": v,
-        "date-picker__day--focused": !!y,
-        "date-picker__day--disabled": u
-      })}
-                        part="day"
-                        @click=${() => !u && this.handleDateSelect(r)}
-                        ?disabled=${u}
-                        tabindex="-1"
-                        role="gridcell"
-                        aria-selected=${!!h}
-                        aria-label=${r.toLocaleDateString()}
-                      >
-                        ${r.getDate()}
-                      </button>
-                    `;
-    })}
-                </div>
-              </div>
-            ` : ""}
-        ${this.name ? l`
-              <input type="hidden" name=${this.name} .value=${this.value} />
-            ` : ""}
-      </div>
-    `;
-  }
-};
-i.styles = [_];
-o([
-  c({ type: String, reflect: !0 })
-], i.prototype, "value", 2);
-o([
-  c({ type: String })
-], i.prototype, "name", 2);
-o([
-  c({ type: String })
-], i.prototype, "label", 2);
-o([
-  c({ type: String })
-], i.prototype, "placeholder", 2);
-o([
-  c({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled", 2);
-o([
-  c({ type: Boolean, reflect: !0 })
-], i.prototype, "required", 2);
-o([
-  c({ type: String, reflect: !0 })
-], i.prototype, "size", 2);
-o([
-  c({ type: String })
-], i.prototype, "min", 2);
-o([
-  c({ type: String })
-], i.prototype, "max", 2);
-o([
-  c({ type: String, attribute: "first-day-of-week" })
-], i.prototype, "firstDayOfWeek", 2);
-o([
-  b()
-], i.prototype, "isOpen", 2);
-o([
-  b()
-], i.prototype, "displayMonth", 2);
-o([
-  b()
-], i.prototype, "displayYear", 2);
-o([
-  b()
-], i.prototype, "focusedDate", 2);
-i = o([
-  m("bp-date-picker")
-], i);
-export {
-  i as BpDatePicker
-};
-//# sourceMappingURL=date-picker.js.map
+import { t as e } from "../shared/date-picker-CBtZk2uN.js";
+export { e as BpDatePicker };