reke-ui 0.1.0 → 0.1.2

package/dist/components/reke-checkbox/reke-checkbox.js

@@ -0,0 +1,64 @@
+import { nothing as d, html as a } from "lit";
+import { property as l, customElement as p } from "lit/decorators.js";
+import { RekeElement as k } from "../../shared/base-element.js";
+import { styles as m } from "./reke-checkbox.styles.js";
+var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, i = (e, s, o, n) => {
+  for (var t = n > 1 ? void 0 : n ? f(s, o) : s, c = e.length - 1, h; c >= 0; c--)
+    (h = e[c]) && (t = (n ? h(s, o, t) : h(t)) || t);
+  return n && t && b(s, o, t), t;
+};
+let r = class extends k {
+  constructor() {
+    super(...arguments), this.checked = !1, this.indeterminate = !1, this.disabled = !1, this.label = "";
+  }
+  handleClick() {
+    this.disabled || (this.checked = !this.checked, this.indeterminate = !1, this.emit("reke-change", { checked: this.checked }));
+  }
+  handleKeyDown(e) {
+    (e.key === " " || e.key === "Enter") && (e.preventDefault(), this.handleClick());
+  }
+  render() {
+    const e = this.indeterminate ? "mixed" : String(this.checked);
+    return a`
+      <div
+        part="container"
+        class="container"
+        role="checkbox"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-checked=${e}
+        aria-disabled=${this.disabled}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <span part="box" class="box ${this.checked ? "box--checked" : ""} ${this.indeterminate ? "box--indeterminate" : ""}">
+          ${this.checked ? a`<svg class="checkmark" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <path d="M2.5 6L5 8.5L9.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>` : d}
+          ${this.indeterminate && !this.checked ? a`<svg class="indeterminate-mark" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                <path d="M3 6H9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              </svg>` : d}
+        </span>
+        ${this.label ? a`<span part="label" class="label">${this.label}</span>` : d}
+      </div>
+    `;
+  }
+};
+r.styles = m;
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "checked", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "indeterminate", 2);
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+i([
+  l()
+], r.prototype, "label", 2);
+r = i([
+  p("reke-checkbox")
+], r);
+export {
+  r as RekeCheckbox
+};

package/dist/components/reke-checkbox/reke-checkbox.styles.js

@@ -0,0 +1,81 @@
+import { tailwindStyles as e } from "../../shared/tailwind-styles.js";
+import { css as o } from "lit";
+const n = [
+  e,
+  o`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .container {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      outline: none;
+    }
+
+    .native-input {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      margin: -1px;
+      padding: 0;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .box {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 16px;
+      height: 16px;
+      min-width: 16px;
+      min-height: 16px;
+      background-color: var(--reke-color-surface, #1A1A1A);
+      border: 1px solid var(--reke-color-border, #252525);
+      border-radius: 3px;
+      box-sizing: border-box;
+      transition: background-color 0.15s ease, border-color 0.15s ease;
+    }
+
+    .box--checked,
+    .box--indeterminate {
+      background-color: var(--reke-color-primary, #22C55E);
+      border-color: var(--reke-color-primary, #22C55E);
+    }
+
+    .container:focus-visible .box {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    .checkmark,
+    .indeterminate-mark {
+      width: 12px;
+      height: 12px;
+      color: var(--reke-color-on-primary, #0A0A0B);
+    }
+
+    .label {
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-sm, 13px);
+      color: var(--reke-color-text, #E5E5E5);
+      user-select: none;
+    }
+  `
+];
+export {
+  n as styles
+};

package/dist/components/reke-chip/reke-chip.js

@@ -0,0 +1,70 @@
+import { nothing as h, html as n } from "lit";
+import { property as o, customElement as m } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
+import { RekeElement as u } from "../../shared/base-element.js";
+import { styles as f } from "./reke-chip.styles.js";
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (t, r, a, l) => {
+  for (var e = l > 1 ? void 0 : l ? y(r, a) : r, p = t.length - 1, c; p >= 0; p--)
+    (c = t[p]) && (e = (l ? c(r, a, e) : c(e)) || e);
+  return l && e && b(r, a, e), e;
+};
+let s = class extends u {
+  constructor() {
+    super(...arguments), this.color = "primary", this.active = !1, this.dismissible = !1, this.disabled = !1;
+  }
+  _handleClick() {
+    this.disabled || this.emit("reke-click");
+  }
+  _handleDismiss(t) {
+    t.stopPropagation(), !this.disabled && this.emit("reke-dismiss");
+  }
+  render() {
+    const t = {
+      chip: !0,
+      [`chip--${this.color}`]: !0,
+      "chip--active": this.active
+    };
+    return n`
+      <button
+        part="chip"
+        class=${d(t)}
+        type="button"
+        ?disabled=${this.disabled}
+        aria-pressed=${this.active}
+        @click=${this._handleClick}
+      >
+        <slot></slot>
+        ${this.dismissible ? n`
+              <span
+                part="dismiss"
+                class="chip__dismiss"
+                role="button"
+                aria-label="Dismiss"
+                @click=${this._handleDismiss}
+              >
+                <svg viewBox="0 0 24 24" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+              </span>
+            ` : h}
+      </button>
+    `;
+  }
+};
+s.styles = f;
+i([
+  o({ reflect: !0 })
+], s.prototype, "color", 2);
+i([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "active", 2);
+i([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "dismissible", 2);
+i([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+s = i([
+  m("reke-chip")
+], s);
+export {
+  s as RekeChip
+};

package/dist/components/reke-chip/reke-chip.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reke-chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-chip/reke-chip.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BA8FlB,CAAC"}
+{"version":3,"file":"reke-chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/reke-chip/reke-chip.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM,2BAuHlB,CAAC"}

package/dist/components/reke-chip/reke-chip.styles.js

@@ -0,0 +1,125 @@
+import { tailwindStyles as r } from "../../shared/tailwind-styles.js";
+import { css as o } from "lit";
+const i = [
+  r,
+  o`
+    :host {
+      display: inline-block;
+    }
+
+    :host([disabled]) {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      font-family: var(--reke-font-mono, 'JetBrains Mono', ui-monospace, monospace);
+      font-size: var(--reke-font-size-xs, 12px);
+      font-weight: var(--reke-font-weight-medium, 500);
+      line-height: 1.4;
+      border: 1px solid var(--reke-color-border-subtle, #1F1F1F);
+      border-radius: var(--reke-radius, 4px);
+      background: transparent;
+      color: var(--reke-color-text-muted, #525252);
+      cursor: pointer;
+      transition:
+        background-color var(--reke-transition-fast, 0.12s ease),
+        border-color var(--reke-transition-fast, 0.12s ease),
+        color var(--reke-transition-fast, 0.12s ease),
+        box-shadow var(--reke-transition-normal, 0.2s ease);
+      box-sizing: border-box;
+      white-space: nowrap;
+    }
+
+    .chip:focus-visible {
+      outline: 2px solid var(--reke-color-primary, #22C55E);
+      outline-offset: 2px;
+    }
+
+    .chip:hover:not(:disabled) {
+      color: var(--reke-color-text, #E5E5E5);
+      border-color: var(--reke-color-border-hover, #3A3A3A);
+      background: var(--reke-color-surface-hover, #202020);
+    }
+
+    /* === Active states by color === */
+
+    .chip--primary.chip--active {
+      border-color: color-mix(in srgb, var(--reke-color-primary, #22C55E) 60%, transparent);
+      background: color-mix(in srgb, var(--reke-color-primary, #22C55E) 12%, transparent);
+      color: var(--reke-color-primary, #22C55E);
+    }
+
+    .chip--primary.chip--active:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--reke-color-primary, #22C55E) 18%, transparent);
+      box-shadow: 0 0 12px color-mix(in srgb, var(--reke-color-primary, #22C55E) 20%, transparent);
+    }
+
+    .chip--secondary.chip--active {
+      border-color: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 60%, transparent);
+      background: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 12%, transparent);
+      color: var(--reke-color-secondary, #3B82F6);
+    }
+
+    .chip--secondary.chip--active:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 18%, transparent);
+      box-shadow: 0 0 12px color-mix(in srgb, var(--reke-color-secondary, #3B82F6) 20%, transparent);
+    }
+
+    .chip--danger.chip--active {
+      border-color: color-mix(in srgb, var(--reke-color-danger, #EF4444) 60%, transparent);
+      background: color-mix(in srgb, var(--reke-color-danger, #EF4444) 12%, transparent);
+      color: var(--reke-color-danger, #EF4444);
+    }
+
+    .chip--danger.chip--active:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--reke-color-danger, #EF4444) 18%, transparent);
+      box-shadow: 0 0 12px color-mix(in srgb, var(--reke-color-danger, #EF4444) 20%, transparent);
+    }
+
+    .chip--warning.chip--active {
+      border-color: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 60%, transparent);
+      background: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 12%, transparent);
+      color: var(--reke-color-warning, #F59E0B);
+    }
+
+    .chip--warning.chip--active:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--reke-color-warning, #F59E0B) 18%, transparent);
+      box-shadow: 0 0 12px color-mix(in srgb, var(--reke-color-warning, #F59E0B) 20%, transparent);
+    }
+
+    /* === Dismiss button === */
+
+    .chip__dismiss {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+      cursor: pointer;
+      opacity: 0.6;
+      transition: opacity 0.15s ease;
+    }
+
+    .chip__dismiss:hover {
+      opacity: 1;
+    }
+
+    .chip__dismiss svg {
+      width: 10px;
+      height: 10px;
+      stroke: currentColor;
+      stroke-width: 2.5;
+      stroke-linecap: round;
+      fill: none;
+    }
+  `
+];
+export {
+  i as styles
+};

package/dist/components/reke-date-range/reke-date-range.js

@@ -0,0 +1,346 @@
+import { html as _, nothing as y } from "lit";
+import { property as c, state as u, customElement as w } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { RekeElement as D } from "../../shared/base-element.js";
+import { styles as S } from "./reke-date-range.styles.js";
+var M = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, o = (e, t, i, s) => {
+  for (var a = s > 1 ? void 0 : s ? $(t, i) : t, n = e.length - 1, h; n >= 0; n--)
+    (h = e[n]) && (a = (s ? h(t, i, a) : h(a)) || a);
+  return s && a && M(t, i, a), a;
+};
+const k = [
+  "Enero",
+  "Febrero",
+  "Marzo",
+  "Abril",
+  "Mayo",
+  "Junio",
+  "Julio",
+  "Agosto",
+  "Septiembre",
+  "Octubre",
+  "Noviembre",
+  "Diciembre"
+], x = ["Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"];
+function l(e) {
+  if (!e) return null;
+  const [t, i, s] = e.split("-").map(Number);
+  return !t || !i || !s ? null : new Date(t, i - 1, s);
+}
+function d(e) {
+  const t = e.getFullYear(), i = String(e.getMonth() + 1).padStart(2, "0"), s = String(e.getDate()).padStart(2, "0");
+  return `${t}-${i}-${s}`;
+}
+function m(e) {
+  const t = String(e.getDate()).padStart(2, "0"), i = String(e.getMonth() + 1).padStart(2, "0");
+  return `${t}/${i}/${e.getFullYear()}`;
+}
+function p(e, t) {
+  return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate();
+}
+function Y(e, t) {
+  let s = new Date(e, t, 1).getDay() - 1;
+  s < 0 && (s = 6);
+  const a = new Date(e, t, 1 - s), n = [];
+  for (let h = 0; h < 42; h++) {
+    const g = new Date(a.getFullYear(), a.getMonth(), a.getDate() + h);
+    n.push({ date: g, day: g.getDate(), otherMonth: g.getMonth() !== t });
+  }
+  return n;
+}
+let r = class extends D {
+  constructor() {
+    super(...arguments), this.mode = "range", this.value = "", this.from = "", this.to = "", this.label = "", this.placeholder = "", this.min = "", this.max = "", this.disabled = !1, this.error = !1, this._open = !1, this._viewYear = (/* @__PURE__ */ new Date()).getFullYear(), this._viewMonth = (/* @__PURE__ */ new Date()).getMonth(), this._rangeSelecting = !1, this._boundOutsideClick = this._onOutsideClick.bind(this), this._onKeyDown = (e) => {
+      if (e.key === "Escape" && this._open) {
+        if (this._rangeSelecting && this.from) {
+          this.to = this.from, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
+          return;
+        }
+        this._open = !1, this._rangeSelecting = !1;
+      }
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("click", this._boundOutsideClick, !0), document.addEventListener("keydown", this._onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("click", this._boundOutsideClick, !0), document.removeEventListener("keydown", this._onKeyDown);
+  }
+  _onOutsideClick(e) {
+    if (!this._open) return;
+    if (!e.composedPath().includes(this)) {
+      if (this._rangeSelecting && this.from) {
+        this.to = this.from, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
+        return;
+      }
+      this._open = !1, this._rangeSelecting = !1;
+    }
+  }
+  _toggleOpen() {
+    if (!this.disabled)
+      if (this._open = !this._open, this._open)
+        this._syncView();
+      else {
+        if (this._rangeSelecting && this.from) {
+          this.to = this.from, this._rangeSelecting = !1, this.emit("reke-change", { from: this.from, to: this.to });
+          return;
+        }
+        this._rangeSelecting = !1;
+      }
+  }
+  /** Sync calendar view to the current selection. */
+  _syncView() {
+    let e = null;
+    if (this.mode === "single" ? e = l(this.value) : e = l(this.from), e)
+      this._viewYear = e.getFullYear(), this._viewMonth = e.getMonth();
+    else {
+      const t = /* @__PURE__ */ new Date();
+      this._viewYear = t.getFullYear(), this._viewMonth = t.getMonth();
+    }
+  }
+  _prevYear() {
+    this._viewYear--;
+  }
+  _nextYear() {
+    this._viewYear++;
+  }
+  _prevMonth() {
+    this._viewMonth === 0 ? (this._viewMonth = 11, this._viewYear--) : this._viewMonth--;
+  }
+  _nextMonth() {
+    this._viewMonth === 11 ? (this._viewMonth = 0, this._viewYear++) : this._viewMonth++;
+  }
+  _isDisabledDate(e) {
+    const t = l(this.min), i = l(this.max);
+    return !!(t && e < t || i && e > i);
+  }
+  _selectDay(e) {
+    if (!this._isDisabledDate(e.date)) {
+      if (this.mode === "single") {
+        this.value = d(e.date), this._open = !1, this.emit("reke-change", { value: this.value });
+        return;
+      }
+      if (!this._rangeSelecting)
+        this.from = d(e.date), this.to = "", this._rangeSelecting = !0;
+      else {
+        let t = l(this.from), i = e.date;
+        i < t && ([t, i] = [i, t]), this.from = d(t), this.to = d(i), this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
+      }
+    }
+  }
+  _goToday() {
+    const e = /* @__PURE__ */ new Date(), t = d(e);
+    if (this._viewYear = e.getFullYear(), this._viewMonth = e.getMonth(), this.mode === "single")
+      this.value = t, this._open = !1, this.emit("reke-change", { value: this.value });
+    else if (this._rangeSelecting && this.from) {
+      let i = l(this.from), s = e;
+      s < i && ([i, s] = [s, i]), this.from = d(i), this.to = d(s), this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
+    } else
+      this.from = t, this.to = t, this._rangeSelecting = !1, this._open = !1, this.emit("reke-change", { from: this.from, to: this.to });
+  }
+  _clear() {
+    this.mode === "single" ? (this.value = "", this.emit("reke-change", { value: "" })) : (this.from = "", this.to = "", this._rangeSelecting = !1, this.emit("reke-change", { from: "", to: "" })), this._open = !1;
+  }
+  _getDayClasses(e) {
+    const t = /* @__PURE__ */ new Date(), i = p(e.date, t), s = this._isDisabledDate(e.date);
+    if (this.mode === "single") {
+      const v = l(this.value);
+      return {
+        calendar__day: !0,
+        "calendar__day--other": e.otherMonth,
+        "calendar__day--today": i,
+        "calendar__day--selected": !!v && p(e.date, v),
+        "calendar__day--disabled": s
+      };
+    }
+    const a = l(this.from), n = l(this.to), h = !!a && p(e.date, a), g = !!n && p(e.date, n), b = !!a && !!n && e.date > a && e.date < n;
+    return {
+      calendar__day: !0,
+      "calendar__day--other": e.otherMonth,
+      "calendar__day--today": i && !h && !g,
+      "calendar__day--selected": (this.mode === "range", !1),
+      "calendar__day--in-range": b,
+      "calendar__day--range-start": h,
+      "calendar__day--range-end": g,
+      "calendar__day--disabled": s
+    };
+  }
+  _getDisplayText() {
+    if (this.mode === "single") {
+      const a = l(this.value);
+      return a ? m(a) : this.placeholder || "Seleccionar fecha";
+    }
+    const e = l(this.from), t = l(this.to);
+    if (!e && !t)
+      return this.placeholder || "Seleccionar rango";
+    const i = e ? m(e) : "—", s = t ? m(t) : "—";
+    return _`${i} <span class="trigger__separator">→</span> ${s}`;
+  }
+  _hasValue() {
+    return this.mode === "single" ? !!this.value : !!(this.from || this.to);
+  }
+  _renderCalendarIcon() {
+    return _`
+      <span class="trigger__icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+      </span>
+    `;
+  }
+  _renderChevron() {
+    return _`
+      <span class="trigger__chevron" aria-hidden="true">
+        <svg viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
+      </span>
+    `;
+  }
+  render() {
+    const e = Y(this._viewYear, this._viewMonth), t = !this._hasValue(), i = `${k[this._viewMonth]} ${this._viewYear}`, s = {
+      trigger: !0,
+      "trigger--open": this._open,
+      "trigger--error": this.error,
+      "trigger--placeholder": t
+    }, a = {
+      label: !0,
+      "label--active": this._open
+    };
+    return _`
+      ${this.label ? _`<span class=${f(a)}>${this.label}</span>` : y}
+
+      <button
+        part="trigger"
+        class=${f(s)}
+        type="button"
+        @click=${this._toggleOpen}
+        aria-haspopup="dialog"
+        aria-expanded=${this._open}
+        ?disabled=${this.disabled}
+      >
+        ${this._renderCalendarIcon()}
+        <span class="trigger__text">${this._getDisplayText()}</span>
+        ${this._renderChevron()}
+      </button>
+
+      ${this._open ? _`
+            <div part="calendar" class="calendar" role="dialog" aria-label="Calendar">
+              <div class="calendar__header">
+                <span class="calendar__title">${i}</span>
+                <div class="calendar__nav">
+                  <button
+                    class="calendar__nav-btn"
+                    type="button"
+                    @click=${this._prevYear}
+                    aria-label="Previous year"
+                  >
+                    <svg viewBox="0 0 24 24"><polyline points="17 18 11 12 17 6"/><polyline points="11 18 5 12 11 6"/></svg>
+                  </button>
+                  <button
+                    class="calendar__nav-btn"
+                    type="button"
+                    @click=${this._prevMonth}
+                    aria-label="Previous month"
+                  >
+                    <svg viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
+                  </button>
+                  <button
+                    class="calendar__nav-btn"
+                    type="button"
+                    @click=${this._nextMonth}
+                    aria-label="Next month"
+                  >
+                    <svg viewBox="0 0 24 24"><polyline points="9 6 15 12 9 18"/></svg>
+                  </button>
+                  <button
+                    class="calendar__nav-btn"
+                    type="button"
+                    @click=${this._nextYear}
+                    aria-label="Next year"
+                  >
+                    <svg viewBox="0 0 24 24"><polyline points="7 6 13 12 7 18"/><polyline points="13 6 19 12 13 18"/></svg>
+                  </button>
+                </div>
+              </div>
+
+              <div class="calendar__weekdays">
+                ${x.map(
+      (n) => _`<span class="calendar__weekday">${n}</span>`
+    )}
+              </div>
+
+              <div class="calendar__grid">
+                ${e.map(
+      (n) => _`
+                    <button
+                      class=${f(this._getDayClasses(n))}
+                      type="button"
+                      @click=${() => this._selectDay(n)}
+                      ?disabled=${this._isDisabledDate(n.date)}
+                      aria-label="${n.date.toLocaleDateString("es-ES", { day: "numeric", month: "long", year: "numeric" })}"
+                    >
+                      ${n.day}
+                    </button>
+                  `
+    )}
+              </div>
+
+              <div class="calendar__footer">
+                <button class="calendar__action calendar__action--today" type="button" @click=${this._goToday}>
+                  Hoy
+                </button>
+                <button class="calendar__action calendar__action--clear" type="button" @click=${this._clear}>
+                  Limpiar
+                </button>
+              </div>
+            </div>
+          ` : y}
+    `;
+  }
+};
+r.styles = S;
+o([
+  c({ reflect: !0 })
+], r.prototype, "mode", 2);
+o([
+  c()
+], r.prototype, "value", 2);
+o([
+  c()
+], r.prototype, "from", 2);
+o([
+  c()
+], r.prototype, "to", 2);
+o([
+  c()
+], r.prototype, "label", 2);
+o([
+  c()
+], r.prototype, "placeholder", 2);
+o([
+  c()
+], r.prototype, "min", 2);
+o([
+  c()
+], r.prototype, "max", 2);
+o([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled", 2);
+o([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "error", 2);
+o([
+  u()
+], r.prototype, "_open", 2);
+o([
+  u()
+], r.prototype, "_viewYear", 2);
+o([
+  u()
+], r.prototype, "_viewMonth", 2);
+o([
+  u()
+], r.prototype, "_rangeSelecting", 2);
+r = o([
+  w("reke-date-range")
+], r);
+export {
+  r as RekeDateRange
+};