@hotelcard/ui 0.0.12 → 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 |
@@ -81,6 +80,7 @@ function App() {
 | `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
 
@@ -237,6 +237,59 @@ const [petFilter, setPetFilter] = useState(0);
 
 **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
@@ -269,7 +322,6 @@ import type {
   BadgeProps,
   InputProps,
   CardProps,
-  CompactCardProps,
   CheckboxProps,
   RadioButtonProps,
   DropdownProps,
@@ -285,6 +337,11 @@ import type {
   GuestContentLabels,
   GuestCounts,
   ChildAgeError,
+  HotelCardProps,
+  HotelCardLabels,
+  HotelCardHotel,
+  HotelCardImageProps,
+  HotelCardContentProps,
 
   // Data Types
   Hotel,