@mccustomapps/helaui 0.1.10 → 0.1.13

package/README.md

@@ -16,6 +16,7 @@
   - [TextField](#textfield)
   - [Calendar](#calendar)
   - [SunMandala](#sunmandala)
+  - [DestinationCard](#destinationcard)
   - [RainBackground](#rainbackground)
 - [Theming](#theming)
 - [i18n / Localisation](#i18n--localisation)
@@ -40,12 +41,13 @@ 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/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, RainBackground } from '@mccustomapps/helaui';
 
 // Mount components
 const field = new TextField({ variant: 'name' });
@@ -205,6 +207,42 @@ 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()
+```
+
+---
+
 ### 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/`).
@@ -216,7 +254,7 @@ import '@mccustomapps/helaui/rain-background.css';
 const rain = new RainBackground();
 ```
 
-**Next.js (App Router)** — use a Client Component. `RainBackground` already mounts itself on `document.body`; do not insert `rain.element` a second time.
+**Next.js (App Router)** — use a Client Component. `RainBackground` already mounts itself on `document.body`; do **not** call `insertBefore` / `appendChild` on `rain.element` a second time.
 
 ```tsx
 'use client';
@@ -227,7 +265,7 @@ import '@mccustomapps/helaui/rain-background.css';
 
 export function HelaRain() {
   useEffect(() => {
-    const rain = new RainBackground();
+    const rain = new RainBackground({ zIndex: 0 });
     return () => rain.destroy();
   }, []);
 
@@ -241,7 +279,7 @@ export function HelaRain() {
 |---|---|---|---|
 | `images` | `string[]` | built-in artwork | Image URLs |
 | `density` | `number` | `28` | Number of particles |
-| `minSize` / `maxSize` | `number` | `28` | Particle width in pixels |
+| `minSize` / `maxSize` | `number` | `28` / `72` | Particle width in pixels |
 | `minDuration` / `maxDuration` | `number` | `8` / `18` | Fall duration in seconds |
 | `target` | `HTMLElement` | `document.body` | Mount container |
 | `zIndex` | `number` | `0` | Stacking order |
@@ -339,6 +377,7 @@ 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/rain-background.css'; // RainBackground styles
 ```
 
@@ -353,6 +392,7 @@ import type {
   TextFieldOptions,
   CalendarOptions,
   SunMandalaOptions,
+  DestinationCardOptions,
   RainBackgroundOptions,
   HelaTheme,
   HelaThemeKey,

package/dist/destination-card.css

@@ -0,0 +1,134 @@
+/* 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;
+  flex: 1;
+  min-height: 280px;
+}
+
+.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

@@ -24,6 +24,7 @@ __export(index_exports, {
   BUILTIN_SUN_MANDALA_IMAGE: () => BUILTIN_SUN_MANDALA_IMAGE,
   Calendar: () => Calendar,
   DEFAULT_RAIN_IMAGES: () => DEFAULT_RAIN_IMAGES,
+  DestinationCard: () => DestinationCard,
   RainBackground: () => RainBackground,
   SINHALA_FONT_CLASS: () => SINHALA_FONT_CLASS,
   SINHALA_FONT_FAMILY: () => SINHALA_FONT_FAMILY,
@@ -40,6 +41,7 @@ __export(index_exports, {
   formatSinhalaNumeral: () => formatSinhalaNumeral,
   getCalendarTranslation: () => getCalendarTranslation,
   getDefaultRainImageUrls: () => getDefaultRainImageUrls,
+  getDestinationCardTranslation: () => getDestinationCardTranslation,
   getLocale: () => getLocale,
   getTextFieldTranslation: () => getTextFieldTranslation,
   resetTheme: () => resetTheme,
@@ -119,6 +121,14 @@ var defaultTranslations = {
       clear: "Clear",
       selectMonth: "Select Month",
       poyaDay: "Poya Day"
+    },
+    destinationCard: {
+      eyebrow: "Explore Sri Lanka",
+      reviewsLabel: "Reviews",
+      bookTrip: "Book Your Trip",
+      exploreNow: "Explore Now",
+      startFrom: "Start from",
+      perPerson: "/ person"
     }
   },
   si: {
@@ -176,6 +186,14 @@ 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"
     }
   }
 };
@@ -265,6 +283,9 @@ 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 subscribeLocaleChange(listener) {
   localeListeners.add(listener);
   return () => localeListeners.delete(listener);
@@ -405,16 +426,43 @@ function pick(items) {
   return items[Math.floor(Math.random() * items.length)];
 }
 function toImageUrl(source) {
-  return typeof source === "string" ? source : source.src;
+  if (typeof source === "string") return source;
+  if (source && typeof source === "object") {
+    const value = source;
+    if (typeof value.src === "string") return value.src;
+    if (typeof value.default === "string") return value.default;
+    if (value.default && typeof value.default === "object" && value.default !== null) {
+      const nested = value.default;
+      if (typeof nested.src === "string") return nested.src;
+    }
+  }
+  throw new Error("RainBackground image must be a URL string.");
+}
+function toDisplayUrl(source, cache) {
+  const existing = cache.get(source);
+  if (existing) return existing;
+  if (!source.startsWith("data:")) return source;
+  const comma = source.indexOf(",");
+  if (comma === -1) return source;
+  const header = source.slice(0, comma);
+  const data = source.slice(comma + 1);
+  const mime = header.match(/^data:([^;,]+)/i)?.[1] ?? "image/png";
+  const binary = atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+  const url = URL.createObjectURL(new Blob([bytes], { type: mime }));
+  cache.set(source, url);
+  return url;
 }
 var RainBackground = class {
   element;
+  objectUrls = [];
   constructor(options = {}) {
     const {
       images = [...BUILTIN_RAIN_IMAGES],
       density = 28,
       minSize = 28,
-      maxSize = 28,
+      maxSize = 72,
       minDuration = 8,
       maxDuration = 18,
       target = document.body,
@@ -427,8 +475,11 @@ var RainBackground = class {
     this.element.className = "helaui-rain-background";
     this.element.setAttribute("aria-hidden", "true");
     this.element.style.zIndex = String(zIndex);
+    const urlCache = /* @__PURE__ */ new Map();
+    const resolved = images.map((image) => toDisplayUrl(toImageUrl(image), urlCache));
+    this.objectUrls.push(...new Set(urlCache.values()));
     for (let index = 0; index < density; index += 1) {
-      this.element.appendChild(this.createDrop(images, minSize, maxSize, minDuration, maxDuration));
+      this.element.appendChild(this.createDrop(resolved, minSize, maxSize, minDuration, maxDuration));
     }
     target.prepend(this.element);
   }
@@ -436,9 +487,16 @@ var RainBackground = class {
     const drop = document.createElement("div");
     const duration = randomBetween(minDuration, maxDuration);
     const size = randomBetween(minSize, maxSize);
-    const src = toImageUrl(pick(images));
+    const src = pick(images);
+    const img = document.createElement("img");
+    img.className = "helaui-rain-background__image";
+    img.src = src;
+    img.alt = "";
+    img.draggable = false;
+    img.decoding = "async";
+    img.loading = "eager";
+    img.setAttribute("fetchpriority", "high");
     drop.className = "helaui-rain-background__drop";
-    drop.style.backgroundImage = `url(${JSON.stringify(src)})`;
     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`);
@@ -446,11 +504,14 @@ var RainBackground = class {
     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`);
+    drop.appendChild(img);
     return drop;
   }
   /** Removes the background from the DOM. */
   destroy() {
     this.element.remove();
+    for (const url of this.objectUrls) URL.revokeObjectURL(url);
+    this.objectUrls.length = 0;
   }
 };
 var DEFAULT_RAIN_IMAGES = ["fritter.png", "swirl.png", "kokis.png", "leaf.png"];
@@ -924,6 +985,106 @@ 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/theme/defaultTheme.ts
 var defaultTheme = {
   primary: "#8D153A",
@@ -999,6 +1160,7 @@ function createThemeStyle(theme = {}) {
   BUILTIN_SUN_MANDALA_IMAGE,
   Calendar,
   DEFAULT_RAIN_IMAGES,
+  DestinationCard,
   RainBackground,
   SINHALA_FONT_CLASS,
   SINHALA_FONT_FAMILY,
@@ -1015,6 +1177,7 @@ function createThemeStyle(theme = {}) {
   formatSinhalaNumeral,
   getCalendarTranslation,
   getDefaultRainImageUrls,
+  getDestinationCardTranslation,
   getLocale,
   getTextFieldTranslation,
   resetTheme,

package/dist/index.d.cts

@@ -25,6 +25,14 @@ interface HelaTextFieldTranslations {
     email: TextFieldStrings;
     disabled: TextFieldStrings;
 }
+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 +48,7 @@ interface CalendarStrings {
 interface HelaTranslations {
     textField: HelaTextFieldTranslations;
     calendar: CalendarStrings;
+    destinationCard: DestinationCardStrings;
 }
 type TextFieldVariant = keyof HelaTextFieldTranslations;
 type DeepPartial<T> = {
@@ -84,6 +93,8 @@ 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;
 /** Subscribe to locale or override changes. Returns an unsubscribe function. */
 declare function subscribeLocaleChange(listener: () => void): () => void;
 
@@ -162,6 +173,7 @@ interface RainBackgroundOptions {
 /** Full-screen animated background with falling image particles. */
 declare class RainBackground {
     readonly element: HTMLDivElement;
+    private readonly objectUrls;
     constructor(options?: RainBackgroundOptions);
     private createDrop;
     /** Removes the background from the DOM. */
@@ -306,6 +318,29 @@ 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;
+}
+
 /** HelaUI brand palette — all values are customizable. */
 interface HelaTheme {
     primary: string;
@@ -338,4 +373,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, 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, getCalendarTranslation, getDefaultRainImageUrls, getDestinationCardTranslation, getLocale, getTextFieldTranslation, resetTheme, resetTranslations, setLocale, sinhalaFontStyles, subscribeLocaleChange, t };

package/dist/index.d.ts

@@ -25,6 +25,14 @@ interface HelaTextFieldTranslations {
     email: TextFieldStrings;
     disabled: TextFieldStrings;
 }
+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 +48,7 @@ interface CalendarStrings {
 interface HelaTranslations {
     textField: HelaTextFieldTranslations;
     calendar: CalendarStrings;
+    destinationCard: DestinationCardStrings;
 }
 type TextFieldVariant = keyof HelaTextFieldTranslations;
 type DeepPartial<T> = {
@@ -84,6 +93,8 @@ 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;
 /** Subscribe to locale or override changes. Returns an unsubscribe function. */
 declare function subscribeLocaleChange(listener: () => void): () => void;
 
@@ -162,6 +173,7 @@ interface RainBackgroundOptions {
 /** Full-screen animated background with falling image particles. */
 declare class RainBackground {
     readonly element: HTMLDivElement;
+    private readonly objectUrls;
     constructor(options?: RainBackgroundOptions);
     private createDrop;
     /** Removes the background from the DOM. */
@@ -306,6 +318,29 @@ 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;
+}
+
 /** HelaUI brand palette — all values are customizable. */
 interface HelaTheme {
     primary: string;
@@ -338,4 +373,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, 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, getCalendarTranslation, getDefaultRainImageUrls, getDestinationCardTranslation, getLocale, getTextFieldTranslation, resetTheme, resetTranslations, setLocale, sinhalaFontStyles, subscribeLocaleChange, t };

package/dist/index.js

@@ -66,6 +66,14 @@ var defaultTranslations = {
       clear: "Clear",
       selectMonth: "Select Month",
       poyaDay: "Poya Day"
+    },
+    destinationCard: {
+      eyebrow: "Explore Sri Lanka",
+      reviewsLabel: "Reviews",
+      bookTrip: "Book Your Trip",
+      exploreNow: "Explore Now",
+      startFrom: "Start from",
+      perPerson: "/ person"
     }
   },
   si: {
@@ -123,6 +131,14 @@ 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"
     }
   }
 };
@@ -212,6 +228,9 @@ 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 subscribeLocaleChange(listener) {
   localeListeners.add(listener);
   return () => localeListeners.delete(listener);
@@ -352,16 +371,43 @@ function pick(items) {
   return items[Math.floor(Math.random() * items.length)];
 }
 function toImageUrl(source) {
-  return typeof source === "string" ? source : source.src;
+  if (typeof source === "string") return source;
+  if (source && typeof source === "object") {
+    const value = source;
+    if (typeof value.src === "string") return value.src;
+    if (typeof value.default === "string") return value.default;
+    if (value.default && typeof value.default === "object" && value.default !== null) {
+      const nested = value.default;
+      if (typeof nested.src === "string") return nested.src;
+    }
+  }
+  throw new Error("RainBackground image must be a URL string.");
+}
+function toDisplayUrl(source, cache) {
+  const existing = cache.get(source);
+  if (existing) return existing;
+  if (!source.startsWith("data:")) return source;
+  const comma = source.indexOf(",");
+  if (comma === -1) return source;
+  const header = source.slice(0, comma);
+  const data = source.slice(comma + 1);
+  const mime = header.match(/^data:([^;,]+)/i)?.[1] ?? "image/png";
+  const binary = atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i += 1) bytes[i] = binary.charCodeAt(i);
+  const url = URL.createObjectURL(new Blob([bytes], { type: mime }));
+  cache.set(source, url);
+  return url;
 }
 var RainBackground = class {
   element;
+  objectUrls = [];
   constructor(options = {}) {
     const {
       images = [...BUILTIN_RAIN_IMAGES],
       density = 28,
       minSize = 28,
-      maxSize = 28,
+      maxSize = 72,
       minDuration = 8,
       maxDuration = 18,
       target = document.body,
@@ -374,8 +420,11 @@ var RainBackground = class {
     this.element.className = "helaui-rain-background";
     this.element.setAttribute("aria-hidden", "true");
     this.element.style.zIndex = String(zIndex);
+    const urlCache = /* @__PURE__ */ new Map();
+    const resolved = images.map((image) => toDisplayUrl(toImageUrl(image), urlCache));
+    this.objectUrls.push(...new Set(urlCache.values()));
     for (let index = 0; index < density; index += 1) {
-      this.element.appendChild(this.createDrop(images, minSize, maxSize, minDuration, maxDuration));
+      this.element.appendChild(this.createDrop(resolved, minSize, maxSize, minDuration, maxDuration));
     }
     target.prepend(this.element);
   }
@@ -383,9 +432,16 @@ var RainBackground = class {
     const drop = document.createElement("div");
     const duration = randomBetween(minDuration, maxDuration);
     const size = randomBetween(minSize, maxSize);
-    const src = toImageUrl(pick(images));
+    const src = pick(images);
+    const img = document.createElement("img");
+    img.className = "helaui-rain-background__image";
+    img.src = src;
+    img.alt = "";
+    img.draggable = false;
+    img.decoding = "async";
+    img.loading = "eager";
+    img.setAttribute("fetchpriority", "high");
     drop.className = "helaui-rain-background__drop";
-    drop.style.backgroundImage = `url(${JSON.stringify(src)})`;
     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`);
@@ -393,11 +449,14 @@ var RainBackground = class {
     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`);
+    drop.appendChild(img);
     return drop;
   }
   /** Removes the background from the DOM. */
   destroy() {
     this.element.remove();
+    for (const url of this.objectUrls) URL.revokeObjectURL(url);
+    this.objectUrls.length = 0;
   }
 };
 var DEFAULT_RAIN_IMAGES = ["fritter.png", "swirl.png", "kokis.png", "leaf.png"];
@@ -871,6 +930,106 @@ 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/theme/defaultTheme.ts
 var defaultTheme = {
   primary: "#8D153A",
@@ -945,6 +1104,7 @@ export {
   BUILTIN_SUN_MANDALA_IMAGE,
   Calendar,
   DEFAULT_RAIN_IMAGES,
+  DestinationCard,
   RainBackground,
   SINHALA_FONT_CLASS,
   SINHALA_FONT_FAMILY,
@@ -961,6 +1121,7 @@ export {
   formatSinhalaNumeral,
   getCalendarTranslation,
   getDefaultRainImageUrls,
+  getDestinationCardTranslation,
   getLocale,
   getTextFieldTranslation,
   resetTheme,

package/dist/rain-background.css

@@ -17,9 +17,14 @@
   animation: helaui-rain-fall var(--helaui-rain-duration, 10s) linear infinite;
   animation-delay: var(--helaui-rain-delay, 0s);
   transform: rotate(var(--helaui-rain-rotation, 0deg));
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+}
+
+.helaui-rain-background__image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  pointer-events: none;
 }
 
 @keyframes helaui-rain-fall {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mccustomapps/helaui",
-  "version": "0.1.10",
+  "version": "0.1.13",
   "description": "HelaUI components with Sinhala font support",
   "author": "mccustomapps",
   "license": "MIT",
@@ -26,6 +26,7 @@
     "./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",
     "./theme.css": "./dist/theme.css",
     "./assets/rain/*": "./dist/assets/rain/*",
     "./assets/sun-mandala/*": "./dist/assets/sun-mandala/*"