@cupra/ui-kit 2.0.0-canary.79 → 2.0.0-canary.80

package/dist-react/esm/components/ds-calendar/ds-calendar.js

@@ -0,0 +1,276 @@
+import { UiKitElement as b } from "../base/UiKitElement.js";
+import "../ds-calendar-day/ds-calendar-day.js";
+import { customUiKitElement as _ } from "../../decorators/customUiKitElement.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as h } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { state as m } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/state.js";
+import { classMap as M } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as k } from "./styles/common.styles.js";
+var S = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, l = (t, e, s, i) => {
+  for (var r = i > 1 ? void 0 : i ? $(e, s) : e, a = t.length - 1, o; a >= 0; a--)
+    (o = t[a]) && (r = (i ? o(e, s, r) : o(r)) || r);
+  return i && r && S(e, s, r), r;
+};
+let n = class extends b {
+  constructor() {
+    super(...arguments), this.variant = "plane", this.locale = "en-US", this.firstDayOfWeek = 1, this.disabledDates = [], this.disabledWeekdays = [], this._viewDate = /* @__PURE__ */ new Date(), this._value = null, this._initialValueApplied = !1;
+  }
+  get selectedDate() {
+    if (this.value) {
+      const t = this.parseDate(this.value);
+      if (t) return t;
+    }
+    return this._value;
+  }
+  get viewDate() {
+    return this._viewDate;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.applyInitialValue(), this.initializeViewDate();
+  }
+  updated(t) {
+    super.updated(t), (t.has("value") || t.has("viewDateAttr")) && this.initializeViewDate();
+  }
+  applyInitialValue() {
+    if (!this._initialValueApplied && (this._initialValueApplied = !0, this.initialValue)) {
+      const t = this.parseDate(this.initialValue);
+      t && (this._value = t);
+    }
+  }
+  initializeViewDate() {
+    if (this.viewDateAttr) {
+      const t = this.parseDate(this.viewDateAttr);
+      t && (this._viewDate = t);
+    } else if (this.value) {
+      const t = this.parseDate(this.value);
+      t && (this._viewDate = new Date(t));
+    } else this._value ? this._viewDate = new Date(this._value) : this._viewDate = /* @__PURE__ */ new Date();
+  }
+  parseDate(t) {
+    const e = t.split("-");
+    if (e.length >= 2) {
+      const s = Number.parseInt(e[0], 10), i = Number.parseInt(e[1], 10) - 1, r = e.length >= 3 ? Number.parseInt(e[2], 10) : 1, a = new Date(s, i, r);
+      if (!Number.isNaN(a.getTime()))
+        return a;
+    }
+    return null;
+  }
+  get calendarClasses() {
+    return {
+      calendar: !0,
+      [this.variant]: !0
+    };
+  }
+  get weekdayNames() {
+    const t = new Intl.DateTimeFormat(this.locale, { weekday: "short" }), e = [], s = new Date(2024, 0, 1);
+    for (; s.getDay() !== this.firstDayOfWeek; )
+      s.setDate(s.getDate() + 1);
+    for (let i = 0; i < 7; i++) {
+      const r = new Date(s);
+      r.setDate(s.getDate() + i);
+      const a = t.format(r);
+      e.push(a.slice(0, 2));
+    }
+    return e;
+  }
+  get monthYearLabel() {
+    return new Intl.DateTimeFormat(this.locale, {
+      month: "long",
+      year: "numeric"
+    }).format(this._viewDate);
+  }
+  getDaysInMonth(t, e) {
+    return new Date(t, e + 1, 0).getDate();
+  }
+  getFirstDayOfMonth(t, e) {
+    return new Date(t, e, 1).getDay();
+  }
+  get calendarDays() {
+    const t = this._viewDate.getFullYear(), e = this._viewDate.getMonth(), s = /* @__PURE__ */ new Date();
+    s.setHours(0, 0, 0, 0);
+    const i = this.getDaysInMonth(t, e);
+    let a = this.getFirstDayOfMonth(t, e) - this.firstDayOfWeek;
+    a < 0 && (a += 7);
+    const o = [], c = e === 0 ? 11 : e - 1, u = e === 0 ? t - 1 : t, p = this.getDaysInMonth(u, c);
+    for (let d = a - 1; d >= 0; d--) {
+      const D = p - d, w = new Date(u, c, D);
+      o.push(this.createCalendarDay(w, !1, s));
+    }
+    for (let d = 1; d <= i; d++) {
+      const D = new Date(t, e, d);
+      o.push(this.createCalendarDay(D, !0, s));
+    }
+    const f = 42 - o.length, v = e === 11 ? 0 : e + 1, g = e === 11 ? t + 1 : t;
+    for (let d = 1; d <= f; d++) {
+      const D = new Date(g, v, d);
+      o.push(this.createCalendarDay(D, !1, s));
+    }
+    return o;
+  }
+  createCalendarDay(t, e, s) {
+    t.setHours(0, 0, 0, 0);
+    const i = t.getDate(), r = t.getMonth(), a = t.getFullYear(), o = i === s.getDate() && r === s.getMonth() && a === s.getFullYear(), c = this.selectedDate, u = c ? i === c.getDate() && r === c.getMonth() && a === c.getFullYear() : !1, p = !e || this.isDateDisabled(t);
+    return {
+      day: i,
+      month: r,
+      year: a,
+      date: t,
+      isCurrentMonth: e,
+      isToday: o,
+      isSelected: u,
+      isDisabled: p
+    };
+  }
+  isDateDisabled(t) {
+    if (this.minDate) {
+      const e = new Date(this.minDate);
+      if (e.setHours(0, 0, 0, 0), t < e) return !0;
+    }
+    if (this.maxDate) {
+      const e = new Date(this.maxDate);
+      if (e.setHours(0, 0, 0, 0), t > e) return !0;
+    }
+    if (this.disabledWeekdays && this.disabledWeekdays.length > 0) {
+      const e = t.getDay();
+      if (this.disabledWeekdays.includes(e)) return !0;
+    }
+    if (this.disabledDates && this.disabledDates.length > 0) {
+      const e = t.toISOString().split("T")[0];
+      if (this.disabledDates.includes(e)) return !0;
+    }
+    return !1;
+  }
+  handlePrevMonth() {
+    const t = new Date(this._viewDate);
+    t.setMonth(t.getMonth() - 1), this._viewDate = t;
+  }
+  handleNextMonth() {
+    const t = new Date(this._viewDate);
+    t.setMonth(t.getMonth() + 1), this._viewDate = t;
+  }
+  handleDayChange(t) {
+    var f;
+    t.stopPropagation();
+    const e = t.target;
+    if (!e || !e.tagName.toLowerCase().startsWith("ds-calendar-day")) return;
+    const i = Array.from(((f = this.shadowRoot) == null ? void 0 : f.querySelectorAll("ds-calendar-day")) || []).indexOf(e);
+    if (i === -1) return;
+    const a = this.calendarDays[i];
+    if (!a || a.isDisabled) return;
+    this._value = a.date, this._viewDate = new Date(a.date);
+    const o = a.date.getFullYear(), c = String(a.date.getMonth() + 1).padStart(2, "0"), u = String(a.date.getDate()).padStart(2, "0"), p = `${o}-${c}-${u}`;
+    this.dispatchEvent(
+      new CustomEvent("ds-calendar-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          value: p,
+          date: a.date
+        }
+      })
+    );
+  }
+  get prevButtonTemplate() {
+    return this.componentFactory.createIconButton({
+      class: "nav-button",
+      "icon-name": "arrow-left",
+      "data-aria-label": "Previous month",
+      "@click": this.handlePrevMonth,
+      variant: "naked",
+      size: "medium",
+      color: "var(--ds-icon-button-icon-color-standard-default, #fafafa)"
+    });
+  }
+  get nextButtonTemplate() {
+    return this.componentFactory.createIconButton({
+      class: "nav-button",
+      "icon-name": "arrow-right",
+      "data-aria-label": "Next month",
+      "@click": this.handleNextMonth,
+      variant: "naked",
+      size: "medium",
+      color: "var(--ds-icon-button-icon-color-standard-default, #fafafa)"
+    });
+  }
+  get weekdaysTemplate() {
+    return y`
+            <div class="weekdays">
+                ${this.weekdayNames.map((t) => y`<div class="weekday">${t}</div>`)}
+            </div>
+        `;
+  }
+  get daysTemplate() {
+    return y`
+            <div class="days-grid" @ds-calendar-day-change=${this.handleDayChange}>
+                ${this.calendarDays.map(
+      (t) => y`
+                        <ds-calendar-day
+                            day=${t.day}
+                            ?disabled=${t.isDisabled}
+                            ?selected=${t.isSelected}
+                            ?today=${t.isToday}
+                            ?outside-month=${!t.isCurrentMonth}
+                        ></ds-calendar-day>
+                    `
+    )}
+            </div>
+        `;
+  }
+  render() {
+    return y`
+            <div class=${M(this.calendarClasses)} role="application" aria-label="Calendar">
+                <div class="header">
+                    ${this.prevButtonTemplate}
+                    <div class="month-year" aria-live="polite">${this.monthYearLabel}</div>
+                    ${this.nextButtonTemplate}
+                </div>
+                ${this.weekdaysTemplate} ${this.daysTemplate}
+            </div>
+        `;
+  }
+};
+n.styles = [k];
+l([
+  h({ type: String, reflect: !0 })
+], n.prototype, "value", 2);
+l([
+  h({ type: String, reflect: !0 })
+], n.prototype, "variant", 2);
+l([
+  h({ type: String, reflect: !0 })
+], n.prototype, "locale", 2);
+l([
+  h({ type: Number, reflect: !0, attribute: "first-day-of-week" })
+], n.prototype, "firstDayOfWeek", 2);
+l([
+  h({ type: String, reflect: !0, attribute: "min-date" })
+], n.prototype, "minDate", 2);
+l([
+  h({ type: String, reflect: !0, attribute: "max-date" })
+], n.prototype, "maxDate", 2);
+l([
+  h({ type: Array, attribute: "disabled-dates" })
+], n.prototype, "disabledDates", 2);
+l([
+  h({ type: Array, attribute: "disabled-weekdays" })
+], n.prototype, "disabledWeekdays", 2);
+l([
+  h({ type: String, reflect: !0, attribute: "view-date" })
+], n.prototype, "viewDateAttr", 2);
+l([
+  h({ type: String, attribute: "initial-value" })
+], n.prototype, "initialValue", 2);
+l([
+  m()
+], n.prototype, "_viewDate", 2);
+l([
+  m()
+], n.prototype, "_value", 2);
+n = l([
+  _("ds-calendar")
+], n);
+export {
+  n as DsCalendar
+};

