@hotelcard/ui 0.0.41 → 0.0.43

package/README.md

@@ -107,13 +107,41 @@ The package includes built-in translations for `de`, `en`, `fr`, and `it` locale
 | `FAQ` | Expandable FAQ accordion |
 | `Benefits` | Benefits list with icons |
 | `Pin` | Location pin marker |
+
+### Search Components
+
+| Component | Description |
+|-----------|-------------|
 | `DateSelector` | Date selector container component |
 | `WhenContent` | Date/month picker for search |
 | `DualCalendar` | Calendar component for date range selection |
-| `GuestContent` | Guest selector with adults, children (with ages), and pet toggle |
+| `GuestContent` | Guest selector content with adults, children (with ages), and pet toggle |
+| `GuestSelector` | Full guest selector with dropdown trigger |
 | `HotelCard` | Hotel card for search results with image carousel, rating, and pricing |
+| `HotelCardImage` | Hotel image carousel component |
+| `HotelCardContent` | Hotel card content with rating, price, benefits |
 | `SearchModal` | Full-screen search modal with destination, dates, and guest selection |
 | `SearchModalContent` | Content-only version for custom modal wrappers (e.g., IonModal) |
+| `LocationAutocomplete` | Location search input with autocomplete suggestions |
+| `MobileSortModal` | Mobile-friendly sort options modal |
+| `SearchControlsBar` | Search controls bar with sort, view toggle, and result count |
+
+### Filter Components
+
+| Component | Description |
+|-----------|-------------|
+| `FilterCheckboxItem` | Base checkbox item for filters |
+| `CollapsibleFilterSection` | Expandable/collapsible filter section wrapper |
+| `PriceRangeFilter` | Price range slider filter |
+| `HotelCategoryFilter` | Hotel star rating filter (1-5 stars) |
+| `ReviewsFilter` | Guest review rating filter |
+| `ExperienceFilter` | Experience/theme filter |
+| `RegionsFilter` | Region/location filter with search |
+| `CheckboxFilter` | Generic checkbox filter component |
+| `MealsFilter` | Meal plan filter (breakfast, half-board, etc.) |
+| `TransportFilter` | Transport options filter |
+| `WellnessFilter` | Wellness amenities filter |
+| `SelectedFiltersRow` | Display row showing active filters with remove option |
 
 ### Icons
 
