@hotelcard/ui 0.0.5 → 0.0.7

package/dist/index.js

@@ -1028,9 +1028,297 @@ var Input = ({
 };
 Input.displayName = "Input";
 
+// src/components/Block/Block.tsx
+import { jsx as jsx14, jsxs as jsxs14 } from "react/jsx-runtime";
+var cx14 = (className) => `hc-block-${className}`;
+var Block = ({
+  variant = "icon",
+  visual,
+  label,
+  description,
+  style = "primary",
+  onClick,
+  showArrow = true,
+  className = ""
+}) => {
+  if (variant === "icon") {
+    const containerClasses2 = [
+      cx14("icon"),
+      onClick && cx14("icon--clickable"),
+      className
+    ].filter(Boolean).join(" ");
+    const iconContainerClass = style === "primary" ? cx14("icon-container--primary") : cx14("icon-container--secondary");
+    return /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        className: containerClasses2,
+        onClick,
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick ? 0 : void 0,
+        children: [
+          /* @__PURE__ */ jsx14("div", { className: iconContainerClass, children: visual }),
+          /* @__PURE__ */ jsxs14("div", { className: cx14("text-container"), children: [
+            /* @__PURE__ */ jsx14("div", { className: cx14("icon-label"), children: label }),
+            description && /* @__PURE__ */ jsx14("div", { className: cx14("icon-description"), children: description })
+          ] })
+        ]
+      }
+    );
+  }
+  const containerClasses = [
+    cx14("image"),
+    onClick && cx14("image--clickable"),
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      className: containerClasses,
+      onClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      children: [
+        /* @__PURE__ */ jsx14("div", { className: cx14("image-container"), children: visual }),
+        /* @__PURE__ */ jsxs14("div", { className: cx14("footer"), children: [
+          /* @__PURE__ */ jsx14("span", { className: cx14("image-label"), children: label }),
+          showArrow && /* @__PURE__ */ jsx14("span", { className: cx14("arrow"), children: "\u2192" })
+        ] })
+      ]
+    }
+  );
+};
+Block.displayName = "Block";
+
+// src/components/ReviewCard/ReviewCard.tsx
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var cx15 = (className) => `hc-review-${className}`;
+var ReviewCard = ({
+  name,
+  date,
+  rating,
+  quote,
+  className
+}) => {
+  const containerClasses = [cx15("container"), className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs15("div", { className: containerClasses, children: [
+    /* @__PURE__ */ jsx15("div", { className: cx15("name"), children: name }),
+    /* @__PURE__ */ jsxs15("div", { className: cx15("frame"), children: [
+      /* @__PURE__ */ jsx15("div", { className: cx15("stars"), children: /* @__PURE__ */ jsx15(Rating, { variant: "stars", value: rating, size: "medium" }) }),
+      /* @__PURE__ */ jsx15("div", { className: cx15("quote"), children: quote })
+    ] }),
+    /* @__PURE__ */ jsx15("div", { className: cx15("date"), children: date })
+  ] });
+};
+ReviewCard.displayName = "ReviewCard";
+
+// src/components/FAQ/FAQ.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx16, jsxs as jsxs16 } from "react/jsx-runtime";
+var cx16 = (className) => `hc-faq-${className}`;
+var ChevronIcon2 = ({ isOpen }) => {
+  const iconClasses = [
+    cx16("chevron"),
+    isOpen && cx16("chevron--open")
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx16(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: iconClasses,
+      children: /* @__PURE__ */ jsx16(
+        "path",
+        {
+          d: "M6 9L12 15L18 9",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+};
+var FAQ = ({
+  items,
+  defaultOpenIndex = null,
+  allowMultiple = false,
+  className
+}) => {
+  const [openIndices, setOpenIndices] = useState4(
+    defaultOpenIndex !== null ? /* @__PURE__ */ new Set([defaultOpenIndex]) : /* @__PURE__ */ new Set()
+  );
+  const toggleItem = (index) => {
+    setOpenIndices((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(index)) {
+        newSet.delete(index);
+      } else {
+        if (!allowMultiple) {
+          newSet.clear();
+        }
+        newSet.add(index);
+      }
+      return newSet;
+    });
+  };
+  const containerClasses = [cx16("container"), className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx16("div", { className: containerClasses, children: items.map((item, index) => {
+    const isOpen = openIndices.has(index);
+    const answerClasses = isOpen ? cx16("answer--open") : cx16("answer");
+    return /* @__PURE__ */ jsxs16("div", { className: cx16("item"), children: [
+      /* @__PURE__ */ jsx16(
+        Button,
+        {
+          variant: "link",
+          size: "medium",
+          className: cx16("question-btn"),
+          onClick: () => toggleItem(index),
+          "aria-expanded": isOpen,
+          "aria-controls": `faq-answer-${index}`,
+          rightIcon: /* @__PURE__ */ jsx16("div", { className: cx16("icon-container"), children: /* @__PURE__ */ jsx16(ChevronIcon2, { isOpen }) }),
+          children: /* @__PURE__ */ jsx16("span", { className: cx16("question-text"), children: item.question })
+        }
+      ),
+      /* @__PURE__ */ jsx16("div", { id: `faq-answer-${index}`, className: answerClasses, children: /* @__PURE__ */ jsx16("p", { className: cx16("answer-text"), children: item.answer }) })
+    ] }, index);
+  }) });
+};
+FAQ.displayName = "FAQ";
+
+// src/components/Benefits/Benefits.tsx
+import { jsx as jsx17, jsxs as jsxs17 } from "react/jsx-runtime";
+var cx17 = (className) => `hc-benefits-${className}`;
+var Benefits = ({
+  title = "Ihre Vorteile mit HotelCard",
+  subtitle = "Mit HotelCard sparen Sie bei jedem Aufenthalt",
+  benefits = [
+    {
+      title: "\xDCber 500 Hotels",
+      description: "Grosse Auswahl in der ganzen Schweiz"
+    },
+    {
+      title: "Bis zu 50% Rabatt",
+      description: "Exklusive Mitglieder-Preise"
+    },
+    {
+      title: "Kein Buchungszwang",
+      description: "Buchen Sie, wann Sie m\xF6chten"
+    },
+    {
+      title: "Kostenlose Stornierung",
+      description: "Flexible Buchungsbedingungen"
+    }
+  ],
+  contactTitle = "Haben Sie Fragen?",
+  contactDescription = "Unser Kundenservice hilft Ihnen gerne weiter",
+  contactButtonText = "Kontakt aufnehmen",
+  onContactClick,
+  className
+}) => {
+  const sectionClasses = [cx17("section"), className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx17("section", { className: sectionClasses, children: /* @__PURE__ */ jsxs17("div", { className: cx17("container"), children: [
+    /* @__PURE__ */ jsxs17("div", { className: cx17("header"), children: [
+      /* @__PURE__ */ jsx17("h2", { className: cx17("title"), children: title }),
+      subtitle && /* @__PURE__ */ jsx17("p", { className: cx17("subtitle"), children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsx17("div", { className: cx17("grid"), children: benefits.map((benefit, index) => /* @__PURE__ */ jsxs17("div", { className: cx17("item"), children: [
+      /* @__PURE__ */ jsx17("h3", { className: cx17("item-title"), children: benefit.title }),
+      benefit.description && /* @__PURE__ */ jsx17("p", { className: cx17("item-description"), children: benefit.description })
+    ] }, index)) }),
+    contactTitle && /* @__PURE__ */ jsxs17("div", { className: cx17("contact-card"), children: [
+      /* @__PURE__ */ jsx17("h3", { className: cx17("contact-title"), children: contactTitle }),
+      contactDescription && /* @__PURE__ */ jsx17("p", { className: cx17("contact-description"), children: contactDescription }),
+      contactButtonText && /* @__PURE__ */ jsx17(
+        Button,
+        {
+          variant: "secondary",
+          size: "medium",
+          onClick: onContactClick,
+          className: cx17("contact-btn"),
+          children: contactButtonText
+        }
+      )
+    ] })
+  ] }) });
+};
+Benefits.displayName = "Benefits";
+
+// src/components/Pin/Pin.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs18 } from "react/jsx-runtime";
+var cx18 = (className) => `hc-pin-${className}`;
+var HeartIcon = ({ className }) => /* @__PURE__ */ jsx18(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx18("path", { d: "M8 14.2333L6.96667 13.2933C3.6 10.24 1.33333 8.18667 1.33333 5.66667C1.33333 3.61333 2.94667 2 5 2C6.16 2 7.27333 2.54 8 3.39333C8.72667 2.54 9.84 2 11 2C13.0533 2 14.6667 3.61333 14.6667 5.66667C14.6667 8.18667 12.4 10.24 9.03333 13.2933L8 14.2333Z" })
+  }
+);
+var HomeIcon = ({ className }) => /* @__PURE__ */ jsx18(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx18("path", { d: "M6.66667 13.3333V9.33333H9.33333V13.3333H12.6667V8H14.6667L8 2L1.33333 8H3.33333V13.3333H6.66667Z" })
+  }
+);
+var Pin = forwardRef2(
+  ({
+    variant = "price",
+    viewed = false,
+    currency = "CHF",
+    price = 0,
+    showFavorite = false,
+    disabled = false,
+    onClick,
+    className = ""
+  }, ref) => {
+    const styleVariant = viewed ? "secondary" : "primary";
+    const pinClasses = [
+      cx18("pin"),
+      cx18(styleVariant),
+      variant === "hotel" && cx18("hotel"),
+      className
+    ].filter(Boolean).join(" ");
+    const formattedPrice = typeof price === "number" ? Math.round(price).toString() : price;
+    return /* @__PURE__ */ jsxs18(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: pinClasses,
+        disabled,
+        onClick,
+        children: [
+          /* @__PURE__ */ jsx18("div", { className: cx18("body"), children: variant === "price" ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
+            /* @__PURE__ */ jsx18("span", { className: cx18("currency"), children: currency }),
+            /* @__PURE__ */ jsx18("span", { className: cx18("price"), children: formattedPrice }),
+            showFavorite && /* @__PURE__ */ jsx18("div", { className: cx18("favorite-container"), children: /* @__PURE__ */ jsx18(HeartIcon, { className: cx18("favorite-icon") }) })
+          ] }) : /* @__PURE__ */ jsx18(HomeIcon, { className: cx18("hotel-icon") }) }),
+          /* @__PURE__ */ jsx18("div", { className: cx18("pointer"), children: /* @__PURE__ */ jsx18("div", { className: cx18("pointer-inner") }) })
+        ]
+      }
+    );
+  }
+);
+Pin.displayName = "Pin";
+
 // src/components/icons/HeartIcon.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
-var HeartIcon = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */ jsx14(
+import { jsx as jsx19 } from "react/jsx-runtime";
+var HeartIcon2 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */ jsx19(
   "svg",
   {
     width: size,
@@ -1042,14 +1330,14 @@ var HeartIcon = ({ filled = false, className = "", size = 24 }) => /* @__PURE__
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ jsx14("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
+    children: /* @__PURE__ */ jsx19("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
   }
 );
-HeartIcon.displayName = "HeartIcon";
+HeartIcon2.displayName = "HeartIcon";
 
 // src/components/icons/StarIcon.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
-var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */ jsxs14(
+import { jsx as jsx20, jsxs as jsxs19 } from "react/jsx-runtime";
+var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */ jsxs19(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1059,22 +1347,22 @@ var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */
     fill: "none",
     className,
     children: [
-      /* @__PURE__ */ jsx15("g", { clipPath: "url(#clip0_star_icon)", children: /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx20("g", { clipPath: "url(#clip0_star_icon)", children: /* @__PURE__ */ jsx20(
         "path",
         {
           d: "M4.80018 0.366577C4.93104 0.366577 5.05173 0.440968 5.11135 0.557659L6.18011 2.66102L8.50521 3.03152C8.63462 3.05194 8.74222 3.14383 8.78294 3.26927C8.82365 3.39472 8.79021 3.53183 8.6986 3.62518L7.03366 5.29533L7.40155 7.6277C7.42191 7.75752 7.3681 7.88879 7.26195 7.9661C7.15581 8.04341 7.01476 8.05508 6.89843 7.99528L4.80018 6.92463L2.70192 7.99528C2.58559 8.05508 2.44454 8.04341 2.33839 7.9661C2.23225 7.88879 2.17844 7.75898 2.1988 7.6277L2.56523 5.29533L0.901751 3.62518C0.808689 3.53183 0.776699 3.39472 0.817413 3.26927C0.858128 3.14383 0.964277 3.05194 1.09515 3.03152L3.42024 2.66102L4.49045 0.557659C4.55007 0.440968 4.67076 0.366577 4.80163 0.366577H4.80018Z",
           fill: filled ? "#1F2937" : "#D1D5DB"
         }
       ) }),
-      /* @__PURE__ */ jsx15("defs", { children: /* @__PURE__ */ jsx15("clipPath", { id: "clip0_star_icon", children: /* @__PURE__ */ jsx15("rect", { width: "8", height: "8", fill: "white", transform: "translate(0.800049 0.199951)" }) }) })
+      /* @__PURE__ */ jsx20("defs", { children: /* @__PURE__ */ jsx20("clipPath", { id: "clip0_star_icon", children: /* @__PURE__ */ jsx20("rect", { width: "8", height: "8", fill: "white", transform: "translate(0.800049 0.199951)" }) }) })
     ]
   }
 );
 StarIcon4.displayName = "StarIcon";
 
 // src/components/icons/ChevronLeftIcon.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ jsx16(
+import { jsx as jsx21 } from "react/jsx-runtime";
+var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ jsx21(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1087,14 +1375,14 @@ var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ jsx16(
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ jsx16("polyline", { points: "15 18 9 12 15 6" })
+    children: /* @__PURE__ */ jsx21("polyline", { points: "15 18 9 12 15 6" })
   }
 );
 ChevronLeftIcon.displayName = "ChevronLeftIcon";
 
 // src/components/icons/ChevronRightIcon.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
-var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ jsx17(
+import { jsx as jsx22 } from "react/jsx-runtime";
+var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ jsx22(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1107,14 +1395,14 @@ var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ jsx17
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ jsx17("polyline", { points: "9 18 15 12 9 6" })
+    children: /* @__PURE__ */ jsx22("polyline", { points: "9 18 15 12 9 6" })
   }
 );
 ChevronRightIcon2.displayName = "ChevronRightIcon";
 
 // src/components/icons/PinIcon.tsx
-import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
-var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ jsxs15(
+import { jsx as jsx23, jsxs as jsxs20 } from "react/jsx-runtime";
+var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ jsxs20(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1124,7 +1412,7 @@ var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ jsxs15(
     fill: "none",
     className,
     children: [
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx23(
         "path",
         {
           fillRule: "evenodd",
@@ -1133,7 +1421,7 @@ var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ jsxs15(
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx23(
         "path",
         {
           fillRule: "evenodd",
@@ -1146,8 +1434,51 @@ var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ jsxs15(
   }
 );
 PinIcon.displayName = "PinIcon";
+
+// src/hooks/useDebounce.ts
+import { useState as useState5, useEffect as useEffect3 } from "react";
+var useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState5(value);
+  useEffect3(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debouncedValue;
+};
+
+// src/utils/formatPrice.ts
+var formatPrice = (amount, currency = "CHF", locale = "de-CH") => {
+  return new Intl.NumberFormat(locale, {
+    style: "currency",
+    currency,
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
+  }).format(amount);
+};
+
+// src/utils/formatDate.ts
+import { format, parseISO } from "date-fns";
+import { de, enUS, fr, it } from "date-fns/locale";
+var locales = { de, en: enUS, fr, it };
+var formatDate = (date, formatStr = "dd. MMM yyyy", locale = "de") => {
+  const d = typeof date === "string" ? parseISO(date) : date;
+  return format(d, formatStr, { locale: locales[locale] || de });
+};
+var formatDateRange = (checkIn, checkOut, locale = "de") => {
+  const start = formatDate(checkIn, "dd.", locale);
+  const end = formatDate(checkOut, "dd. MMM yyyy", locale);
+  return `${start} - ${end}`;
+};
+
+// src/utils/calculateDiscount.ts
+var calculateDiscount = (originalPrice, discountedPrice) => {
+  if (originalPrice <= 0) return 0;
+  return Math.round((originalPrice - discountedPrice) / originalPrice * 100);
+};
 export {
   Badge,
+  Benefits,
+  Block,
   Button,
   Card,
   Checkbox,
@@ -1157,13 +1488,21 @@ export {
   CompactCard,
   Divider,
   Dropdown,
-  HeartIcon,
+  FAQ,
+  HeartIcon2 as HeartIcon,
   Input,
   Modal,
+  Pin,
   PinIcon,
   RadioButton,
   Rating,
+  ReviewCard,
   SectionHeader,
-  StarIcon4 as StarIcon
+  StarIcon4 as StarIcon,
+  calculateDiscount,
+  formatDate,
+  formatDateRange,
+  formatPrice,
+  useDebounce
 };
 //# sourceMappingURL=index.js.map