package/dist-react/esm/components/ds-calendar/styles/common.styles.js

@@ -0,0 +1,45 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const n = e`
+    :host {
+        display: inline-block;
+    }
+
+    .calendar {
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+    }
+
+    .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    .month-year {
+        flex: 1;
+        text-align: center;
+    }
+
+    .weekdays {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+    }
+
+    .weekday {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .days-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+    }
+`;
+export {
+  n as commonStyles
+};

package/dist-react/esm/components/ds-calendar-day/ds-calendar-day.js

@@ -0,0 +1,84 @@
+import { UiKitElement as c } from "../base/UiKitElement.js";
+import { customUiKitElement as h } from "../../decorators/customUiKitElement.js";
+import { booleanConverter as l } from "../../utils/booleanConverter.js";
+import "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import { html as y } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { property as o } from "../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/decorators/property.js";
+import { classMap as u } from "../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/class-map.js";
+import { commonStyles as m } from "./styles/common.styles.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (e, a, d, i) => {
+  for (var r = i > 1 ? void 0 : i ? b(a, d) : a, n = e.length - 1, p; n >= 0; n--)
+    (p = e[n]) && (r = (i ? p(a, d, r) : p(r)) || r);
+  return i && r && f(a, d, r), r;
+};
+let t = class extends c {
+  constructor() {
+    super(...arguments), this.disabled = !1, this.selected = !1, this.today = !1, this.outsideMonth = !1;
+  }
+  get classes() {
+    return {
+      day: !0,
+      disabled: this.disabled,
+      selected: this.selected,
+      today: this.today,
+      "outside-month": this.outsideMonth
+    };
+  }
+  handleClick(e) {
+    if (this.disabled) {
+      e.preventDefault(), e.stopPropagation();
+      return;
+    }
+    this.dispatchEvent(
+      new CustomEvent("ds-calendar-day-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: {
+          day: this.day
+        }
+      })
+    );
+  }
+  handleKeyDown(e) {
+    this.disabled || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick(e));
+  }
+  render() {
+    return y`
+            <button
+                class=${u(this.classes)}
+                ?disabled=${this.disabled}
+                aria-label=${this.day ? `Day ${this.day}` : ""}
+                aria-selected=${this.selected}
+                aria-current=${this.today ? "date" : "false"}
+                tabindex=${this.disabled ? -1 : 0}
+                @click=${this.handleClick}
+                @keydown=${this.handleKeyDown}
+            >
+                ${this.day}
+            </button>
+        `;
+  }
+};
+t.styles = [m];
+s([
+  o({ type: Number, reflect: !0 })
+], t.prototype, "day", 2);
+s([
+  o({ type: Boolean, converter: l, reflect: !0 })
+], t.prototype, "disabled", 2);
+s([
+  o({ type: Boolean, converter: l, reflect: !0 })
+], t.prototype, "selected", 2);
+s([
+  o({ type: Boolean, converter: l, reflect: !0 })
+], t.prototype, "today", 2);
+s([
+  o({ type: Boolean, converter: l, reflect: !0, attribute: "outside-month" })
+], t.prototype, "outsideMonth", 2);
+t = s([
+  h("ds-calendar-day")
+], t);
+export {
+  t as DsCalendarDay
+};

