@hotelcard/ui 0.0.11 → 0.0.12

package/README.md

@@ -80,6 +80,7 @@ function App() {
 | `SectionHeader` | Section title with "Show all" button |
 | `WhenContent` | Date/month picker for search (accepts labels as props) |
 | `DualCalendar` | Calendar component for date range selection |
+| `GuestContent` | Guest selector with adults, children (with ages), and pet toggle |
 
 ### Icons
 
@@ -201,6 +202,41 @@ import { WhenContent } from '@hotelcard/ui';
 
 **Note**: All text labels are passed as props. The consuming app provides translated strings.
 
+### GuestContent (Guest Selector)
+
+```tsx
+import { GuestContent, type GuestCounts } from '@hotelcard/ui';
+
+const [guests, setGuests] = useState<GuestCounts>({
+  adults: 2,
+  children: 0,
+  childrenAges: [],
+});
+const [petFilter, setPetFilter] = useState(0);
+
+<GuestContent
+  guests={guests}
+  onChange={setGuests}
+  petFilter={petFilter}
+  onPetChange={setPetFilter}
+  showPetToggle={true}
+  labels={{
+    adults: 'Adults',
+    children: 'Children',
+    pet: 'Pet',
+    ageOfChild: 'Age of child',
+    age: 'Age',
+    decreaseAdults: 'Decrease adults',
+    increaseAdults: 'Increase adults',
+    decreaseChildren: 'Decrease children',
+    increaseChildren: 'Increase children',
+    togglePets: 'Toggle pets',
+  }}
+/>
+```
+
+**Note**: All text labels are passed as props. The consuming app provides translated strings.
+
 ### Checkbox & RadioButton
 
 ```tsx
@@ -245,6 +281,10 @@ import type {
   WhenContentProps,
   WhenContentLabels,
   DateRange,
+  GuestContentProps,
+  GuestContentLabels,
+  GuestCounts,
+  ChildAgeError,
 
   // Data Types
   Hotel,

package/dist/index.cjs

@@ -35,6 +35,7 @@ __export(index_exports, {
   Dropdown: () => Dropdown,
   DualCalendar: () => DualCalendar,
   FAQ: () => FAQ,
+  GuestContent: () => GuestContent,
   HeartIcon: () => HeartIcon2,
   HotelCardUIProvider: () => HotelCardUIProvider,
   Input: () => Input,
@@ -2005,9 +2006,199 @@ var DateSelector = ({
 };
 DateSelector.displayName = "DateSelector";
 
-// src/components/icons/HeartIcon.tsx
+// src/components/GuestSelector/GuestContent.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var HeartIcon2 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var MinusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M0 10C0 9.48047 0.477679 9.0625 1.07143 9.0625H18.9286C19.5223 9.0625 20 9.48047 20 10C20 10.5195 19.5223 10.9375 18.9286 10.9375H1.07143C0.477679 10.9375 0 10.5195 0 10Z", fill: "currentColor" }) });
+var PlusIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { d: "M11.0714 2.1875C11.0714 1.66797 10.5938 1.25 10 1.25C9.40625 1.25 8.92857 1.66797 8.92857 2.1875V9.0625H1.07143C0.477679 9.0625 0 9.48047 0 10C0 10.5195 0.477679 10.9375 1.07143 10.9375H8.92857V17.8125C8.92857 18.332 9.40625 18.75 10 18.75C10.5938 18.75 11.0714 18.332 11.0714 17.8125V10.9375H18.9286C19.5223 10.9375 20 10.5195 20 10C20 9.48047 19.5223 9.0625 18.9286 9.0625H11.0714V2.1875Z", fill: "currentColor" }) });
+var DropdownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  "svg",
+  {
+    className: "hc-guest-content__select-icon",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+      "path",
+      {
+        d: "M11.24 16.6873C11.6598 17.1042 12.3386 17.1042 12.7539 16.6873L19.6852 9.81633C20.1049 9.39939 20.1049 8.7252 19.6852 8.3127C19.2654 7.9002 18.5866 7.89577 18.1713 8.3127L11.9992 14.4296L5.82701 8.3127C5.40724 7.89577 4.72846 7.89577 4.31316 8.3127C3.89785 8.72964 3.89338 9.40383 4.31316 9.81633L11.2445 16.6873H11.24Z",
+        fill: "#6B7280"
+      }
+    )
+  }
+);
+var defaultLabels2 = {
+  adults: "Adults",
+  children: "Children",
+  pet: "Pet",
+  ageOfChild: "Age of child",
+  age: "Age",
+  decreaseAdults: "Decrease adults",
+  increaseAdults: "Increase adults",
+  decreaseChildren: "Decrease children",
+  increaseChildren: "Increase children",
+  togglePets: "Toggle pets"
+};
+var GuestContent = ({
+  guests,
+  onChange,
+  petFilter = 0,
+  onPetChange,
+  showPetToggle = true,
+  className = "",
+  childAgeErrors = [],
+  onErrorClear,
+  labels: labelsProp
+}) => {
+  const labels = { ...defaultLabels2, ...labelsProp };
+  const childrenAges = Array.isArray(guests.childrenAges) ? guests.childrenAges : [];
+  const handleIncrement = (type) => {
+    if (type === "children" && guests.children >= 6) return;
+    if (type === "adults" && guests.adults >= 10) return;
+    const newChildrenAges = type === "children" ? [...childrenAges, null] : childrenAges;
+    onChange({
+      ...guests,
+      [type]: guests[type] + 1,
+      childrenAges: newChildrenAges
+    });
+  };
+  const handleDecrement = (type) => {
+    if (type === "adults" && guests.adults <= 1) return;
+    if (type === "children" && guests.children <= 0) return;
+    const newChildrenAges = type === "children" ? childrenAges.slice(0, -1) : childrenAges;
+    onChange({
+      ...guests,
+      [type]: guests[type] - 1,
+      childrenAges: newChildrenAges
+    });
+  };
+  const handleAgeChange = (index, value) => {
+    const newChildrenAges = [...childrenAges];
+    newChildrenAges[index] = value === "" ? null : parseInt(value, 10);
+    onChange({
+      ...guests,
+      childrenAges: newChildrenAges
+    });
+    onErrorClear?.(index);
+  };
+  const containerClasses = ["hc-guest-content", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: containerClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hc-guest-content__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hc-guest-content__label", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hc-guest-content__name", children: labels.adults }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hc-guest-content__counter", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "hc-guest-content__counter-button",
+            onClick: () => handleDecrement("adults"),
+            disabled: guests.adults <= 1,
+            "aria-label": labels.decreaseAdults,
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MinusIcon, {})
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hc-guest-content__counter-value", children: guests.adults }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "hc-guest-content__counter-button",
+            onClick: () => handleIncrement("adults"),
+            disabled: guests.adults >= 10,
+            "aria-label": labels.increaseAdults,
+            children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PlusIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hc-guest-content__row hc-guest-content__row--children", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hc-guest-content__row-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hc-guest-content__label", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hc-guest-content__name", children: labels.children }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hc-guest-content__counter", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "hc-guest-content__counter-button",
+              onClick: () => handleDecrement("children"),
+              disabled: guests.children <= 0,
+              "aria-label": labels.decreaseChildren,
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MinusIcon, {})
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hc-guest-content__counter-value", children: guests.children }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "hc-guest-content__counter-button",
+              onClick: () => handleIncrement("children"),
+              disabled: guests.children >= 6,
+              "aria-label": labels.increaseChildren,
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PlusIcon, {})
+            }
+          )
+        ] })
+      ] }),
+      guests.children > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "div",
+        {
+          className: "hc-guest-content__children-dropdowns",
+          style: {
+            gridTemplateColumns: guests.children === 1 ? "1fr" : "repeat(2, 1fr)"
+          },
+          children: Array.from({ length: guests.children }).map((_, index) => {
+            const currentAge = childrenAges[index];
+            const hasError = childAgeErrors.some((error) => error.index === index);
+            const errorMessage = childAgeErrors.find((error) => error.index === index)?.message;
+            return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hc-guest-content__child-dropdown", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("label", { htmlFor: `child-age-${index}`, children: labels.ageOfChild }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hc-guest-content__select-wrapper", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+                  "select",
+                  {
+                    id: `child-age-${index}`,
+                    value: currentAge === null || currentAge === void 0 ? "" : currentAge,
+                    onChange: (e) => handleAgeChange(index, e.target.value),
+                    className: `hc-guest-content__select ${hasError ? "hc-guest-content__select--error" : ""}`,
+                    "aria-invalid": hasError,
+                    "aria-describedby": hasError ? `error-${index}` : void 0,
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", children: labels.age }),
+                      Array.from({ length: 18 }, (_2, age) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: age, children: age }, age))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DropdownIcon, {})
+              ] }),
+              hasError && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { id: `error-${index}`, className: "hc-guest-content__error-text", children: errorMessage })
+            ] }, index);
+          })
+        }
+      )
+    ] }),
+    showPetToggle && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "hc-guest-content__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hc-guest-content__label", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hc-guest-content__name", children: labels.pet }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "hc-guest-content__toggle-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "hc-guest-content__toggle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: petFilter === 1,
+            onChange: (e) => onPetChange?.(e.target.checked ? 1 : 0),
+            "aria-label": labels.togglePets
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "hc-guest-content__slider" })
+      ] }) })
+    ] })
+  ] });
+};
+
+// src/components/icons/HeartIcon.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var HeartIcon2 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   "svg",
   {
     width: size,
@@ -2019,14 +2210,14 @@ var HeartIcon2 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    children: /* @__PURE__ */ (0, import_jsx_runtime23.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_runtime24.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" })
   }
 );
 HeartIcon2.displayName = "HeartIcon";
 
 // src/components/icons/StarIcon.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
-var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2036,22 +2227,22 @@ var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */
     fill: "none",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("g", { clipPath: "url(#clip0_star_icon)", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("g", { clipPath: "url(#clip0_star_icon)", children: /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime24.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("clipPath", { id: "clip0_star_icon", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("rect", { width: "8", height: "8", fill: "white", transform: "translate(0.800049 0.199951)" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("clipPath", { id: "clip0_star_icon", children: /* @__PURE__ */ (0, import_jsx_runtime25.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_runtime25 = require("react/jsx-runtime");
-var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2064,14 +2255,14 @@ var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, imp
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("polyline", { points: "15 18 9 12 15 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("polyline", { points: "15 18 9 12 15 6" })
   }
 );
 ChevronLeftIcon.displayName = "ChevronLeftIcon";
 
 // src/components/icons/ChevronRightIcon.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2084,14 +2275,14 @@ var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ (0, i
     strokeLinecap: "round",
     strokeLinejoin: "round",
     className,
-    children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("polyline", { points: "9 18 15 12 9 6" })
+    children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("polyline", { points: "9 18 15 12 9 6" })
   }
 );
 ChevronRightIcon2.displayName = "ChevronRightIcon";
 
 // src/components/icons/PinIcon.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -2101,7 +2292,7 @@ var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_
     fill: "none",
     className,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2110,7 +2301,7 @@ var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ (0, import_jsx_
           fill: "currentColor"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "path",
         {
           fillRule: "evenodd",
@@ -2170,6 +2361,7 @@ var calculateDiscount = (originalPrice, discountedPrice) => {
   Dropdown,
   DualCalendar,
   FAQ,
+  GuestContent,
   HeartIcon,
   HotelCardUIProvider,
   Input,