@@ -348,6 +376,118 @@ import { Checkbox, RadioButton } from '@hotelcard/ui';
 />
 ```
 
+### LocationAutocomplete
+
+```tsx
+import { LocationAutocomplete, type LocationSuggestion } from '@hotelcard/ui';
+
+const fetchSuggestions = async (query: string): Promise<LocationSuggestion[]> => {
+  const response = await fetch(`/api/autocomplete?q=${query}`);
+  return response.json();
+};
+
+<LocationAutocomplete
+  value={query}
+  onChange={setQuery}
+  onAutocomplete={fetchSuggestions}
+  onSelect={(suggestion) => console.log('Selected:', suggestion)}
+  onSubmit={(value, coordinates, regionId) => {
+    // Handle search with coordinates or region
+  }}
+  placeholder="Search destination..."
+/>
+```
+
+### MobileSortModal
+
+```tsx
+import { MobileSortModal, type SortOption } from '@hotelcard/ui';
+
+const [sortBy, setSortBy] = useState<SortOption>('relevance');
+const [isOpen, setIsOpen] = useState(false);
+
+<MobileSortModal
+  isOpen={isOpen}
+  onClose={() => setIsOpen(false)}
+  value={sortBy}
+  onChange={setSortBy}
+/>
+```
+
+Sort options: `'relevance'` | `'price_asc'` | `'price_desc'` | `'rating'`
+
+### SearchControlsBar
+
+```tsx
+import { SearchControlsBar, type SearchParams, type ViewMode } from '@hotelcard/ui';
+
+<SearchControlsBar
+  onSearch={(params: SearchParams) => {
+    // params: { query, guests, petFilter, dateRange, monthFilter, coordinates }
+    performSearch(params);
+  }}
+  onGuestChange={setGuests}
+  onAutocomplete={fetchLocationSuggestions}
+  getGuestsDisplay={() => `${guests.adults} adults, ${guests.children} children`}
+  getDateDisplay={() => dateRange ? formatDateRange(dateRange) : 'Anytime'}
+  onMobileClick={() => openSearchModal()}
+  onFilterClick={() => openFilterModal()}
+  onSortClick={() => openSortModal()}
+  initialQuery=""
+  initialGuests={{ adults: 2, children: 0, childrenAges: [] }}
+  viewMode={viewMode}
+  onViewModeChange={setViewMode}
+/>
+```
+
+### Filter Components
+
+```tsx
+import {
+  PriceRangeFilter,
+  HotelCategoryFilter,
+  ReviewsFilter,
+  RegionsFilter,
+  SelectedFiltersRow,
+  type SelectedFilter,
+} from '@hotelcard/ui';
+
+// Price range filter with dual slider
+<PriceRangeFilter
+  minPrice={0}
+  maxPrice={500}
+  value={[priceMin, priceMax]}
+  onChange={(range) => setPriceRange(range)}
+  currency="CHF"
+/>
+
+// Hotel star rating filter
+<HotelCategoryFilter
+  selectedStars={selectedStars}
+  onStarsChange={setSelectedStars}
+/>
+
+// Guest review rating filter
+<ReviewsFilter
+  selectedRatings={selectedRatings}
+  onRatingsChange={setSelectedRatings}
+/>
+
+// Region filter with search
+<RegionsFilter
+  regions={regionOptions}
+  selectedRegions={selectedRegions}
+  onRegionsChange={setSelectedRegions}
+/>
+
+// Display active filters with remove buttons
+<SelectedFiltersRow
+  filters={activeFilters}
+  onRemove={(filter) => removeFilter(filter)}
+  onClearAll={() => clearAllFilters()}
+/>
+```
+
 ---
 
 ## Types
@@ -356,7 +496,7 @@ All components export their prop types:
 
 ```typescript
 import type {
-  // Component Props
+  // UI Component Props
   ButtonProps,
   BadgeProps,
   InputProps,
@@ -376,10 +516,13 @@ import type {
   BenefitsProps,
   BenefitItem,
   PinProps,
+
+  // Search Component Props
   DateSelectorProps,
   WhenContentProps,
   DateRange,
   GuestContentProps,
+  GuestSelectorProps,
   GuestCounts,
   ChildAgeError,
   HotelCardProps,
@@ -389,6 +532,30 @@ import type {
   SearchModalProps,
   SearchModalContentProps,
   SearchModalSearchParams,
+  LocationAutocompleteProps,
+  LocationSuggestion,
+  MobileSortModalProps,
+  SortOption,
+  SearchControlsBarProps,
+  SearchControlsBarSearchParams,
+  ViewMode,
+
+  // Filter Component Props
+  FilterCheckboxItemProps,
+  CollapsibleFilterSectionProps,
+  PriceRangeFilterProps,
+  HotelCategoryFilterProps,
+  CategoryOption,
+  ReviewsFilterProps,
+  ReviewOption,
+  ExperienceFilterProps,
+  ThemeAggregation,
+  RegionsFilterProps,
+  RegionOption,
+  CheckboxFilterProps,
+  FilterOption,
+  SelectedFiltersRowProps,
+  SelectedFilter,
 
   // Context Types
   UIContextValue,
@@ -415,7 +582,7 @@ import type {
 ## Hooks
 
 ```typescript
-import { useDebounce, useResponsive, useWindowData, useUIContext } from '@hotelcard/ui';
+import { useDebounce, useResponsive, useWindowData, useUIContext, useTranslation } from '@hotelcard/ui';
 
 // Debounce a value
 const debouncedSearch = useDebounce(searchTerm, 300);
@@ -429,8 +596,19 @@ const { locale, currency } = useWindowData();
 // UI Context with translation function
 const { locale, currency, isDesktop, t } = useUIContext();
 t('label.rating-excellent', 'Excellent'); // Returns translated string
+
+// Translation helper (wraps UIContext for convenience)
+const { t, i18n } = useTranslation();
 ```
 
+| Hook | Description | Returns |
+|------|-------------|---------|
+| `useDebounce` | Debounce a value | Debounced value |
+| `useResponsive` | Breakpoint detection | `{ isDesktop }` |
+| `useWindowData` | Window/context data | `{ locale, currency }` |
+| `useUIContext` | Full UI context access | `{ locale, currency, isDesktop, t }` |
+| `useTranslation` | i18n helper | `{ t, i18n }` |
+
 ---
 
 ## Utilities