package/dist-react/esm/components/ds-calendar-day/styles/common.styles.js

@@ -0,0 +1,30 @@
+import "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/reactive-element.js";
+import "../../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
+import "../../../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
+import { css as e } from "../../../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
+const t = e`
+    :host {
+        display: inline-flex;
+    }
+
+    .day {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        user-select: none;
+        border: none;
+        background: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .day.disabled {
+        cursor: default;
+        pointer-events: none;
+    }
+`;
+export {
+  t as commonStyles
+};

package/dist-react/esm/components/ds-theme-provider/ds-theme-provider.js

@@ -54,7 +54,7 @@ let m = class extends v {
   }
   loadThemeStyles() {
     return this.loadStyles ? new Promise((t, o) => {
-      const s = "/2.0.0-canary.79", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
+      const s = "/2.0.0-canary.80", r = `https://ds-assets.cupra.com${s}/styles/${this.theme}/theme.css`;
       if (document.head.querySelector(`link[href="${r}"]`)) t();
       else {
         const e = `ui-kit-theme-${s}`, a = document.getElementById(e), n = document.createElement("link");

package/dist-react/esm/index.js

@@ -9,6 +9,8 @@ import "./components/ds-breadcrumbs/ds-breadcrumbs.js";
 import "./components/ds-breadcrumbs-item/ds-breadcrumbs-item.js";
 import "./components/ds-bullets/ds-bullets.js";
 import "./components/ds-button/ds-button.js";
+import "./components/ds-calendar/ds-calendar.js";
+import "./components/ds-calendar-day/ds-calendar-day.js";
 import "./components/ds-carousel-indicator/ds-carousel-indicator.js";
 import "./components/ds-checkbox/ds-checkbox.js";
 import "./components/ds-checkbox-group/ds-checkbox-group.js";
@@ -77,7 +79,7 @@ import "./components/ds-navigation-controls/ds-navigation-controls.js";
 import "./components/ds-table/ds-table.js";
 import "./components/ds-table-row/ds-table-row.js";
 import "./components/ds-table-cell/ds-table-cell.js";
-import { iconNames as Bo } from "./components/ds-icon/iconNames.js";
+import { iconNames as Do } from "./components/ds-icon/iconNames.js";
 export {
-  Bo as iconNames
+  Do as iconNames
 };

package/dist-react/esm/utils/IconsManager.js

@@ -25,7 +25,7 @@ class l {
     }), f.subscribe("theme", this.handleChangeTheme);
   }
 }
-const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.79"), h = globalThis;
+const c = Symbol.for("@cupra/ui-kit/icons-manager/2.0.0-canary.80"), h = globalThis;
 let i = h[c];
 i || (i = new l(), Object.defineProperty(h, c, {
   value: i,

package/dist-react/esm/utils/PubSub.js

@@ -18,7 +18,7 @@ class e {
     });
   }
 }
-const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.79"), t = globalThis;
+const u = Symbol.for("@cupra/ui-kit/pubsub/2.0.0-canary.80"), t = globalThis;
 let b = t[u];
 b || (b = new e(), Object.defineProperty(t, u, {
   value: b,

package/dist-react/esm/utils/StylesRegistry/StylesRegistry.js

@@ -7,7 +7,7 @@ class s {
       theme: t
     }) => {
       if (!t || !e) return;
-      const c = `https://ds-assets.cupra.com/2.0.0-canary.79/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
+      const c = `https://ds-assets.cupra.com/2.0.0-canary.80/styles/${t}/components/${e}.css`, r = this.getCachedStyleSheetPromise({ url: c });
       if (r) return r;
       const i = h(() => this.fetchStyle({ url: c })).then((n) => (n || this.stylePromises.delete(c), n));
       return this.stylePromises.set(c, i), this.stylePromises.get(c);

package/dist-react/esm/utils/cssWithTokens.js

@@ -3,7 +3,7 @@ import "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/lit-html.js";
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeCSS as n, css as o } from "../node_modules/.pnpm/@lit_reactive-element@2.1.1/node_modules/@lit/reactive-element/css-tag.js";
 function x(t, ...r) {
-  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-79"), i = n(e);
+  const e = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-80"), i = n(e);
   return o`${i}`;
 }
 export {

package/dist-react/esm/utils/htmlWithTokens.js

@@ -3,7 +3,7 @@ import { html as n } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit
 import "../node_modules/.pnpm/lit-element@4.2.1/node_modules/lit-element/lit-element.js";
 import { unsafeHTML as i } from "../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/directives/unsafe-html.js";
 function x(t, ...r) {
-  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-79"), e = i(o);
+  const o = String.raw({ raw: t }, ...r).replace(/(--private-[\w-]+)(?=\s*[):,])/g, "$1-v2-0-0-canary-80"), e = i(o);
   return n`${e}`;
 }
 export {

package/dist-react/types/components/ds-calendar/ds-calendar.d.ts

@@ -0,0 +1,42 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import '../ds-calendar-day/ds-calendar-day.ts';
+import type { DsCalendarAttrs, DsCalendarVariant, WeekDay } from './ds-calendar.types';
+export declare class DsCalendar extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    value: DsCalendarAttrs['value'];
+    variant: DsCalendarVariant;
+    locale: DsCalendarAttrs['locale'];
+    firstDayOfWeek: WeekDay;
+    minDate: DsCalendarAttrs['min-date'];
+    maxDate: DsCalendarAttrs['max-date'];
+    disabledDates: DsCalendarAttrs['disabled-dates'];
+    disabledWeekdays: DsCalendarAttrs['disabled-weekdays'];
+    viewDateAttr: DsCalendarAttrs['view-date'];
+    initialValue: DsCalendarAttrs['initial-value'];
+    private _viewDate;
+    private _value;
+    private _initialValueApplied;
+    private get selectedDate();
+    get viewDate(): Date;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private applyInitialValue;
+    private initializeViewDate;
+    private parseDate;
+    private get calendarClasses();
+    private get weekdayNames();
+    private get monthYearLabel();
+    private getDaysInMonth;
+    private getFirstDayOfMonth;
+    private get calendarDays();
+    private createCalendarDay;
+    private isDateDisabled;
+    private handlePrevMonth;
+    private handleNextMonth;
+    private handleDayChange;
+    private get prevButtonTemplate();
+    private get nextButtonTemplate();
+    private get weekdaysTemplate();
+    private get daysTemplate();
+    render(): import("lit").TemplateResult<1>;
+}

package/dist-react/types/components/ds-calendar/ds-calendar.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsCalendar } from './ds-calendar';
+import './ds-calendar';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-calendar': DsCalendar;
+    }
+}

