@hotelcard/ui 0.0.5 → 0.0.6

package/dist/index.cjs

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Badge: () => Badge,
+  Benefits: () => Benefits,
+  Block: () => Block,
   Button: () => Button,
   Card: () => Card,
   Checkbox: () => Checkbox,
@@ -30,12 +32,15 @@ __export(index_exports, {
   CompactCard: () => CompactCard,
   Divider: () => Divider,
   Dropdown: () => Dropdown,
-  HeartIcon: () => HeartIcon,
+  FAQ: () => FAQ,
+  HeartIcon: () => HeartIcon2,
   Input: () => Input,
   Modal: () => Modal,
+  Pin: () => Pin,
   PinIcon: () => PinIcon,
   RadioButton: () => RadioButton,
   Rating: () => Rating,
+  ReviewCard: () => ReviewCard,
   SectionHeader: () => SectionHeader,
   StarIcon: () => StarIcon4
 });
@@ -1071,9 +1076,297 @@ var Input = ({
 };
 Input.displayName = "Input";
 
-// src/components/icons/HeartIcon.tsx
+// src/components/Block/Block.tsx
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var HeartIcon = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+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__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
+      {
+        className: containerClasses2,
+        onClick,
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick ? 0 : void 0,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: iconContainerClass, children: visual }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cx14("text-container"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cx14("icon-label"), children: label }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cx14("icon-description"), children: description })
+          ] })
+        ]
+      }
+    );
+  }
+  const containerClasses = [
+    cx14("image"),
+    onClick && cx14("image--clickable"),
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      className: containerClasses,
+      onClick,
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick ? 0 : void 0,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cx14("image-container"), children: visual }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cx14("footer"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cx14("image-label"), children: label }),
+          showArrow && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cx14("arrow"), children: "\u2192" })
+        ] })
+      ]
+    }
+  );
+};
+Block.displayName = "Block";
+
+// src/components/ReviewCard/ReviewCard.tsx
+var import_jsx_runtime15 = require("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__ */ (0, import_jsx_runtime15.jsxs)("div", { className: containerClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cx15("name"), children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cx15("frame"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cx15("stars"), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Rating, { variant: "stars", value: rating, size: "medium" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cx15("quote"), children: quote })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cx15("date"), children: date })
+  ] });
+};
+ReviewCard.displayName = "ReviewCard";
+
+// src/components/FAQ/FAQ.tsx
+var import_react6 = require("react");
+var import_jsx_runtime16 = require("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__ */ (0, import_jsx_runtime16.jsx)(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className: iconClasses,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        "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] = (0, import_react6.useState)(
+    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__ */ (0, import_jsx_runtime16.jsx)("div", { className: containerClasses, children: items.map((item, index) => {
+    const isOpen = openIndices.has(index);
+    const answerClasses = isOpen ? cx16("answer--open") : cx16("answer");
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cx16("item"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Button,
+        {
+          variant: "link",
+          size: "medium",
+          className: cx16("question-btn"),
+          onClick: () => toggleItem(index),
+          "aria-expanded": isOpen,
+          "aria-controls": `faq-answer-${index}`,
+          rightIcon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cx16("icon-container"), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ChevronIcon2, { isOpen }) }),
+          children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: cx16("question-text"), children: item.question })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { id: `faq-answer-${index}`, className: answerClasses, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: cx16("answer-text"), children: item.answer }) })
+    ] }, index);
+  }) });
+};
+FAQ.displayName = "FAQ";
+
+// src/components/Benefits/Benefits.tsx
+var import_jsx_runtime17 = require("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__ */ (0, import_jsx_runtime17.jsx)("section", { className: sectionClasses, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cx17("container"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cx17("header"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: cx17("title"), children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: cx17("subtitle"), children: subtitle })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cx17("grid"), children: benefits.map((benefit, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cx17("item"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: cx17("item-title"), children: benefit.title }),
+      benefit.description && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: cx17("item-description"), children: benefit.description })
+    ] }, index)) }),
+    contactTitle && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cx17("contact-card"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h3", { className: cx17("contact-title"), children: contactTitle }),
+      contactDescription && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: cx17("contact-description"), children: contactDescription }),
+      contactButtonText && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        Button,
+        {
+          variant: "secondary",
+          size: "medium",
+          onClick: onContactClick,
+          className: cx17("contact-btn"),
+          children: contactButtonText
+        }
+      )
+    ] })
+  ] }) });
+};
+Benefits.displayName = "Benefits";
+
+// src/components/Pin/Pin.tsx
+var import_react7 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var cx18 = (className) => `hc-pin-${className}`;
+var HeartIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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__ */ (0, import_jsx_runtime18.jsx)(
+  "svg",
+  {
+    className,
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M6.66667 13.3333V9.33333H9.33333V13.3333H12.6667V8H14.6667L8 2L1.33333 8H3.33333V13.3333H6.66667Z" })
+  }
+);
+var Pin = (0, import_react7.forwardRef)(
+  ({
+    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__ */ (0, import_jsx_runtime18.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: pinClasses,
+        disabled,
+        onClick,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cx18("body"), children: variant === "price" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: cx18("currency"), children: currency }),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: cx18("price"), children: formattedPrice }),
+            showFavorite && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cx18("favorite-container"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HeartIcon, { className: cx18("favorite-icon") }) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(HomeIcon, { className: cx18("hotel-icon") }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cx18("pointer"), children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cx18("pointer-inner") }) })
+        ]
+      }
+    );
+  }
+);
+Pin.displayName = "Pin";
+
+// src/components/icons/HeartIcon.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var HeartIcon2 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
   "svg",
   {
     width: size,
@@ -1085,14 +1378,14 @@ var HeartIcon = ({ filled = false, className = "", size = 24 }) => /* @__PURE__
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("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__ */ (0, import_jsx_runtime19.jsx)("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
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1102,22 +1395,22 @@ var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */
     fill: "none",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("g", { clipPath: "url(#clip0_star_icon)", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("g", { clipPath: "url(#clip0_star_icon)", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "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__ */ (0, import_jsx_runtime15.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("clipPath", { id: "clip0_star_icon", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("rect", { width: "8", height: "8", fill: "white", transform: "translate(0.800049 0.199951)" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("clipPath", { id: "clip0_star_icon", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("rect", { width: "8", height: "8", fill: "white", transform: "translate(0.800049 0.199951)" }) }) })
     ]
   }
 );
 StarIcon4.displayName = "StarIcon";
 
 // src/components/icons/ChevronLeftIcon.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1130,14 +1423,14 @@ var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, imp
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("polyline", { points: "15 18 9 12 15 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("polyline", { points: "15 18 9 12 15 6" })
   }
 );
 ChevronLeftIcon.displayName = "ChevronLeftIcon";
 
 // src/components/icons/ChevronRightIcon.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1150,14 +1443,14 @@ var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, i
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("polyline", { points: "9 18 15 12 9 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("polyline", { points: "9 18 15 12 9 6" })
   }
 );
 ChevronRightIcon2.displayName = "ChevronRightIcon";
 
 // src/components/icons/PinIcon.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -1167,7 +1460,7 @@ var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_
     fill: "none",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -1176,7 +1469,7 @@ var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -1192,6 +1485,8 @@ PinIcon.displayName = "PinIcon";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Badge,
+  Benefits,
+  Block,
   Button,
   Card,
   Checkbox,
@@ -1201,12 +1496,15 @@ PinIcon.displayName = "PinIcon";
   CompactCard,
   Divider,
   Dropdown,
+  FAQ,
   HeartIcon,
   Input,
   Modal,
+  Pin,
   PinIcon,
   RadioButton,
   Rating,
+  ReviewCard,
   SectionHeader,
   StarIcon
 });