@hotelcard/ui 0.0.71 → 0.0.73

package/README.md

@@ -61,9 +61,10 @@ Wrap your app with `HotelCardUIProvider` to enable translations and configuratio
 import { HotelCardUIProvider } from '@hotelcard/ui';
 
 <HotelCardUIProvider
-  locale="de"       // 'de' | 'en' | 'fr' | 'it'
-  currency="CHF"    // Currency code
-  isDesktop={false} // Responsive mode
+  locale="de"                        // 'de' | 'en' | 'fr' | 'it'
+  currency="CHF"                     // Currency code
+  apiBaseUrl="https://hotelcard.ch"  // API base URL (required for LocationAutocomplete)
+  isDesktop={false}                  // Responsive mode
 >
   <App />
 </HotelCardUIProvider>
@@ -110,6 +111,7 @@ The package includes built-in translations for `de`, `en`, `fr`, and `it` locale
 | `Benefits` | Benefits list with icons |
 | `Pin` | Location pin marker |
 | `EmptyState` | Generic empty state with icon, title, description, and optional action button |
+| `ExperienceCard` | Experience/theme card with illustration image, label, and arrow |
 
 ### Membership Components
 
@@ -495,6 +497,25 @@ import { MembershipCard } from '@hotelcard/ui';
 
 The "Valid thru" label is automatically translated via `HotelCardUIProvider` locale. Pass `validThruLabel` to override.
 
+### ExperienceCard
+
+```tsx
+import { ExperienceCard } from '@hotelcard/ui';
+
+<ExperienceCard
+  image="https://cdn.example.com/pictures/themes/1.png"
+  label="Wellness"
+  onClick={() => navigate('/search?experiences=1')}
+/>
+```
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `image` | `string` | Yes | URL to the experience illustration image |
+| `label` | `string` | Yes | Experience name |
+| `onClick` | `() => void` | No | Click handler for navigation |
+| `className` | `string` | No | Additional CSS class |
+
 ### Modal
 
 ```tsx
@@ -906,6 +927,7 @@ import type {
   BenefitItem,
   PinProps,
   EmptyStateProps,
+  ExperienceCardProps,
 
   // Search Component Props
   DateSelectorProps,