package/dist-react/types/components/ds-calendar/ds-calendar.types.d.ts

@@ -0,0 +1,35 @@
+import type { CommonAttrs } from '../../types/types';
+export type DsCalendarVariant = 'plane' | 'elevated';
+export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export interface DsCalendarAttrs extends CommonAttrs {
+    /** Selected date in ISO format (YYYY-MM-DD) */
+    value?: string;
+    /** Visual style variant */
+    variant?: DsCalendarVariant;
+    /** BCP 47 locale for formatting (e.g., 'es-ES', 'en-US') */
+    locale?: string;
+    /** First day of week (0=Sunday, 1=Monday, etc.) */
+    'first-day-of-week'?: WeekDay;
+    /** Minimum selectable date (YYYY-MM-DD) */
+    'min-date'?: string;
+    /** Maximum selectable date (YYYY-MM-DD) */
+    'max-date'?: string;
+    /** Array of specific dates to disable (YYYY-MM-DD) */
+    'disabled-dates'?: string[];
+    /** Array of weekdays to disable (0=Sunday, 6=Saturday) */
+    'disabled-weekdays'?: WeekDay[];
+    /** Month/year to display (YYYY-MM or YYYY-MM-DD). Overrides value for view. */
+    'view-date'?: string;
+    /** Initial value for uncontrolled mode (YYYY-MM-DD). Applied once on mount. */
+    'initial-value'?: string;
+}
+export interface CalendarDay {
+    day: number;
+    month: number;
+    year: number;
+    date: Date;
+    isCurrentMonth: boolean;
+    isToday: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+}

