@mccustomapps/helaui 0.1.0

package/dist/index.js

@@ -0,0 +1,972 @@
+// src/fonts/sinhala.ts
+var SINHALA_FONT_FAMILY = '"Noto Sans Sinhala", "Iskoola Pota", "FM Abhaya", sans-serif';
+var sinhalaFontStyles = {
+  fontFamily: SINHALA_FONT_FAMILY
+};
+var SINHALA_FONT_CLASS = "helaui-sinhala";
+function applySinhalaFont(element) {
+  element.classList.add(SINHALA_FONT_CLASS);
+  element.style.fontFamily = SINHALA_FONT_FAMILY;
+}
+
+// src/i18n/defaultTranslations.ts
+var defaultTranslations = {
+  en: {
+    textField: {
+      name: { label: "Name", placeholder: "Enter your name" },
+      password: { label: "Password", placeholder: "Enter your password" },
+      email: { label: "Email", placeholder: "example@email.com" },
+      disabled: {
+        label: "Disabled",
+        placeholder: "Cannot be used",
+        value: "Disabled value"
+      }
+    },
+    calendar: {
+      monthNames: [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December"
+      ],
+      sinhalaMonthNames: [
+        "Duruthu",
+        "Navam",
+        "Meddin",
+        "Bak",
+        "Vesak",
+        "Poson",
+        "Esala",
+        "Nikini",
+        "Binara",
+        "Vap",
+        "Il",
+        "Unduvap"
+      ],
+      weekdayNames: [
+        "Sunday",
+        "Monday",
+        "Tuesday",
+        "Wednesday",
+        "Thursday",
+        "Friday",
+        "Saturday"
+      ],
+      shortWeekdayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
+      buddhistEra: "BE",
+      today: "Today",
+      clear: "Clear",
+      selectMonth: "Select Month",
+      poyaDay: "Poya Day"
+    }
+  },
+  si: {
+    textField: {
+      name: { label: "\u0DB1\u0DB8", placeholder: "\u0D94\u0DB6\u0DDA \u0DB1\u0DB8 \u0D87\u0DAD\u0DD4\u0DC5\u0DAD\u0DCA \u0D9A\u0DBB\u0DB1\u0DCA\u0DB1" },
+      password: { label: "\u0DB8\u0DD4\u0DBB\u0DB4\u0DAF\u0DBA", placeholder: "\u0DB8\u0DD4\u0DBB\u0DB4\u0DAF\u0DBA \u0D87\u0DAD\u0DD4\u0DC5\u0DAD\u0DCA \u0D9A\u0DBB\u0DB1\u0DCA\u0DB1" },
+      email: { label: "\u0DC0\u0DD2\u0DAF\u0DCA\u200D\u0DBA\u0DD4\u0DAD\u0DCA \u0DAD\u0DD0\u0DB4\u0DD1\u0DBD", placeholder: "example@email.com" },
+      disabled: {
+        label: "\u0D85\u0D9A\u0DCA\u200D\u0DBB\u0DD2\u0DBA \u0D9A\u0DC5",
+        placeholder: "\u0DB8\u0DD9\u0DBA \u0DB7\u0DCF\u0DC0\u0DD2\u0DAD\u0DCF \u0D9A\u0DC5 \u0DB1\u0DDC\u0DC4\u0DD0\u0D9A",
+        value: "\u0D85\u0D9A\u0DCA\u200D\u0DBB\u0DD2\u0DBA \u0D9A\u0DC5 \u0D85\u0D9C\u0DBA"
+      }
+    },
+    calendar: {
+      monthNames: [
+        "\u0DA2\u0DB1\u0DC0\u0DCF\u0DBB\u0DD2",
+        "\u0DB4\u0DD9\u0DB6\u0DBB\u0DC0\u0DCF\u0DBB\u0DD2",
+        "\u0DB8\u0DCF\u0DBB\u0DCA\u0DAD\u0DD4",
+        "\u0D85\u0DB4\u0DCA\u200D\u0DBB\u0DDA\u0DBD\u0DCA",
+        "\u0DB8\u0DD0\u0DBA\u0DD2",
+        "\u0DA2\u0DD6\u0DB1\u0DD2",
+        "\u0DA2\u0DD6\u0DBD\u0DD2",
+        "\u0D85\u0D9C\u0DDD\u0DC3\u0DCA\u0DAD\u0DD4",
+        "\u0DC3\u0DD0\u0DB4\u0DCA\u0DAD\u0DD0\u0DB8\u0DCA\u0DB6\u0DBB\u0DCA",
+        "\u0D94\u0D9A\u0DCA\u0DAD\u0DDD\u0DB6\u0DBB\u0DCA",
+        "\u0DB1\u0DDC\u0DC0\u0DD0\u0DB8\u0DCA\u0DB6\u0DBB\u0DCA",
+        "\u0DAF\u0DD9\u0DC3\u0DD0\u0DB8\u0DCA\u0DB6\u0DBB\u0DCA"
+      ],
+      sinhalaMonthNames: [
+        "\u0DAF\u0DD4\u0DBB\u0DD4\u0DAD\u0DD4",
+        "\u0DB1\u0DC0\u0DB8\u0DCA",
+        "\u0DB8\u0DD0\u0DAF\u0DD2\u0DB1\u0DCA",
+        "\u0DB6\u0D9A\u0DCA",
+        "\u0DC0\u0DD9\u0DC3\u0D9A\u0DCA",
+        "\u0DB4\u0DDC\u0DC3\u0DDC\u0DB1\u0DCA",
+        "\u0D87\u0DC3\u0DC5",
+        "\u0DB1\u0DD2\u0D9A\u0DD2\u0DAB\u0DD2",
+        "\u0DB6\u0DD2\u0DB1\u0DBB",
+        "\u0DC0\u0DB4\u0DCA",
+        "\u0D89\u0DBD\u0DCA",
+        "\u0D8B\u0DB3\u0DD4\u0D85\u0DB4\u0DCA"
+      ],
+      weekdayNames: [
+        "\u0D89\u0DBB\u0DD2\u0DAF\u0DCF",
+        "\u0DC3\u0DB3\u0DD4\u0DAF\u0DCF",
+        "\u0D85\u0D9F\u0DC4\u0DBB\u0DD4\u0DC0\u0DCF\u0DAF\u0DCF",
+        "\u0DB6\u0DAF\u0DCF\u0DAF\u0DCF",
+        "\u0DB6\u0DCA\u200D\u0DBB\u0DC4\u0DC3\u0DCA\u0DB4\u0DAD\u0DD2\u0DB1\u0DCA\u0DAF\u0DCF",
+        "\u0DC3\u0DD2\u0D9A\u0DD4\u0DBB\u0DCF\u0DAF\u0DCF",
+        "\u0DC3\u0DD9\u0DB1\u0DC3\u0DD4\u0DBB\u0DCF\u0DAF\u0DCF"
+      ],
+      shortWeekdayNames: ["\u0D89", "\u0DC3", "\u0D85", "\u0DB6", "\u0DB6\u0DCA\u200D\u0DBB", "\u0DC3\u0DD2", "\u0DC3\u0DD9"],
+      buddhistEra: "\u0DB6\u0DD4\u0DAF\u0DCA\u0DB0 \u0DC0\u0DBB\u0DCA\u0DC2",
+      today: "\u0D85\u0DAF",
+      clear: "\u0DB4\u0DD2\u0DBB\u0DD2\u0DC3\u0DD2\u0DAF\u0DD4 \u0D9A\u0DBB\u0DB1\u0DCA\u0DB1",
+      selectMonth: "\u0DB8\u0DCF\u0DC3\u0DBA \u0DAD\u0DDD\u0DBB\u0DB1\u0DCA\u0DB1",
+      poyaDay: "\u0DB4\u0DDD\u0DBA \u0DAF\u0DD2\u0DB1"
+    }
+  }
+};
+
+// src/i18n/merge.ts
+function deepMerge(base, overrides) {
+  const result = { ...base };
+  for (const key of Object.keys(overrides)) {
+    const overrideValue = overrides[key];
+    const baseValue = base[key];
+    if (overrideValue !== void 0 && typeof overrideValue === "object" && overrideValue !== null && !Array.isArray(overrideValue) && typeof baseValue === "object" && baseValue !== null && !Array.isArray(baseValue)) {
+      result[key] = deepMerge(baseValue, overrideValue);
+    } else if (overrideValue !== void 0) {
+      result[key] = overrideValue;
+    }
+  }
+  return result;
+}
+
+// src/i18n/resolve.ts
+function resolvePath(source, path) {
+  const value = path.split(".").reduce((current, segment) => {
+    if (current === null || current === void 0 || typeof current !== "object") {
+      return void 0;
+    }
+    return current[segment];
+  }, source);
+  return typeof value === "string" ? value : void 0;
+}
+function getTextFieldStrings(translations, variant) {
+  return translations.textField[variant];
+}
+function resolveTranslation(translationsByLocale, path, locale) {
+  return resolvePath(translationsByLocale[locale], path) ?? resolvePath(translationsByLocale.en, path) ?? path;
+}
+
+// src/i18n/applyTranslations.ts
+var currentLocale = "en";
+var userOverrides = {};
+var localeListeners = /* @__PURE__ */ new Set();
+function getMergedTranslations(locale) {
+  const base = defaultTranslations[locale];
+  const overrides = userOverrides[locale];
+  return overrides ? deepMerge(base, overrides) : base;
+}
+function notifyLocaleListeners() {
+  localeListeners.forEach((listener) => listener());
+}
+function applyDocumentLang(locale) {
+  if (typeof document !== "undefined") {
+    document.documentElement.lang = locale === "si" ? "si" : "en";
+  }
+}
+function applyTranslations(options = {}) {
+  if (options.locale !== void 0) {
+    currentLocale = options.locale;
+    applyDocumentLang(currentLocale);
+    notifyLocaleListeners();
+  }
+  if (options.overrides !== void 0) {
+    userOverrides = deepMerge(userOverrides, options.overrides);
+    notifyLocaleListeners();
+  }
+  return getMergedTranslations(currentLocale);
+}
+function setLocale(locale) {
+  return applyTranslations({ locale });
+}
+function getLocale() {
+  return currentLocale;
+}
+function resetTranslations() {
+  userOverrides = {};
+  notifyLocaleListeners();
+  return getMergedTranslations(currentLocale);
+}
+function t(path, locale = currentLocale) {
+  const merged = {
+    en: getMergedTranslations("en"),
+    si: getMergedTranslations("si")
+  };
+  return resolveTranslation(merged, path, locale);
+}
+function getTextFieldTranslation(variant, locale = currentLocale) {
+  return getTextFieldStrings(getMergedTranslations(locale), variant);
+}
+function getCalendarTranslation(locale = currentLocale) {
+  return getMergedTranslations(locale).calendar ?? defaultTranslations[locale].calendar;
+}
+function subscribeLocaleChange(listener) {
+  localeListeners.add(listener);
+  return () => localeListeners.delete(listener);
+}
+
+// src/components/TextField.ts
+var TextField = class {
+  element;
+  input;
+  labelEl;
+  unsubscribeLocale;
+  localeAware;
+  fixedLabel;
+  fixedPlaceholder;
+  fixedValue;
+  variant;
+  labelKey;
+  placeholderKey;
+  sinhalaExplicit;
+  sinhalaEnabled;
+  constructor(options = {}) {
+    const {
+      variant,
+      labelKey,
+      placeholderKey,
+      label,
+      placeholder,
+      type = "text",
+      value,
+      id = `helaui-field-${Math.random().toString(36).slice(2, 9)}`,
+      sinhala
+    } = options;
+    this.localeAware = !!(variant || labelKey || placeholderKey);
+    this.variant = variant;
+    this.labelKey = labelKey;
+    this.placeholderKey = placeholderKey;
+    this.fixedLabel = label;
+    this.fixedPlaceholder = placeholder;
+    this.fixedValue = value;
+    this.sinhalaExplicit = sinhala !== void 0;
+    this.sinhalaEnabled = sinhala ?? (this.localeAware ? getLocale() === "si" : true);
+    const resolved = this.resolveStrings();
+    this.element = document.createElement("div");
+    this.element.className = "helaui-textfield";
+    if (resolved.label) {
+      this.labelEl = document.createElement("label");
+      this.labelEl.className = "helaui-textfield__label";
+      this.labelEl.htmlFor = id;
+      this.labelEl.textContent = resolved.label;
+      if (this.sinhalaEnabled) this.labelEl.classList.add(SINHALA_FONT_CLASS);
+      this.element.appendChild(this.labelEl);
+    }
+    this.input = document.createElement("input");
+    this.input.className = "helaui-textfield__input";
+    this.input.id = id;
+    this.input.type = type;
+    this.input.placeholder = resolved.placeholder;
+    this.input.value = resolved.value;
+    if (this.sinhalaEnabled) this.input.classList.add(SINHALA_FONT_CLASS);
+    this.element.appendChild(this.input);
+    if (this.localeAware) {
+      this.unsubscribeLocale = subscribeLocaleChange(() => this.applyLocaleStrings());
+    }
+  }
+  resolveStrings() {
+    const fromVariant = this.variant ? getTextFieldTranslation(this.variant) : void 0;
+    const label = this.fixedLabel ?? (this.labelKey ? t(this.labelKey) : fromVariant?.label) ?? "";
+    const placeholder = this.fixedPlaceholder ?? (this.placeholderKey ? t(this.placeholderKey) : fromVariant?.placeholder) ?? "";
+    const value = this.fixedValue ?? fromVariant?.value ?? "";
+    return { label, placeholder, value };
+  }
+  applyLocaleStrings() {
+    const resolved = this.resolveStrings();
+    if (this.labelEl && !this.fixedLabel) {
+      this.labelEl.textContent = resolved.label;
+    }
+    if (!this.fixedPlaceholder) {
+      this.input.placeholder = resolved.placeholder;
+    }
+    if (this.fixedValue === void 0 && this.variant === "disabled") {
+      this.input.value = resolved.value;
+    }
+    if (!this.sinhalaExplicit) {
+      this.setSinhala(getLocale() === "si");
+    }
+  }
+  getValue() {
+    return this.input.value;
+  }
+  setValue(value) {
+    this.input.value = value;
+  }
+  focus() {
+    this.input.focus();
+  }
+  setDisabled(disabled) {
+    this.input.disabled = disabled;
+    this.element.classList.toggle("helaui-textfield--disabled", disabled);
+  }
+  setLabel(label) {
+    if (this.labelEl) {
+      this.labelEl.textContent = label;
+    }
+  }
+  setPlaceholder(placeholder) {
+    this.input.placeholder = placeholder;
+  }
+  setSinhala(enabled) {
+    this.input.classList.toggle(SINHALA_FONT_CLASS, enabled);
+    this.labelEl?.classList.toggle(SINHALA_FONT_CLASS, enabled);
+  }
+  /** Removes locale subscription. Call when discarding the field. */
+  destroy() {
+    this.unsubscribeLocale?.();
+  }
+};
+
+// src/assets/rain/fritter.png
+var fritter_default = "./fritter-INYFVKEH.png";
+
+// src/assets/rain/kokis.png
+var kokis_default = "./kokis-R6R5HA62.png";
+
+// src/assets/rain/leaf.png
+var leaf_default = "./leaf-DEJYVWQI.png";
+
+// src/assets/rain/swirl.png
+var swirl_default = "./swirl-RVLEF6L5.png";
+
+// src/assets/rain/builtinImages.ts
+var BUILTIN_RAIN_IMAGES = [fritter_default, swirl_default, kokis_default, leaf_default];
+
+// src/components/RainBackground.ts
+function randomBetween(min, max) {
+  return min + Math.random() * (max - min);
+}
+function pick(items) {
+  return items[Math.floor(Math.random() * items.length)];
+}
+var RainBackground = class {
+  element;
+  constructor(options = {}) {
+    const {
+      images = [...BUILTIN_RAIN_IMAGES],
+      density = 28,
+      minSize = 28,
+      maxSize = 28,
+      minDuration = 8,
+      maxDuration = 18,
+      target = document.body,
+      zIndex = 0
+    } = options;
+    if (images.length === 0) {
+      throw new Error("RainBackground requires at least one image URL.");
+    }
+    this.element = document.createElement("div");
+    this.element.className = "helaui-rain-background";
+    this.element.setAttribute("aria-hidden", "true");
+    this.element.style.zIndex = String(zIndex);
+    for (let index = 0; index < density; index += 1) {
+      this.element.appendChild(this.createDrop(images, minSize, maxSize, minDuration, maxDuration));
+    }
+    target.prepend(this.element);
+  }
+  createDrop(images, minSize, maxSize, minDuration, maxDuration) {
+    const drop = document.createElement("img");
+    const duration = randomBetween(minDuration, maxDuration);
+    const size = randomBetween(minSize, maxSize);
+    drop.className = "helaui-rain-background__drop";
+    drop.src = pick(images);
+    drop.alt = "";
+    drop.decoding = "async";
+    drop.loading = "lazy";
+    drop.draggable = false;
+    drop.style.setProperty("--helaui-rain-x", `${randomBetween(0, 100)}%`);
+    drop.style.setProperty("--helaui-rain-size", `${size}px`);
+    drop.style.setProperty("--helaui-rain-duration", `${duration.toFixed(2)}s`);
+    drop.style.setProperty("--helaui-rain-delay", `-${randomBetween(0, duration).toFixed(2)}s`);
+    drop.style.setProperty("--helaui-rain-rotation", `${randomBetween(-35, 35).toFixed(1)}deg`);
+    drop.style.setProperty("--helaui-rain-spin", `${randomBetween(90, 360).toFixed(0)}deg`);
+    drop.style.setProperty("--helaui-rain-drift", `${randomBetween(-40, 40).toFixed(0)}px`);
+    return drop;
+  }
+  /** Removes the background from the DOM. */
+  destroy() {
+    this.element.remove();
+  }
+};
+var DEFAULT_RAIN_IMAGES = ["fritter.png", "swirl.png", "kokis.png", "leaf.png"];
+function getDefaultRainImageUrls(basePath) {
+  const normalizedBase = basePath.endsWith("/") ? basePath : `${basePath}/`;
+  return DEFAULT_RAIN_IMAGES.map((name) => `${normalizedBase}${name}`);
+}
+
+// src/components/Calendar.ts
+var SINHALA_NUMERALS = ["\u0DE6", "\u0DE7", "\u0DE8", "\u0DE9", "\u0DEA", "\u0DEB", "\u0DEC", "\u0DED", "\u0DEE", "\u0DEF"];
+function formatSinhalaNumeral(num) {
+  return num.toString().replace(/[0-9]/g, (digit) => SINHALA_NUMERALS[parseInt(digit, 10)]);
+}
+var SINHALA_MONTH_NAMES = [
+  "\u0DAF\u0DD4\u0DBB\u0DD4\u0DAD\u0DD4",
+  "\u0DB1\u0DC0\u0DB8\u0DCA",
+  "\u0DB8\u0DD0\u0DAF\u0DD2\u0DB1\u0DCA",
+  "\u0DB6\u0D9A\u0DCA",
+  "\u0DC0\u0DD9\u0DC3\u0D9A\u0DCA",
+  "\u0DB4\u0DDC\u0DC3\u0DDC\u0DB1\u0DCA",
+  "\u0D87\u0DC3\u0DC5",
+  "\u0DB1\u0DD2\u0D9A\u0DD2\u0DAB\u0DD2",
+  "\u0DB6\u0DD2\u0DB1\u0DBB",
+  "\u0DC0\u0DB4\u0DCA",
+  "\u0D89\u0DBD\u0DCA",
+  "\u0D8B\u0DB3\u0DD4\u0D85\u0DB4\u0DCA"
+];
+var Calendar = class {
+  element;
+  selectedDate = null;
+  viewYear;
+  viewMonth;
+  // 0-11
+  showBuddhistEra;
+  highlightToday;
+  sinhalaExplicit;
+  sinhalaEnabled;
+  minDate;
+  maxDate;
+  poyaDatesSet;
+  onSelectCallback;
+  onMonthChangeCallback;
+  unsubscribeLocale;
+  /** True when the caller passed an explicit height — prevents auto six-row adjustment */
+  customHeight;
+  // DOM Elements
+  monthTitleEl;
+  subTitleEl;
+  eraBadgeEl;
+  weekdaysEl;
+  daysGridEl;
+  footerEl;
+  selectedTextEl;
+  monthPopoverEl = null;
+  constructor(options = {}) {
+    const {
+      value,
+      initialDate,
+      minDate,
+      maxDate,
+      showBuddhistEra = true,
+      sinhala,
+      poyaDates = [],
+      highlightToday = true,
+      width,
+      height,
+      onSelect,
+      onMonthChange
+    } = options;
+    if (value) {
+      this.selectedDate = typeof value === "string" ? new Date(value) : new Date(value);
+    }
+    const initRef = this.selectedDate || initialDate || /* @__PURE__ */ new Date();
+    this.viewYear = initRef.getFullYear();
+    this.viewMonth = initRef.getMonth();
+    this.minDate = minDate;
+    this.maxDate = maxDate;
+    this.showBuddhistEra = showBuddhistEra;
+    this.highlightToday = highlightToday;
+    this.onSelectCallback = onSelect;
+    this.onMonthChangeCallback = onMonthChange;
+    this.poyaDatesSet = new Set(
+      poyaDates.map(
+        (d) => typeof d === "string" ? d : `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(
+          d.getDate()
+        ).padStart(2, "0")}`
+      )
+    );
+    this.sinhalaExplicit = sinhala !== void 0;
+    this.sinhalaEnabled = sinhala ?? getLocale() === "si";
+    this.customHeight = height !== void 0;
+    this.element = document.createElement("div");
+    this.element.className = "helaui-calendar";
+    this.element.style.width = width ?? "360px";
+    this.element.style.height = height ?? "420px";
+    if (this.sinhalaEnabled) this.element.classList.add(SINHALA_FONT_CLASS);
+    this.renderSkeleton();
+    this.render();
+    this.unsubscribeLocale = subscribeLocaleChange(() => {
+      if (!this.sinhalaExplicit) {
+        this.setSinhala(getLocale() === "si");
+      } else {
+        this.render();
+      }
+    });
+  }
+  renderSkeleton() {
+    const header = document.createElement("div");
+    header.className = "helaui-calendar__header";
+    const prevBtn = document.createElement("button");
+    prevBtn.type = "button";
+    prevBtn.className = "helaui-calendar__nav-btn";
+    prevBtn.innerHTML = "&#10094;";
+    prevBtn.ariaLabel = "Previous Month";
+    prevBtn.addEventListener("click", () => this.prevMonth());
+    const titleWrap = document.createElement("div");
+    titleWrap.className = "helaui-calendar__title-wrap";
+    titleWrap.title = "Click to choose month";
+    titleWrap.addEventListener("click", (e) => {
+      e.stopPropagation();
+      this.toggleMonthPopover();
+    });
+    this.monthTitleEl = document.createElement("span");
+    this.monthTitleEl.className = "helaui-calendar__month-name";
+    this.subTitleEl = document.createElement("span");
+    this.subTitleEl.className = "helaui-calendar__sub-name";
+    this.eraBadgeEl = document.createElement("span");
+    this.eraBadgeEl.className = "helaui-calendar__era-badge";
+    titleWrap.appendChild(this.monthTitleEl);
+    titleWrap.appendChild(this.subTitleEl);
+    const nextBtn = document.createElement("button");
+    nextBtn.type = "button";
+    nextBtn.className = "helaui-calendar__nav-btn";
+    nextBtn.innerHTML = "&#10095;";
+    nextBtn.ariaLabel = "Next Month";
+    nextBtn.addEventListener("click", () => this.nextMonth());
+    header.appendChild(prevBtn);
+    header.appendChild(titleWrap);
+    header.appendChild(nextBtn);
+    this.weekdaysEl = document.createElement("div");
+    this.weekdaysEl.className = "helaui-calendar__weekdays";
+    this.daysGridEl = document.createElement("div");
+    this.daysGridEl.className = "helaui-calendar__days";
+    this.footerEl = document.createElement("div");
+    this.footerEl.className = "helaui-calendar__footer";
+    const todayBtn = document.createElement("button");
+    todayBtn.type = "button";
+    todayBtn.className = "helaui-calendar__footer-btn";
+    todayBtn.dataset.action = "today";
+    todayBtn.addEventListener("click", () => this.goToToday());
+    this.selectedTextEl = document.createElement("span");
+    this.selectedTextEl.className = "helaui-calendar__selected-text";
+    const clearBtn = document.createElement("button");
+    clearBtn.type = "button";
+    clearBtn.className = "helaui-calendar__footer-btn";
+    clearBtn.dataset.action = "clear";
+    clearBtn.addEventListener("click", () => this.clear());
+    this.footerEl.appendChild(todayBtn);
+    this.footerEl.appendChild(this.selectedTextEl);
+    this.footerEl.appendChild(clearBtn);
+    this.element.appendChild(header);
+    this.element.appendChild(this.weekdaysEl);
+    this.element.appendChild(this.daysGridEl);
+    this.element.appendChild(this.footerEl);
+    document.addEventListener("click", (e) => {
+      if (this.monthPopoverEl && !this.element.contains(e.target)) {
+        this.closeMonthPopover();
+      }
+    });
+  }
+  render() {
+    const locale = getLocale();
+    const isSinhalaMode = this.sinhalaEnabled || locale === "si";
+    const calendarStrings = getCalendarTranslation();
+    const sinhalaMonthName = calendarStrings.sinhalaMonthNames?.[this.viewMonth] ?? SINHALA_MONTH_NAMES[this.viewMonth];
+    const englishMonthName = calendarStrings.monthNames?.[this.viewMonth] ?? "Month";
+    const beYear = this.viewYear + 543;
+    const yearDisplay = this.viewYear.toString();
+    const beYearDisplay = beYear.toString();
+    if (isSinhalaMode) {
+      this.monthTitleEl.textContent = sinhalaMonthName;
+      this.subTitleEl.textContent = yearDisplay;
+      if (this.showBuddhistEra) {
+        this.eraBadgeEl.textContent = `\u0DB6\u0DD4.\u0DC0. ${beYearDisplay}`;
+        this.subTitleEl.appendChild(this.eraBadgeEl);
+      }
+    } else {
+      this.monthTitleEl.textContent = englishMonthName;
+      this.subTitleEl.textContent = yearDisplay;
+      if (this.showBuddhistEra) {
+        this.eraBadgeEl.textContent = `BE ${beYearDisplay}`;
+        this.subTitleEl.appendChild(this.eraBadgeEl);
+      }
+    }
+    this.weekdaysEl.innerHTML = "";
+    const shortWeekdays = calendarStrings.shortWeekdayNames || ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+    const fullWeekdays = calendarStrings.weekdayNames || [
+      "Sunday",
+      "Monday",
+      "Tuesday",
+      "Wednesday",
+      "Thursday",
+      "Friday",
+      "Saturday"
+    ];
+    shortWeekdays.forEach((shortDay, i) => {
+      const dayEl = document.createElement("div");
+      dayEl.className = "helaui-calendar__weekday";
+      if (i === 0 || i === 6) {
+        dayEl.classList.add("helaui-calendar__weekday--weekend");
+      }
+      dayEl.textContent = shortDay;
+      dayEl.title = fullWeekdays[i];
+      this.weekdaysEl.appendChild(dayEl);
+    });
+    this.daysGridEl.innerHTML = "";
+    const firstDayIndex = new Date(this.viewYear, this.viewMonth, 1).getDay();
+    const daysInMonth = new Date(this.viewYear, this.viewMonth + 1, 0).getDate();
+    const daysInPrevMonth = new Date(this.viewYear, this.viewMonth, 0).getDate();
+    const today = /* @__PURE__ */ new Date();
+    for (let i = firstDayIndex - 1; i >= 0; i--) {
+      const dayNum = daysInPrevMonth - i;
+      const prevDate = new Date(this.viewYear, this.viewMonth - 1, dayNum);
+      const dayBtn = this.createDayButton(prevDate, dayNum, true);
+      this.daysGridEl.appendChild(dayBtn);
+    }
+    for (let dayNum = 1; dayNum <= daysInMonth; dayNum++) {
+      const currDate = new Date(this.viewYear, this.viewMonth, dayNum);
+      const isToday = this.highlightToday && today.getFullYear() === currDate.getFullYear() && today.getMonth() === currDate.getMonth() && today.getDate() === currDate.getDate();
+      const isSelected = !!this.selectedDate && this.selectedDate.getFullYear() === currDate.getFullYear() && this.selectedDate.getMonth() === currDate.getMonth() && this.selectedDate.getDate() === currDate.getDate();
+      const dayBtn = this.createDayButton(currDate, dayNum, false, isToday, isSelected);
+      this.daysGridEl.appendChild(dayBtn);
+    }
+    const totalCells = firstDayIndex + daysInMonth;
+    const remainingCells = (7 - totalCells % 7) % 7;
+    for (let dayNum = 1; dayNum <= remainingCells; dayNum++) {
+      const nextDate = new Date(this.viewYear, this.viewMonth + 1, dayNum);
+      const dayBtn = this.createDayButton(nextDate, dayNum, true);
+      this.daysGridEl.appendChild(dayBtn);
+    }
+    const needsSixRows = firstDayIndex + daysInMonth > 35;
+    this.element.classList.toggle("helaui-calendar--six-rows", needsSixRows && !this.customHeight);
+    if (!this.customHeight) {
+      this.element.style.height = needsSixRows ? "468px" : "420px";
+    }
+    const todayBtn = this.footerEl.querySelector('[data-action="today"]');
+    if (todayBtn) todayBtn.textContent = calendarStrings.today || "Today";
+    const clearBtn = this.footerEl.querySelector('[data-action="clear"]');
+    if (clearBtn) clearBtn.textContent = calendarStrings.clear || "Clear";
+    this.updateSelectedText();
+  }
+  createDayButton(date, dayNum, isOutside, isToday = false, isSelected = false) {
+    const btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "helaui-calendar__day";
+    btn.textContent = dayNum.toString();
+    const dateKey = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(
+      2,
+      "0"
+    )}-${String(date.getDate()).padStart(2, "0")}`;
+    if (isOutside) btn.classList.add("helaui-calendar__day--outside");
+    if (isToday) btn.classList.add("helaui-calendar__day--today");
+    if (isSelected) btn.classList.add("helaui-calendar__day--selected");
+    if (this.poyaDatesSet.has(dateKey) || date.getDate() === 15 && !isOutside) {
+      btn.classList.add("helaui-calendar__day--poya");
+      const poyaName = SINHALA_MONTH_NAMES[date.getMonth()] + " \u0DB4\u0DDD\u0DBA";
+      btn.title = `${dateKey} (${poyaName})`;
+    }
+    if (this.minDate && date < this.minDate || this.maxDate && date > this.maxDate) {
+      btn.classList.add("helaui-calendar__day--disabled");
+      btn.disabled = true;
+    } else {
+      btn.addEventListener("click", () => this.selectDate(date));
+    }
+    return btn;
+  }
+  updateSelectedText() {
+    if (!this.selectedDate) {
+      this.selectedTextEl.textContent = "";
+      return;
+    }
+    this.selectedTextEl.textContent = this.getFormattedSinhalaDate(this.selectedDate);
+  }
+  /** Gets formatted string e.g. "2026 වෙසක් 15" (Western digits) */
+  getFormattedSinhalaDate(date) {
+    const year = date.getFullYear();
+    const monthName = SINHALA_MONTH_NAMES[date.getMonth()];
+    const day = date.getDate();
+    return `${year} ${monthName} ${day}`;
+  }
+  selectDate(date) {
+    this.selectedDate = new Date(date);
+    this.viewYear = date.getFullYear();
+    this.viewMonth = date.getMonth();
+    this.render();
+    const formatted = this.getFormattedSinhalaDate(this.selectedDate);
+    this.onSelectCallback?.(this.selectedDate, formatted);
+  }
+  getValue() {
+    return this.selectedDate ? new Date(this.selectedDate) : null;
+  }
+  setValue(value) {
+    if (!value) {
+      this.selectedDate = null;
+    } else {
+      this.selectedDate = typeof value === "string" ? new Date(value) : new Date(value);
+      this.viewYear = this.selectedDate.getFullYear();
+      this.viewMonth = this.selectedDate.getMonth();
+    }
+    this.render();
+  }
+  setSinhala(enabled) {
+    this.sinhalaEnabled = enabled;
+    this.element.classList.toggle(SINHALA_FONT_CLASS, enabled);
+    this.render();
+  }
+  setShowBuddhistEra(show) {
+    this.showBuddhistEra = show;
+    this.render();
+  }
+  nextMonth() {
+    if (this.viewMonth === 11) {
+      this.viewMonth = 0;
+      this.viewYear++;
+    } else {
+      this.viewMonth++;
+    }
+    this.render();
+    this.onMonthChangeCallback?.(this.viewYear, this.viewMonth);
+  }
+  prevMonth() {
+    if (this.viewMonth === 0) {
+      this.viewMonth = 11;
+      this.viewYear--;
+    } else {
+      this.viewMonth--;
+    }
+    this.render();
+    this.onMonthChangeCallback?.(this.viewYear, this.viewMonth);
+  }
+  goToToday() {
+    const today = /* @__PURE__ */ new Date();
+    this.viewYear = today.getFullYear();
+    this.viewMonth = today.getMonth();
+    this.selectDate(today);
+  }
+  clear() {
+    this.selectedDate = null;
+    this.render();
+  }
+  toggleMonthPopover() {
+    if (this.monthPopoverEl) {
+      this.closeMonthPopover();
+    } else {
+      this.openMonthPopover();
+    }
+  }
+  openMonthPopover() {
+    this.closeMonthPopover();
+    this.monthPopoverEl = document.createElement("div");
+    this.monthPopoverEl.className = "helaui-calendar__month-popover";
+    const isSinhalaMode = this.sinhalaEnabled || getLocale() === "si";
+    const calendarStrings = getCalendarTranslation();
+    SINHALA_MONTH_NAMES.forEach((siMonth, i) => {
+      const item = document.createElement("button");
+      item.type = "button";
+      item.className = "helaui-calendar__month-item";
+      if (i === this.viewMonth) {
+        item.classList.add("helaui-calendar__month-item--active");
+      }
+      const engMonth = calendarStrings.monthNames ? calendarStrings.monthNames[i] : "";
+      item.textContent = isSinhalaMode ? siMonth : engMonth;
+      item.addEventListener("click", (e) => {
+        e.stopPropagation();
+        this.viewMonth = i;
+        this.closeMonthPopover();
+        this.render();
+        this.onMonthChangeCallback?.(this.viewYear, this.viewMonth);
+      });
+      this.monthPopoverEl.appendChild(item);
+    });
+    this.element.appendChild(this.monthPopoverEl);
+  }
+  closeMonthPopover() {
+    if (this.monthPopoverEl) {
+      this.monthPopoverEl.remove();
+      this.monthPopoverEl = null;
+    }
+  }
+  /** Cleans up subscriptions and event listeners */
+  destroy() {
+    this.unsubscribeLocale?.();
+    this.closeMonthPopover();
+  }
+};
+
+// src/assets/sun-mandala/ira-handa.png
+var ira_handa_default = "./ira-handa-7DIWZWI4.png";
+
+// src/assets/sun-mandala/builtinImage.ts
+var BUILTIN_SUN_MANDALA_IMAGE = ira_handa_default;
+
+// src/components/SunMandala.ts
+var SunMandala = class {
+  element;
+  spinEl;
+  faceEl;
+  spinImg;
+  faceImg;
+  constructor(options = {}) {
+    const {
+      src = BUILTIN_SUN_MANDALA_IMAGE,
+      alt = "Sri Lankan Ira Handa sun mandala",
+      size = "280px",
+      duration = 36,
+      faceRadius = "22%",
+      paused = false
+    } = options;
+    this.element = document.createElement("div");
+    this.element.className = "helaui-sun-mandala";
+    this.element.style.setProperty("--helaui-sun-mandala-size", size);
+    this.element.style.setProperty("--helaui-sun-mandala-duration", `${duration}s`);
+    this.element.style.setProperty("--helaui-sun-mandala-face-radius", faceRadius);
+    this.element.setAttribute("role", "img");
+    this.element.setAttribute("aria-label", alt);
+    this.spinEl = document.createElement("div");
+    this.spinEl.className = "helaui-sun-mandala__spin";
+    this.spinEl.setAttribute("aria-hidden", "true");
+    this.spinImg = document.createElement("img");
+    this.spinImg.className = "helaui-sun-mandala__image";
+    this.spinImg.src = src;
+    this.spinImg.alt = "";
+    this.spinImg.draggable = false;
+    this.spinImg.decoding = "async";
+    this.spinEl.appendChild(this.spinImg);
+    this.faceEl = document.createElement("div");
+    this.faceEl.className = "helaui-sun-mandala__face";
+    this.faceEl.setAttribute("aria-hidden", "true");
+    this.faceImg = document.createElement("img");
+    this.faceImg.className = "helaui-sun-mandala__image";
+    this.faceImg.src = src;
+    this.faceImg.alt = "";
+    this.faceImg.draggable = false;
+    this.faceImg.decoding = "async";
+    this.faceEl.appendChild(this.faceImg);
+    this.element.appendChild(this.spinEl);
+    this.element.appendChild(this.faceEl);
+    if (paused) this.setPaused(true);
+  }
+  /** Pause or resume the aura rotation. */
+  setPaused(paused) {
+    this.element.classList.toggle("helaui-sun-mandala--paused", paused);
+  }
+  isPaused() {
+    return this.element.classList.contains("helaui-sun-mandala--paused");
+  }
+  /** Set full-circle rotation duration in seconds. */
+  setDuration(seconds) {
+    this.element.style.setProperty("--helaui-sun-mandala-duration", `${seconds}s`);
+  }
+  /** Update display size (width & height). */
+  setSize(size) {
+    this.element.style.setProperty("--helaui-sun-mandala-size", size);
+  }
+  /** Update the static face clip radius. */
+  setFaceRadius(radius) {
+    this.element.style.setProperty("--helaui-sun-mandala-face-radius", radius);
+  }
+  destroy() {
+    this.element.remove();
+  }
+};
+
+// src/theme/defaultTheme.ts
+var defaultTheme = {
+  primary: "#8D153A",
+  secondary: "#FFBE00",
+  success: "#005B33",
+  accent: "#FF7A00",
+  black: "#000000",
+  white: "#FFFFFF",
+  grey: "#808080"
+};
+
+// src/theme/themeVars.ts
+var THEME_VAR_MAP = {
+  primary: "--helaui-primary",
+  secondary: "--helaui-secondary",
+  success: "--helaui-success",
+  accent: "--helaui-accent",
+  black: "--helaui-black",
+  white: "--helaui-white",
+  grey: "--helaui-grey"
+};
+
+// src/theme/applyTheme.ts
+function hexToRgba(hex, alpha) {
+  const normalized = hex.replace("#", "");
+  const full = normalized.length === 3 ? normalized.split("").map((char) => char + char).join("") : normalized.padStart(6, "0").slice(0, 6);
+  const r = Number.parseInt(full.slice(0, 2), 16);
+  const g = Number.parseInt(full.slice(2, 4), 16);
+  const b = Number.parseInt(full.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+function applySemanticTokens(theme, target) {
+  target.style.setProperty("--helaui-text", theme.black);
+  target.style.setProperty("--helaui-text-muted", theme.grey);
+  target.style.setProperty("--helaui-text-inverse", theme.white);
+  target.style.setProperty("--helaui-background", theme.white);
+  target.style.setProperty("--helaui-surface", theme.white);
+  target.style.setProperty("--helaui-focus", theme.primary);
+  target.style.setProperty("--helaui-focus-ring", hexToRgba(theme.primary, 0.2));
+}
+function applyTheme(overrides = {}, target = document.documentElement) {
+  const theme = { ...defaultTheme, ...overrides };
+  Object.keys(THEME_VAR_MAP).forEach((key) => {
+    target.style.setProperty(THEME_VAR_MAP[key], theme[key]);
+  });
+  applySemanticTokens(theme, target);
+  return theme;
+}
+function resetTheme(target = document.documentElement) {
+  Object.values(THEME_VAR_MAP).forEach((varName) => {
+    target.style.removeProperty(varName);
+  });
+  [
+    "--helaui-text",
+    "--helaui-text-muted",
+    "--helaui-text-inverse",
+    "--helaui-background",
+    "--helaui-surface",
+    "--helaui-focus",
+    "--helaui-focus-ring"
+  ].forEach((varName) => {
+    target.style.removeProperty(varName);
+  });
+  return { ...defaultTheme };
+}
+function createThemeStyle(theme = {}) {
+  const merged = { ...defaultTheme, ...theme };
+  return Object.keys(THEME_VAR_MAP).map((key) => `${THEME_VAR_MAP[key]}: ${merged[key]};`).join(" ");
+}
+export {
+  BUILTIN_RAIN_IMAGES,
+  BUILTIN_SUN_MANDALA_IMAGE,
+  Calendar,
+  DEFAULT_RAIN_IMAGES,
+  RainBackground,
+  SINHALA_FONT_CLASS,
+  SINHALA_FONT_FAMILY,
+  SINHALA_MONTH_NAMES,
+  SunMandala,
+  THEME_VAR_MAP,
+  TextField,
+  applySinhalaFont,
+  applyTheme,
+  applyTranslations,
+  createThemeStyle,
+  defaultTheme,
+  defaultTranslations,
+  formatSinhalaNumeral,
+  getCalendarTranslation,
+  getDefaultRainImageUrls,
+  getLocale,
+  getTextFieldTranslation,
+  resetTheme,
+  resetTranslations,
+  setLocale,
+  sinhalaFontStyles,
+  subscribeLocaleChange,
+  t
+};