@hotelcard/ui 0.0.11 → 0.0.13

package/README.md

@@ -69,7 +69,6 @@ function App() {
 | `Input` | Text input with label, helper text, and validation |
 | `Badge` | Status and discount badges |
 | `Card` | Hotel card component |
-| `CompactCard` | Compact hotel card for carousels |
 | `Chip` | Filter and tag chips |
 | `Checkbox` | Checkbox with label |
 | `RadioButton` | Radio button with label |
@@ -80,6 +79,8 @@ 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 |
+| `HotelCard` | Hotel card for search results with image carousel, rating, and pricing |
 
 ### Icons
 
@@ -201,6 +202,94 @@ 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.
+
+### HotelCard
+
+```tsx
+import { HotelCard, type HotelCardHotel } from '@hotelcard/ui';
+
+const hotel: HotelCardHotel = {
+  id: '123',
+  name: 'Grand Hotel Belvedere',
+  slug: 'grand-hotel-belvedere',
+  stars: 5,
+  isSuperior: true,
+  rating: 4.5,
+  location: 'Lauterbrunnen, Switzerland',
+  images: ['/hotel1.jpg', '/hotel2.jpg'],
+  isFavorite: false,
+  benefits: [
+    { id: 'free-breakfast', label: 'Free breakfast' },
+    { id: 'free-cancellation', label: 'Free cancellation' },
+  ],
+  isAvailable: true,
+  currency: 'CHF',
+  price: {
+    current: 195,
+    original: 390,
+    discount: 50,
+  },
+  usp: 'Best price guarantee',
+  badges: ['New'],
+};
+
+<HotelCard
+  hotel={hotel}
+  onFavoriteClick={() => toggleFavorite(hotel.id)}
+  onContentClick={() => navigate(`/hotel/${hotel.slug}`)}
+  labels={{
+    priceFrom: t('hotel.priceFrom'),
+    notAvailable: t('hotel.notAvailable'),
+    ratingExcellent: t('rating.excellent'),
+    ratingVeryGood: t('rating.veryGood'),
+    ratingGood: t('rating.good'),
+    ratingFair: t('rating.fair'),
+    rating: t('rating.rating'),
+    swissLodge: t('hotel.swissLodge'),
+    removeFromFavorites: t('favorites.remove'),
+    addToFavorites: t('favorites.add'),
+    previousImage: t('navigation.previous'),
+    nextImage: t('navigation.next'),
+  }}
+/>
+```
+
+**Note**: All text labels are passed as props. The consuming app provides translated strings. Navigation and favorite logic are handled by the consuming app via callbacks.
+
 ### Checkbox & RadioButton
 
 ```tsx
@@ -233,7 +322,6 @@ import type {
   BadgeProps,
   InputProps,
   CardProps,
-  CompactCardProps,
   CheckboxProps,
   RadioButtonProps,
   DropdownProps,
@@ -245,6 +333,15 @@ import type {
   WhenContentProps,
   WhenContentLabels,
   DateRange,
+  GuestContentProps,
+  GuestContentLabels,
+  GuestCounts,
+  ChildAgeError,
+  HotelCardProps,
+  HotelCardLabels,
+  HotelCardHotel,
+  HotelCardImageProps,
+  HotelCardContentProps,
 
   // Data Types
   Hotel,