package/dist-react/types/components/ds-calendar/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist-react/types/components/ds-calendar-day/ds-calendar-day.d.ts

@@ -0,0 +1,20 @@
+import { UiKitElement } from '../base/UiKitElement.ts';
+import type { DsCalendarDayAttrs } from './ds-calendar-day.types';
+export declare class DsCalendarDay extends UiKitElement {
+    static styles: import("lit").CSSResult[];
+    day: DsCalendarDayAttrs['day'];
+    disabled: DsCalendarDayAttrs['disabled'];
+    selected: DsCalendarDayAttrs['selected'];
+    today: DsCalendarDayAttrs['today'];
+    outsideMonth: DsCalendarDayAttrs['outside-month'];
+    protected get classes(): {
+        day: boolean;
+        disabled: boolean;
+        selected: boolean;
+        today: boolean;
+        'outside-month': boolean;
+    };
+    private handleClick;
+    private handleKeyDown;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist-react/types/components/ds-calendar-day/ds-calendar-day.test.d.ts

@@ -0,0 +1,8 @@
+import type { DsCalendarDay } from './ds-calendar-day';
+import './ds-calendar-day';
+import '../ds-theme-provider/ds-theme-provider.ts';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-calendar-day': DsCalendarDay;
+    }
+}

package/dist-react/types/components/ds-calendar-day/ds-calendar-day.types.d.ts

