@mccustomapps/helaui 0.1.12 → 0.1.15

package/README.md

@@ -16,6 +16,8 @@
   - [TextField](#textfield)
   - [Calendar](#calendar)
   - [SunMandala](#sunmandala)
+  - [DestinationCard](#destinationcard)
+  - [Button](#button)
   - [RainBackground](#rainbackground)
 - [Theming](#theming)
 - [i18n / Localisation](#i18n--localisation)
@@ -40,12 +42,14 @@ npm install @mccustomapps/helaui
 import '@mccustomapps/helaui/textfield.css';
 import '@mccustomapps/helaui/calendar.css';
 import '@mccustomapps/helaui/sun-mandala.css';
+import '@mccustomapps/helaui/destination-card.css';
+import '@mccustomapps/helaui/button.css';
 import '@mccustomapps/helaui/rain-background.css';
 import '@mccustomapps/helaui/sinhala.css';   // Sinhala font face
 import '@mccustomapps/helaui/theme.css';      // CSS custom-property tokens
 
 // Import components
-import { TextField, Calendar, SunMandala, RainBackground } from '@mccustomapps/helaui';
+import { TextField, Calendar, SunMandala, DestinationCard, Button, RainBackground } from '@mccustomapps/helaui';
 
 // Mount components
 const field = new TextField({ variant: 'name' });
@@ -205,6 +209,89 @@ const mandala = new SunMandala({ src: '/my-mandala.png' });
 
 ---
 
+### DestinationCard
+
+A decorative parchment **card shell** — cream background, teal/gold frame, side Sinhala script, and a peacock/lotus footer. The inner area is empty so you can place your own content.
+
+```js
+import { DestinationCard } from '@mccustomapps/helaui';
+import '@mccustomapps/helaui/destination-card.css';
+
+const card = new DestinationCard({
+  height: '280px',
+});
+
+document.getElementById('container').appendChild(card.element);
+
+// Optional: put your own content in the empty inner area
+card.body.appendChild(document.createElement('div'));
+```
+
+**Options — `DestinationCardOptions`**
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `content` | `HTMLElement \| string` | — | Inner content |
+| `height` | `string` | `'280px'` | Minimum height of the inner area |
+| `backdrop` | `boolean` | `false` | Blurred photo stage behind the card |
+| `backdropImage` | `string` | — | Image used for the blurred stage |
+
+**Methods**
+
+```js
+card.setContent(node)   // replace inner content
+card.destroy()
+```
+
+---
+
+### Button
+
+Two pill buttons from the travel-card design: a filled terracotta **primary** action and a teal **outline** secondary action.
+
+```js
+import { Button } from '@mccustomapps/helaui';
+import '@mccustomapps/helaui/button.css';
+
+const book = new Button({
+  variant: 'primary',     // filled — “Book Your Trip”
+  onClick: () => {},
+});
+
+const explore = new Button({
+  variant: 'secondary',   // outline — “Explore Now”
+  onClick: () => {},
+});
+
+const row = document.createElement('div');
+row.className = 'helaui-button-row';
+row.append(book.element, explore.element);
+document.getElementById('container').appendChild(row);
+```
+
+**Options — `ButtonOptions`**
+
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `variant` | `'primary' \| 'secondary'` | `'primary'` | Filled terracotta or teal outline |
+| `label` | `string` | locale | Explicit label |
+| `labelKey` | `string` | — | i18n dot-path for the label |
+| `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | Native button type |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `onClick` | `() => void` | — | Click handler |
+| `sinhala` | `boolean` | auto | Force Sinhala font |
+
+**Methods**
+
+```js
+button.setLabel('Reserve')
+button.setDisabled(true)
+button.setSinhala(true)
+button.destroy()
+```
+
+---
+
 ### RainBackground
 
 An animated **tropical rain** background with falling food/leaf sprites. Built-in artwork is inlined in the JS bundle (no extra files to copy into `public/`).
@@ -339,6 +426,8 @@ import '@mccustomapps/helaui/sinhala.css';         // Sinhala font face
 import '@mccustomapps/helaui/textfield.css';       // TextField styles
 import '@mccustomapps/helaui/calendar.css';        // Calendar styles
 import '@mccustomapps/helaui/sun-mandala.css';     // SunMandala styles
+import '@mccustomapps/helaui/destination-card.css'; // DestinationCard styles
+import '@mccustomapps/helaui/button.css';          // Button styles
 import '@mccustomapps/helaui/rain-background.css'; // RainBackground styles
 ```
 
@@ -353,6 +442,8 @@ import type {
   TextFieldOptions,
   CalendarOptions,
   SunMandalaOptions,
+  DestinationCardOptions,
+  ButtonOptions,
   RainBackgroundOptions,
   HelaTheme,
   HelaThemeKey,

package/dist/button.css

@@ -0,0 +1,82 @@
+/* HelaUI Button — pill actions from the destination card design */
+
+.helaui-button {
+  --helaui-button-primary: #c66b3d;
+  --helaui-button-secondary: #1a4d4e;
+
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 44px;
+  padding: 10px 22px;
+  border-radius: 999px;
+  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+  font-size: 0.88rem;
+  font-weight: 700;
+  line-height: 1.2;
+  letter-spacing: 0.01em;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease,
+    background 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+
+.helaui-button:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px var(--helaui-focus-ring, rgba(141, 21, 58, 0.2));
+}
+
+.helaui-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  transform: none;
+  box-shadow: none;
+}
+
+.helaui-button--primary {
+  border: none;
+  color: var(--helaui-white, #ffffff);
+  background: var(--helaui-button-primary);
+  box-shadow: 0 6px 14px rgba(198, 107, 61, 0.38);
+}
+
+.helaui-button--primary:hover:not(:disabled) {
+  transform: translateY(-1px);
+  background: color-mix(in srgb, var(--helaui-button-primary) 88%, #000);
+}
+
+.helaui-button--primary:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.helaui-button--secondary {
+  border: 1.5px solid var(--helaui-button-secondary);
+  color: var(--helaui-button-secondary);
+  background: transparent;
+}
+
+.helaui-button--secondary:hover:not(:disabled) {
+  background: rgba(26, 77, 78, 0.06);
+}
+
+.helaui-button-row {
+  display: flex;
+  gap: 10px;
+  width: 100%;
+  align-items: stretch;
+}
+
+.helaui-button-row .helaui-button {
+  flex: 1;
+}
+
+@media (max-width: 420px) {
+  .helaui-button-row {
+    flex-direction: column;
+  }
+}

package/dist/destination-card.css

@@ -0,0 +1,137 @@
+/* HelaUI Destination Card — decorative parchment shell */
+
+.helaui-destination-card-stage {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: stretch;
+  padding: 28px 20px;
+  overflow: hidden;
+  border-radius: 32px;
+  isolation: isolate;
+}
+
+.helaui-destination-card-stage__blur {
+  position: absolute;
+  inset: -24px;
+  background-size: cover;
+  background-position: center;
+  filter: blur(22px) saturate(1.1);
+  transform: scale(1.08);
+  z-index: 0;
+}
+
+.helaui-destination-card-stage__blur::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: rgba(20, 28, 24, 0.28);
+}
+
+.helaui-destination-card {
+  --helaui-card-cream: #f9f3e6;
+  --helaui-card-ink: #2d1e17;
+  --helaui-card-teal: #1a4d4e;
+  --helaui-card-orange: var(--helaui-accent, #c86837);
+
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  width: min(100%, 380px);
+  margin: 0 auto;
+  padding: 14px 16px 0;
+  box-sizing: border-box;
+  background:
+    radial-gradient(circle at 12% 18%, rgba(26, 77, 78, 0.06), transparent 28%),
+    radial-gradient(circle at 88% 72%, rgba(200, 104, 55, 0.08), transparent 32%),
+    var(--helaui-card-cream);
+  color: var(--helaui-card-ink);
+  border: 1.5px solid var(--helaui-card-teal);
+  border-radius: 30px;
+  box-shadow:
+    inset 0 0 0 5px var(--helaui-card-cream),
+    inset 0 0 0 6.5px #c4a574,
+    0 18px 40px rgba(26, 32, 24, 0.28);
+  overflow: hidden;
+  font-family: Georgia, 'Times New Roman', serif;
+}
+
+.helaui-destination-card__watermark {
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  opacity: 0.09;
+  background-image:
+    radial-gradient(circle at 50% 50%, transparent 42%, rgba(26, 77, 78, 0.55) 43%, transparent 46%),
+    repeating-radial-gradient(circle at 50% 50%, rgba(26, 77, 78, 0.35) 0 1px, transparent 1px 18px);
+  background-size: 220px 220px, 220px 220px;
+  background-position: 80% 30%, 10% 80%;
+  mix-blend-mode: multiply;
+}
+
+.helaui-destination-card__script {
+  pointer-events: none;
+  position: absolute;
+  top: 22%;
+  right: 8px;
+  writing-mode: vertical-rl;
+  font-size: 0.72rem;
+  letter-spacing: 0.28em;
+  color: #c4a574;
+  opacity: 0.55;
+  z-index: 2;
+}
+
+.helaui-destination-card__body {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 280px;
+  padding: 8px 4px 16px;
+}
+
+.helaui-destination-card__footer {
+  position: relative;
+  height: 92px;
+  margin: 4px -16px 0;
+  background: linear-gradient(90deg, #c86837 0%, #b8432f 55%, #c86837 100%);
+  overflow: hidden;
+}
+
+.helaui-destination-card__footer::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  opacity: 0.22;
+  background-image:
+    radial-gradient(circle at 20% 40%, #f9f3e6 0 10%, transparent 11%),
+    radial-gradient(circle at 70% 70%, #f9f3e6 0 8%, transparent 9%),
+    radial-gradient(circle at 50% 20%, transparent 40%, rgba(249, 243, 230, 0.5) 41%, transparent 44%);
+}
+
+.helaui-destination-card__peacocks,
+.helaui-destination-card__lotus {
+  position: absolute;
+  bottom: -4px;
+  z-index: 1;
+}
+
+.helaui-destination-card__peacocks {
+  left: 6px;
+  width: 58%;
+}
+
+.helaui-destination-card__peacocks svg,
+.helaui-destination-card__lotus svg {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.helaui-destination-card__lotus {
+  right: 4px;
+  width: 34%;
+}

package/dist/index.cjs

@@ -22,8 +22,10 @@ var index_exports = {};
 __export(index_exports, {
   BUILTIN_RAIN_IMAGES: () => BUILTIN_RAIN_IMAGES,
   BUILTIN_SUN_MANDALA_IMAGE: () => BUILTIN_SUN_MANDALA_IMAGE,
+  Button: () => Button,
   Calendar: () => Calendar,
   DEFAULT_RAIN_IMAGES: () => DEFAULT_RAIN_IMAGES,
+  DestinationCard: () => DestinationCard,
   RainBackground: () => RainBackground,
   SINHALA_FONT_CLASS: () => SINHALA_FONT_CLASS,
   SINHALA_FONT_FAMILY: () => SINHALA_FONT_FAMILY,
@@ -38,8 +40,10 @@ __export(index_exports, {
   defaultTheme: () => defaultTheme,
   defaultTranslations: () => defaultTranslations,
   formatSinhalaNumeral: () => formatSinhalaNumeral,
+  getButtonTranslation: () => getButtonTranslation,
   getCalendarTranslation: () => getCalendarTranslation,
   getDefaultRainImageUrls: () => getDefaultRainImageUrls,
+  getDestinationCardTranslation: () => getDestinationCardTranslation,
   getLocale: () => getLocale,
   getTextFieldTranslation: () => getTextFieldTranslation,
   resetTheme: () => resetTheme,
@@ -119,6 +123,18 @@ var defaultTranslations = {
       clear: "Clear",
       selectMonth: "Select Month",
       poyaDay: "Poya Day"
+    },
+    destinationCard: {
+      eyebrow: "PlaceHolder",
+      reviewsLabel: "Reviews",
+      bookTrip: "PlaceHolder",
+      exploreNow: "PlaceHolder",
+      startFrom: "Start from",
+      perPerson: "/ person"
+    },
+    button: {
+      primary: "PlaceHolder",
+      secondary: "PlaceHolder"
     }
   },
   si: {
@@ -176,6 +192,18 @@ var defaultTranslations = {
       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"
+    },
+    destinationCard: {
+      eyebrow: "\u0DC1\u0DCA\u200D\u0DBB\u0DD3 \u0DBD\u0D82\u0D9A\u0DCF\u0DC0 \u0DC3\u0DDC\u0DBA\u0DCF \u0DB6\u0DBD\u0DB1\u0DCA\u0DB1",
+      reviewsLabel: "\u0DC3\u0DB8\u0DCF\u0DBD\u0DDD\u0DA0\u0DB1",
+      bookTrip: "\u0D94\u0DB6\u0DDA \u0DC3\u0D82\u0DA0\u0DCF\u0DBB\u0DBA \u0DC0\u0DD9\u0DB1\u0DCA\u0D9A\u0DBB\u0DC0\u0DB1\u0DCA\u0DB1",
+      exploreNow: "\u0DAF\u0DD0\u0DB1\u0DCA \u0D9C\u0DC0\u0DDA\u0DC2\u0DAB\u0DBA \u0D9A\u0DBB\u0DB1\u0DCA\u0DB1",
+      startFrom: "\u0D86\u0DBB\u0DB8\u0DCA\u0DB7\u0DBA",
+      perPerson: "/ \u0DB4\u0DD4\u0DAF\u0DCA\u0D9C\u0DBD\u0DBA\u0D9A\u0DD4\u0DA7"
+    },
+    button: {
+      primary: "\u0D94\u0DB6\u0DDA \u0DC3\u0D82\u0DA0\u0DCF\u0DBB\u0DBA \u0DC0\u0DD9\u0DB1\u0DCA\u0D9A\u0DBB\u0DC0\u0DB1\u0DCA\u0DB1",
+      secondary: "\u0DAF\u0DD0\u0DB1\u0DCA \u0D9C\u0DC0\u0DDA\u0DC2\u0DAB\u0DBA \u0D9A\u0DBB\u0DB1\u0DCA\u0DB1"
     }
   }
 };
@@ -265,6 +293,12 @@ function getTextFieldTranslation(variant, locale = currentLocale) {
 function getCalendarTranslation(locale = currentLocale) {
   return getMergedTranslations(locale).calendar ?? defaultTranslations[locale].calendar;
 }
+function getDestinationCardTranslation(locale = currentLocale) {
+  return getMergedTranslations(locale).destinationCard ?? defaultTranslations[locale].destinationCard;
+}
+function getButtonTranslation(locale = currentLocale) {
+  return getMergedTranslations(locale).button ?? defaultTranslations[locale].button;
+}
 function subscribeLocaleChange(listener) {
   localeListeners.add(listener);
   return () => localeListeners.delete(listener);
@@ -964,6 +998,166 @@ var SunMandala = class {
   }
 };
 
+// src/components/DestinationCard.ts
+var PEACOCK_SVG = `
+  <svg viewBox="0 0 220 110" aria-hidden="true">
+    <g fill="none" stroke-linecap="round">
+      <path d="M18 92c8-28 28-52 58-62" stroke="#1a6b6c" stroke-width="5"/>
+      <path d="M32 96c10-22 30-40 56-46" stroke="#2a8f7a" stroke-width="4"/>
+      <path d="M48 100c10-16 26-28 46-32" stroke="#c86837" stroke-width="3.5"/>
+      <ellipse cx="28" cy="38" rx="7" ry="10" fill="#1a4d4e" transform="rotate(-20 28 38)"/>
+      <circle cx="26" cy="34" r="1.6" fill="#f9f3e6"/>
+      <path d="M22 42c8 6 18 8 28 4" stroke="#1a4d4e" stroke-width="3"/>
+      <circle cx="62" cy="28" r="9" fill="#1a6b6c" opacity=".85"/>
+      <circle cx="62" cy="28" r="4" fill="#d4af37"/>
+      <circle cx="88" cy="42" r="10" fill="#2a8f7a" opacity=".8"/>
+      <circle cx="88" cy="42" r="4" fill="#c86837"/>
+      <circle cx="74" cy="62" r="9" fill="#1a4d4e" opacity=".75"/>
+      <circle cx="74" cy="62" r="3.5" fill="#d4af37"/>
+      <path d="M108 96c8-24 26-44 54-52" stroke="#1a6b6c" stroke-width="5"/>
+      <path d="M118 100c8-18 24-32 48-36" stroke="#c86837" stroke-width="3.5"/>
+      <ellipse cx="116" cy="48" rx="6.5" ry="9" fill="#1a4d4e" transform="rotate(-18 116 48)"/>
+      <circle cx="114" cy="44" r="1.4" fill="#f9f3e6"/>
+      <circle cx="148" cy="36" r="8" fill="#1a6b6c" opacity=".85"/>
+      <circle cx="148" cy="36" r="3.5" fill="#d4af37"/>
+      <circle cx="168" cy="52" r="8" fill="#2a8f7a" opacity=".8"/>
+      <circle cx="168" cy="52" r="3.5" fill="#c86837"/>
+    </g>
+    <ellipse cx="96" cy="98" rx="10" ry="6" fill="#e8c9d4"/>
+    <path d="M90 96c4-10 12-12 18-2" fill="#d46a8a"/>
+    <path d="M94 98c3-7 9-8 13-1" fill="#f4c6d4"/>
+  </svg>
+`;
+var LOTUS_SVG = `
+  <svg viewBox="0 0 120 110" aria-hidden="true">
+    <path d="M60 96c-16-18-28-34-28-50 0-10 8-16 16-12 6 3 10 12 12 22 2-14 8-28 18-34 8-5 16 0 16 12 0 16-12 32-34 62z" fill="#e8a0b8"/>
+    <path d="M60 96c-10-16-22-36-18-54 3-12 14-16 18-6 4-16 16-24 24-18 8 6 6 22-2 36-8 14-16 28-22 42z" fill="#d46a8a"/>
+    <path d="M60 98c6-20 8-38 4-52-3-10-12-12-14-4-4-12-2-24 8-28 10-4 18 6 18 18 0 16-6 34-16 66z" fill="#f3c3d2"/>
+    <circle cx="60" cy="42" r="8" fill="#d4af37"/>
+    <circle cx="60" cy="42" r="3.5" fill="#f9f3e6"/>
+  </svg>
+`;
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  node.className = className;
+  if (text !== void 0) node.textContent = text;
+  return node;
+}
+var DestinationCard = class {
+  element;
+  card;
+  body;
+  constructor(options = {}) {
+    const { content, height = "280px", backdrop = false, backdropImage } = options;
+    this.card = el("article", "helaui-destination-card");
+    this.card.setAttribute("aria-label", "HelaUI card");
+    const watermark = el("div", "helaui-destination-card__watermark");
+    watermark.setAttribute("aria-hidden", "true");
+    this.card.appendChild(watermark);
+    const script = el("div", `helaui-destination-card__script ${SINHALA_FONT_CLASS}`, "\u0DC1\u0DCA\u200D\u0DBB\u0DD3 \u0DBD\u0D82\u0D9A\u0DCF\u0DC0");
+    script.setAttribute("aria-hidden", "true");
+    this.card.appendChild(script);
+    this.body = el("div", "helaui-destination-card__body");
+    this.body.style.minHeight = height;
+    if (typeof content === "string") {
+      this.body.innerHTML = content;
+    } else if (content) {
+      this.body.appendChild(content);
+    }
+    this.card.appendChild(this.body);
+    const footer = el("div", "helaui-destination-card__footer");
+    footer.setAttribute("aria-hidden", "true");
+    const peacocks = el("div", "helaui-destination-card__peacocks");
+    peacocks.innerHTML = PEACOCK_SVG.trim();
+    const lotus = el("div", "helaui-destination-card__lotus");
+    lotus.innerHTML = LOTUS_SVG.trim();
+    footer.append(peacocks, lotus);
+    this.card.appendChild(footer);
+    if (backdrop) {
+      const stage = el("div", "helaui-destination-card-stage");
+      const blur = el("div", "helaui-destination-card-stage__blur");
+      if (backdropImage) {
+        blur.style.backgroundImage = `url("${backdropImage.replace(/"/g, "")}")`;
+      }
+      stage.append(blur, this.card);
+      this.element = stage;
+    } else {
+      this.element = this.card;
+    }
+  }
+  setContent(content) {
+    this.body.replaceChildren();
+    if (typeof content === "string") {
+      this.body.innerHTML = content;
+    } else {
+      this.body.appendChild(content);
+    }
+  }
+  destroy() {
+    this.element.remove();
+  }
+};
+
+// src/components/Button.ts
+var VARIANT_LABEL_KEY = {
+  primary: "button.primary",
+  secondary: "button.secondary"
+};
+var Button = class {
+  element;
+  unsubscribeLocale;
+  variant;
+  fixedLabel;
+  labelKey;
+  sinhalaExplicit;
+  constructor(options = {}) {
+    const {
+      variant = "primary",
+      label,
+      labelKey,
+      type = "button",
+      disabled = false,
+      onClick,
+      sinhala
+    } = options;
+    this.variant = variant;
+    this.fixedLabel = label;
+    this.labelKey = labelKey;
+    this.sinhalaExplicit = sinhala !== void 0;
+    this.element = document.createElement("button");
+    this.element.type = type;
+    this.element.className = `helaui-button helaui-button--${variant}`;
+    this.element.disabled = disabled;
+    if (onClick) this.element.addEventListener("click", onClick);
+    this.applyLabel();
+    this.setSinhala(sinhala ?? getLocale() === "si");
+    this.unsubscribeLocale = subscribeLocaleChange(() => {
+      this.applyLabel();
+      if (!this.sinhalaExplicit) this.setSinhala(getLocale() === "si");
+    });
+  }
+  applyLabel() {
+    if (this.fixedLabel !== void 0) {
+      this.element.textContent = this.fixedLabel;
+      return;
+    }
+    this.element.textContent = t(this.labelKey ?? VARIANT_LABEL_KEY[this.variant]);
+  }
+  setLabel(label) {
+    this.element.textContent = label;
+  }
+  setDisabled(disabled) {
+    this.element.disabled = disabled;
+  }
+  setSinhala(enabled) {
+    this.element.classList.toggle(SINHALA_FONT_CLASS, enabled);
+  }
+  destroy() {
+    this.unsubscribeLocale?.();
+    this.element.remove();
+  }
+};
+
 // src/theme/defaultTheme.ts
 var defaultTheme = {
   primary: "#8D153A",
@@ -1037,8 +1231,10 @@ function createThemeStyle(theme = {}) {
 0 && (module.exports = {
   BUILTIN_RAIN_IMAGES,
   BUILTIN_SUN_MANDALA_IMAGE,
+  Button,
   Calendar,
   DEFAULT_RAIN_IMAGES,
+  DestinationCard,
   RainBackground,
   SINHALA_FONT_CLASS,
   SINHALA_FONT_FAMILY,
@@ -1053,8 +1249,10 @@ function createThemeStyle(theme = {}) {
   defaultTheme,
   defaultTranslations,
   formatSinhalaNumeral,
+  getButtonTranslation,
   getCalendarTranslation,
   getDefaultRainImageUrls,
+  getDestinationCardTranslation,
   getLocale,
   getTextFieldTranslation,
   resetTheme,

package/dist/index.d.cts

@@ -25,6 +25,18 @@ interface HelaTextFieldTranslations {
     email: TextFieldStrings;
     disabled: TextFieldStrings;
 }
+interface ButtonStrings {
+    primary: string;
+    secondary: string;
+}
+interface DestinationCardStrings {
+    eyebrow: string;
+    reviewsLabel: string;
+    bookTrip: string;
+    exploreNow: string;
+    startFrom: string;
+    perPerson: string;
+}
 interface CalendarStrings {
     monthNames: [string, string, string, string, string, string, string, string, string, string, string, string];
     sinhalaMonthNames: [string, string, string, string, string, string, string, string, string, string, string, string];
@@ -40,6 +52,8 @@ interface CalendarStrings {
 interface HelaTranslations {
     textField: HelaTextFieldTranslations;
     calendar: CalendarStrings;
+    destinationCard: DestinationCardStrings;
+    button: ButtonStrings;
 }
 type TextFieldVariant = keyof HelaTextFieldTranslations;
 type DeepPartial<T> = {
@@ -84,6 +98,10 @@ declare function t(path: string, locale?: HelaLocale): string;
 declare function getTextFieldTranslation(variant: TextFieldVariant, locale?: HelaLocale): TextFieldStrings;
 /** Built-in Calendar strings for the active (or given) locale. */
 declare function getCalendarTranslation(locale?: HelaLocale): CalendarStrings;
+/** Built-in DestinationCard strings for the active (or given) locale. */
+declare function getDestinationCardTranslation(locale?: HelaLocale): DestinationCardStrings;
+/** Built-in Button strings for the active (or given) locale. */
+declare function getButtonTranslation(locale?: HelaLocale): ButtonStrings;
 /** Subscribe to locale or override changes. Returns an unsubscribe function. */
 declare function subscribeLocaleChange(listener: () => void): () => void;
 
@@ -307,6 +325,65 @@ declare class SunMandala {
     destroy(): void;
 }
 
+interface DestinationCardOptions {
+    /** Optional node or HTML placed in the empty inner area. */
+    content?: HTMLElement | string;
+    /** Minimum height of the inner area. Defaults to `280px`. */
+    height?: string;
+    /** Blurred photo stage behind the card. Defaults to `false`. */
+    backdrop?: boolean;
+    /** Image used for the optional blurred stage. */
+    backdropImage?: string;
+}
+/**
+ * Decorative parchment card shell — frame, watermark, side script, and footer motifs.
+ * The inner area is empty so callers can place their own content.
+ */
+declare class DestinationCard {
+    readonly element: HTMLElement;
+    readonly card: HTMLElement;
+    readonly body: HTMLDivElement;
+    constructor(options?: DestinationCardOptions);
+    setContent(content: HTMLElement | string): void;
+    destroy(): void;
+}
+
+type ButtonVariant = 'primary' | 'secondary';
+interface ButtonOptions {
+    /**
+     * Visual style.
+     * `primary` — filled terracotta pill (“Book Your Trip”).
+     * `secondary` — teal outline pill (“Explore Now”).
+     */
+    variant?: ButtonVariant;
+    /** Explicit label — overrides locale default. */
+    label?: string;
+    /** Translation key (dot path). Overrides variant default when `label` is omitted. */
+    labelKey?: string;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    onClick?: () => void;
+    /** Apply Sinhala font. When omitted, follows the active locale. */
+    sinhala?: boolean;
+}
+/**
+ * Pill action button matching the HelaUI travel-card design.
+ */
+declare class Button {
+    readonly element: HTMLButtonElement;
+    private readonly unsubscribeLocale?;
+    private readonly variant;
+    private readonly fixedLabel?;
+    private readonly labelKey?;
+    private readonly sinhalaExplicit;
+    constructor(options?: ButtonOptions);
+    private applyLabel;
+    setLabel(label: string): void;
+    setDisabled(disabled: boolean): void;
+    setSinhala(enabled: boolean): void;
+    destroy(): void;
+}
+
 /** HelaUI brand palette — all values are customizable. */
 interface HelaTheme {
     primary: string;
@@ -339,4 +416,4 @@ declare const defaultTheme: HelaTheme;
 /** Maps theme keys to CSS custom property names. */
 declare const THEME_VAR_MAP: Record<HelaThemeKey, string>;
 
-export { type ApplyTranslationsOptions, BUILTIN_RAIN_IMAGES, BUILTIN_SUN_MANDALA_IMAGE, Calendar, type CalendarOptions, type CalendarStrings, DEFAULT_RAIN_IMAGES, type DeepPartial, type HelaLocale, type HelaTextFieldTranslations, type HelaTheme, type HelaThemeKey, type HelaTranslationOverrides, type HelaTranslations, type LocaleTranslationOverrides, RainBackground, type RainBackgroundOptions, SINHALA_FONT_CLASS, SINHALA_FONT_FAMILY, SINHALA_MONTH_NAMES, SunMandala, type SunMandalaOptions, THEME_VAR_MAP, TextField, type TextFieldOptions, type TextFieldStrings, type TextFieldVariant, applySinhalaFont, applyTheme, applyTranslations, createThemeStyle, defaultTheme, defaultTranslations, formatSinhalaNumeral, getCalendarTranslation, getDefaultRainImageUrls, getLocale, getTextFieldTranslation, resetTheme, resetTranslations, setLocale, sinhalaFontStyles, subscribeLocaleChange, t };
+export { type ApplyTranslationsOptions, BUILTIN_RAIN_IMAGES, BUILTIN_SUN_MANDALA_IMAGE, Button, type ButtonOptions, type ButtonStrings, type ButtonVariant, Calendar, type CalendarOptions, type CalendarStrings, DEFAULT_RAIN_IMAGES, type DeepPartial, DestinationCard, type DestinationCardOptions, type DestinationCardStrings, type HelaLocale, type HelaTextFieldTranslations, type HelaTheme, type HelaThemeKey, type HelaTranslationOverrides, type HelaTranslations, type LocaleTranslationOverrides, RainBackground, type RainBackgroundOptions, SINHALA_FONT_CLASS, SINHALA_FONT_FAMILY, SINHALA_MONTH_NAMES, SunMandala, type SunMandalaOptions, THEME_VAR_MAP, TextField, type TextFieldOptions, type TextFieldStrings, type TextFieldVariant, applySinhalaFont, applyTheme, applyTranslations, createThemeStyle, defaultTheme, defaultTranslations, formatSinhalaNumeral, getButtonTranslation, getCalendarTranslation, getDefaultRainImageUrls, getDestinationCardTranslation, getLocale, getTextFieldTranslation, resetTheme, resetTranslations, setLocale, sinhalaFontStyles, subscribeLocaleChange, t };

package/dist/index.d.ts

@@ -25,6 +25,18 @@ interface HelaTextFieldTranslations {
     email: TextFieldStrings;
     disabled: TextFieldStrings;
 }
+interface ButtonStrings {
+    primary: string;
+    secondary: string;
+}
+interface DestinationCardStrings {
+    eyebrow: string;
+    reviewsLabel: string;
+    bookTrip: string;
+    exploreNow: string;
+    startFrom: string;
+    perPerson: string;
+}
 interface CalendarStrings {
     monthNames: [string, string, string, string, string, string, string, string, string, string, string, string];
     sinhalaMonthNames: [string, string, string, string, string, string, string, string, string, string, string, string];
@@ -40,6 +52,8 @@ interface CalendarStrings {
 interface HelaTranslations {
     textField: HelaTextFieldTranslations;
     calendar: CalendarStrings;
+    destinationCard: DestinationCardStrings;
+    button: ButtonStrings;
 }
 type TextFieldVariant = keyof HelaTextFieldTranslations;
 type DeepPartial<T> = {
@@ -84,6 +98,10 @@ declare function t(path: string, locale?: HelaLocale): string;
 declare function getTextFieldTranslation(variant: TextFieldVariant, locale?: HelaLocale): TextFieldStrings;
 /** Built-in Calendar strings for the active (or given) locale. */
 declare function getCalendarTranslation(locale?: HelaLocale): CalendarStrings;
+/** Built-in DestinationCard strings for the active (or given) locale. */
+declare function getDestinationCardTranslation(locale?: HelaLocale): DestinationCardStrings;
+/** Built-in Button strings for the active (or given) locale. */
+declare function getButtonTranslation(locale?: HelaLocale): ButtonStrings;
 /** Subscribe to locale or override changes. Returns an unsubscribe function. */
 declare function subscribeLocaleChange(listener: () => void): () => void;
 
@@ -307,6 +325,65 @@ declare class SunMandala {
     destroy(): void;
 }
 
+interface DestinationCardOptions {
+    /** Optional node or HTML placed in the empty inner area. */
+    content?: HTMLElement | string;
+    /** Minimum height of the inner area. Defaults to `280px`. */
+    height?: string;
+    /** Blurred photo stage behind the card. Defaults to `false`. */
+    backdrop?: boolean;
+    /** Image used for the optional blurred stage. */
+    backdropImage?: string;
+}
+/**
+ * Decorative parchment card shell — frame, watermark, side script, and footer motifs.
+ * The inner area is empty so callers can place their own content.
+ */
+declare class DestinationCard {
+    readonly element: HTMLElement;
+    readonly card: HTMLElement;
+    readonly body: HTMLDivElement;
+    constructor(options?: DestinationCardOptions);
+    setContent(content: HTMLElement | string): void;
+    destroy(): void;
+}
+
+type ButtonVariant = 'primary' | 'secondary';
+interface ButtonOptions {
+    /**
+     * Visual style.
+     * `primary` — filled terracotta pill (“Book Your Trip”).
+     * `secondary` — teal outline pill (“Explore Now”).
+     */
+    variant?: ButtonVariant;
+    /** Explicit label — overrides locale default. */
+    label?: string;
+    /** Translation key (dot path). Overrides variant default when `label` is omitted. */
+    labelKey?: string;
+    type?: 'button' | 'submit' | 'reset';
+    disabled?: boolean;
+    onClick?: () => void;
+    /** Apply Sinhala font. When omitted, follows the active locale. */
+    sinhala?: boolean;
+}
+/**
+ * Pill action button matching the HelaUI travel-card design.
+ */
+declare class Button {
+    readonly element: HTMLButtonElement;
+    private readonly unsubscribeLocale?;
+    private readonly variant;
+    private readonly fixedLabel?;
+    private readonly labelKey?;
+    private readonly sinhalaExplicit;
+    constructor(options?: ButtonOptions);
+    private applyLabel;
+    setLabel(label: string): void;
+    setDisabled(disabled: boolean): void;
+    setSinhala(enabled: boolean): void;
+    destroy(): void;
+}
+
 /** HelaUI brand palette — all values are customizable. */
 interface HelaTheme {
     primary: string;
@@ -339,4 +416,4 @@ declare const defaultTheme: HelaTheme;
 /** Maps theme keys to CSS custom property names. */
 declare const THEME_VAR_MAP: Record<HelaThemeKey, string>;
 
-export { type ApplyTranslationsOptions, BUILTIN_RAIN_IMAGES, BUILTIN_SUN_MANDALA_IMAGE, Calendar, type CalendarOptions, type CalendarStrings, DEFAULT_RAIN_IMAGES, type DeepPartial, type HelaLocale, type HelaTextFieldTranslations, type HelaTheme, type HelaThemeKey, type HelaTranslationOverrides, type HelaTranslations, type LocaleTranslationOverrides, RainBackground, type RainBackgroundOptions, SINHALA_FONT_CLASS, SINHALA_FONT_FAMILY, SINHALA_MONTH_NAMES, SunMandala, type SunMandalaOptions, THEME_VAR_MAP, TextField, type TextFieldOptions, type TextFieldStrings, type TextFieldVariant, applySinhalaFont, applyTheme, applyTranslations, createThemeStyle, defaultTheme, defaultTranslations, formatSinhalaNumeral, getCalendarTranslation, getDefaultRainImageUrls, getLocale, getTextFieldTranslation, resetTheme, resetTranslations, setLocale, sinhalaFontStyles, subscribeLocaleChange, t };
+export { type ApplyTranslationsOptions, BUILTIN_RAIN_IMAGES, BUILTIN_SUN_MANDALA_IMAGE, Button, type ButtonOptions, type ButtonStrings, type ButtonVariant, Calendar, type CalendarOptions, type CalendarStrings, DEFAULT_RAIN_IMAGES, type DeepPartial, DestinationCard, type DestinationCardOptions, type DestinationCardStrings, type HelaLocale, type HelaTextFieldTranslations, type HelaTheme, type HelaThemeKey, type HelaTranslationOverrides, type HelaTranslations, type LocaleTranslationOverrides, RainBackground, type RainBackgroundOptions, SINHALA_FONT_CLASS, SINHALA_FONT_FAMILY, SINHALA_MONTH_NAMES, SunMandala, type SunMandalaOptions, THEME_VAR_MAP, TextField, type TextFieldOptions, type TextFieldStrings, type TextFieldVariant, applySinhalaFont, applyTheme, applyTranslations, createThemeStyle, defaultTheme, defaultTranslations, formatSinhalaNumeral, getButtonTranslation, getCalendarTranslation, getDefaultRainImageUrls, getDestinationCardTranslation, getLocale, getTextFieldTranslation, resetTheme, resetTranslations, setLocale, sinhalaFontStyles, subscribeLocaleChange, t };

package/dist/index.js

@@ -66,6 +66,18 @@ var defaultTranslations = {
       clear: "Clear",
       selectMonth: "Select Month",
       poyaDay: "Poya Day"
+    },
+    destinationCard: {
+      eyebrow: "PlaceHolder",
+      reviewsLabel: "Reviews",
+      bookTrip: "PlaceHolder",
+      exploreNow: "PlaceHolder",
+      startFrom: "Start from",
+      perPerson: "/ person"
+    },
+    button: {
+      primary: "PlaceHolder",
+      secondary: "PlaceHolder"
     }
   },
   si: {
@@ -123,6 +135,18 @@ var defaultTranslations = {
       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"
+    },
+    destinationCard: {
+      eyebrow: "\u0DC1\u0DCA\u200D\u0DBB\u0DD3 \u0DBD\u0D82\u0D9A\u0DCF\u0DC0 \u0DC3\u0DDC\u0DBA\u0DCF \u0DB6\u0DBD\u0DB1\u0DCA\u0DB1",
+      reviewsLabel: "\u0DC3\u0DB8\u0DCF\u0DBD\u0DDD\u0DA0\u0DB1",
+      bookTrip: "\u0D94\u0DB6\u0DDA \u0DC3\u0D82\u0DA0\u0DCF\u0DBB\u0DBA \u0DC0\u0DD9\u0DB1\u0DCA\u0D9A\u0DBB\u0DC0\u0DB1\u0DCA\u0DB1",
+      exploreNow: "\u0DAF\u0DD0\u0DB1\u0DCA \u0D9C\u0DC0\u0DDA\u0DC2\u0DAB\u0DBA \u0D9A\u0DBB\u0DB1\u0DCA\u0DB1",
+      startFrom: "\u0D86\u0DBB\u0DB8\u0DCA\u0DB7\u0DBA",
+      perPerson: "/ \u0DB4\u0DD4\u0DAF\u0DCA\u0D9C\u0DBD\u0DBA\u0D9A\u0DD4\u0DA7"
+    },
+    button: {
+      primary: "\u0D94\u0DB6\u0DDA \u0DC3\u0D82\u0DA0\u0DCF\u0DBB\u0DBA \u0DC0\u0DD9\u0DB1\u0DCA\u0D9A\u0DBB\u0DC0\u0DB1\u0DCA\u0DB1",
+      secondary: "\u0DAF\u0DD0\u0DB1\u0DCA \u0D9C\u0DC0\u0DDA\u0DC2\u0DAB\u0DBA \u0D9A\u0DBB\u0DB1\u0DCA\u0DB1"
     }
   }
 };
@@ -212,6 +236,12 @@ function getTextFieldTranslation(variant, locale = currentLocale) {
 function getCalendarTranslation(locale = currentLocale) {
   return getMergedTranslations(locale).calendar ?? defaultTranslations[locale].calendar;
 }
+function getDestinationCardTranslation(locale = currentLocale) {
+  return getMergedTranslations(locale).destinationCard ?? defaultTranslations[locale].destinationCard;
+}
+function getButtonTranslation(locale = currentLocale) {
+  return getMergedTranslations(locale).button ?? defaultTranslations[locale].button;
+}
 function subscribeLocaleChange(listener) {
   localeListeners.add(listener);
   return () => localeListeners.delete(listener);
@@ -911,6 +941,166 @@ var SunMandala = class {
   }
 };
 
+// src/components/DestinationCard.ts
+var PEACOCK_SVG = `
+  <svg viewBox="0 0 220 110" aria-hidden="true">
+    <g fill="none" stroke-linecap="round">
+      <path d="M18 92c8-28 28-52 58-62" stroke="#1a6b6c" stroke-width="5"/>
+      <path d="M32 96c10-22 30-40 56-46" stroke="#2a8f7a" stroke-width="4"/>
+      <path d="M48 100c10-16 26-28 46-32" stroke="#c86837" stroke-width="3.5"/>
+      <ellipse cx="28" cy="38" rx="7" ry="10" fill="#1a4d4e" transform="rotate(-20 28 38)"/>
+      <circle cx="26" cy="34" r="1.6" fill="#f9f3e6"/>
+      <path d="M22 42c8 6 18 8 28 4" stroke="#1a4d4e" stroke-width="3"/>
+      <circle cx="62" cy="28" r="9" fill="#1a6b6c" opacity=".85"/>
+      <circle cx="62" cy="28" r="4" fill="#d4af37"/>
+      <circle cx="88" cy="42" r="10" fill="#2a8f7a" opacity=".8"/>
+      <circle cx="88" cy="42" r="4" fill="#c86837"/>
+      <circle cx="74" cy="62" r="9" fill="#1a4d4e" opacity=".75"/>
+      <circle cx="74" cy="62" r="3.5" fill="#d4af37"/>
+      <path d="M108 96c8-24 26-44 54-52" stroke="#1a6b6c" stroke-width="5"/>
+      <path d="M118 100c8-18 24-32 48-36" stroke="#c86837" stroke-width="3.5"/>
+      <ellipse cx="116" cy="48" rx="6.5" ry="9" fill="#1a4d4e" transform="rotate(-18 116 48)"/>
+      <circle cx="114" cy="44" r="1.4" fill="#f9f3e6"/>
+      <circle cx="148" cy="36" r="8" fill="#1a6b6c" opacity=".85"/>
+      <circle cx="148" cy="36" r="3.5" fill="#d4af37"/>
+      <circle cx="168" cy="52" r="8" fill="#2a8f7a" opacity=".8"/>
+      <circle cx="168" cy="52" r="3.5" fill="#c86837"/>
+    </g>
+    <ellipse cx="96" cy="98" rx="10" ry="6" fill="#e8c9d4"/>
+    <path d="M90 96c4-10 12-12 18-2" fill="#d46a8a"/>
+    <path d="M94 98c3-7 9-8 13-1" fill="#f4c6d4"/>
+  </svg>
+`;
+var LOTUS_SVG = `
+  <svg viewBox="0 0 120 110" aria-hidden="true">
+    <path d="M60 96c-16-18-28-34-28-50 0-10 8-16 16-12 6 3 10 12 12 22 2-14 8-28 18-34 8-5 16 0 16 12 0 16-12 32-34 62z" fill="#e8a0b8"/>
+    <path d="M60 96c-10-16-22-36-18-54 3-12 14-16 18-6 4-16 16-24 24-18 8 6 6 22-2 36-8 14-16 28-22 42z" fill="#d46a8a"/>
+    <path d="M60 98c6-20 8-38 4-52-3-10-12-12-14-4-4-12-2-24 8-28 10-4 18 6 18 18 0 16-6 34-16 66z" fill="#f3c3d2"/>
+    <circle cx="60" cy="42" r="8" fill="#d4af37"/>
+    <circle cx="60" cy="42" r="3.5" fill="#f9f3e6"/>
+  </svg>
+`;
+function el(tag, className, text) {
+  const node = document.createElement(tag);
+  node.className = className;
+  if (text !== void 0) node.textContent = text;
+  return node;
+}
+var DestinationCard = class {
+  element;
+  card;
+  body;
+  constructor(options = {}) {
+    const { content, height = "280px", backdrop = false, backdropImage } = options;
+    this.card = el("article", "helaui-destination-card");
+    this.card.setAttribute("aria-label", "HelaUI card");
+    const watermark = el("div", "helaui-destination-card__watermark");
+    watermark.setAttribute("aria-hidden", "true");
+    this.card.appendChild(watermark);
+    const script = el("div", `helaui-destination-card__script ${SINHALA_FONT_CLASS}`, "\u0DC1\u0DCA\u200D\u0DBB\u0DD3 \u0DBD\u0D82\u0D9A\u0DCF\u0DC0");
+    script.setAttribute("aria-hidden", "true");
+    this.card.appendChild(script);
+    this.body = el("div", "helaui-destination-card__body");
+    this.body.style.minHeight = height;
+    if (typeof content === "string") {
+      this.body.innerHTML = content;
+    } else if (content) {
+      this.body.appendChild(content);
+    }
+    this.card.appendChild(this.body);
+    const footer = el("div", "helaui-destination-card__footer");
+    footer.setAttribute("aria-hidden", "true");
+    const peacocks = el("div", "helaui-destination-card__peacocks");
+    peacocks.innerHTML = PEACOCK_SVG.trim();
+    const lotus = el("div", "helaui-destination-card__lotus");
+    lotus.innerHTML = LOTUS_SVG.trim();
+    footer.append(peacocks, lotus);
+    this.card.appendChild(footer);
+    if (backdrop) {
+      const stage = el("div", "helaui-destination-card-stage");
+      const blur = el("div", "helaui-destination-card-stage__blur");
+      if (backdropImage) {
+        blur.style.backgroundImage = `url("${backdropImage.replace(/"/g, "")}")`;
+      }
+      stage.append(blur, this.card);
+      this.element = stage;
+    } else {
+      this.element = this.card;
+    }
+  }
+  setContent(content) {
+    this.body.replaceChildren();
+    if (typeof content === "string") {
+      this.body.innerHTML = content;
+    } else {
+      this.body.appendChild(content);
+    }
+  }
+  destroy() {
+    this.element.remove();
+  }
+};
+
+// src/components/Button.ts
+var VARIANT_LABEL_KEY = {
+  primary: "button.primary",
+  secondary: "button.secondary"
+};
+var Button = class {
+  element;
+  unsubscribeLocale;
+  variant;
+  fixedLabel;
+  labelKey;
+  sinhalaExplicit;
+  constructor(options = {}) {
+    const {
+      variant = "primary",
+      label,
+      labelKey,
+      type = "button",
+      disabled = false,
+      onClick,
+      sinhala
+    } = options;
+    this.variant = variant;
+    this.fixedLabel = label;
+    this.labelKey = labelKey;
+    this.sinhalaExplicit = sinhala !== void 0;
+    this.element = document.createElement("button");
+    this.element.type = type;
+    this.element.className = `helaui-button helaui-button--${variant}`;
+    this.element.disabled = disabled;
+    if (onClick) this.element.addEventListener("click", onClick);
+    this.applyLabel();
+    this.setSinhala(sinhala ?? getLocale() === "si");
+    this.unsubscribeLocale = subscribeLocaleChange(() => {
+      this.applyLabel();
+      if (!this.sinhalaExplicit) this.setSinhala(getLocale() === "si");
+    });
+  }
+  applyLabel() {
+    if (this.fixedLabel !== void 0) {
+      this.element.textContent = this.fixedLabel;
+      return;
+    }
+    this.element.textContent = t(this.labelKey ?? VARIANT_LABEL_KEY[this.variant]);
+  }
+  setLabel(label) {
+    this.element.textContent = label;
+  }
+  setDisabled(disabled) {
+    this.element.disabled = disabled;
+  }
+  setSinhala(enabled) {
+    this.element.classList.toggle(SINHALA_FONT_CLASS, enabled);
+  }
+  destroy() {
+    this.unsubscribeLocale?.();
+    this.element.remove();
+  }
+};
+
 // src/theme/defaultTheme.ts
 var defaultTheme = {
   primary: "#8D153A",
@@ -983,8 +1173,10 @@ function createThemeStyle(theme = {}) {
 export {
   BUILTIN_RAIN_IMAGES,
   BUILTIN_SUN_MANDALA_IMAGE,
+  Button,
   Calendar,
   DEFAULT_RAIN_IMAGES,
+  DestinationCard,
   RainBackground,
   SINHALA_FONT_CLASS,
   SINHALA_FONT_FAMILY,
@@ -999,8 +1191,10 @@ export {
   defaultTheme,
   defaultTranslations,
   formatSinhalaNumeral,
+  getButtonTranslation,
   getCalendarTranslation,
   getDefaultRainImageUrls,
+  getDestinationCardTranslation,
   getLocale,
   getTextFieldTranslation,
   resetTheme,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mccustomapps/helaui",
-  "version": "0.1.12",
+  "version": "0.1.15",
   "description": "HelaUI components with Sinhala font support",
   "author": "mccustomapps",
   "license": "MIT",
@@ -26,6 +26,8 @@
     "./calendar.css": "./dist/calendar.css",
     "./rain-background.css": "./dist/rain-background.css",
     "./sun-mandala.css": "./dist/sun-mandala.css",
+    "./destination-card.css": "./dist/destination-card.css",
+    "./button.css": "./dist/button.css",
     "./theme.css": "./dist/theme.css",
     "./assets/rain/*": "./dist/assets/rain/*",
     "./assets/sun-mandala/*": "./dist/assets/sun-mandala/*"