@hotelcard/ui 0.0.55 → 0.0.57

package/README.md

@@ -111,6 +111,12 @@ The package includes built-in translations for `de`, `en`, `fr`, and `it` locale
 | `Pin` | Location pin marker |
 | `EmptyState` | Generic empty state with icon, title, description, and optional action button |
 
+### Membership Components
+
+| Component | Description |
+|-----------|-------------|
+| `MembershipCard` | HotelCard membership card with name, number, validity dates on card background |
+
 ### Booking Components
 
 | Component | Description |
@@ -461,6 +467,34 @@ import { EmptyState } from '@hotelcard/ui';
 />
 ```
 
+### MembershipCard
+
+Displays the HotelCard membership card with member name, card number, and validity dates positioned over a card background image:
+
+```tsx
+import { MembershipCard } from '@hotelcard/ui';
+
+<MembershipCard
+  fullName="Max Mustermann"
+  cardNumber="1234 5678 9012"
+  validFrom="01.2025"
+  validUntil="01.2026"
+  cardImageUrl="/images/digital-HC-background_card.png"
+/>
+```
+
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `fullName` | `string` | Yes | Member's full name |
+| `cardNumber` | `string` | Yes | Membership card number |
+| `validFrom` | `string` | Yes | Validity start date (pre-formatted) |
+| `validUntil` | `string` | Yes | Validity end date (pre-formatted) |
+| `cardImageUrl` | `string` | Yes | URL to the card background image |
+| `validThruLabel` | `string` | No | Override "Valid thru" label (uses translation by default) |
+| `domainText` | `string` | No | Domain text shown on card (defaults to "hotelcard.ch") |
+
+The "Valid thru" label is automatically translated via `HotelCardUIProvider` locale. Pass `validThruLabel` to override.
+
 ### Modal
 
 ```tsx
@@ -919,6 +953,9 @@ import type {
   Locale,
   TranslationKeys,
 
+  // Membership Component Props
+  MembershipCardProps,
+
   // Booking Component Props
   FeaturedBookingCardProps,
   CompactBookingCardProps,