@@ -0,0 +1,10 @@
+import type { CommonAttrs } from '../../types/types';
+export type DsCalendarDayState = 'default' | 'hover' | 'pressed' | 'disabled' | 'selected' | 'today';
+export interface DsCalendarDayAttrs extends CommonAttrs {
+    day?: number;
+    state?: DsCalendarDayState;
+    disabled?: boolean;
+    selected?: boolean;
+    today?: boolean;
+    'outside-month'?: boolean;
+}

package/dist-react/types/components/ds-calendar-day/styles/common.styles.d.ts

@@ -0,0 +1 @@
+export declare const commonStyles: import("lit").CSSResult;

package/dist-react/types/components/index.d.ts

@@ -9,6 +9,8 @@ import './ds-breadcrumbs/ds-breadcrumbs.ts';
 import './ds-breadcrumbs-item/ds-breadcrumbs-item.ts';
 import './ds-bullets/ds-bullets.ts';
 import './ds-button/ds-button.ts';
+import './ds-calendar/ds-calendar.ts';
+import './ds-calendar-day/ds-calendar-day.ts';
 import './ds-carousel-indicator/ds-carousel-indicator.ts';
 import './ds-checkbox/ds-checkbox.ts';
 import './ds-checkbox-group/ds-checkbox-group.ts';