@hotelcard/ui 0.0.11 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Potentially problematic release.
This version of @hotelcard/ui might be problematic. Click here for more details.
- package/README.md +40 -0
- package/dist/index.cjs +209 -17
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +201 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +69 -1
- package/dist/index.d.ts +69 -1
- package/dist/index.js +208 -17
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -612,6 +612,74 @@ interface DualCalendarProps {
|
|
|
612
612
|
}
|
|
613
613
|
declare const DualCalendar: React__default.FC<DualCalendarProps>;
|
|
614
614
|
|
|
615
|
+
/**
|
|
616
|
+
* Guest counts object
|
|
617
|
+
*/
|
|
618
|
+
interface GuestCounts {
|
|
619
|
+
adults: number;
|
|
620
|
+
children: number;
|
|
621
|
+
childrenAges: Array<number | null>;
|
|
622
|
+
}
|
|
623
|
+
interface ChildAgeError {
|
|
624
|
+
index: number;
|
|
625
|
+
message: string;
|
|
626
|
+
}
|
|
627
|
+
/**
|
|
628
|
+
* Labels for GuestContent component
|
|
629
|
+
* All text is passed as props - consuming apps provide translations
|
|
630
|
+
*/
|
|
631
|
+
interface GuestContentLabels {
|
|
632
|
+
/** Label for adults row (e.g., "Adults") */
|
|
633
|
+
adults?: string;
|
|
634
|
+
/** Label for children row (e.g., "Children") */
|
|
635
|
+
children?: string;
|
|
636
|
+
/** Label for pet toggle (e.g., "Pet") */
|
|
637
|
+
pet?: string;
|
|
638
|
+
/** Label for child age dropdown (e.g., "Age of child") */
|
|
639
|
+
ageOfChild?: string;
|
|
640
|
+
/** Placeholder for age dropdown (e.g., "Age") */
|
|
641
|
+
age?: string;
|
|
642
|
+
/** Aria label for decrease adults button */
|
|
643
|
+
decreaseAdults?: string;
|
|
644
|
+
/** Aria label for increase adults button */
|
|
645
|
+
increaseAdults?: string;
|
|
646
|
+
/** Aria label for decrease children button */
|
|
647
|
+
decreaseChildren?: string;
|
|
648
|
+
/** Aria label for increase children button */
|
|
649
|
+
increaseChildren?: string;
|
|
650
|
+
/** Aria label for pet toggle */
|
|
651
|
+
togglePets?: string;
|
|
652
|
+
}
|
|
653
|
+
interface GuestContentProps {
|
|
654
|
+
/** Current guest counts */
|
|
655
|
+
guests: GuestCounts;
|
|
656
|
+
/** Called when guests change */
|
|
657
|
+
onChange: (guests: GuestCounts) => void;
|
|
658
|
+
/** Current pet filter value (0 or 1) */
|
|
659
|
+
petFilter?: number;
|
|
660
|
+
/** Called when pet filter changes */
|
|
661
|
+
onPetChange?: (value: number) => void;
|
|
662
|
+
/** Show pet toggle */
|
|
663
|
+
showPetToggle?: boolean;
|
|
664
|
+
/** Additional class name for container */
|
|
665
|
+
className?: string;
|
|
666
|
+
/** Validation errors for child ages */
|
|
667
|
+
childAgeErrors?: ChildAgeError[];
|
|
668
|
+
/** Called when an error is cleared (user selects an age) */
|
|
669
|
+
onErrorClear?: (index: number) => void;
|
|
670
|
+
/** Labels for all text content */
|
|
671
|
+
labels?: GuestContentLabels;
|
|
672
|
+
}
|
|
673
|
+
/**
|
|
674
|
+
* GuestContent - Shared guest selection UI
|
|
675
|
+
*
|
|
676
|
+
* Used by both desktop GuestSelector dropdown and mobile SearchModal.
|
|
677
|
+
* Contains adults counter, children counter with age dropdowns, and optional pet toggle.
|
|
678
|
+
*
|
|
679
|
+
* All text labels are passed as props - consuming apps provide translations.
|
|
680
|
+
*/
|
|
681
|
+
declare const GuestContent: React__default.FC<GuestContentProps>;
|
|
682
|
+
|
|
615
683
|
interface HeartIconProps {
|
|
616
684
|
filled?: boolean;
|
|
617
685
|
className?: string;
|
|
@@ -806,4 +874,4 @@ interface SearchFilters {
|
|
|
806
874
|
regions?: string[];
|
|
807
875
|
}
|
|
808
876
|
|
|
809
|
-
export { type Address, Badge, type BadgeProps, type BenefitItem, Benefits, type BenefitsProps, Block, type BlockProps, type Booking, Button, type ButtonProps, Card, type CardBadge, type CardProps, type CardRatingInfo, Checkbox, type CheckboxProps, type CheckboxSize, ChevronLeftIcon, ChevronRightIcon, Chip, type ChipProps, type ChipSize, type ChipState, CompactCard, type CompactCardBadge, type CompactCardProps, type DateRange, DateSelector, type DateSelectorProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, DualCalendar, FAQ, type FAQItem, type FAQProps, HeartIcon, type Hotel, HotelCardUIProvider, type HotelCardUIProviderProps, Input, type InputProps, type InputType, type Membership, Modal, type ModalProps, Pin, PinIcon, type PinProps, RadioButton, type RadioButtonProps, Rating, type RatingProps, ReviewCard, type ReviewCardProps, type SearchFilters, type SearchParams, SectionHeader, type SectionHeaderProps, StarIcon, type UIContextValue, type User, WhenContent, type WhenContentProps, calculateDiscount, formatDate, formatDateRange, formatPrice, useDebounce, useResponsive, useTranslation, useUIContext, useWindowData };
|
|
877
|
+
export { type Address, Badge, type BadgeProps, type BenefitItem, Benefits, type BenefitsProps, Block, type BlockProps, type Booking, Button, type ButtonProps, Card, type CardBadge, type CardProps, type CardRatingInfo, Checkbox, type CheckboxProps, type CheckboxSize, ChevronLeftIcon, ChevronRightIcon, type ChildAgeError, Chip, type ChipProps, type ChipSize, type ChipState, CompactCard, type CompactCardBadge, type CompactCardProps, type DateRange, DateSelector, type DateSelectorProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, DualCalendar, FAQ, type FAQItem, type FAQProps, GuestContent, type GuestContentLabels, type GuestContentProps, type GuestCounts, HeartIcon, type Hotel, HotelCardUIProvider, type HotelCardUIProviderProps, Input, type InputProps, type InputType, type Membership, Modal, type ModalProps, Pin, PinIcon, type PinProps, RadioButton, type RadioButtonProps, Rating, type RatingProps, ReviewCard, type ReviewCardProps, type SearchFilters, type SearchParams, SectionHeader, type SectionHeaderProps, StarIcon, type UIContextValue, type User, WhenContent, type WhenContentLabels, type WhenContentProps, calculateDiscount, formatDate, formatDateRange, formatPrice, useDebounce, useResponsive, useTranslation, useUIContext, useWindowData };
|
package/dist/index.d.ts
CHANGED
|
@@ -612,6 +612,74 @@ interface DualCalendarProps {
|
|
|
612
612
|
}
|
|
613
613
|
declare const DualCalendar: React__default.FC<DualCalendarProps>;
|
|
614
614
|
|
|
615
|
+
/**
|
|
616
|
+
* Guest counts object
|
|
617
|
+
*/
|
|
618
|
+
interface GuestCounts {
|
|
619
|
+
adults: number;
|
|
620
|
+
children: number;
|
|
621
|
+
childrenAges: Array<number | null>;
|
|
622
|
+
}
|
|
623
|
+
interface ChildAgeError {
|
|
624
|
+
index: number;
|
|
625
|
+
message: string;
|
|
626
|
+
}
|
|
627
|
+
/**
|
|
628
|
+
* Labels for GuestContent component
|
|
629
|
+
* All text is passed as props - consuming apps provide translations
|
|
630
|
+
*/
|
|
631
|
+
interface GuestContentLabels {
|
|
632
|
+
/** Label for adults row (e.g., "Adults") */
|
|
633
|
+
adults?: string;
|
|
634
|
+
/** Label for children row (e.g., "Children") */
|
|
635
|
+
children?: string;
|
|
636
|
+
/** Label for pet toggle (e.g., "Pet") */
|
|
637
|
+
pet?: string;
|
|
638
|
+
/** Label for child age dropdown (e.g., "Age of child") */
|
|
639
|
+
ageOfChild?: string;
|
|
640
|
+
/** Placeholder for age dropdown (e.g., "Age") */
|
|
641
|
+
age?: string;
|
|
642
|
+
/** Aria label for decrease adults button */
|
|
643
|
+
decreaseAdults?: string;
|
|
644
|
+
/** Aria label for increase adults button */
|
|
645
|
+
increaseAdults?: string;
|
|
646
|
+
/** Aria label for decrease children button */
|
|
647
|
+
decreaseChildren?: string;
|
|
648
|
+
/** Aria label for increase children button */
|
|
649
|
+
increaseChildren?: string;
|
|
650
|
+
/** Aria label for pet toggle */
|
|
651
|
+
togglePets?: string;
|
|
652
|
+
}
|
|
653
|
+
interface GuestContentProps {
|
|
654
|
+
/** Current guest counts */
|
|
655
|
+
guests: GuestCounts;
|
|
656
|
+
/** Called when guests change */
|
|
657
|
+
onChange: (guests: GuestCounts) => void;
|
|
658
|
+
/** Current pet filter value (0 or 1) */
|
|
659
|
+
petFilter?: number;
|
|
660
|
+
/** Called when pet filter changes */
|
|
661
|
+
onPetChange?: (value: number) => void;
|
|
662
|
+
/** Show pet toggle */
|
|
663
|
+
showPetToggle?: boolean;
|
|
664
|
+
/** Additional class name for container */
|
|
665
|
+
className?: string;
|
|
666
|
+
/** Validation errors for child ages */
|
|
667
|
+
childAgeErrors?: ChildAgeError[];
|
|
668
|
+
/** Called when an error is cleared (user selects an age) */
|
|
669
|
+
onErrorClear?: (index: number) => void;
|
|
670
|
+
/** Labels for all text content */
|
|
671
|
+
labels?: GuestContentLabels;
|
|
672
|
+
}
|
|
673
|
+
/**
|
|
674
|
+
* GuestContent - Shared guest selection UI
|
|
675
|
+
*
|
|
676
|
+
* Used by both desktop GuestSelector dropdown and mobile SearchModal.
|
|
677
|
+
* Contains adults counter, children counter with age dropdowns, and optional pet toggle.
|
|
678
|
+
*
|
|
679
|
+
* All text labels are passed as props - consuming apps provide translations.
|
|
680
|
+
*/
|
|
681
|
+
declare const GuestContent: React__default.FC<GuestContentProps>;
|
|
682
|
+
|
|
615
683
|
interface HeartIconProps {
|
|
616
684
|
filled?: boolean;
|
|
617
685
|
className?: string;
|
|
@@ -806,4 +874,4 @@ interface SearchFilters {
|
|
|
806
874
|
regions?: string[];
|
|
807
875
|
}
|
|
808
876
|
|
|
809
|
-
export { type Address, Badge, type BadgeProps, type BenefitItem, Benefits, type BenefitsProps, Block, type BlockProps, type Booking, Button, type ButtonProps, Card, type CardBadge, type CardProps, type CardRatingInfo, Checkbox, type CheckboxProps, type CheckboxSize, ChevronLeftIcon, ChevronRightIcon, Chip, type ChipProps, type ChipSize, type ChipState, CompactCard, type CompactCardBadge, type CompactCardProps, type DateRange, DateSelector, type DateSelectorProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, DualCalendar, FAQ, type FAQItem, type FAQProps, HeartIcon, type Hotel, HotelCardUIProvider, type HotelCardUIProviderProps, Input, type InputProps, type InputType, type Membership, Modal, type ModalProps, Pin, PinIcon, type PinProps, RadioButton, type RadioButtonProps, Rating, type RatingProps, ReviewCard, type ReviewCardProps, type SearchFilters, type SearchParams, SectionHeader, type SectionHeaderProps, StarIcon, type UIContextValue, type User, WhenContent, type WhenContentProps, calculateDiscount, formatDate, formatDateRange, formatPrice, useDebounce, useResponsive, useTranslation, useUIContext, useWindowData };
|
|
877
|
+
export { type Address, Badge, type BadgeProps, type BenefitItem, Benefits, type BenefitsProps, Block, type BlockProps, type Booking, Button, type ButtonProps, Card, type CardBadge, type CardProps, type CardRatingInfo, Checkbox, type CheckboxProps, type CheckboxSize, ChevronLeftIcon, ChevronRightIcon, type ChildAgeError, Chip, type ChipProps, type ChipSize, type ChipState, CompactCard, type CompactCardBadge, type CompactCardProps, type DateRange, DateSelector, type DateSelectorProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, DualCalendar, FAQ, type FAQItem, type FAQProps, GuestContent, type GuestContentLabels, type GuestContentProps, type GuestCounts, HeartIcon, type Hotel, HotelCardUIProvider, type HotelCardUIProviderProps, Input, type InputProps, type InputType, type Membership, Modal, type ModalProps, Pin, PinIcon, type PinProps, RadioButton, type RadioButtonProps, Rating, type RatingProps, ReviewCard, type ReviewCardProps, type SearchFilters, type SearchParams, SectionHeader, type SectionHeaderProps, StarIcon, type UIContextValue, type User, WhenContent, type WhenContentLabels, type WhenContentProps, calculateDiscount, formatDate, formatDateRange, formatPrice, useDebounce, useResponsive, useTranslation, useUIContext, useWindowData };
|
package/dist/index.js
CHANGED
|
@@ -1944,9 +1944,199 @@ var DateSelector = ({
|
|
|
1944
1944
|
};
|
|
1945
1945
|
DateSelector.displayName = "DateSelector";
|
|
1946
1946
|
|
|
1947
|
+
// src/components/GuestSelector/GuestContent.tsx
|
|
1948
|
+
import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
1949
|
+
var MinusIcon = () => /* @__PURE__ */ jsx23("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx23("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" }) });
|
|
1950
|
+
var PlusIcon = () => /* @__PURE__ */ jsx23("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx23("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" }) });
|
|
1951
|
+
var DropdownIcon = () => /* @__PURE__ */ jsx23(
|
|
1952
|
+
"svg",
|
|
1953
|
+
{
|
|
1954
|
+
className: "hc-guest-content__select-icon",
|
|
1955
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1956
|
+
width: "24",
|
|
1957
|
+
height: "24",
|
|
1958
|
+
viewBox: "0 0 24 24",
|
|
1959
|
+
fill: "none",
|
|
1960
|
+
children: /* @__PURE__ */ jsx23(
|
|
1961
|
+
"path",
|
|
1962
|
+
{
|
|
1963
|
+
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",
|
|
1964
|
+
fill: "#6B7280"
|
|
1965
|
+
}
|
|
1966
|
+
)
|
|
1967
|
+
}
|
|
1968
|
+
);
|
|
1969
|
+
var defaultLabels2 = {
|
|
1970
|
+
adults: "Adults",
|
|
1971
|
+
children: "Children",
|
|
1972
|
+
pet: "Pet",
|
|
1973
|
+
ageOfChild: "Age of child",
|
|
1974
|
+
age: "Age",
|
|
1975
|
+
decreaseAdults: "Decrease adults",
|
|
1976
|
+
increaseAdults: "Increase adults",
|
|
1977
|
+
decreaseChildren: "Decrease children",
|
|
1978
|
+
increaseChildren: "Increase children",
|
|
1979
|
+
togglePets: "Toggle pets"
|
|
1980
|
+
};
|
|
1981
|
+
var GuestContent = ({
|
|
1982
|
+
guests,
|
|
1983
|
+
onChange,
|
|
1984
|
+
petFilter = 0,
|
|
1985
|
+
onPetChange,
|
|
1986
|
+
showPetToggle = true,
|
|
1987
|
+
className = "",
|
|
1988
|
+
childAgeErrors = [],
|
|
1989
|
+
onErrorClear,
|
|
1990
|
+
labels: labelsProp
|
|
1991
|
+
}) => {
|
|
1992
|
+
const labels = { ...defaultLabels2, ...labelsProp };
|
|
1993
|
+
const childrenAges = Array.isArray(guests.childrenAges) ? guests.childrenAges : [];
|
|
1994
|
+
const handleIncrement = (type) => {
|
|
1995
|
+
if (type === "children" && guests.children >= 6) return;
|
|
1996
|
+
if (type === "adults" && guests.adults >= 10) return;
|
|
1997
|
+
const newChildrenAges = type === "children" ? [...childrenAges, null] : childrenAges;
|
|
1998
|
+
onChange({
|
|
1999
|
+
...guests,
|
|
2000
|
+
[type]: guests[type] + 1,
|
|
2001
|
+
childrenAges: newChildrenAges
|
|
2002
|
+
});
|
|
2003
|
+
};
|
|
2004
|
+
const handleDecrement = (type) => {
|
|
2005
|
+
if (type === "adults" && guests.adults <= 1) return;
|
|
2006
|
+
if (type === "children" && guests.children <= 0) return;
|
|
2007
|
+
const newChildrenAges = type === "children" ? childrenAges.slice(0, -1) : childrenAges;
|
|
2008
|
+
onChange({
|
|
2009
|
+
...guests,
|
|
2010
|
+
[type]: guests[type] - 1,
|
|
2011
|
+
childrenAges: newChildrenAges
|
|
2012
|
+
});
|
|
2013
|
+
};
|
|
2014
|
+
const handleAgeChange = (index, value) => {
|
|
2015
|
+
const newChildrenAges = [...childrenAges];
|
|
2016
|
+
newChildrenAges[index] = value === "" ? null : parseInt(value, 10);
|
|
2017
|
+
onChange({
|
|
2018
|
+
...guests,
|
|
2019
|
+
childrenAges: newChildrenAges
|
|
2020
|
+
});
|
|
2021
|
+
onErrorClear?.(index);
|
|
2022
|
+
};
|
|
2023
|
+
const containerClasses = ["hc-guest-content", className].filter(Boolean).join(" ");
|
|
2024
|
+
return /* @__PURE__ */ jsxs22("div", { className: containerClasses, children: [
|
|
2025
|
+
/* @__PURE__ */ jsxs22("div", { className: "hc-guest-content__row", children: [
|
|
2026
|
+
/* @__PURE__ */ jsx23("div", { className: "hc-guest-content__label", children: /* @__PURE__ */ jsx23("span", { className: "hc-guest-content__name", children: labels.adults }) }),
|
|
2027
|
+
/* @__PURE__ */ jsxs22("div", { className: "hc-guest-content__counter", children: [
|
|
2028
|
+
/* @__PURE__ */ jsx23(
|
|
2029
|
+
"button",
|
|
2030
|
+
{
|
|
2031
|
+
type: "button",
|
|
2032
|
+
className: "hc-guest-content__counter-button",
|
|
2033
|
+
onClick: () => handleDecrement("adults"),
|
|
2034
|
+
disabled: guests.adults <= 1,
|
|
2035
|
+
"aria-label": labels.decreaseAdults,
|
|
2036
|
+
children: /* @__PURE__ */ jsx23(MinusIcon, {})
|
|
2037
|
+
}
|
|
2038
|
+
),
|
|
2039
|
+
/* @__PURE__ */ jsx23("span", { className: "hc-guest-content__counter-value", children: guests.adults }),
|
|
2040
|
+
/* @__PURE__ */ jsx23(
|
|
2041
|
+
"button",
|
|
2042
|
+
{
|
|
2043
|
+
type: "button",
|
|
2044
|
+
className: "hc-guest-content__counter-button",
|
|
2045
|
+
onClick: () => handleIncrement("adults"),
|
|
2046
|
+
disabled: guests.adults >= 10,
|
|
2047
|
+
"aria-label": labels.increaseAdults,
|
|
2048
|
+
children: /* @__PURE__ */ jsx23(PlusIcon, {})
|
|
2049
|
+
}
|
|
2050
|
+
)
|
|
2051
|
+
] })
|
|
2052
|
+
] }),
|
|
2053
|
+
/* @__PURE__ */ jsxs22("div", { className: "hc-guest-content__row hc-guest-content__row--children", children: [
|
|
2054
|
+
/* @__PURE__ */ jsxs22("div", { className: "hc-guest-content__row-header", children: [
|
|
2055
|
+
/* @__PURE__ */ jsx23("div", { className: "hc-guest-content__label", children: /* @__PURE__ */ jsx23("span", { className: "hc-guest-content__name", children: labels.children }) }),
|
|
2056
|
+
/* @__PURE__ */ jsxs22("div", { className: "hc-guest-content__counter", children: [
|
|
2057
|
+
/* @__PURE__ */ jsx23(
|
|
2058
|
+
"button",
|
|
2059
|
+
{
|
|
2060
|
+
type: "button",
|
|
2061
|
+
className: "hc-guest-content__counter-button",
|
|
2062
|
+
onClick: () => handleDecrement("children"),
|
|
2063
|
+
disabled: guests.children <= 0,
|
|
2064
|
+
"aria-label": labels.decreaseChildren,
|
|
2065
|
+
children: /* @__PURE__ */ jsx23(MinusIcon, {})
|
|
2066
|
+
}
|
|
2067
|
+
),
|
|
2068
|
+
/* @__PURE__ */ jsx23("span", { className: "hc-guest-content__counter-value", children: guests.children }),
|
|
2069
|
+
/* @__PURE__ */ jsx23(
|
|
2070
|
+
"button",
|
|
2071
|
+
{
|
|
2072
|
+
type: "button",
|
|
2073
|
+
className: "hc-guest-content__counter-button",
|
|
2074
|
+
onClick: () => handleIncrement("children"),
|
|
2075
|
+
disabled: guests.children >= 6,
|
|
2076
|
+
"aria-label": labels.increaseChildren,
|
|
2077
|
+
children: /* @__PURE__ */ jsx23(PlusIcon, {})
|
|
2078
|
+
}
|
|
2079
|
+
)
|
|
2080
|
+
] })
|
|
2081
|
+
] }),
|
|
2082
|
+
guests.children > 0 && /* @__PURE__ */ jsx23(
|
|
2083
|
+
"div",
|
|
2084
|
+
{
|
|
2085
|
+
className: "hc-guest-content__children-dropdowns",
|
|
2086
|
+
style: {
|
|
2087
|
+
gridTemplateColumns: guests.children === 1 ? "1fr" : "repeat(2, 1fr)"
|
|
2088
|
+
},
|
|
2089
|
+
children: Array.from({ length: guests.children }).map((_, index) => {
|
|
2090
|
+
const currentAge = childrenAges[index];
|
|
2091
|
+
const hasError = childAgeErrors.some((error) => error.index === index);
|
|
2092
|
+
const errorMessage = childAgeErrors.find((error) => error.index === index)?.message;
|
|
2093
|
+
return /* @__PURE__ */ jsxs22("div", { className: "hc-guest-content__child-dropdown", children: [
|
|
2094
|
+
/* @__PURE__ */ jsx23("label", { htmlFor: `child-age-${index}`, children: labels.ageOfChild }),
|
|
2095
|
+
/* @__PURE__ */ jsxs22("div", { className: "hc-guest-content__select-wrapper", children: [
|
|
2096
|
+
/* @__PURE__ */ jsxs22(
|
|
2097
|
+
"select",
|
|
2098
|
+
{
|
|
2099
|
+
id: `child-age-${index}`,
|
|
2100
|
+
value: currentAge === null || currentAge === void 0 ? "" : currentAge,
|
|
2101
|
+
onChange: (e) => handleAgeChange(index, e.target.value),
|
|
2102
|
+
className: `hc-guest-content__select ${hasError ? "hc-guest-content__select--error" : ""}`,
|
|
2103
|
+
"aria-invalid": hasError,
|
|
2104
|
+
"aria-describedby": hasError ? `error-${index}` : void 0,
|
|
2105
|
+
children: [
|
|
2106
|
+
/* @__PURE__ */ jsx23("option", { value: "", children: labels.age }),
|
|
2107
|
+
Array.from({ length: 18 }, (_2, age) => /* @__PURE__ */ jsx23("option", { value: age, children: age }, age))
|
|
2108
|
+
]
|
|
2109
|
+
}
|
|
2110
|
+
),
|
|
2111
|
+
/* @__PURE__ */ jsx23(DropdownIcon, {})
|
|
2112
|
+
] }),
|
|
2113
|
+
hasError && /* @__PURE__ */ jsx23("span", { id: `error-${index}`, className: "hc-guest-content__error-text", children: errorMessage })
|
|
2114
|
+
] }, index);
|
|
2115
|
+
})
|
|
2116
|
+
}
|
|
2117
|
+
)
|
|
2118
|
+
] }),
|
|
2119
|
+
showPetToggle && /* @__PURE__ */ jsxs22("div", { className: "hc-guest-content__row", children: [
|
|
2120
|
+
/* @__PURE__ */ jsx23("div", { className: "hc-guest-content__label", children: /* @__PURE__ */ jsx23("span", { className: "hc-guest-content__name", children: labels.pet }) }),
|
|
2121
|
+
/* @__PURE__ */ jsx23("div", { className: "hc-guest-content__toggle-wrapper", children: /* @__PURE__ */ jsxs22("label", { className: "hc-guest-content__toggle", children: [
|
|
2122
|
+
/* @__PURE__ */ jsx23(
|
|
2123
|
+
"input",
|
|
2124
|
+
{
|
|
2125
|
+
type: "checkbox",
|
|
2126
|
+
checked: petFilter === 1,
|
|
2127
|
+
onChange: (e) => onPetChange?.(e.target.checked ? 1 : 0),
|
|
2128
|
+
"aria-label": labels.togglePets
|
|
2129
|
+
}
|
|
2130
|
+
),
|
|
2131
|
+
/* @__PURE__ */ jsx23("span", { className: "hc-guest-content__slider" })
|
|
2132
|
+
] }) })
|
|
2133
|
+
] })
|
|
2134
|
+
] });
|
|
2135
|
+
};
|
|
2136
|
+
|
|
1947
2137
|
// src/components/icons/HeartIcon.tsx
|
|
1948
|
-
import { jsx as
|
|
1949
|
-
var HeartIcon2 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */
|
|
2138
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
2139
|
+
var HeartIcon2 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__ */ jsx24(
|
|
1950
2140
|
"svg",
|
|
1951
2141
|
{
|
|
1952
2142
|
width: size,
|
|
@@ -1958,14 +2148,14 @@ var HeartIcon2 = ({ filled = false, className = "", size = 24 }) => /* @__PURE__
|
|
|
1958
2148
|
strokeWidth: 2,
|
|
1959
2149
|
strokeLinecap: "round",
|
|
1960
2150
|
strokeLinejoin: "round",
|
|
1961
|
-
children: /* @__PURE__ */
|
|
2151
|
+
children: /* @__PURE__ */ jsx24("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" })
|
|
1962
2152
|
}
|
|
1963
2153
|
);
|
|
1964
2154
|
HeartIcon2.displayName = "HeartIcon";
|
|
1965
2155
|
|
|
1966
2156
|
// src/components/icons/StarIcon.tsx
|
|
1967
|
-
import { jsx as
|
|
1968
|
-
var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */
|
|
2157
|
+
import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2158
|
+
var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */ jsxs23(
|
|
1969
2159
|
"svg",
|
|
1970
2160
|
{
|
|
1971
2161
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -1975,22 +2165,22 @@ var StarIcon4 = ({ filled = true, className = "", size = 9 }) => /* @__PURE__ */
|
|
|
1975
2165
|
fill: "none",
|
|
1976
2166
|
className,
|
|
1977
2167
|
children: [
|
|
1978
|
-
/* @__PURE__ */
|
|
2168
|
+
/* @__PURE__ */ jsx25("g", { clipPath: "url(#clip0_star_icon)", children: /* @__PURE__ */ jsx25(
|
|
1979
2169
|
"path",
|
|
1980
2170
|
{
|
|
1981
2171
|
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",
|
|
1982
2172
|
fill: filled ? "#1F2937" : "#D1D5DB"
|
|
1983
2173
|
}
|
|
1984
2174
|
) }),
|
|
1985
|
-
/* @__PURE__ */
|
|
2175
|
+
/* @__PURE__ */ jsx25("defs", { children: /* @__PURE__ */ jsx25("clipPath", { id: "clip0_star_icon", children: /* @__PURE__ */ jsx25("rect", { width: "8", height: "8", fill: "white", transform: "translate(0.800049 0.199951)" }) }) })
|
|
1986
2176
|
]
|
|
1987
2177
|
}
|
|
1988
2178
|
);
|
|
1989
2179
|
StarIcon4.displayName = "StarIcon";
|
|
1990
2180
|
|
|
1991
2181
|
// src/components/icons/ChevronLeftIcon.tsx
|
|
1992
|
-
import { jsx as
|
|
1993
|
-
var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */
|
|
2182
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
2183
|
+
var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ jsx26(
|
|
1994
2184
|
"svg",
|
|
1995
2185
|
{
|
|
1996
2186
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2003,14 +2193,14 @@ var ChevronLeftIcon = ({ className = "", size = 20 }) => /* @__PURE__ */ jsx25(
|
|
|
2003
2193
|
strokeLinecap: "round",
|
|
2004
2194
|
strokeLinejoin: "round",
|
|
2005
2195
|
className,
|
|
2006
|
-
children: /* @__PURE__ */
|
|
2196
|
+
children: /* @__PURE__ */ jsx26("polyline", { points: "15 18 9 12 15 6" })
|
|
2007
2197
|
}
|
|
2008
2198
|
);
|
|
2009
2199
|
ChevronLeftIcon.displayName = "ChevronLeftIcon";
|
|
2010
2200
|
|
|
2011
2201
|
// src/components/icons/ChevronRightIcon.tsx
|
|
2012
|
-
import { jsx as
|
|
2013
|
-
var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */
|
|
2202
|
+
import { jsx as jsx27 } from "react/jsx-runtime";
|
|
2203
|
+
var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ jsx27(
|
|
2014
2204
|
"svg",
|
|
2015
2205
|
{
|
|
2016
2206
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2023,14 +2213,14 @@ var ChevronRightIcon2 = ({ className = "", size = 20 }) => /* @__PURE__ */ jsx26
|
|
|
2023
2213
|
strokeLinecap: "round",
|
|
2024
2214
|
strokeLinejoin: "round",
|
|
2025
2215
|
className,
|
|
2026
|
-
children: /* @__PURE__ */
|
|
2216
|
+
children: /* @__PURE__ */ jsx27("polyline", { points: "9 18 15 12 9 6" })
|
|
2027
2217
|
}
|
|
2028
2218
|
);
|
|
2029
2219
|
ChevronRightIcon2.displayName = "ChevronRightIcon";
|
|
2030
2220
|
|
|
2031
2221
|
// src/components/icons/PinIcon.tsx
|
|
2032
|
-
import { jsx as
|
|
2033
|
-
var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */
|
|
2222
|
+
import { jsx as jsx28, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2223
|
+
var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ jsxs24(
|
|
2034
2224
|
"svg",
|
|
2035
2225
|
{
|
|
2036
2226
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -2040,7 +2230,7 @@ var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ jsxs23(
|
|
|
2040
2230
|
fill: "none",
|
|
2041
2231
|
className,
|
|
2042
2232
|
children: [
|
|
2043
|
-
/* @__PURE__ */
|
|
2233
|
+
/* @__PURE__ */ jsx28(
|
|
2044
2234
|
"path",
|
|
2045
2235
|
{
|
|
2046
2236
|
fillRule: "evenodd",
|
|
@@ -2049,7 +2239,7 @@ var PinIcon = ({ className = "", size = 16 }) => /* @__PURE__ */ jsxs23(
|
|
|
2049
2239
|
fill: "currentColor"
|
|
2050
2240
|
}
|
|
2051
2241
|
),
|
|
2052
|
-
/* @__PURE__ */
|
|
2242
|
+
/* @__PURE__ */ jsx28(
|
|
2053
2243
|
"path",
|
|
2054
2244
|
{
|
|
2055
2245
|
fillRule: "evenodd",
|
|
@@ -2108,6 +2298,7 @@ export {
|
|
|
2108
2298
|
Dropdown,
|
|
2109
2299
|
DualCalendar,
|
|
2110
2300
|
FAQ,
|
|
2301
|
+
GuestContent,
|
|
2111
2302
|
HeartIcon2 as HeartIcon,
|
|
2112
2303
|
HotelCardUIProvider,
|
|
2113
2304
|
Input,
|